Refine sidebar collapse behavior

src/components/HeaderList.tsx

@@ -69,11 +69,20 @@ export default function HeaderList({
                 'text-xs font-medium tracking-wider',
                 'border-medium rounded-md',
                 'px-[5px] h-5!',
-                'hover:bg-dim active:bg-main',
+                'hover:bg-dim hover:text-main active:bg-main',
+                'group',
               )}
             >
               {<span className="flex items-center gap-1">
-                <span>{isExpanded ? 'LESS' : 'MORE'}</span>
+                {isExpanded
+                  ? 'LESS'
+                  : <>
+                    MORE
+                    <span className="hidden group-hover:inline text-dim!">
+                      {' '}
+                      {items.length - maxItems}
+                    </span>
+                  </>}
                 {isExpanded
                   ? <IoChevronUpOutline size={12} />
                   : <IoChevronDownOutline size={12} />}

src/photo/PhotoGridSidebar.tsx

@@ -30,7 +30,7 @@ import {
 } from '@/category';
 import PhotoFocalLength from '@/focal/PhotoFocalLength';
 
-const SIDEBAR_ITEM_MAX_COUNT = 24;
+const SIDEBAR_ITEM_MAX_COUNT = 28;
 
 export default function PhotoGridSidebar({
   photosCount,