From a6b099a83a67d43b8bc12bc1ac7f215d6540849e Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 27 Apr 2024 13:40:41 -0500
Subject: [PATCH] Show simplified configuration view on installation

---
 src/photo/PhotosEmptyState.tsx   |   2 +-
 src/site/SiteChecklist.tsx       |   7 +-
 src/site/SiteChecklistClient.tsx | 314 ++++++++++++++++---------------
 3 files changed, 166 insertions(+), 157 deletions(-)

diff --git a/src/photo/PhotosEmptyState.tsx b/src/photo/PhotosEmptyState.tsx
index 7c495295..4c723560 100644
--- a/src/photo/PhotosEmptyState.tsx
+++ b/src/photo/PhotosEmptyState.tsx
@@ -27,7 +27,7 @@ export default function PhotosEmptyState() {
             {!IS_SITE_READY ? 'Finish Setup' : 'Setup Complete!'}
           </div>
           {!IS_SITE_READY
-            ? <SiteChecklist />
+            ? <SiteChecklist simplifiedView />
             : <div className="max-w-md text-center space-y-6">
               <div className="space-y-2">
                 <div>
diff --git a/src/site/SiteChecklist.tsx b/src/site/SiteChecklist.tsx
index 6dd042b6..5ff9344b 100644
--- a/src/site/SiteChecklist.tsx
+++ b/src/site/SiteChecklist.tsx
@@ -2,11 +2,16 @@ import { generateAuthSecret } from '@/auth';
 import SiteChecklistClient from './SiteChecklistClient';
 import { CONFIG_CHECKLIST_STATUS } from '@/site/config';
 
-export default async function SiteChecklist() {
+export default async function SiteChecklist({
+  simplifiedView,
+}: {
+  simplifiedView?: boolean
+}) {
   const secret = await generateAuthSecret();
   return (
     <SiteChecklistClient {...{
       ...CONFIG_CHECKLIST_STATUS,
+      simplifiedView,
       secret,
     }} />
   );
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index a60f7b87..00f647b1 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -50,9 +50,11 @@ export default function SiteChecklistClient({
   isOgTextBottomAligned,
   gridAspectRatio,
   hasGridAspectRatio,
+  simplifiedView,
   showRefreshButton,
   secret,
 }: ConfigChecklistStatus & {
+  simplifiedView?: boolean
   showRefreshButton?: boolean
   secret: string
 }) {
@@ -272,166 +274,168 @@ export default function SiteChecklistClient({
           {renderEnvVars(['NEXT_PUBLIC_SITE_DOMAIN'])}
         </ChecklistRow>
       </Checklist>
-      <Checklist
-        title="AI Text Generation"
-        icon={<HiSparkles />}
-        experimental
-        optional
-      >
-        <ChecklistRow
-          title="Add OpenAI Secret Key"
-          status={isAiTextGenerationEnabled}
-          isPending={isPendingPage}
-          optional
-        >
-          Store your OpenAI secret key in order to add experimental support
-          for AI-generated text descriptions and enable an invisible field
-          called {'"Semantic Description"'} used to support CMD-K search
-          {renderEnvVars(['OPENAI_SECRET_KEY'])}
-        </ChecklistRow>
-        <ChecklistRow
-          title="Enable Rate Limiting"
-          status={hasVercelKV}
-          isPending={isPendingPage}
-          optional
-        >
-          {renderLink(
-            // eslint-disable-next-line max-len
-            'https://vercel.com/docs/storage/vercel-kv/quickstart#create-a-kv-database',
-            'Create Vercel KV store',
-          )}
-          {' '}
-          and connect to project in order to enable rate limiting
-        </ChecklistRow>
-        <ChecklistRow
-          // eslint-disable-next-line max-len
-          title={`Auto-generated fields: ${aiTextAutoGeneratedFields.join(', ')}`}
-          status={hasAiTextAutoGeneratedFields}
-          isPending={isPendingPage}
-          optional
-        >
-          Comma-separated fields to auto-generate when
-          uploading photos. Accepted values: title, caption,
-          tags, description, all, or none (default is {'"all"'}).
-          {renderEnvVars(['AI_TEXT_AUTO_GENERATED_FIELDS'])}
-        </ChecklistRow>
-      </Checklist>
-      <Checklist
-        title="Settings"
-        icon={<BiCog size={16} />}
-        optional
-      >
-        <ChecklistRow
-          title="Pro mode"
-          status={isProModeEnabled}
-          isPending={isPendingPage}
-          optional
-        >
-          Set environment variable to {'"1"'} to enable
-          higher quality image storage:
-          {renderEnvVars(['NEXT_PUBLIC_PRO_MODE'])}
-        </ChecklistRow>
-        <ChecklistRow
-          title="Static Optimization"
-          status={isStaticallyOptimized}
-          isPending={isPendingPage}
-          optional
+      {!simplifiedView && <>
+        <Checklist
+          title="AI Text Generation"
+          icon={<HiSparkles />}
           experimental
-        >
-          Set environment variable to {'"1"'} to enable
-          static optimization, i.e., build pages ahead of time:
-          {renderEnvVars(['NEXT_PUBLIC_STATICALLY_OPTIMIZE'])}
-        </ChecklistRow>
-        <ChecklistRow
-          title="Image Blur"
-          status={isBlurEnabled}
-          isPending={isPendingPage}
           optional
         >
-          Set environment variable to {'"1"'} to prevent
-          image blur data being stored and displayed
-          {renderEnvVars(['NEXT_PUBLIC_BLUR_DISABLED'])}
-        </ChecklistRow>
-        <ChecklistRow
-          title="Geo privacy"
-          status={isGeoPrivacyEnabled}
-          isPending={isPendingPage}
+          <ChecklistRow
+            title="Add OpenAI Secret Key"
+            status={isAiTextGenerationEnabled}
+            isPending={isPendingPage}
+            optional
+          >
+            Store your OpenAI secret key in order to add experimental support
+            for AI-generated text descriptions and enable an invisible field
+            called {'"Semantic Description"'} used to support CMD-K search
+            {renderEnvVars(['OPENAI_SECRET_KEY'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Enable Rate Limiting"
+            status={hasVercelKV}
+            isPending={isPendingPage}
+            optional
+          >
+            {renderLink(
+              // eslint-disable-next-line max-len
+              'https://vercel.com/docs/storage/vercel-kv/quickstart#create-a-kv-database',
+              'Create Vercel KV store',
+            )}
+            {' '}
+            and connect to project in order to enable rate limiting
+          </ChecklistRow>
+          <ChecklistRow
+            // eslint-disable-next-line max-len
+            title={`Auto-generated fields: ${aiTextAutoGeneratedFields.join(', ')}`}
+            status={hasAiTextAutoGeneratedFields}
+            isPending={isPendingPage}
+            optional
+          >
+            Comma-separated fields to auto-generate when
+            uploading photos. Accepted values: title, caption,
+            tags, description, all, or none (default is {'"all"'}).
+            {renderEnvVars(['AI_TEXT_AUTO_GENERATED_FIELDS'])}
+          </ChecklistRow>
+        </Checklist>
+        <Checklist
+          title="Settings"
+          icon={<BiCog size={16} />}
           optional
         >
-          Set environment variable to {'"1"'} to disable
-          collection/display of location-based data
-          {renderEnvVars(['NEXT_PUBLIC_GEO_PRIVACY'])}
-        </ChecklistRow>
-        <ChecklistRow
-          title="Priority order"
-          status={isPriorityOrderEnabled}
-          isPending={isPendingPage}
-          optional
-        >
-          Set environment variable to {'"1"'} to prevent
-          priority order photo field affecting photo order
-          {renderEnvVars(['NEXT_PUBLIC_IGNORE_PRIORITY_ORDER'])}
-        </ChecklistRow>
-        <ChecklistRow
-          title="Public API"
-          status={isPublicApiEnabled}
-          isPending={isPendingPage}
-          optional
-        >
-          Set environment variable to {'"1"'} to enable
-          a public API available at <code>/api</code>:
-          {renderEnvVars(['NEXT_PUBLIC_PUBLIC_API'])}
-        </ChecklistRow>
-        <ChecklistRow
-          title="Show repo link"
-          status={showRepoLink}
-          isPending={isPendingPage}
-          optional
-        >
-          Set environment variable to {'"1"'} to hide footer link:
-          {renderEnvVars(['NEXT_PUBLIC_HIDE_REPO_LINK'])}
-        </ChecklistRow>
-        <ChecklistRow
-          title="Show Fujifilm simulations"
-          status={showFilmSimulations}
-          isPending={isPendingPage}
-          optional
-        >
-          Set environment variable to {'"1"'} to prevent
-          simulations showing up in <code>/grid</code> sidebar:
-          {renderEnvVars(['NEXT_PUBLIC_HIDE_FILM_SIMULATIONS'])}
-        </ChecklistRow>
-        <ChecklistRow
-          title="Show EXIF data"
-          status={showExifInfo}
-          isPending={isPendingPage}
-          optional
-        >
-          Set environment variable to {'"1"'} to hide EXIF data:
-          {renderEnvVars(['NEXT_PUBLIC_HIDE_EXIF_DATA'])}
-        </ChecklistRow>
-        <ChecklistRow
-          title={`Grid aspect ratio: ${gridAspectRatio}`}
-          status={hasGridAspectRatio}
-          isPending={isPendingPage}
-          optional
-        >
-          Set environment variable to any number to enforce aspect ratio
-          {' '}
-          (default is {'"1"'}, i.e., square)—set to {'"0"'} to disable:
-          {renderEnvVars(['NEXT_PUBLIC_GRID_ASPECT_RATIO'])}
-        </ChecklistRow>
-        <ChecklistRow
-          title="Legacy OG text alignment"
-          status={isOgTextBottomAligned}
-          isPending={isPendingPage}
-          optional
-        >
-          Set environment variable to {'"BOTTOM"'} to
-          keep OG image text bottom aligned (default is {'"top"'}):
-          {renderEnvVars(['NEXT_PUBLIC_OG_TEXT_ALIGNMENT'])}
-        </ChecklistRow>
-      </Checklist>
+          <ChecklistRow
+            title="Pro mode"
+            status={isProModeEnabled}
+            isPending={isPendingPage}
+            optional
+          >
+            Set environment variable to {'"1"'} to enable
+            higher quality image storage:
+            {renderEnvVars(['NEXT_PUBLIC_PRO_MODE'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Static Optimization"
+            status={isStaticallyOptimized}
+            isPending={isPendingPage}
+            optional
+            experimental
+          >
+            Set environment variable to {'"1"'} to enable
+            static optimization, i.e., build pages ahead of time:
+            {renderEnvVars(['NEXT_PUBLIC_STATICALLY_OPTIMIZE'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Image Blur"
+            status={isBlurEnabled}
+            isPending={isPendingPage}
+            optional
+          >
+            Set environment variable to {'"1"'} to prevent
+            image blur data being stored and displayed
+            {renderEnvVars(['NEXT_PUBLIC_BLUR_DISABLED'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Geo privacy"
+            status={isGeoPrivacyEnabled}
+            isPending={isPendingPage}
+            optional
+          >
+            Set environment variable to {'"1"'} to disable
+            collection/display of location-based data
+            {renderEnvVars(['NEXT_PUBLIC_GEO_PRIVACY'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Priority order"
+            status={isPriorityOrderEnabled}
+            isPending={isPendingPage}
+            optional
+          >
+            Set environment variable to {'"1"'} to prevent
+            priority order photo field affecting photo order
+            {renderEnvVars(['NEXT_PUBLIC_IGNORE_PRIORITY_ORDER'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Public API"
+            status={isPublicApiEnabled}
+            isPending={isPendingPage}
+            optional
+          >
+            Set environment variable to {'"1"'} to enable
+            a public API available at <code>/api</code>:
+            {renderEnvVars(['NEXT_PUBLIC_PUBLIC_API'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Show repo link"
+            status={showRepoLink}
+            isPending={isPendingPage}
+            optional
+          >
+            Set environment variable to {'"1"'} to hide footer link:
+            {renderEnvVars(['NEXT_PUBLIC_HIDE_REPO_LINK'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Show Fujifilm simulations"
+            status={showFilmSimulations}
+            isPending={isPendingPage}
+            optional
+          >
+            Set environment variable to {'"1"'} to prevent
+            simulations showing up in <code>/grid</code> sidebar:
+            {renderEnvVars(['NEXT_PUBLIC_HIDE_FILM_SIMULATIONS'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Show EXIF data"
+            status={showExifInfo}
+            isPending={isPendingPage}
+            optional
+          >
+            Set environment variable to {'"1"'} to hide EXIF data:
+            {renderEnvVars(['NEXT_PUBLIC_HIDE_EXIF_DATA'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title={`Grid aspect ratio: ${gridAspectRatio}`}
+            status={hasGridAspectRatio}
+            isPending={isPendingPage}
+            optional
+          >
+            Set environment variable to any number to enforce aspect ratio
+            {' '}
+            (default is {'"1"'}, i.e., square)—set to {'"0"'} to disable:
+            {renderEnvVars(['NEXT_PUBLIC_GRID_ASPECT_RATIO'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Legacy OG text alignment"
+            status={isOgTextBottomAligned}
+            isPending={isPendingPage}
+            optional
+          >
+            Set environment variable to {'"BOTTOM"'} to
+            keep OG image text bottom aligned (default is {'"top"'}):
+            {renderEnvVars(['NEXT_PUBLIC_OG_TEXT_ALIGNMENT'])}
+          </ChecklistRow>
+        </Checklist>
+      </>}
       {showRefreshButton &&
         <div className="py-4 space-y-4">
           <button onClick={refreshPage}>