Refine admin insights formatting

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(
+    <AdminAppInsightsClient
-      'flex flex-col items-center justify-center w-full gap-4',
+      photosCount={count}
-      'mt-2 mb-6',
+      tagsCount={tags.length}
-    )}>
+      camerasCount={cameras.length}
-      <div className="text-center text-main uppercase font-bold">
+      dateRange={dateRange}
-        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>
   );
 }

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>
+  );
+}

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',

src/admin/github/GitHubForkStatusBadgeServer.tsx

@@ -55,7 +55,7 @@ export default async function GitHubForkStatusBadgeServer() {
             : null}
       </>,
       style: didError || isBehind === undefined || isBehind
-        ? 'warning'
+        ? 'info'
         : 'mono',
     }} />
     : null;

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) =>