From c9fe29286bcc774a6ca9431a3af78d54fb35b11e Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 20 Apr 2025 22:56:43 -0500
Subject: [PATCH] Add indicator dot to menu updates

---
 src/admin/AdminAppMenu.tsx           | 11 ++++-
 src/admin/AdminPhotoMenu.tsx         |  3 +-
 src/app/paths.ts                     | 64 +++++++++++++++-------------
 src/components/more/MoreMenuItem.tsx |  2 +-
 4 files changed, 47 insertions(+), 33 deletions(-)

diff --git a/src/admin/AdminAppMenu.tsx b/src/admin/AdminAppMenu.tsx
index 7e3e8024..cfd61fe8 100644
--- a/src/admin/AdminAppMenu.tsx
+++ b/src/admin/AdminAppMenu.tsx
@@ -28,6 +28,7 @@ import IconLock from '@/components/icons/IconLock';
 import { IoMdCheckboxOutline } from 'react-icons/io';
 import Spinner from '@/components/Spinner';
 import IconBroom from '@/components/icons/IconBroom';
+import InsightsIndicatorDot from './insights/InsightsIndicatorDot';
 
 export default function AdminAppMenu({
   active,
@@ -82,7 +83,15 @@ export default function AdminAppMenu({
   if (photosCountNeedSync) {
     items.push({
       label: 'Updates',
-      annotation: `${photosCountNeedSync}`,
+      annotation: <>
+        <span className="mr-3">
+          {photosCountNeedSync}
+        </span>
+        <InsightsIndicatorDot
+          className="inline-block translate-y-[-0.5px]"
+          size="small"
+        />
+      </>,
       icon: <IconBroom
         size={17}
         className="translate-y-[0.5px]"
diff --git a/src/admin/AdminPhotoMenu.tsx b/src/admin/AdminPhotoMenu.tsx
index 1b82aeda..b5545924 100644
--- a/src/admin/AdminPhotoMenu.tsx
+++ b/src/admin/AdminPhotoMenu.tsx
@@ -82,7 +82,8 @@ export default function AdminPhotoMenu({
         {photoNeedsToBeSynced(photo) &&
           <InsightsIndicatorDot
             colorOverride="blue"
-            className="translate-y-[1.5px]"
+            className="ml-1 translate-y-[1.5px]"
+            size="small"
           />}
       </span>,
       icon: <IconGrSync className="translate-x-[-1px]" />,
diff --git a/src/app/paths.ts b/src/app/paths.ts
index b81cfec2..1c3d0465 100644
--- a/src/app/paths.ts
+++ b/src/app/paths.ts
@@ -7,35 +7,39 @@ import { TAG_HIDDEN } from '@/tag';
 import { Lens } from '@/lens';
 
 // Core paths
-export const PATH_ROOT                = '/';
-export const PATH_GRID                = '/grid';
-export const PATH_FEED                = '/feed';
-export const PATH_ADMIN               = '/admin';
-export const PATH_API                 = '/api';
-export const PATH_SIGN_IN             = '/sign-in';
-export const PATH_OG                  = '/og';
-// eslint-disable-next-line max-len
-export const PATH_GRID_INFERRED       = GRID_HOMEPAGE_ENABLED ? PATH_ROOT : PATH_GRID;
-// eslint-disable-next-line max-len
-export const PATH_FEED_INFERRED       = GRID_HOMEPAGE_ENABLED ? PATH_FEED : PATH_ROOT;
+export const PATH_ROOT                  = '/';
+export const PATH_GRID                  = '/grid';
+export const PATH_FEED                  = '/feed';
+export const PATH_ADMIN                 = '/admin';
+export const PATH_API                   = '/api';
+export const PATH_SIGN_IN               = '/sign-in';
+export const PATH_OG                    = '/og';
+
+export const PATH_GRID_INFERRED = GRID_HOMEPAGE_ENABLED
+  ? PATH_ROOT
+  : PATH_GRID;
+
+export const PATH_FEED_INFERRED = GRID_HOMEPAGE_ENABLED
+  ? PATH_FEED
+  : PATH_ROOT;
 
 // Path prefixes
-export const PREFIX_PHOTO             = '/p';
-export const PREFIX_CAMERA            = '/shot-on';
-export const PREFIX_LENS              = '/lens';
-export const PREFIX_TAG               = '/tag';
-export const PREFIX_RECIPE            = '/recipe';
-export const PREFIX_FILM              = '/film';
-export const PREFIX_FOCAL_LENGTH      = '/focal';
+export const PREFIX_PHOTO               = '/p';
+export const PREFIX_CAMERA              = '/shot-on';
+export const PREFIX_LENS                = '/lens';
+export const PREFIX_TAG                 = '/tag';
+export const PREFIX_RECIPE              = '/recipe';
+export const PREFIX_FILM                = '/film';
+export const PREFIX_FOCAL_LENGTH        = '/focal';
 
 // Dynamic paths
-const PATH_PHOTO_DYNAMIC              = `${PREFIX_PHOTO}/[photoId]`;
-const PATH_CAMERA_DYNAMIC             = `${PREFIX_CAMERA}/[make]/[model]`;
-const PATH_LENS_DYNAMIC               = `${PREFIX_LENS}/[make]/[model]`;
-const PATH_TAG_DYNAMIC                = `${PREFIX_TAG}/[tag]`;
-const PATH_FILM_DYNAMIC               = `${PREFIX_FILM}/[film]`;
-const PATH_FOCAL_LENGTH_DYNAMIC       = `${PREFIX_FOCAL_LENGTH}/[focal]`;
-const PATH_RECIPE_DYNAMIC             = `${PREFIX_RECIPE}/[recipe]`;
+const PATH_PHOTO_DYNAMIC                = `${PREFIX_PHOTO}/[photoId]`;
+const PATH_CAMERA_DYNAMIC               = `${PREFIX_CAMERA}/[make]/[model]`;
+const PATH_LENS_DYNAMIC                 = `${PREFIX_LENS}/[make]/[model]`;
+const PATH_TAG_DYNAMIC                  = `${PREFIX_TAG}/[tag]`;
+const PATH_FILM_DYNAMIC                 = `${PREFIX_FILM}/[film]`;
+const PATH_FOCAL_LENGTH_DYNAMIC         = `${PREFIX_FOCAL_LENGTH}/[focal]`;
+const PATH_RECIPE_DYNAMIC               = `${PREFIX_RECIPE}/[recipe]`;
 
 // Admin paths
 export const PATH_ADMIN_PHOTOS          = `${PATH_ADMIN}/photos`;
@@ -49,8 +53,8 @@ export const PATH_ADMIN_BASELINE        = `${PATH_ADMIN}/baseline`;
 export const PATH_ADMIN_COMPONENTS      = `${PATH_ADMIN}/components`;
 
 // Debug paths
-export const PATH_OG_ALL              = `${PATH_OG}/all`;
-export const PATH_OG_SAMPLE           = `${PATH_OG}/sample`;
+export const PATH_OG_ALL                = `${PATH_OG}/all`;
+export const PATH_OG_SAMPLE             = `${PATH_OG}/sample`;
 
 // API paths
 export const PATH_API_STORAGE = `${PATH_API}/storage`;
@@ -95,9 +99,6 @@ type PhotoPathParams  = { photo: PhotoOrPhotoId } & PhotoSetCategory & {
   showRecipe?: boolean
 };
 
-// Absolute paths
-export const ABSOLUTE_PATH_FOR_HOME_IMAGE = `${BASE_URL}/home-image`;
-
 export const pathForAdminUploadUrl = (url: string) =>
   `${PATH_ADMIN_UPLOADS}/${encodeURIComponent(url)}`;
 
@@ -165,6 +166,9 @@ export const pathForFocalLength = (focal: number) =>
 export const pathForRecipe = (recipe: string) =>
   `${PREFIX_RECIPE}/${recipe}`;
 
+// Absolute paths
+export const ABSOLUTE_PATH_FOR_HOME_IMAGE = `${BASE_URL}/home-image`;
+
 export const absolutePathForPhoto = (params: PhotoPathParams) =>
   `${BASE_URL}${pathForPhoto(params)}`;
 
diff --git a/src/components/more/MoreMenuItem.tsx b/src/components/more/MoreMenuItem.tsx
index f021b70b..9a86cf44 100644
--- a/src/components/more/MoreMenuItem.tsx
+++ b/src/components/more/MoreMenuItem.tsx
@@ -21,7 +21,7 @@ export default function MoreMenuItem({
 }: {
   label: string
   labelComplex?: ReactNode
-  annotation?: string
+  annotation?: ReactNode
   icon?: ReactNode
   href?: string
   hrefDownloadName?: string