diff --git a/app/grid/page.tsx b/app/grid/page.tsx
index 3866e733..34a8d025 100644
--- a/app/grid/page.tsx
+++ b/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,
}}
/>
:
diff --git a/app/page.tsx b/app/page.tsx
index 6568c609..0a91f53a 100644
--- a/app/page.tsx
+++ b/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,
}}
/>
:
diff --git a/src/app/config.ts b/src/app/config.ts
index e3bfbf5e..b20bb9f1 100644
--- a/src/app/config.ts
+++ b/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 =
diff --git a/src/photo/PhotoGridPage.tsx b/src/photo/PhotoGridPage.tsx
index 4a3de748..903bc94a 100644
--- a/src/photo/PhotoGridPage.tsx
+++ b/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 { Lenses } from '@/lens';
+import { PhotoSetCategories } from '@/category';
export default function PhotoGridPage({
photos,
photosCount,
- cameras,
- lenses,
- tags,
- simulations,
- recipes,
-}: {
+ ...categories
+}: PhotoSetCategories & {
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',
)}>
diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx
index 10b686dc..10037772 100644
--- a/src/photo/PhotoGridSidebar.tsx
+++ b/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,
-}: {
- tags: Tags
- lenses: Lenses
- cameras: Cameras
- simulations: FilmSimulations
- recipes: Recipes
+}: PhotoSetCategories & {
photosCount: number
photosDateRange?: PhotoDateRange
}) {
@@ -177,6 +176,22 @@ export default function PhotoGridSidebar({
/>
: null;
+ const focalLengthsContent = focalLengths.length > 0
+ ? }
+ items={focalLengths.map(({ focal, count }) =>
+ )}
+ />
+ : null;
+
const photoStatsContent = photosCount > 0
? start
? }
{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}
diff --git a/src/photo/data.ts b/src/photo/data.ts
index caa15e20..ea6bb308 100644
--- a/src/photo/data.ts
+++ b/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
- ? getUniqueFilmSimulations().catch(() => [])
- : [],
- SHOW_RECIPES
- ? getUniqueRecipes().catch(() => [])
- : [],
+ SHOW_FILM_SIMULATIONS ? getUniqueFilmSimulations().catch(() => []) : [],
+ SHOW_RECIPES ? getUniqueRecipes().catch(() => []) : [],
+ SHOW_FOCAL_LENGTHS ? getUniqueFocalLengths().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;