From e0f795709b68b3ce3cae18f5e6e6fd376d101ed7 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 10 Feb 2025 22:34:04 -0600
Subject: [PATCH] Refine admin insights formatting

---
 src/admin/AdminAppInsights.tsx                | 38 ++++------------
 src/admin/AdminAppInsightsClient.tsx          | 44 +++++++++++++++++++
 .../github/GitHubForkStatusBadgeClient.tsx    |  8 +++-
 .../github/GitHubForkStatusBadgeServer.tsx    |  2 +-
 src/photo/index.ts                            |  6 ++-
 5 files changed, 65 insertions(+), 33 deletions(-)
 create mode 100644 src/admin/AdminAppInsightsClient.tsx

diff --git a/src/admin/AdminAppInsights.tsx b/src/admin/AdminAppInsights.tsx
index 74aa0269..52c52db8 100644
--- a/src/admin/AdminAppInsights.tsx
+++ b/src/admin/AdminAppInsights.tsx
@@ -1,49 +1,27 @@
-import { dateRangeForPhotos } from '@/photo';;
 import {
   getPhotosMeta,
   getUniqueCameras,
   getUniqueTags,
 } from '@/photo/db/query';
-import clsx from 'clsx/lite';
+import AdminAppInsightsClient from './AdminAppInsightsClient';
 
 export default async function AdminAppInsights() {
   const [
     { count, dateRange },
     tags,
     cameras,
-  ]= await Promise.all([
+  ] = await Promise.all([
     getPhotosMeta(),
     getUniqueTags(),
     getUniqueCameras(),
   ]);
 
-  const { start, end } = dateRangeForPhotos(undefined, dateRange);
-  
   return (
-    <div className={clsx(
-      'flex flex-col items-center justify-center w-full gap-4',
-      'mt-2 mb-6',
-    )}>
-      <div className="text-center text-main uppercase font-bold">
-        Photo library
-      </div>
-      <div className={clsx(
-        'grid grid-cols-2 gap-2 uppercase',
-        'border border-main rounded-md p-4 bg-main shadow-xs',
-        'w-[80%]',
-      )}>
-        <div className="tracking-wide">Photos</div>
-        <div className="text-right">{count}</div>
-        <div>Tags</div>
-        <div className="text-right">{tags.length}</div>
-        <div>Cameras</div>
-        <div className="text-right">{cameras.length}</div>
-        <span className="text-center col-span-2">
-          {start === end
-            ? start
-            : <>{end} – {start}</>}
-        </span>
-      </div>
-    </div>
+    <AdminAppInsightsClient
+      photosCount={count}
+      tagsCount={tags.length}
+      camerasCount={cameras.length}
+      dateRange={dateRange}
+    />
   );
 }
diff --git a/src/admin/AdminAppInsightsClient.tsx b/src/admin/AdminAppInsightsClient.tsx
new file mode 100644
index 00000000..64f89b0e
--- /dev/null
+++ b/src/admin/AdminAppInsightsClient.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { dateRangeForPhotos, PhotoDateRange } from '@/photo';
+import clsx from 'clsx/lite';
+
+export default function AdminAppInsightsClient({
+  photosCount,
+  tagsCount,
+  camerasCount,
+  dateRange,
+}: {
+  photosCount: number
+  tagsCount: number
+  camerasCount: number
+  dateRange?: PhotoDateRange
+}) {
+  const { descriptionWithSpaces } = dateRangeForPhotos(undefined, dateRange);
+
+  return (
+    <div className={clsx(
+      'flex flex-col items-center justify-center w-full gap-4',
+      'mt-2 mb-6',
+    )}>
+      <div className="text-center text-main uppercase font-bold">
+        Photo library
+      </div>
+      <div className={clsx(
+        'grid grid-cols-2 gap-2 uppercase',
+        'border border-main rounded-md p-4 bg-main shadow-xs',
+        'w-[80%]',
+      )}>
+        <div className="tracking-wide">Photos</div>
+        <div className="text-right">{photosCount}</div>
+        <div>Tags</div>
+        <div className="text-right">{tagsCount}</div>
+        <div>Cameras</div>
+        <div className="text-right">{camerasCount}</div>
+        <span className="text-center col-span-2">
+          {descriptionWithSpaces}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/admin/github/GitHubForkStatusBadgeClient.tsx b/src/admin/github/GitHubForkStatusBadgeClient.tsx
index 3bfe8593..7f1e0fd6 100644
--- a/src/admin/github/GitHubForkStatusBadgeClient.tsx
+++ b/src/admin/github/GitHubForkStatusBadgeClient.tsx
@@ -10,11 +10,17 @@ export default function GitHubForkStatusBadgeClient({
   tooltip,
 }: {
   label?: ReactNode
-  style?: 'success' | 'warning' | 'error' | 'mono'
+  style?: 'info' |'success' | 'warning' | 'error' | 'mono'
   tooltip?: ReactNode
 }) {
   const classNameForStyle = () => {
     switch (style) {
+    case 'info': return clsx(
+      'text-blue-600 hover:text-blue-600',
+      'dark:text-blue-400 dark:hover:text-blue-400',
+      'bg-blue-100/40 dark:bg-blue-900/25',
+      'border-blue-300/40 dark:border-blue-900/50',
+    );
     case 'success': return clsx(
       'text-green-700 hover:text-green-700',
       'dark:text-green-400 dark:hover:text-green-400',
diff --git a/src/admin/github/GitHubForkStatusBadgeServer.tsx b/src/admin/github/GitHubForkStatusBadgeServer.tsx
index 5b7657fe..faf3d99c 100644
--- a/src/admin/github/GitHubForkStatusBadgeServer.tsx
+++ b/src/admin/github/GitHubForkStatusBadgeServer.tsx
@@ -55,7 +55,7 @@ export default async function GitHubForkStatusBadgeServer() {
             : null}
       </>,
       style: didError || isBehind === undefined || isBehind
-        ? 'warning'
+        ? 'info'
         : 'mono',
     }} />
     : null;
diff --git a/src/photo/index.ts b/src/photo/index.ts
index 8a145e02..e58a38db 100644
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@@ -273,6 +273,7 @@ export const dateRangeForPhotos = (
   let start = '';
   let end = '';
   let description = '';
+  let descriptionWithSpaces = '';
 
   if (explicitDateRange || photos.length > 0) {
     const photosSorted = sortPhotosByDate(photos);
@@ -287,9 +288,12 @@ export const dateRangeForPhotos = (
     description = start === end
       ? start
       : `${start}–${end}`;
+    descriptionWithSpaces = start === end
+      ? start
+      : `${start} – ${end}`;
   }
 
-  return { start, end, description };
+  return { start, end, description, descriptionWithSpaces };
 };
 
 const photoHasCameraData = (photo: Photo) =>