From c770ad2199f4ead7d79a0edfc3b0981b7f142c9d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 8 Nov 2023 08:57:16 -0600
Subject: [PATCH] Sort film simulations by label

---
 src/photo/PhotoGridSidebar.tsx | 26 ++++++++++++++------------
 src/simulation/index.ts        | 15 +++++++++++++--
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx
index 7aa1f951..7b6c5d21 100644
--- a/src/photo/PhotoGridSidebar.tsx
+++ b/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)]}
diff --git a/src/simulation/index.ts b/src/simulation/index.ts
index 05559885..5a7b82fc 100644
--- a/src/simulation/index.ts
+++ b/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,