From 091fbb2c9769e54ce245e5a4942f52b2767e7818 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 12 Aug 2024 13:55:54 -0400
Subject: [PATCH] Offer configuration for hiding 'untitled' fallback text

---
 README.md                        |  1 +
 src/photo/PhotoLarge.tsx         | 43 +++++++++++++++++++++++++-------
 src/site/SiteChecklistClient.tsx | 20 +++++++++++----
 src/site/config.ts               |  3 +++
 src/site/globals.css             |  4 +++
 5 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index f8848593..d17f0283 100644
--- a/README.md
+++ b/README.md
@@ -110,6 +110,7 @@ Application behavior can be changed by configuring the following environment var
 - `NEXT_PUBLIC_MATTE_PHOTOS = 1` constrains the size of each photo, and enables a surrounding border (potentially useful for photos with tall aspect ratios)
 - `NEXT_PUBLIC_BLUR_DISABLED = 1` prevents image blur data being stored and displayed (potentially useful for limiting Postgres usage)
 - `NEXT_PUBLIC_GEO_PRIVACY = 1` disables collection/display of location-based data (⚠️ re-compresses uploaded images in order to remove GPS information)
+- `NEXT_PUBLIC_HIDE_TITLE_FALLBACK_TEXT = 1` prevents showing "Untitled" for photos without titles
 - `NEXT_PUBLIC_IGNORE_PRIORITY_ORDER = 1` prevents `priority_order` field affecting photo order
 - `NEXT_PUBLIC_PUBLIC_API = 1` enables public API available at `/api`
 - `NEXT_PUBLIC_HIDE_REPO_LINK = 1` removes footer link to repo
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 3e561573..cda6ac5b 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -25,7 +25,10 @@ import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation';
 import { sortTags } from '@/tag';
 import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid';
 import PhotoLink from './PhotoLink';
-import { SHOULD_PREFETCH_ALL_LINKS } from '@/site/config';
+import {
+  SHOULD_PREFETCH_ALL_LINKS,
+  SHOW_PHOTO_TITLE_FALLBACK_TEXT,
+} from '@/site/config';
 import AdminPhotoMenuClient from '@/admin/AdminPhotoMenuClient';
 import { RevalidatePhoto } from './InfinitePhotoScroll';
 import { useRef } from 'react';
