From 1f6db2013d355fff7916696036fbdb3c736909cf Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 12 Feb 2025 23:24:07 -0600
Subject: [PATCH] Introduce more insights content

---
 src/admin/AdminAppInsightsClient.tsx | 20 ++++++++++++++++----
 src/components/ScoreCardRow.tsx      |  4 ++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/admin/AdminAppInsightsClient.tsx b/src/admin/AdminAppInsightsClient.tsx
index 2a440976..5808215e 100644
--- a/src/admin/AdminAppInsightsClient.tsx
+++ b/src/admin/AdminAppInsightsClient.tsx
@@ -8,6 +8,7 @@ import WarningNote from '@/components/WarningNote';
 import { dateRangeForPhotos, PhotoDateRange } from '@/photo';
 import clsx from 'clsx/lite';
 import { HiSparkles } from 'react-icons/hi';
+import { MdLightbulbOutline } from 'react-icons/md';
 import { PiWarningBold } from 'react-icons/pi';
 
 type Recommendation =
@@ -72,16 +73,27 @@ export default function AdminAppInsightsClient({
               />
             }
             content="This fork is 9 commits behind"
-            additionalContent="This fork is 9 commits behind"
+            additionalContent={<>
+              Sync your fork to receive new features and fixes
+            </>}
           />
           <ScoreCardRow
             icon={<PiWarningBold
               size={17}
               className="translate-x-[0.5px] text-amber-600"
             />}
-            content="Consider enabling rate limiting to mitigate AI abuse"
+            content="AI enabled without rate limiting"
             // eslint-disable-next-line max-len
-            additionalContent="Consider enabling rate limiting to mitigate AI abuse"
+            additionalContent="Create Vercel KV store and link it to this project in order to enable rate limiting."
+          />
+          <ScoreCardRow
+            icon={<MdLightbulbOutline size={19} />}
+            // eslint-disable-next-line max-len
+            content="You seem to have several portrait photos—consider enabling photo matting to make images appear more consistent"
+            additionalContent={<>
+              Enabled photo matting by setting
+              <code className="text-main">`NEXT_PUBLIC_MATTE_PHOTOS = 1`</code>
+            </>}
           />
           <ScoreCardRow
             icon={<IconGrSync />}
@@ -116,7 +128,7 @@ export default function AdminAppInsightsClient({
           'uppercase',
         )}>
           <div className="tracking-wide">Photos</div>
-          <div className="text-right">{photosCount}</div>
+          <div className="eright">{photosCount}</div>
           <div className="tracking-wide">Tags</div>
           <div className="text-right">{tagsCount}</div>
           <div className="tracking-wide">Cameras</div>
diff --git a/src/components/ScoreCardRow.tsx b/src/components/ScoreCardRow.tsx
index 744ef1a8..ba9f7403 100644
--- a/src/components/ScoreCardRow.tsx
+++ b/src/components/ScoreCardRow.tsx
@@ -16,10 +16,10 @@ export default function ScoreCardRow({
       'flex gap-4',
       'px-4 py-2',
     )}>
-      <div className="pt-[3px] shrink-0">
+      <div className="pt-[8px] shrink-0 text-main">
         {icon}
       </div>
-      <div className="grow space-y-4">
+      <div className="grow space-y-2 py-1.5">
         <div className="text-main">
           {content}
         </div>