From ffa2d3351468d1e72038bb12786f8413d9ce2c53 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Thu, 13 Feb 2025 19:55:48 -0600 Subject: [PATCH] Refine insights UI --- src/admin/AdminAppConfigurationClient.tsx | 4 +- src/admin/AdminAppInsightsClient.tsx | 248 ++++++++++------------ src/admin/AdminAppInsightsIcon.tsx | 12 +- src/admin/AdminInfoPage.tsx | 4 +- src/components/ScoreCard.tsx | 22 +- src/components/ScoreCardRow.tsx | 3 + tailwind.css | 14 +- 7 files changed, 158 insertions(+), 149 deletions(-) diff --git a/src/admin/AdminAppConfigurationClient.tsx b/src/admin/AdminAppConfigurationClient.tsx index 5dbb6505..fbe1f1b1 100644 --- a/src/admin/AdminAppConfigurationClient.tsx +++ b/src/admin/AdminAppConfigurationClient.tsx @@ -213,7 +213,7 @@ export default function AdminAppConfigurationClient({ ; return ( -
+ <>
}
- + ); } diff --git a/src/admin/AdminAppInsightsClient.tsx b/src/admin/AdminAppInsightsClient.tsx index e3f0d80b..22b8d976 100644 --- a/src/admin/AdminAppInsightsClient.tsx +++ b/src/admin/AdminAppInsightsClient.tsx @@ -5,7 +5,6 @@ import ScoreCard from '@/components/ScoreCard'; import ScoreCardRow from '@/components/ScoreCardRow'; import { dateRangeForPhotos, PhotoDateRange } from '@/photo'; import PhotoFilmSimulationIcon from '@/simulation/PhotoFilmSimulationIcon'; -import clsx from 'clsx/lite'; import { FaCamera } from 'react-icons/fa'; import { FaTag } from 'react-icons/fa'; import { FaRegCalendar } from 'react-icons/fa6'; @@ -66,147 +65,130 @@ export default function AdminAppInsightsClient({ const { descriptionWithSpaces } = dateRangeForPhotos(undefined, dateRange); - const renderTitle = (title: string) => -
- {title} -
; - return ( -
-
- {(codeMeta?.isBaseRepo || codeMeta?.isForkedFromBase || debug) && <> - {renderTitle('Build details')} - - } - content={
-
-
{codeMeta?.owner ?? TEMPLATE_REPO_OWNER}
-
/
-
{codeMeta?.repo ?? TEMPLATE_REPO_NAME}
-
-
-
-
- {codeMeta?.branch ?? TEMPLATE_REPO_BRANCH} -
-
-
} - /> - {(codeMeta?.behindBy || debug) && - } - // eslint-disable-next-line max-len - content={`This fork is ${codeMeta?.behindBy ?? 9} commits behind`} - additionalContent={<> - Sync your fork to receive new features and fixes - } - />} - } - icon={} - content={
-
- {VERCEL_GIT_COMMIT_SHA_SHORT ?? DEBUG_COMMIT_SHA} -
+
+ {(codeMeta?.isBaseRepo || codeMeta?.isForkedFromBase || debug) && <> + + } + content={
+
+
{codeMeta?.owner ?? TEMPLATE_REPO_OWNER}
+
/
+
{codeMeta?.repo ?? TEMPLATE_REPO_NAME}
+
+
+
- {codeMeta?.commit ?? DEBUG_COMMIT_MESSAGE} + {codeMeta?.branch ?? TEMPLATE_REPO_BRANCH}
-
} - /> - - } - {renderTitle('Template recommendations')} - - } - content="AI enabled without rate limiting" - // eslint-disable-next-line max-len - additionalContent="Create Vercel KV store and link it to this project in order to enable rate limiting." +
+
} /> } - // eslint-disable-next-line max-len - content="You seem to have several vertical photos—consider enabling matting to make portrait and landscape photos appear more consistent" - additionalContent={<> - Enabled photo matting by setting - `NEXT_PUBLIC_MATTE_PHOTOS = 1` - } + // icon={} + icon={} + content={
+
+ {VERCEL_GIT_COMMIT_SHA_SHORT ?? DEBUG_COMMIT_SHA} +
+
+ {codeMeta?.commit ?? DEBUG_COMMIT_MESSAGE} +
+
} /> - } - // eslint-disable-next-line max-len - content="Consider forking this repository to receive new features and fixes" - /> - } - content="Enable AI text generation in the app configuration" - /> - - {renderTitle('Library Stats')} - - } - content={<> - {photosCount} photos - {photosCountHidden > 0 && - ` (${photosCountHidden} hidden)`} - } - /> - } - content={`${tagsCount} tags`} - /> - } - content={`${camerasCount} cameras`} - /> - {filmSimulationsCount && + {(codeMeta?.behindBy || debug) && - - } - content={`${filmSimulationsCount} film simulations`} + icon={} + content={`This fork is ${codeMeta?.behindBy ?? 9} commits behind`} + additionalContent={<> + Sync your fork to receive new features and fixes + } />} - } - content={`${lensesCount} lenses`} - /> - } - content={descriptionWithSpaces} - /> -
+ } + + } + content="AI enabled without rate limiting" + // eslint-disable-next-line max-len + additionalContent="Create Vercel KV store and link it to this project in order to enable rate limiting." + /> + } + // eslint-disable-next-line max-len + content="You seem to have several vertical photos—consider enabling matting to make portrait and landscape photos appear more consistent" + additionalContent={<> + Enabled photo matting by setting + `NEXT_PUBLIC_MATTE_PHOTOS = 1` + } + /> + } + // eslint-disable-next-line max-len + content="Consider forking this repository to receive new features and fixes" + /> + } + content="Enable AI text generation in the app configuration" + /> + + + } + content={<> + {photosCount} photos + {photosCountHidden > 0 && + ` (${photosCountHidden} hidden)`} + } + /> + } + content={`${tagsCount} tags`} + /> + } + content={`${camerasCount} cameras`} + /> + {filmSimulationsCount && + + + } + content={`${filmSimulationsCount} film simulations`} + />} + } + content={`${lensesCount} lenses`} + /> + } + content={descriptionWithSpaces} + /> +
); } diff --git a/src/admin/AdminAppInsightsIcon.tsx b/src/admin/AdminAppInsightsIcon.tsx index 3e9008e9..f346bec6 100644 --- a/src/admin/AdminAppInsightsIcon.tsx +++ b/src/admin/AdminAppInsightsIcon.tsx @@ -2,9 +2,9 @@ import clsx from 'clsx/lite'; import { FaInfo } from 'react-icons/fa'; export default function AdminAppInsightsIcon({ - notification = true, + indicator = 'blue', }: { - notification?: boolean, + indicator?: 'blue' | 'yellow' }) { return ( @@ -19,11 +19,15 @@ export default function AdminAppInsightsIcon({ aria-label="App Configuration" /> - {notification && } ); diff --git a/src/admin/AdminInfoPage.tsx b/src/admin/AdminInfoPage.tsx index 0af159ee..3e046c22 100644 --- a/src/admin/AdminInfoPage.tsx +++ b/src/admin/AdminInfoPage.tsx @@ -22,7 +22,9 @@ export default function AdminInfoPage({ {accessory}
- {children} +
+ {children} +
} /> diff --git a/src/components/ScoreCard.tsx b/src/components/ScoreCard.tsx index d658ee7b..d08c9cb4 100644 --- a/src/components/ScoreCard.tsx +++ b/src/components/ScoreCard.tsx @@ -2,18 +2,30 @@ import clsx from 'clsx/lite'; import { ReactNode } from 'react'; export default function ScoreCard({ + title, children, className, }: { + title?: string, children: ReactNode, className?: string, }) { return ( -
- {children} +
+ {title && +
+ {title} +
} +
+ {children} +
); } diff --git a/src/components/ScoreCardRow.tsx b/src/components/ScoreCardRow.tsx index 243a4b84..7e4c40da 100644 --- a/src/components/ScoreCardRow.tsx +++ b/src/components/ScoreCardRow.tsx @@ -6,10 +6,12 @@ export default function ScoreCardRow({ icon, content, additionalContent, + className, }: { icon: ReactNode content: ReactNode additionalContent?: ReactNode + className?: string }) { const [isExpanded, setIsExpanded] = useState(false); @@ -17,6 +19,7 @@ export default function ScoreCardRow({