@@ -80,7 +83,21 @@ export default function PhotoLarge({
 
   useOnVisible(ref, onVisible);
 
-  const { arePhotosMatted } = useAppState();
+  const { arePhotosMatted, isUserSignedIn } = useAppState();
+
+  const hasTitleContent =
+    photo.title ||
+    SHOW_PHOTO_TITLE_FALLBACK_TEXT ||
+    photo.caption;
+
+  const hasMetaContent =
+    showCameraContent ||
+    showTagsContent ||
+    showExifContent;
+
+  const hasNonDateContent =
+    hasTitleContent ||
+    hasMetaContent;
 
   return (
     <SiteGrid
@@ -124,11 +141,12 @@ export default function PhotoLarge({
           {/* Meta */}
           <div className="pr-2 md:pr-0">
             <div className="md:relative flex gap-2 items-start">
-              <PhotoLink
-                photo={photo}
-                className="font-bold uppercase flex-grow"
-                prefetch={prefetch}
-              />
+              {(photo.title || SHOW_PHOTO_TITLE_FALLBACK_TEXT) &&
+                <PhotoLink
+                  photo={photo}
+                  className="font-bold uppercase flex-grow"
+                  prefetch={prefetch}
+                />}
               <div className="absolute right-0 translate-y-[-4px] z-10">
                 <AdminPhotoMenuClient {...{
                   photo,
@@ -161,7 +179,10 @@ export default function PhotoLarge({
             </div>
           </div>
           {/* EXIF Data */}
-          <div className="space-y-baseline">
+          <div className={clsx(
+            'space-y-baseline',
+            !hasTitleContent && 'md:-mt-baseline',
+          )}>
             {showExifContent &&
               <>
                 <ul className="text-medium">
@@ -201,7 +222,11 @@ export default function PhotoLarge({
             )}>
               <PhotoDate
                 photo={photo}
-                className="text-medium"
+                className={clsx(
+                  'text-medium',
+                  // Prevent date collision with admin button
+                  !hasNonDateContent && isUserSignedIn && 'md:pr-7',
+                )}
               />
               {shouldShare &&
                 <ShareButton
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index f5870c09..b18c7202 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -59,6 +59,7 @@ export default function SiteChecklistClient({
   arePhotosMatted,
   isBlurEnabled,
   isGeoPrivacyEnabled,
+  showPhotoTitleFallbackText,
   isPriorityOrderEnabled,
   isAiTextGenerationEnabled,
   aiTextAutoGeneratedFields,
@@ -387,7 +388,7 @@ export default function SiteChecklistClient({
               })}
               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
+              called {'"Semantic Description"'} used to support CMD-K search:
               {renderEnvVars(['OPENAI_SECRET_KEY'])}
             </ChecklistRow>
             <ChecklistRow
@@ -417,7 +418,7 @@ export default function SiteChecklistClient({
             >
               Comma-separated fields to auto-generate when
               uploading photos. Accepted values: title, caption,
-              tags, description, all, or none (default is {'"all"'}).
+              tags, description, all, or none (default is {'"all"'}):
               {renderEnvVars(['AI_TEXT_AUTO_GENERATED_FIELDS'])}
             </ChecklistRow>
           </Checklist>
@@ -491,7 +492,7 @@ export default function SiteChecklistClient({
               optional
             >
               Set environment variable to {'"1"'} to prevent
-              image blur data being stored and displayed
+              image blur data being stored and displayed:
               {renderEnvVars(['NEXT_PUBLIC_BLUR_DISABLED'])}
             </ChecklistRow>
             <ChecklistRow
@@ -500,16 +501,25 @@ export default function SiteChecklistClient({
               optional
             >
               Set environment variable to {'"1"'} to disable
-              collection/display of location-based data
+              collection/display of location-based data:
               {renderEnvVars(['NEXT_PUBLIC_GEO_PRIVACY'])}
             </ChecklistRow>
+            <ChecklistRow
+              title="Show photo title fallback text"
+              status={showPhotoTitleFallbackText}
+              optional
+            >
+              Set environment variable to {'"1"'} to prevent
+              showing {'"Untitled"'} for photos without titles:
+              {renderEnvVars(['NEXT_PUBLIC_HIDE_TITLE_FALLBACK_TEXT'])}
+            </ChecklistRow>
             <ChecklistRow
               title="Priority order"
               status={isPriorityOrderEnabled}
               optional
             >
               Set environment variable to {'"1"'} to prevent
-              priority order photo field affecting photo order
+              priority order photo field affecting photo order:
               {renderEnvVars(['NEXT_PUBLIC_IGNORE_PRIORITY_ORDER'])}
             </ChecklistRow>
             <ChecklistRow
diff --git a/src/site/config.ts b/src/site/config.ts
index a7097cc6..11781c9e 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -139,6 +139,8 @@ export const BLUR_ENABLED =
   process.env.NEXT_PUBLIC_BLUR_DISABLED !== '1';
 export const GEO_PRIVACY_ENABLED =
   process.env.NEXT_PUBLIC_GEO_PRIVACY === '1';
+export const SHOW_PHOTO_TITLE_FALLBACK_TEXT =
+  process.env.NEXT_PUBLIC_HIDE_TITLE_FALLBACK_TEXT !== '1';
 export const AI_TEXT_GENERATION_ENABLED =
   Boolean(process.env.OPENAI_SECRET_KEY);
 export const AI_TEXT_AUTO_GENERATED_FIELDS = parseAiAutoGeneratedFieldsText(
@@ -209,6 +211,7 @@ export const CONFIG_CHECKLIST_STATUS = {
   arePhotosMatted: MATTE_PHOTOS,
   isBlurEnabled: BLUR_ENABLED,
   isGeoPrivacyEnabled: GEO_PRIVACY_ENABLED,
+  showPhotoTitleFallbackText: SHOW_PHOTO_TITLE_FALLBACK_TEXT,
   isAiTextGenerationEnabled: AI_TEXT_GENERATION_ENABLED,
   aiTextAutoGeneratedFields: process.env.AI_TEXT_AUTO_GENERATED_FIELDS
     ? AI_TEXT_AUTO_GENERATED_FIELDS.length === 0
diff --git a/src/site/globals.css b/src/site/globals.css
index a522d8a8..c7eccf13 100644
--- a/src/site/globals.css
+++ b/src/site/globals.css
@@ -186,6 +186,10 @@
     @apply
       max-h-[1.1875rem] md:max-h-[1.25rem]
   }
+  .-mt-baseline {
+    @apply
+      -mt-[1.1875rem] md:-mt-[1.25rem]
+  }
   .bg-baseline-grid {
     @apply
       bg-[repeating-linear-gradient(to_bottom,#eee,#eee_1px,transparent_1px,transparent_1.1875rem)]