From 689f58c442bd34916101b6ef82daa84b2eb24b2c Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 10 Feb 2024 16:36:36 -0600
Subject: [PATCH] Simplify admin checklist

---
 src/components/Checklist.tsx     | 10 ++++++---
 src/components/ChecklistRow.tsx  |  1 -
 src/site/SiteChecklistClient.tsx | 37 +++++++++++++++++---------------
 src/site/config.ts               |  4 ++--
 4 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/Checklist.tsx b/src/components/Checklist.tsx
index 811e9b46..cb80dded 100644
--- a/src/components/Checklist.tsx
+++ b/src/components/Checklist.tsx
@@ -4,10 +4,12 @@ import { clsx } from 'clsx/lite';
 export default function Checklist({
   title,
   icon,
+  optional,
   children,
 }: {
   title: string
   icon?: ReactNode
+  optional?: boolean
   children: ReactNode
 }) {
   return (
@@ -15,11 +17,13 @@ export default function Checklist({
       <div className={clsx(
         'flex items-center gap-3',
         'text-gray-600 dark:text-gray-300',
-        'pl-[18px] mb-3',
+        'pl-[18px] mb-3 text-lg',
       )}>
         {icon}
-        <div className="text-lg">
-          {title}
+        <div className="flex gap-1.5">
+          <div>{title}</div>
+          {optional &&
+            <div className="text-dim">(Optional)</div>}
         </div>
       </div>
       <div className={clsx(
diff --git a/src/components/ChecklistRow.tsx b/src/components/ChecklistRow.tsx
index f7f3cdc1..10b91f5a 100644
--- a/src/components/ChecklistRow.tsx
+++ b/src/components/ChecklistRow.tsx
@@ -27,7 +27,6 @@ export default function ChecklistRow({
       <div className="flex flex-col min-w-0">
         <div className="font-bold dark:text-gray-300">
           {title}
-          {optional && ' (optional)'}
         </div>
         <div>
           {children}
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index e69b363d..7b08db87 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -29,7 +29,7 @@ export default function SiteChecklistClient({
   hasAwsS3Storage,
   hasMultipleStorageProviders,
   currentStorage,
-  hasAuth,
+  hasAuthSecret,
   hasAdminUser,
   hasTitle,
   hasDomain,
@@ -198,26 +198,27 @@ export default function SiteChecklistClient({
       >
         <ChecklistRow
           title="Setup auth"
-          status={hasAuth}
+          status={hasAuthSecret}
           isPending={isPendingPage}
         >
           Store auth secret in environment variable:
-          <div className="overflow-x-auto">
-            <InfoBlock className="my-1.5 inline-flex" padding="tight">
-              <div className="flex flex-nowrap items-center gap-4">
-                <span>{secret}</span>
-                <div className="flex items-center gap-0.5">
-                  {renderCopyButton('Secret', secret)}
-                  <IconButton
-                    icon={<BiRefresh size={18} />}
-                    onClick={refreshSecret}
-                    isLoading={isPendingSecret}
-                    spinnerColor="text"
-                  />
+          {!hasAuthSecret &&
+            <div className="overflow-x-auto">
+              <InfoBlock className="my-1.5 inline-flex" padding="tight">
+                <div className="flex flex-nowrap items-center gap-4">
+                  <span>{secret}</span>
+                  <div className="flex items-center gap-0.5">
+                    {renderCopyButton('Secret', secret)}
+                    <IconButton
+                      icon={<BiRefresh size={18} />}
+                      onClick={refreshSecret}
+                      isLoading={isPendingSecret}
+                      spinnerColor="text"
+                    />
+                  </div>
                 </div>
-              </div>
-            </InfoBlock>
-          </div>
+              </InfoBlock>
+            </div>}
           {renderEnvVars(['AUTH_SECRET'])}
         </ChecklistRow>
         <ChecklistRow
@@ -237,6 +238,7 @@ export default function SiteChecklistClient({
       <Checklist
         title="Content"
         icon={<BiPencil size={16} />}
+        optional
       >
         <ChecklistRow
           title="Add title"
@@ -260,6 +262,7 @@ export default function SiteChecklistClient({
       <Checklist
         title="Settings"
         icon={<BiCog size={16} />}
+        optional
       >
         <ChecklistRow
           title="Pro Mode"
diff --git a/src/site/config.ts b/src/site/config.ts
index 8ced3013..c4997ce2 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -110,7 +110,7 @@ export const CONFIG_CHECKLIST_STATUS = {
     HAS_AWS_S3_STORAGE,
   hasMultipleStorageProviders: HAS_MULTIPLE_STORAGE_PROVIDERS,
   currentStorage: CURRENT_STORAGE,
-  hasAuth: (process.env.AUTH_SECRET ?? '').length > 0,
+  hasAuthSecret: (process.env.AUTH_SECRET ?? '').length > 0,
   hasAdminUser: (
     (process.env.ADMIN_EMAIL ?? '').length > 0 &&
     (process.env.ADMIN_PASSWORD ?? '').length > 0
@@ -134,5 +134,5 @@ export type ConfigChecklistStatus = typeof CONFIG_CHECKLIST_STATUS;
 export const IS_SITE_READY =
   CONFIG_CHECKLIST_STATUS.hasPostgres &&
   CONFIG_CHECKLIST_STATUS.hasStorage &&
-  CONFIG_CHECKLIST_STATUS.hasAuth &&
+  CONFIG_CHECKLIST_STATUS.hasAuthSecret &&
   CONFIG_CHECKLIST_STATUS.hasAdminUser;