Add sections to admin menus

src/admin/AdminAppMenu.tsx

@@ -29,6 +29,7 @@ import { IoMdCheckboxOutline } from 'react-icons/io';
 import Spinner from '@/components/Spinner';
 import IconBroom from '@/components/icons/IconBroom';
 import InsightsIndicatorDot from './insights/InsightsIndicatorDot';
+import MoreMenuItem from '@/components/more/MoreMenuItem';
 
 export default function AdminAppMenu({
   active,
@@ -60,17 +61,21 @@ export default function AdminAppMenu({
 
   const showAppInsightsLink = photosCountTotal > 0 && !isAltPressed;
 
-  const items: ComponentProps<typeof MoreMenu>['items'] = [{
+  const sectionUpload: ComponentProps<typeof MoreMenuItem>[] = [];
+  const sectionMain: ComponentProps<typeof MoreMenuItem>[] = [];
+  const sectionSignOut: ComponentProps<typeof MoreMenuItem>[] = [];
+
+  sectionUpload.push({
     label: 'Upload Photos',
     icon: <IconUpload
       size={15}
       className="translate-x-[0.5px] translate-y-[0.5px]"
     />,
     action: startUpload,
-  }];
+  });
 
   if (uploadsCount) {
-    items.push({
+    sectionMain.push({
       label: 'Uploads',
       annotation: `${uploadsCount}`,
       icon: <IconFolder
@@ -81,7 +86,7 @@ export default function AdminAppMenu({
     });
   }
   if (photosCountNeedSync) {
-    items.push({
+    sectionMain.push({
       label: 'Updates',
       annotation: <>
         <span className="mr-3">
@@ -100,7 +105,7 @@ export default function AdminAppMenu({
     });
   }
   if (photosCountTotal) {
-    items.push({
+    sectionMain.push({
       label: 'Manage Photos',
       ...photosCountTotal && {
         annotation: `${photosCountTotal}`,
@@ -113,7 +118,7 @@ export default function AdminAppMenu({
     });
   }
   if (tagsCount) {
-    items.push({
+    sectionMain.push({
       label: 'Manage Tags',
       annotation: `${tagsCount}`,
       icon: <IconTag
@@ -124,7 +129,7 @@ export default function AdminAppMenu({
     });
   }
   if (recipesCount) {
-    items.push({
+    sectionMain.push({
       label: 'Manage Recipes',
       annotation: `${recipesCount}`,
       icon: <IconRecipe
@@ -135,7 +140,7 @@ export default function AdminAppMenu({
     });
   }
   if (photosCountTotal) {
-    items.push({
+    sectionMain.push({
       label: isSelecting
         ? 'Exit Batch Edit'
         : 'Batch Edit ...',
@@ -163,7 +168,7 @@ export default function AdminAppMenu({
     });
   }
 
-  items.push({
+  sectionMain.push({
     label: showAppInsightsLink
       ? 'App Insights'
       : 'App Configuration',
@@ -174,7 +179,9 @@ export default function AdminAppMenu({
     href: showAppInsightsLink
       ? PATH_ADMIN_INSIGHTS
       : PATH_ADMIN_CONFIGURATION,
-  }, {
+  });
+
+  sectionSignOut.push({
     label: 'Sign Out',
     icon: <IconSignOut size={15} />,
     action: () => signOutAction().then(clearAuthStateAndRedirectIfNecessary),
@@ -235,7 +242,11 @@ export default function AdminAppMenu({
         '[&>*>*]:translate-y-[6px]',
         !animateMenuClose && '[&>*>*]:duration-300',
       )}
-      items={items}
+      sections={[
+        sectionUpload,
+        sectionMain,
+        sectionSignOut,
+      ]}
       ariaLabel="Admin Menu"
     />
   );

src/admin/AdminPhotoMenu.tsx

@@ -31,7 +31,7 @@ export default function AdminPhotoMenu({
   revalidatePhoto,
   includeFavorite = true,
   ...props
-}: Omit<ComponentProps<typeof MoreMenu>, 'items'> & {
+}: Omit<ComponentProps<typeof MoreMenu>, 'sections'> & {
   photo: Photo
   revalidatePhoto?: RevalidatePhoto
   includeFavorite?: boolean
@@ -43,8 +43,8 @@ export default function AdminPhotoMenu({
   const shouldRedirectFav = isPathFavs(path) && isFav;
   const shouldRedirectDelete = pathForPhoto({ photo: photo.id }) === path;
 
-  const items = useMemo(() => {
-    const items: ComponentProps<typeof MoreMenuItem>[] = [{
+  const sections = useMemo(() => {
+    const sectionMain: ComponentProps<typeof MoreMenuItem>[] = [{
       label: 'Edit',
       icon: <IconEdit
         size={15}
@@ -53,7 +53,7 @@ export default function AdminPhotoMenu({
       href: pathForAdminPhotoEdit(photo.id),
     }];
     if (includeFavorite) {
-      items.push({
+      sectionMain.push({
         label: isFav ? 'Unfavorite' : 'Favorite',
         icon: <IconFavs
           size={14}
@@ -66,7 +66,7 @@ export default function AdminPhotoMenu({
         ).then(() => revalidatePhoto?.(photo.id)),
       });
     }
-    items.push({
+    sectionMain.push({
       label: 'Download',
       icon: <MdOutlineFileDownload
         size={17}
@@ -75,7 +75,7 @@ export default function AdminPhotoMenu({
       href: photo.url,
       hrefDownloadName: downloadFileNameForPhoto(photo),
     });
-    items.push({
+    sectionMain.push({
       label: 'Sync',
       labelComplex: <span className="inline-flex items-center gap-2">
         <span>Sync</span>
@@ -90,7 +90,7 @@ export default function AdminPhotoMenu({
       action: () => syncPhotoAction(photo.id)
         .then(() => revalidatePhoto?.(photo.id)),
     });
-    items.push({
+    const sectionDelete = [{
       label: 'Delete',
       icon: <BiTrash
         size={15}
@@ -109,8 +109,8 @@ export default function AdminPhotoMenu({
           });
         }
       },
-    });
-    return items;
+    }];
+    return [sectionMain, sectionDelete];
   }, [
     photo,
     includeFavorite,
@@ -124,7 +124,7 @@ export default function AdminPhotoMenu({
   return (
     isUserSignedIn
       ? <MoreMenu {...{
-        items,
+        sections,
         ...props,
       }}/>
       : null

src/components/more/MoreMenu.tsx

@@ -11,7 +11,7 @@ import { FiMoreHorizontal } from 'react-icons/fi';
 import MoreMenuItem from './MoreMenuItem';
 
 export default function MoreMenu({
-  items,
+  sections,
   icon,
   header,
   className,
@@ -24,7 +24,7 @@ export default function MoreMenu({
   onOpen,
   ...props
 }: {
-  items: ComponentProps<typeof MoreMenuItem>[]
+  sections: ComponentProps<typeof MoreMenuItem>[][]
   icon?: ReactNode
   header?: ReactNode
   className?: string
@@ -71,7 +71,7 @@ export default function MoreMenu({
             'z-10',
             'min-w-[8rem]',
             'component-surface',
-            'p-1',
+            'py-1',
             'shadow-lg',
             'data-[side=top]:dark:shadow-[0_0px_40px_rgba(0,0,0,0.6)]',
             'data-[side=bottom]:dark:shadow-[0_10px_40px_rgba(0,0,0,0.6)]',
@@ -86,13 +86,26 @@ export default function MoreMenu({
           )}>
             {header}
           </div>}
-          {items.map(props =>
-            <MoreMenuItem
-              key={`${props.label}`}
-              {...props}
-              dismissMenu={dismissMenu}
-            />,
-          )}
+          <div className="divide-y divide-medium">
+            {sections.map((section, index) =>
+              <div
+                key={index}
+                className={clsx(
+                  '[&:not(:first-child)]:pt-1',
+                  '[&:not(:last-child)]:pb-1',
+                )}
+              >
+                {section.map(props =>
+                  <div key={props.label} className="px-1">
+                    <MoreMenuItem
+                      dismissMenu={dismissMenu}
+                      {...props}
+                    />
+                  </div>,
+                )}
+              </div>,
+            )}
+          </div>
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>

src/components/more/MoreMenuItem.tsx

@@ -110,7 +110,9 @@ export default function MoreMenuItem({
         styleAs="link-without-hover"
         className="translate-y-[1px]"
       >
-        {labelComplex ?? label}
+        <span>
+          {labelComplex ?? label}
+        </span>
         {annotation &&
           <span className="text-dim ml-3">
             {annotation}