From 4cd29ed6861ef4803b7fb0a7a28fe30aec794ab3 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 10 Feb 2025 19:29:48 -0600
Subject: [PATCH 1/2] Simplify useImageZoomControls hook

---
 src/components/image/useImageZoomControls.ts | 49 ++++++++++----------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/image/useImageZoomControls.ts b/src/components/image/useImageZoomControls.ts
index a3471672..6c192250 100644
--- a/src/components/image/useImageZoomControls.ts
+++ b/src/components/image/useImageZoomControls.ts
@@ -21,32 +21,27 @@ export default function useImageZoomControls(
 
   useMetaThemeColor({ colorLight });
 
-  const open = useCallback(() => {
-    viewerRef.current?.show();
-  }, [viewerRef]);
+  const open = useCallback(() =>
+    viewerRef.current?.show(), []);
 
-  const close = useCallback(() => {
-    viewerRef.current?.hide();
-  }, [viewerRef]);
+  const close = useCallback(() =>
+    viewerRef.current?.hide(), []);
 
-  const zoomTo = useCallback((zoomLevel = 1) => {
-    viewerRef.current?.zoomTo(zoomLevel);
-  }, [viewerRef]);
+  const zoomTo = useCallback((zoomLevel = 1) =>
+    viewerRef.current?.zoomTo(zoomLevel), []);
 
   const reset = useCallback(() => {
     setZoomLevel(1);
     viewerRef.current?.reset();
-  }, [viewerRef]);
+  }, []);
 
   // On 'F' keydown, toggle fullscreen
   const handleKeyDown = useCallback(() => {
-    if (shouldExpandOnFKeydown) {
-      viewerRef.current?.show();
-    }
-  }, [shouldExpandOnFKeydown]);
+    if (shouldExpandOnFKeydown) { open(); }
+  }, [shouldExpandOnFKeydown, open]);
   useKeydownHandler(handleKeyDown, ['F']);
 
-  useEffect(() => {
+  const initialize = useCallback(() => {
     if (imageRef.current && isEnabled) {
       viewerRef.current = new Viewer(imageRef.current, {
         navbar: false,
@@ -61,6 +56,7 @@ export default function useImageZoomControls(
             (target as any).viewer.viewer as HTMLDivElement;
         },
         url: (image: HTMLImageElement) => {
+          // Addresses Safari bug where images don't load
           image.loading = 'eager';
           return image.src;
         },
@@ -69,9 +65,8 @@ export default function useImageZoomControls(
           setColorLight('#000');
         },
         hide: () => {
-          setTimeout(() => {
-            setColorLight(undefined);
-          }, 300);
+          // Optimizes Safari status bar animation
+          setTimeout(() => setColorLight(undefined), 300);
         },
         hidden: () => {
           setShouldRespondToKeyboardCommands?.(true);
@@ -80,20 +75,26 @@ export default function useImageZoomControls(
           setZoomLevel(ratio);
         },
       });
-
-      return () => {
-        viewerRef.current?.destroy();
-        viewerRef.current = null;
-      };
     }
   }, [
     imageRef,
     isEnabled,
-    zoomTo,
     setShouldRespondToKeyboardCommands,
   ]);
 
+  const cleanUp = useCallback(() => {
+    viewerRef.current?.destroy();
+    viewerRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    initialize();
+    return cleanUp;
+  }, [initialize, cleanUp]);
+
   return {
+    initialize,
+    cleanUp,
     open,
     close,
     reset,

From 956b9e6079e44651cc1d30ad42e5a68ce555c517 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Mon, 10 Feb 2025 19:52:05 -0600
Subject: [PATCH 2/2] Fix border glitch when editing tags

---
 src/admin/AdminUploadsTable.tsx | 2 +-
 src/photo/PhotoLightbox.tsx     | 2 +-
 src/photo/PhotoSmall.tsx        | 2 +-
 tailwind.css                    | 7 ++-----
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/admin/AdminUploadsTable.tsx b/src/admin/AdminUploadsTable.tsx
index da7ea555..edeb0603 100644
--- a/src/admin/AdminUploadsTable.tsx
+++ b/src/admin/AdminUploadsTable.tsx
@@ -49,7 +49,7 @@ export default function AdminUploadsTable({
                   aspectRatio={3.0 / 2.0}
                   className={clsx(
                     'rounded-[3px] overflow-hidden',
-                    'border-subtle',
+                    'border-main',
                   )}
                 />
               </div>
diff --git a/src/photo/PhotoLightbox.tsx b/src/photo/PhotoLightbox.tsx
index 478ab1d8..7566f7f8 100644
--- a/src/photo/PhotoLightbox.tsx
+++ b/src/photo/PhotoLightbox.tsx
@@ -25,7 +25,7 @@ export default function PhotoLightbox({
 
   return (
     <div className={clsx(
-      'border dark:border-gray-800 p-1.5 lg:p-2 rounded-md',
+      'border-main p-1.5 lg:p-2 rounded-md',
       'bg-gray-50 dark:bg-gray-950',
     )}>
       <PhotoGrid
diff --git a/src/photo/PhotoSmall.tsx b/src/photo/PhotoSmall.tsx
index 9e7143d4..2c5291c8 100644
--- a/src/photo/PhotoSmall.tsx
+++ b/src/photo/PhotoSmall.tsx
@@ -43,7 +43,7 @@ export default function PhotoSmall({
         selected && 'brightness-50',
         'min-w-[50px]',
         'rounded-[3px] overflow-hidden',
-        'border-subtle',
+        'border-main',
       )}
       prefetch={prefetch}
     >
diff --git a/tailwind.css b/tailwind.css
index efdcecde..d02e2a8b 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -121,11 +121,8 @@
 }
 /* Border */
 @utility border-main {
-  @apply border-gray-200 dark:border-gray-700
-}
-@utility border-subtle {
   @apply
-    border border-gray-200 dark:border-gray-800
+    border border-gray-200 dark:border-gray-700
 }
 /* Background */
 @utility bg-main {
@@ -304,7 +301,7 @@
 @layer components {
   .component-surface {
     @apply
-      bg-content border border-main
+      bg-content border-main
       rounded-lg
   }
 }