Collapse sidebar based on configuration

src/app/config.ts

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

src/components/HeaderList.tsx

@@ -5,29 +5,33 @@ import AnimateItems from './AnimateItems';
 import { ReactNode, useState } from 'react';
 import LoaderButton from './primitives/LoaderButton';
 import { IoChevronDownOutline, IoChevronUpOutline } from 'react-icons/io5';
-
-const SIDEBAR_MAX_COLLAPSE_ITEMS = 5;
+import { COLLAPSE_SIDEBAR_CATEGORIES } from '@/app/config';
 
 export default function HeaderList({
   title,
   className,
   icon,
   items,
+  maxItems = 5,
 }: {
   title?: string,
   className?: string,
   icon?: ReactNode,
-  items: ReactNode[]
+  items: ReactNode[],
+  maxItems?: number,
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const hasMoreItems = items.length > SIDEBAR_MAX_COLLAPSE_ITEMS;
+  const hasItemsToExpand =
+    COLLAPSE_SIDEBAR_CATEGORIES &&
+    // Don't show expand button if it only reveals 1 item
+    items.length > (maxItems + 1);
 
   return (
     <AnimateItems
       className={clsx(
-        className,
         'space-y-1',
+        className,
       )}
       scaleOffset={0.95}
       duration={0.5}
@@ -39,7 +43,7 @@ export default function HeaderList({
             'text-gray-900',
             'dark:text-gray-100',
             'flex items-center mb-1 gap-1',
-            'uppercase',
+            'uppercase select-none',
           )}
         >
           {icon &&
@@ -48,26 +52,28 @@ export default function HeaderList({
             </span>}
           {title}
         </div>]
-        :[] as ReactNode[]
+        : [] as ReactNode[]
       )
-        .concat(items.slice(0, isExpanded
-          ? items.length
-          : SIDEBAR_MAX_COLLAPSE_ITEMS))
-        .concat(hasMoreItems
+        .concat(items.slice(
+          0,
+          hasItemsToExpand && !isExpanded ? maxItems : items.length,
+        ))
+        .concat(hasItemsToExpand
           ? [
             <LoaderButton
               key="expand-button"
               onClick={() => setIsExpanded(!isExpanded)}
+              styleAs="link"
               className={clsx(
                 'mt-1',
-                'text-xs tracking-wide',
+                'text-xs font-medium tracking-wider',
                 'border-medium rounded-md',
-                'px-1.5 h-6!',
+                'px-[5px] h-5!',
                 'hover:bg-dim active:bg-main',
               )}
             >
               {<span className="flex items-center gap-1">
-                <span>{isExpanded ? 'HIDE' : 'MORE'}</span>
+                <span>{isExpanded ? 'LESS' : 'MORE'}</span>
                 {isExpanded
                   ? <IoChevronUpOutline size={12} />
                   : <IoChevronDownOutline size={12} />}

src/photo/PhotoGridSidebar.tsx

@@ -56,7 +56,10 @@ export default function PhotoGridSidebar({
     ? <HeaderList
       key="cameras"
       title="Cameras"
-      icon={<IconCamera size={15} />}
+      icon={<IconCamera
+        size={15}
+        className="translate-x-[0.5px]"
+      />}
       items={cameras
         .sort(sortCamerasWithCount)
         .map(({ cameraKey, camera, count }) =>
@@ -99,7 +102,7 @@ export default function PhotoGridSidebar({
       title='Tags'
       icon={<IconTag
         size={14}
-        className="translate-y-[1px]"
+        className="translate-x-[1px] translate-y-[1px]"
       />}
       items={tagsIncludingHidden.map(({ tag, count }) => {
         switch (tag) {