From 8b3ba4391806736f4c81b49dcbf65db55095c1c7 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 17 Feb 2025 18:44:55 -0600
Subject: [PATCH] Add insight indicator to cmdk menu

---
 src/admin/insights/AdminAppInsightsIcon.tsx | 21 ++++++++++++---------
 src/components/cmdk/CommandKClient.tsx      | 20 ++++++++++++++++----
 src/components/cmdk/CommandKItem.tsx        |  2 +-
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/admin/insights/AdminAppInsightsIcon.tsx b/src/admin/insights/AdminAppInsightsIcon.tsx
index 736f5d06..fb8c2fe1 100644
--- a/src/admin/insights/AdminAppInsightsIcon.tsx
+++ b/src/admin/insights/AdminAppInsightsIcon.tsx
@@ -1,7 +1,7 @@
 import { useAppState } from '@/state/AppState';
 import clsx from 'clsx/lite';
 import { LuLightbulb } from 'react-icons/lu';
-
+import { FaCircle } from 'react-icons/fa6';
 export default function AdminAppInsightsIcon() {
   const {
     insightIndicatorStatus,
@@ -13,14 +13,17 @@ export default function AdminAppInsightsIcon() {
         size={19}
         className="translate-y-[3px]"
       />
-      {insightIndicatorStatus && <span className={clsx(
-        'absolute',
-        'top-[2px] right-[0.5px]',
-        'size-2 rounded-full',
-        insightIndicatorStatus === 'blue'
-          ? 'bg-blue-500'
-          : 'bg-amber-500',
-      )} />}
+      {insightIndicatorStatus &&
+        <FaCircle
+          size={8}
+          className={clsx(
+            'absolute',
+            'top-[2px] right-[0.5px]',
+            insightIndicatorStatus === 'blue'
+              ? 'text-blue-500'
+              : 'text-amber-500',
+          )}
+        />}
     </span>
   );
 }
diff --git a/src/components/cmdk/CommandKClient.tsx b/src/components/cmdk/CommandKClient.tsx
index 17e72d9c..31582152 100644
--- a/src/components/cmdk/CommandKClient.tsx
+++ b/src/components/cmdk/CommandKClient.tsx
@@ -41,7 +41,7 @@ import { TbPhoto } from 'react-icons/tb';
 import { getKeywordsForPhoto, titleForPhoto } from '@/photo';
 import PhotoDate from '@/photo/PhotoDate';
 import PhotoSmall from '@/photo/PhotoSmall';
-import { FaCheck } from 'react-icons/fa6';
+import { FaCheck, FaCircle } from 'react-icons/fa6';
 import { Tags, addHiddenToTags, formatTag } from '@/tag';
 import { FaTag } from 'react-icons/fa';
 import { formatCount, formatCountDescriptive } from '@/utility/string';
@@ -57,7 +57,7 @@ const LISTENER_KEYDOWN = 'keydown';
 const MINIMUM_QUERY_LENGTH = 2;
 
 type CommandKItem = {
-  label: string
+  label: ReactNode
   keywords?: string[]
   accessory?: ReactNode
   annotation?: ReactNode
@@ -97,6 +97,7 @@ export default function CommandKClient({
     arePhotosMatted,
     shouldShowBaselineGrid,
     shouldDebugImageFallbacks,
+    insightIndicatorStatus,
     setIsCommandKOpen: setIsOpen,
     setShouldRespondToKeyboardCommands,
     setShouldShowBaselineGrid,
@@ -322,7 +323,18 @@ export default function CommandKClient({
         annotation: <BiLockAlt />,
         path: PATH_ADMIN_CONFIGURATION,
       }, {
-        label: 'App Insights',
+        label: <span className="flex items-center gap-3">
+          App Insights
+          {insightIndicatorStatus && <FaCircle
+            size={8}
+            className={clsx(
+              insightIndicatorStatus === 'blue'
+                ? 'text-blue-500'
+                : 'text-amber-500',
+            )}
+          />}
+        </span>,
+        keywords: ['app insights'],
         annotation: <BiLockAlt />,
         path: PATH_ADMIN_INSIGHTS,
       }, {
@@ -363,7 +375,7 @@ export default function CommandKClient({
         const searchFormatted = search.trim().toLocaleLowerCase();
         return (
           value.toLocaleLowerCase().includes(searchFormatted) ||
-          keywords?.includes(searchFormatted)
+          keywords?.some(keyword => keyword.includes(searchFormatted))
         ) ? 1 : 0 ;
       }}
       loop
diff --git a/src/components/cmdk/CommandKItem.tsx b/src/components/cmdk/CommandKItem.tsx
index 6156ff6c..94d34455 100644
--- a/src/components/cmdk/CommandKItem.tsx
+++ b/src/components/cmdk/CommandKItem.tsx
@@ -14,7 +14,7 @@ export default function CommandKItem({
   loading,
   disabled,
 }: {
-  label: string
+  label: ReactNode
   value: string
   keywords?: string[]
   onSelect: () => void