From 47e2d2f91521466e0e672fce2d186cde34f412a2 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Tue, 24 Sep 2024 14:15:56 +0530
Subject: [PATCH] tweak

---
 web/apps/photos/src/pages/gallery.tsx | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx
index 96913963d4..c26c6a3827 100644
--- a/web/apps/photos/src/pages/gallery.tsx
+++ b/web/apps/photos/src/pages/gallery.tsx
@@ -183,6 +183,19 @@ export const GalleryContext = createContext<GalleryContextType>(
     defaultGalleryContext,
 );
 
+/**
+ * The default view for logged in users.
+ *
+ * I heard you like ascii art.
+ *
+ *        Navbar / Search         ^
+ *     ---------------------      |
+ *          Gallery Bar         sticky
+ *     ---------------------   ---/---
+ *       Photo List Header    scrollable
+ *     ---------------------      |
+ *           Photo List           v
+ */
 export default function Gallery() {
     const router = useRouter();
     const [user, setUser] = useState(null);
@@ -297,8 +310,6 @@ export default function Gallery() {
 
     const closeSidebar = () => setSidebarView(false);
     const openSidebar = () => setSidebarView(true);
-    const [photoListHeader, setPhotoListHeader] =
-        useState<TimeStampListItem>(null);
 
     const [exportModalView, setExportModalView] = useState(false);
 
@@ -322,7 +333,7 @@ export default function Gallery() {
         SearchOption | undefined
     >();
 
-    // If visible, what should the gallery bar show.
+    // If visible, what should the (sticky) gallery bar show.
     const [barMode, setBarMode] = useState<GalleryBarMode>("albums");
 
     // The currently selected person in the gallery bar (if any).
@@ -330,14 +341,18 @@ export default function Gallery() {
 
     const people = useSyncExternalStore(peopleSubscribe, peopleSnapshot);
 
+    const [isClipSearchResult, setIsClipSearchResult] =
+        useState<boolean>(false);
+
+    // The (non-sticky) header shown at the top of the gallery items.
+    const [photoListHeader, setPhotoListHeader] =
+        useState<TimeStampListItem>(null);
+
     const [
         filesDownloadProgressAttributesList,
         setFilesDownloadProgressAttributesList,
     ] = useState<FilesDownloadProgressAttributes[]>([]);
 
-    const [isClipSearchResult, setIsClipSearchResult] =
-        useState<boolean>(false);
-
     // Ensure that the keys in local storage are not malformed by verifying that
     // the recoveryKey can be decrypted with the masterKey.
     // Note: This is not bullet-proof.