Test insights scorecard

src/admin/AdminAppInsights.tsx

@@ -7,6 +7,7 @@ import {
 } from '@/photo/db/query';
 import AdminAppInsightsClient from './AdminAppInsightsClient';
 import { APP_CONFIGURATION } from '@/app-core/config';
+
 export default async function AdminAppInsights() {
   const [
     { count, dateRange },

src/admin/AdminAppInsightsClient.tsx

@@ -5,7 +5,9 @@ import Note from '@/components/Note';
 import WarningNote from '@/components/WarningNote';
 import { dateRangeForPhotos, PhotoDateRange } from '@/photo';
 import clsx from 'clsx/lite';
+import { ReactNode } from 'react';
 import { HiSparkles } from 'react-icons/hi';
+import { PiWarningBold } from 'react-icons/pi';
 
 type Recommendation =
   'fork' |
@@ -52,15 +54,53 @@ export default function AdminAppInsightsClient({
       {title}
     </div>;
 
+  const renderRow = (icon: ReactNode, children: ReactNode) =>
+    <div className={clsx(
+      'flex items-center gap-4',
+      'px-4 py-2',
+    )}>
+      <div className="flex items-center gap-2 shrink-0">
+        {icon}
+      </div>
+      <div>
+        {children}
+      </div>
+    </div>;
+
   return (
     <div className={clsx(
       'flex flex-col items-center w-full',
       'mt-2 mb-1',
     )}>
       <div className={clsx(
-        'w-full sm:w-[80%]',
+        'w-full sm:w-[80%] lg:w-[60%]',
         'space-y-4 md:space-y-6',
       )}>
+        <div className="component-surface shadow-xs divide-y divide-main">
+          {renderRow(
+            <PiWarningBold
+              size={17}
+              className="translate-x-[0.5px] text-amber-600"
+            />,
+            'This fork is 9 commits behind',
+          )}
+          {renderRow(
+            <PiWarningBold
+              size={17}
+              className="translate-x-[0.5px] text-amber-600"
+            />,
+            'Consider enabling rate limiting to mitigate AI abuse',
+          )}
+          {renderRow(
+            <IconGrSync />,
+            // eslint-disable-next-line max-len
+            'Consider forking this repository to receive new features and fixes',
+          )}
+          {renderRow(
+            <HiSparkles />,
+            'Enable AI text generation in the app configuration',
+          )}
+        </div>
         {renderTitle('Code Observability')}
         {(fork || debug) &&
           <Note icon={<IconGrSync />}>

src/admin/github/GitHubForkStatusBadgeClient.tsx

@@ -59,10 +59,7 @@ export default function GitHubForkStatusBadgeClient({
         classNameForStyle(),
       )}>
         {!label
-          ? <Spinner
-            color="text"
-            className="translate-x-[3px]"
-          />
+          ? <Spinner className="translate-x-[3px] translate-y-[0.5px]" />
           : <BiLogoGithub size={17} />}
         {label ?? 'Checking'}
       </div>

tailwind.css

@@ -124,6 +124,10 @@
   @apply
     border border-gray-200 dark:border-gray-700
 }
+@utility divide-main {
+  @apply
+    divide-gray-200 dark:divide-gray-700
+}
 /* Background */
 @utility bg-main {
   @apply