diff --git a/src/category/index.ts b/src/category/index.ts index f12ea34d..be9f044a 100644 --- a/src/category/index.ts +++ b/src/category/index.ts @@ -75,3 +75,32 @@ export const sortCategoryByCount = ( export const sortCategoriesByCount = ( categories: T[], ) => categories.sort(sortCategoryByCount); + +const convertCategoryKeysToCategoryNames = + (categoryKeys: CategoryKeys): (keyof PhotoSetCategories)[] => { + return categoryKeys.map(key => { + return key === 'films' + ? 'simulations' + : key === 'focal-lengths' + ? 'focalLengths' + : key; + }); + }; + +export const getCategoryItemsCount = ( + categoryKeys: CategoryKeys, + categories: PhotoSetCategories, +) => + convertCategoryKeysToCategoryNames(categoryKeys).reduce((acc, key) => + acc + (categories[key]?.length ?? 0) + , 0); + +export const getCategoriesWithItemsCount = ( + categoryKeys: CategoryKeys, + categories: PhotoSetCategories, +) => + convertCategoryKeysToCategoryNames(categoryKeys).reduce((acc, key) => + (categories[key]?.length ?? 0) > 0 + ? acc + 1 + : acc + , 0); diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx index 3bae4eae..eef5a795 100644 --- a/src/photo/PhotoGridSidebar.tsx +++ b/src/photo/PhotoGridSidebar.tsx @@ -24,22 +24,40 @@ import IconFilmSimulation from '@/components/icons/IconFilmSimulation'; import IconLens from '@/components/icons/IconLens'; import PhotoLens from '@/lens/PhotoLens'; import IconFocalLength from '@/components/icons/IconFocalLength'; -import { PhotoSetCategories } from '@/category'; +import { + getCategoriesWithItemsCount, + PhotoSetCategories, +} from '@/category'; import PhotoFocalLength from '@/focal/PhotoFocalLength'; +const SIDEBAR_ITEM_MAX_COUNT = 24; + export default function PhotoGridSidebar({ - cameras, - lenses, - tags, - simulations, - recipes, - focalLengths, photosCount, photosDateRange, + ...categories }: PhotoSetCategories & { photosCount: number photosDateRange?: PhotoDateRange }) { + const { + cameras, + lenses, + tags, + simulations, + recipes, + focalLengths, + } = categories; + + const itemsCount = getCategoriesWithItemsCount( + CATEGORY_VISIBILITY, + categories, + ); + + const maxItemsPerCategory = Math.floor( + SIDEBAR_ITEM_MAX_COUNT / itemsCount, + ); + const { start, end } = dateRangeForPhotos(undefined, photosDateRange); const { photosCountHidden } = useAppState(); @@ -56,6 +74,7 @@ export default function PhotoGridSidebar({ size={15} className="translate-x-[0.5px]" />} + maxItems={maxItemsPerCategory} items={cameras .map(({ cameraKey, camera, count }) => } + maxItems={maxItemsPerCategory} items={lenses .map(({ lensKey, lens, count }) => } + maxItems={maxItemsPerCategory} items={tagsIncludingHidden .map(({ tag, count }) => { switch (tag) { @@ -142,6 +163,7 @@ export default function PhotoGridSidebar({ size={16} className="translate-x-[-1px]" />} + maxItems={maxItemsPerCategory} items={recipes .map(({ recipe, count }) => } + maxItems={maxItemsPerCategory} items={simulations .map(({ simulation, count }) => } + maxItems={maxItemsPerCategory} items={focalLengths.map(({ focal, count }) =>