Show blue/yellow indicator conditionally

src/admin/insights/AdminAppInsightsIcon.tsx

@@ -4,7 +4,7 @@ import { LuLightbulb } from 'react-icons/lu';
 
 export default function AdminAppInsightsIcon() {
   const {
-    shouldShowInsightsIndicator,
+    insightIndicatorStatus,
   } = useAppState();
   
   return (
@@ -13,11 +13,13 @@ export default function AdminAppInsightsIcon() {
         size={19}
         className="translate-y-[3px]"
       />
-      {shouldShowInsightsIndicator && <span className={clsx(
+      {insightIndicatorStatus && <span className={clsx(
         'absolute',
         'top-[2px] right-[0.5px]',
         'size-2 rounded-full',
-        'bg-blue-500',
+        insightIndicatorStatus === 'blue'
+          ? 'bg-blue-500'
+          : 'bg-amber-500',
       )} />}
     </span>
   );

src/admin/insights/actions.ts

@@ -1,11 +1,16 @@
 'use server';
 
 import { runAuthenticatedAdminServerAction } from '@/auth';
-import { getGitHubMetaForCurrentApp, getSignificantInsights } from '.';
+import {
+  getGitHubMetaForCurrentApp,
+  getSignificantInsights,
+  InsightIndicatorStatus,
+} from '.';
 import { getPhotosMeta } from '@/photo/db/query';
 import { OUTDATED_THRESHOLD } from '@/photo';
 
-export const getShouldShowInsightsIndicatorAction = async () =>
+// eslint-disable-next-line max-len
+export const getShouldShowInsightsIndicatorAction = async (): Promise<InsightIndicatorStatus> =>
   runAuthenticatedAdminServerAction(async () => {
     const [
       codeMeta,
@@ -15,12 +20,19 @@ export const getShouldShowInsightsIndicatorAction = async () =>
       getPhotosMeta({ hidden: 'include', updatedBefore: OUTDATED_THRESHOLD }),
     ]);
     
-    const significantInsights = getSignificantInsights({
+    const {
+      noFork,
+      forkBehind,
+      noAiRateLimiting,
+      outdatedPhotos,
+    } = getSignificantInsights({
       codeMeta,
       photosCountOutdated,
     });
 
-    return Object
-      .values(significantInsights)
-      .some(Boolean);
+    if (noAiRateLimiting || outdatedPhotos) {
+      return 'yellow';
+    } else if (noFork || forkBehind) {
+      return 'blue';
+    }
   });

src/admin/insights/index.ts

@@ -30,6 +30,8 @@ const RECOMMENDATIONS: AdminAppInsight[] = [
 
 export type AdminAppInsights = Record<AdminAppInsight, boolean>
 
+export type InsightIndicatorStatus = 'blue' | 'yellow' | undefined;
+
 export const hasTemplateRecommendations = (insights: AdminAppInsights) =>
   RECOMMENDATIONS.some(insight => insights[insight]);
 

src/state/AppState.ts

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, createContext, useContext } from 'react';
 import { AnimationConfig } from '@/components/AnimateItems';
 import { ShareModalProps } from '@/share';
+import { InsightIndicatorStatus } from '@/admin/insights';
 
 export interface AppStateContext {
   // CORE
@@ -30,8 +31,8 @@ export interface AppStateContext {
   setSelectedPhotoIds?: Dispatch<SetStateAction<string[] | undefined>>
   isPerformingSelectEdit?: boolean
   setIsPerformingSelectEdit?: Dispatch<SetStateAction<boolean>>
-  shouldShowInsightsIndicator?: boolean
-  setShouldShowInsightsIndicator?: Dispatch<SetStateAction<boolean>>
+  insightIndicatorStatus?: InsightIndicatorStatus
+  setInsightIndicatorStatus?: Dispatch<SetStateAction<InsightIndicatorStatus>>
   // DEBUG
   isGridHighDensity?: boolean
   setIsGridHighDensity?: Dispatch<SetStateAction<boolean>>

src/state/AppStateProvider.tsx

@@ -15,6 +15,7 @@ import { getPhotosHiddenMetaCachedAction } from '@/photo/actions';
 import { ShareModalProps } from '@/share';
 import { storeTimezoneCookie } from '@/utility/timezone';
 import { getShouldShowInsightsIndicatorAction } from '@/admin/insights/actions';
+import { InsightIndicatorStatus } from '@/admin/insights';
 
 export default function AppStateProvider({
   children,
@@ -48,8 +49,8 @@ export default function AppStateProvider({
     useState<string[] | undefined>();
   const [isPerformingSelectEdit, setIsPerformingSelectEdit] =
     useState(false);
-  const [shouldShowInsightsIndicator, setShouldShowInsightsIndicator] =
-    useState(false);
+  const [insightIndicatorStatus, setInsightIndicatorStatus] =
+    useState<InsightIndicatorStatus>();
   // DEBUG
   const [isGridHighDensity, setIsGridHighDensity] =
     useState(HIGH_DENSITY_GRID);
@@ -77,7 +78,7 @@ export default function AppStateProvider({
         getPhotosHiddenMetaCachedAction()
           .then(({ count }) => setHiddenPhotosCount(count));
         getShouldShowInsightsIndicatorAction()
-          .then(setShouldShowInsightsIndicator);
+          .then(setInsightIndicatorStatus);
       }, 100);
       return () => clearTimeout(timeout);
     } else {
@@ -124,8 +125,8 @@ export default function AppStateProvider({
         setSelectedPhotoIds,
         isPerformingSelectEdit,
         setIsPerformingSelectEdit,
-        shouldShowInsightsIndicator,
-        setShouldShowInsightsIndicator,
+        insightIndicatorStatus,
+        setInsightIndicatorStatus,
         // DEBUG
         isGridHighDensity,
         setIsGridHighDensity,