Respect focal length configuration in grid sidebar

app/grid/page.tsx

@@ -30,6 +30,7 @@ export default async function GridPage() {
     tags,
     simulations,
     recipes,
+    focalLengths,
   ] = await Promise.all([
     getPhotosCached()
       .catch(() => []),
@@ -50,6 +51,7 @@ export default async function GridPage() {
           tags,
           simulations,
           recipes,
+          focalLengths,
         }}
       />
       : <PhotosEmptyState />

app/page.tsx

@@ -36,6 +36,7 @@ export default async function HomePage() {
     tags,
     simulations,
     recipes,
+    focalLengths,
   ] = await Promise.all([
     getPhotosCached()
       .catch(() => []),
@@ -44,7 +45,7 @@ export default async function HomePage() {
       .catch(() => 0),
     ...(GRID_HOMEPAGE_ENABLED
       ? getPhotoSidebarData()
-      : [[], [], [], [], []]),
+      : [[], [], [], [], [], [], []]),
   ]);
 
   return (
@@ -59,6 +60,7 @@ export default async function HomePage() {
             tags,
             simulations,
             recipes,
+            focalLengths,
           }}
         />
         : <PhotoFeedPage {...{ photos, photosCount }} />

src/app/config.ts

@@ -218,6 +218,8 @@ export const SHOW_RECIPES =
   CATEGORY_VISIBILITY.includes('recipes');
 export const SHOW_FILM_SIMULATIONS =
   CATEGORY_VISIBILITY.includes('films');
+export const SHOW_FOCAL_LENGTHS =
+  CATEGORY_VISIBILITY.includes('focal-lengths');
 export const SHOW_EXIF_DATA =
   process.env.NEXT_PUBLIC_HIDE_EXIF_DATA !== '1';
 export const SHOW_ZOOM_CONTROLS =

src/photo/PhotoGridPage.tsx

@@ -1,34 +1,21 @@
 'use client';
 
-import { Tags } from '@/tag';
 import { Photo } from '.';
-import { Cameras } from '@/camera';
-import { FilmSimulations } from '@/simulation';
 import { PATH_GRID_INFERRED } from '@/app/paths';
 import PhotoGridSidebar from './PhotoGridSidebar';
 import PhotoGridContainer from './PhotoGridContainer';
 import { useEffect } from 'react';
 import { useAppState } from '@/state/AppState';
 import clsx from 'clsx/lite';
-import { Recipes } from '@/recipe';
+import { PhotoSetCategories } from '@/category';
-import { Lenses } from '@/lens';
 
 export default function PhotoGridPage({
   photos,
   photosCount,
-  cameras,
+  ...categories
-  lenses,
+}: PhotoSetCategories & {
-  tags,
-  simulations,
-  recipes,
-}: {
   photos: Photo[]
   photosCount: number
-  cameras: Cameras
-  lenses: Lenses
-  tags: Tags
-  simulations: FilmSimulations
-  recipes: Recipes
 }) {
   const { setSelectedPhotoIds } = useAppState();
 
@@ -66,11 +53,7 @@ export default function PhotoGridPage({
             'py-4',
           )}>
             <PhotoGridSidebar {...{
-              tags,
+              ...categories,
-              cameras,
-              lenses,
-              simulations,
-              recipes,
               photosCount,
             }}
             />

src/photo/PhotoGridSidebar.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { Cameras, sortCamerasWithCount } from '@/camera';
+import { sortCamerasWithCount } from '@/camera';
 import PhotoCamera from '@/camera/PhotoCamera';
 import HeaderList from '@/components/HeaderList';
 import PhotoTag from '@/tag/PhotoTag';
 import { PhotoDateRange, dateRangeForPhotos, photoQuantityText } from '.';
-import { TAG_FAVS, TAG_HIDDEN, Tags, addHiddenToTags } from '@/tag';
+import { TAG_FAVS, TAG_HIDDEN, addHiddenToTags } from '@/tag';
 import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation';
-import { FilmSimulations, sortFilmSimulationsWithCount } from '@/simulation';
+import { sortFilmSimulationsWithCount } from '@/simulation';
 import FavsTag from '../tag/FavsTag';
 import { useAppState } from '@/state/AppState';
 import { useMemo } from 'react';
@@ -18,15 +18,18 @@ import {
   safelyParseFormattedHtml,
 } from '@/utility/html';
 import { clsx } from 'clsx/lite';
-import { Recipes, sortRecipesWithCount } from '@/recipe';
+import { sortRecipesWithCount } from '@/recipe';
 import PhotoRecipe from '@/recipe/PhotoRecipe';
 import IconCamera from '@/components/icons/IconCamera';
 import IconRecipe from '@/components/icons/IconRecipe';
 import IconTag from '@/components/icons/IconTag';
 import IconFilmSimulation from '@/components/icons/IconFilmSimulation';
 import IconLens from '@/components/icons/IconLens';
-import { Lenses, sortLensesWithCount } from '@/lens';
+import { sortLensesWithCount } from '@/lens';
 import PhotoLens from '@/lens/PhotoLens';
+import IconFocalLength from '@/components/icons/IconFocalLength';
+import { PhotoSetCategories } from '@/category';
+import PhotoFocalLength from '@/focal/PhotoFocalLength';
 
 export default function PhotoGridSidebar({
   cameras,
@@ -34,14 +37,10 @@ export default function PhotoGridSidebar({
   tags,
   simulations,
   recipes,
+  focalLengths,
   photosCount,
   photosDateRange,
-}: {
+}: PhotoSetCategories & {
-  tags: Tags
-  lenses: Lenses
-  cameras: Cameras
-  simulations: FilmSimulations
-  recipes: Recipes
   photosCount: number
   photosDateRange?: PhotoDateRange
 }) {
@@ -177,6 +176,22 @@ export default function PhotoGridSidebar({
     />
     : null;
 
+  const focalLengthsContent = focalLengths.length > 0
+    ? <HeaderList
+      key="focal-lengths"
+      title="Focal Lengths"
+      icon={<IconFocalLength size={13} />}
+      items={focalLengths.map(({ focal, count }) =>
+        <PhotoFocalLength
+          key={focal}
+          focal={focal}
+          countOnHover={count}
+          type="text-only"
+          prefetch={false}
+        />)}
+    />
+    : null;
+
   const photoStatsContent = photosCount > 0
     ? start
       ? <HeaderList
@@ -208,11 +223,12 @@ export default function PhotoGridSidebar({
       />}
       {CATEGORY_VISIBILITY.map(category => {
         switch (category) {
-        case 'tags': return tagsContent;
         case 'cameras': return camerasContent;
         case 'lenses': return lensesContent;
+        case 'tags': return tagsContent;
         case 'recipes': return recipesContent;
         case 'films': return filmsContent;
+        case 'focal-lengths': return focalLengthsContent;
         }
       })}
       {photoStatsContent}

src/photo/data.ts

@@ -1,6 +1,7 @@
 import {
   getUniqueCamerasCached,
   getUniqueFilmSimulationsCached,
+  getUniqueFocalLengthsCached,
   getUniqueLensesCached,
   getUniqueRecipesCached,
   getUniqueTagsCached,
@@ -8,23 +9,26 @@ import {
 import {
   getUniqueCameras,
   getUniqueFilmSimulations,
+  getUniqueFocalLengths,
   getUniqueLenses,
   getUniqueRecipes,
   getUniqueTags,
 } from '@/photo/db/query';
-import { SHOW_FILM_SIMULATIONS, SHOW_LENSES, SHOW_RECIPES } from '@/app/config';
+import {
+  SHOW_FILM_SIMULATIONS,
+  SHOW_FOCAL_LENGTHS,
+  SHOW_LENSES,
+  SHOW_RECIPES,
+} from '@/app/config';
 import { sortTagsObject } from '@/tag';
 
 export const getPhotoSidebarData = () => [
   getUniqueCameras().catch(() => []),
   SHOW_LENSES ? getUniqueLenses().catch(() => []) : [],
   getUniqueTags().then(sortTagsObject).catch(() => []),
-  SHOW_FILM_SIMULATIONS
+  SHOW_FILM_SIMULATIONS ? getUniqueFilmSimulations().catch(() => []) : [],
-    ? getUniqueFilmSimulations().catch(() => [])
+  SHOW_RECIPES ? getUniqueRecipes().catch(() => []) : [],
-    : [],
+  SHOW_FOCAL_LENGTHS ? getUniqueFocalLengths().catch(() => []) : [],
-  SHOW_RECIPES
-    ? getUniqueRecipes().catch(() => [])
-    : [],
 ] as const;
 
 export const getPhotoSidebarDataCached = () => [
@@ -33,4 +37,5 @@ export const getPhotoSidebarDataCached = () => [
   getUniqueTagsCached().then(sortTagsObject),
   SHOW_FILM_SIMULATIONS ? getUniqueFilmSimulationsCached() : [],
   SHOW_RECIPES ? getUniqueRecipesCached() : [],
+  SHOW_FOCAL_LENGTHS ? getUniqueFocalLengthsCached() : [],
 ] as const;