Sort film simulations by label

src/photo/PhotoGridSidebar.tsx

@@ -10,7 +10,7 @@ import PhotoFilmSimulation from
   '@/simulation/PhotoFilmSimulation';
 import PhotoFilmSimulationIcon from
   '@/simulation/PhotoFilmSimulationIcon';
-import { FilmSimulations } from '@/simulation';
+import { FilmSimulations, sortFilmSimulationsWithCount } from '@/simulation';
 
 export default function PhotoGridSidebar({
   tags,
@@ -56,17 +56,19 @@ export default function PhotoGridSidebar({
         icon={<PhotoFilmSimulationIcon
           className="translate-y-[-0.5px]"
         />}
-        items={simulations.map(({ simulation, count }) =>
-          <div
-            key={simulation}
-            className="translate-x-[-2px]"
-          >
-            <PhotoFilmSimulation
-              simulation={simulation}
-              countOnHover={count}
-              type="text-only"
-            />
-          </div>)}
+        items={simulations
+          .sort(sortFilmSimulationsWithCount)
+          .map(({ simulation, count }) =>
+            <div
+              key={simulation}
+              className="translate-x-[-2px]"
+            >
+              <PhotoFilmSimulation
+                simulation={simulation}
+                countOnHover={count}
+                type="text-only"
+              />
+            </div>)}
       />}
       {photosCount > 0 && <HeaderList
         items={[photoQuantityText(photosCount, false)]}

src/simulation/index.ts

@@ -15,10 +15,21 @@ import {
 
 export type FilmSimulation = FujifilmSimulation;
 
-export type FilmSimulations = {
+export type FilmSimulationWithCount = {
   simulation: FilmSimulation
   count: number
-}[]
+}
+
+export type FilmSimulations = FilmSimulationWithCount[]
+
+export const sortFilmSimulationsWithCount = (
+  a: FilmSimulationWithCount,
+  b: FilmSimulationWithCount,
+) => {
+  const aLabel = labelForFilmSimulation(a.simulation).large;
+  const bLabel = labelForFilmSimulation(b.simulation).large;
+  return aLabel.localeCompare(bLabel);
+};
 
 export const titleForFilmSimulation = (
   simulation: FilmSimulation,