From 1c249a6a61c9cbedc4fed76d40e85c7afa6a2e96 Mon Sep 17 00:00:00 2001
From: ankitsejwal <ankit@sejw.al>
Date: Wed, 1 Jul 2026 12:46:32 +0530
Subject: [PATCH 1/6] Enclose the desktop photo sidebar in a subtle card

---
 apps/web/src/routes/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index a922819..5af03a8 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -29,7 +29,7 @@ function Home() {
       </header>
 
       <div className="grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)_300px] lg:items-start">
-        <aside className="flex flex-col lg:self-stretch">
+        <aside className="flex flex-col lg:self-stretch lg:rounded-lg lg:bg-black/[0.03] lg:p-3 lg:dark:bg-white/[0.04]">
           <PhotoSidebar />
         </aside>
         <div className="min-w-0">

From 2bed5cdb07ee98035fd403141a397e2c2e632cfb Mon Sep 17 00:00:00 2001
From: ankitsejwal <ankit@sejw.al>
Date: Wed, 1 Jul 2026 12:50:44 +0530
Subject: [PATCH 2/6] Extract a shared photo-picker hook

The hidden file input + addFiles wiring was copy-pasted across the
sidebar and hero (and about to be again for the mobile FAB and tile).
Pull it into useAddPhotos + a shared PHOTO_ACCEPT constant.
---
 apps/web/src/components/empty-hero.tsx    | 25 ++++++----------------
 apps/web/src/components/photo-sidebar.tsx | 19 ++++++-----------
 apps/web/src/hooks/use-add-photos.ts      | 26 +++++++++++++++++++++++
 apps/web/src/lib/upload.ts                |  3 +++
 4 files changed, 42 insertions(+), 31 deletions(-)
 create mode 100644 apps/web/src/hooks/use-add-photos.ts
 create mode 100644 apps/web/src/lib/upload.ts

diff --git a/apps/web/src/components/empty-hero.tsx b/apps/web/src/components/empty-hero.tsx
index a3f628c..d507540 100644
--- a/apps/web/src/components/empty-hero.tsx
+++ b/apps/web/src/components/empty-hero.tsx
@@ -1,11 +1,8 @@
-import { useRef } from "react";
 import { ImagePlus } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import { usePhotoStore } from "@/stores/photo-store";
-
-const ACCEPT =
-  "image/jpeg,image/png,image/webp,image/heic,image/heif,.jpg,.jpeg,.png,.webp,.heic,.heif";
+import { useAddPhotos } from "@/hooks/use-add-photos";
+import { PHOTO_ACCEPT } from "@/lib/upload";
 
 /** A few illustrative polaroids — pure CSS, no image assets, so it loads instantly. */
 const SAMPLES = [
@@ -16,8 +13,7 @@ const SAMPLES = [
 
 /** Shown in the centre column before any photos are added. */
 export function EmptyHero() {
-  const addFiles = usePhotoStore((state) => state.addFiles);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const { inputRef, open, onChange } = useAddPhotos();
 
   return (
     <div className="flex min-h-[60svh] flex-col items-center justify-center gap-9 px-4 text-center">
@@ -56,21 +52,12 @@ export function EmptyHero() {
         <input
           ref={inputRef}
           type="file"
-          accept={ACCEPT}
+          accept={PHOTO_ACCEPT}
           multiple
           hidden
-          onChange={(event) => {
-            const files = Array.from(event.target.files ?? []);
-            if (files.length > 0) addFiles(files);
-            event.target.value = "";
-          }}
+          onChange={onChange}
         />
-        <Button
-          type="button"
-          size="lg"
-          className="gap-2"
-          onClick={() => inputRef.current?.click()}
-        >
+        <Button type="button" size="lg" className="gap-2" onClick={open}>
           <ImagePlus className="size-4" />
           Add photos
         </Button>
diff --git a/apps/web/src/components/photo-sidebar.tsx b/apps/web/src/components/photo-sidebar.tsx
index 0902ec6..c728f82 100644
--- a/apps/web/src/components/photo-sidebar.tsx
+++ b/apps/web/src/components/photo-sidebar.tsx
@@ -1,14 +1,13 @@
-import { useCallback, useRef } from 'react'
+import { useCallback } from 'react'
 import { ImagePlus } from 'lucide-react'
 
 import { PhotoStrip } from '@/components/photo-strip'
 import { Button } from '@/components/ui/button'
+import { useAddPhotos } from '@/hooks/use-add-photos'
 import { useWindowFileDrop } from '@/hooks/use-window-file-drop'
+import { PHOTO_ACCEPT } from '@/lib/upload'
 import { usePhotoStore } from '@/stores/photo-store'
 
-const ACCEPT =
-  'image/jpeg,image/png,image/webp,image/heic,image/heif,.jpg,.jpeg,.png,.webp,.heic,.heif'
-
 /**
  * Left rail: the reorderable photo strip, with an "Add photos" button pinned
  * to the bottom. The button only appears once there's at least one photo —
@@ -19,7 +18,7 @@ const ACCEPT =
 export function PhotoSidebar() {
   const addFiles = usePhotoStore((state) => state.addFiles)
   const hasPhotos = usePhotoStore((state) => state.photos.length > 0)
-  const inputRef = useRef<HTMLInputElement>(null)
+  const { inputRef, open, onChange } = useAddPhotos()
 
   const onFiles = useCallback((files: File[]) => addFiles(files), [addFiles])
   const dragging = useWindowFileDrop(onFiles)
@@ -29,14 +28,10 @@ export function PhotoSidebar() {
       <input
         ref={inputRef}
         type="file"
-        accept={ACCEPT}
+        accept={PHOTO_ACCEPT}
         multiple
         hidden
-        onChange={(event) => {
-          const files = Array.from(event.target.files ?? [])
-          if (files.length > 0) addFiles(files)
-          event.target.value = ''
-        }}
+        onChange={onChange}
       />
 
       <PhotoStrip />
@@ -45,7 +40,7 @@ export function PhotoSidebar() {
         <div className="mt-auto pt-2 lg:sticky lg:bottom-4">
           <Button
             type="button"
-            onClick={() => inputRef.current?.click()}
+            onClick={open}
             className="w-full gap-2 shadow-sm"
           >
             <ImagePlus className="size-4" />
diff --git a/apps/web/src/hooks/use-add-photos.ts b/apps/web/src/hooks/use-add-photos.ts
new file mode 100644
index 0000000..b30aecf
--- /dev/null
+++ b/apps/web/src/hooks/use-add-photos.ts
@@ -0,0 +1,26 @@
+import { type ChangeEvent, useCallback, useRef } from "react";
+
+import { usePhotoStore } from "@/stores/photo-store";
+
+/**
+ * Shared wiring for every "add photos" affordance (sidebar button, hero CTA,
+ * mobile FAB, filmstrip tile): a hidden file input plus an `open()` trigger.
+ * Render the input with {@link PHOTO_ACCEPT} and spread `inputRef`/`onChange`.
+ */
+export function useAddPhotos() {
+  const addFiles = usePhotoStore((state) => state.addFiles);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const open = useCallback(() => inputRef.current?.click(), []);
+
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files ?? []);
+      if (files.length > 0) addFiles(files);
+      event.target.value = "";
+    },
+    [addFiles],
+  );
+
+  return { inputRef, open, onChange };
+}
diff --git a/apps/web/src/lib/upload.ts b/apps/web/src/lib/upload.ts
new file mode 100644
index 0000000..81f4aa2
--- /dev/null
+++ b/apps/web/src/lib/upload.ts
@@ -0,0 +1,3 @@
+/** Image types the photo picker and drop targets accept. */
+export const PHOTO_ACCEPT =
+  "image/jpeg,image/png,image/webp,image/heic,image/heif,.jpg,.jpeg,.png,.webp,.heic,.heif";

From 16bfd29dba8a92900b7f56a4843596f8c405c40b Mon Sep 17 00:00:00 2001
From: ankitsejwal <ankit@sejw.al>
Date: Wed, 1 Jul 2026 12:50:44 +0530
Subject: [PATCH 3/6] Add mobile photo filmstrip and add-photos FAB

On phones the vertical photo list pushed the sheet far down the page.
Below lg, hide the sidebar and show a horizontal, sideways-scrolling
filmstrip (a + tile first, then draggable thumbnails) so any number of
photos stays one row tall, plus a floating add-photos FAB. Desktop keeps
the three-column layout untouched.
---
 apps/web/src/components/add-photos-fab.tsx  |  34 +++++
 apps/web/src/components/photo-filmstrip.tsx | 143 ++++++++++++++++++++
 apps/web/src/routes/index.tsx               |  11 +-
 3 files changed, 187 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/components/add-photos-fab.tsx
 create mode 100644 apps/web/src/components/photo-filmstrip.tsx

diff --git a/apps/web/src/components/add-photos-fab.tsx b/apps/web/src/components/add-photos-fab.tsx
new file mode 100644
index 0000000..028a2d4
--- /dev/null
+++ b/apps/web/src/components/add-photos-fab.tsx
@@ -0,0 +1,34 @@
+import { ImagePlus } from "lucide-react";
+
+import { useAddPhotos } from "@/hooks/use-add-photos";
+import { PHOTO_ACCEPT } from "@/lib/upload";
+import { cn } from "@/lib/utils";
+
+/** Floating add-photos button — the primary add action on small screens. */
+export function AddPhotosFab({ className }: { className?: string }) {
+  const { inputRef, open, onChange } = useAddPhotos();
+
+  return (
+    <>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={PHOTO_ACCEPT}
+        multiple
+        hidden
+        onChange={onChange}
+      />
+      <button
+        type="button"
+        onClick={open}
+        aria-label="Add photos"
+        className={cn(
+          "bg-primary text-primary-foreground fixed right-4 bottom-4 z-40 flex size-14 items-center justify-center rounded-full shadow-lg transition-transform active:scale-95",
+          className,
+        )}
+      >
+        <ImagePlus className="size-6" />
+      </button>
+    </>
+  );
+}
diff --git a/apps/web/src/components/photo-filmstrip.tsx b/apps/web/src/components/photo-filmstrip.tsx
new file mode 100644
index 0000000..987291f
--- /dev/null
+++ b/apps/web/src/components/photo-filmstrip.tsx
@@ -0,0 +1,143 @@
+import {
+  DndContext,
+  type DragEndEvent,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  horizontalListSortingStrategy,
+  useSortable,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ImagePlus, Loader2, X } from "lucide-react";
+
+import { useAddPhotos } from "@/hooks/use-add-photos";
+import { type Photo } from "@/lib/photos";
+import { PHOTO_ACCEPT } from "@/lib/upload";
+import { cn } from "@/lib/utils";
+import { useEditorStore } from "@/stores/editor-store";
+import { usePhotoStore } from "@/stores/photo-store";
+
+/**
+ * Mobile photo tray: a horizontal, sideways-scrolling row so any number of
+ * photos stays one thumbnail tall and never pushes the sheet down the page.
+ * Leads with a "+" tile; drag thumbnails to reorder, tap to select, × to remove.
+ */
+export function PhotoFilmstrip({ className }: { className?: string }) {
+  const photos = usePhotoStore((state) => state.photos);
+  const reorder = usePhotoStore((state) => state.reorder);
+  const { inputRef, open, onChange } = useAddPhotos();
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      reorder(String(active.id), String(over.id));
+    }
+  };
+
+  return (
+    <div className={cn("flex items-center gap-2 overflow-x-auto pb-1", className)}>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={PHOTO_ACCEPT}
+        multiple
+        hidden
+        onChange={onChange}
+      />
+      <button
+        type="button"
+        onClick={open}
+        aria-label="Add photos"
+        className="border-input text-muted-foreground hover:border-ring hover:text-foreground flex size-16 shrink-0 items-center justify-center rounded-lg border border-dashed transition-colors"
+      >
+        <ImagePlus className="size-5" />
+      </button>
+
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext
+          items={photos.map((photo) => photo.id)}
+          strategy={horizontalListSortingStrategy}
+        >
+          {photos.map((photo) => (
+            <FilmstripItem key={photo.id} photo={photo} />
+          ))}
+        </SortableContext>
+      </DndContext>
+    </div>
+  );
+}
+
+function FilmstripItem({ photo }: { photo: Photo }) {
+  const remove = usePhotoStore((state) => state.remove);
+  const selectedId = useEditorStore((state) => state.selectedId);
+  const select = useEditorStore((state) => state.select);
+  const selected = selectedId === photo.id;
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: photo.id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn("group relative shrink-0", isDragging && "z-10 opacity-60")}
+    >
+      <button
+        type="button"
+        onClick={() => select(selected ? null : photo.id)}
+        {...attributes}
+        {...listeners}
+        aria-label={`Select ${photo.name}`}
+        className={cn(
+          "block size-16 touch-none overflow-hidden rounded-lg border-2 transition-colors",
+          selected ? "border-primary" : "border-transparent",
+        )}
+      >
+        <img
+          src={photo.url}
+          alt={photo.name}
+          className="size-full object-cover"
+        />
+      </button>
+
+      {photo.enriching && (
+        <span className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-lg bg-black/30">
+          <Loader2 className="size-4 animate-spin text-white" />
+        </span>
+      )}
+
+      <button
+        type="button"
+        aria-label={`Remove ${photo.name}`}
+        onClick={() => {
+          if (selected) select(null);
+          remove(photo.id);
+        }}
+        className={cn(
+          "bg-background text-muted-foreground hover:text-foreground ring-border absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full opacity-0 shadow ring-1 transition-opacity group-hover:opacity-100 focus-visible:opacity-100",
+          selected && "opacity-100",
+        )}
+      >
+        <X className="size-3" />
+      </button>
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 5af03a8..7d7548a 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -1,16 +1,21 @@
 import { createFileRoute } from '@tanstack/react-router'
 
 import { A4Preview } from '@/components/a4-preview'
+import { AddPhotosFab } from '@/components/add-photos-fab'
 import { OptionsPanel } from '@/components/options-panel'
+import { PhotoFilmstrip } from '@/components/photo-filmstrip'
 import { PhotoSidebar } from '@/components/photo-sidebar'
 import { ProjectControls } from '@/components/project-controls'
 import { ThemeToggle } from '@/components/theme-toggle'
+import { usePhotoStore } from '@/stores/photo-store'
 
 export const Route = createFileRoute('/')({
   component: Home,
 })
 
 function Home() {
+  const hasPhotos = usePhotoStore((state) => state.photos.length > 0)
+
   return (
     <main className="mx-auto flex min-h-svh w-full max-w-7xl flex-col gap-5 p-4 sm:p-6">
       <header className="flex items-start justify-between gap-3">
@@ -28,8 +33,10 @@ function Home() {
         </div>
       </header>
 
+      {hasPhotos && <PhotoFilmstrip className="lg:hidden" />}
+
       <div className="grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)_300px] lg:items-start">
-        <aside className="flex flex-col lg:self-stretch lg:rounded-lg lg:bg-black/[0.03] lg:p-3 lg:dark:bg-white/[0.04]">
+        <aside className="hidden lg:flex lg:flex-col lg:self-stretch lg:rounded-lg lg:bg-black/[0.03] lg:p-3 lg:dark:bg-white/[0.04]">
           <PhotoSidebar />
         </aside>
         <div className="min-w-0">
@@ -39,6 +46,8 @@ function Home() {
           <OptionsPanel />
         </aside>
       </div>
+
+      {hasPhotos && <AddPhotosFab className="lg:hidden" />}
     </main>
   )
 }

From 22e6219f7e383d9028a099bbb1013702528eedb0 Mon Sep 17 00:00:00 2001
From: ankitsejwal <ankit@sejw.al>
Date: Wed, 1 Jul 2026 12:52:57 +0530
Subject: [PATCH 4/6] Only show the desktop sidebar card when it holds photos

---
 apps/web/src/routes/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 7d7548a..e2f0bf8 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -7,6 +7,7 @@ import { PhotoFilmstrip } from '@/components/photo-filmstrip'
 import { PhotoSidebar } from '@/components/photo-sidebar'
 import { ProjectControls } from '@/components/project-controls'
 import { ThemeToggle } from '@/components/theme-toggle'
+import { cn } from '@/lib/utils'
 import { usePhotoStore } from '@/stores/photo-store'
 
 export const Route = createFileRoute('/')({
@@ -36,7 +37,13 @@ function Home() {
       {hasPhotos && <PhotoFilmstrip className="lg:hidden" />}
 
       <div className="grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)_300px] lg:items-start">
-        <aside className="hidden lg:flex lg:flex-col lg:self-stretch lg:rounded-lg lg:bg-black/[0.03] lg:p-3 lg:dark:bg-white/[0.04]">
+        <aside
+          className={cn(
+            'hidden lg:flex lg:flex-col lg:self-stretch',
+            hasPhotos &&
+              'lg:rounded-lg lg:bg-black/[0.03] lg:p-3 lg:dark:bg-white/[0.04]',
+          )}
+        >
           <PhotoSidebar />
         </aside>
         <div className="min-w-0">

From dd6f5998bd24a4fbbb355467a0cb4c2dd44fafb5 Mon Sep 17 00:00:00 2001
From: ankitsejwal <ankit@sejw.al>
Date: Wed, 1 Jul 2026 12:52:57 +0530
Subject: [PATCH 5/6] Full-height sidebar drop pad; outline Add-photos button

Make the drag-and-drop target fill the sidebar's height instead of a
fixed square, and switch the Add-photos button to an outline style that
fills coral only on hover.
---
 apps/web/src/components/photo-sidebar.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/photo-sidebar.tsx b/apps/web/src/components/photo-sidebar.tsx
index c728f82..1fe5ca9 100644
--- a/apps/web/src/components/photo-sidebar.tsx
+++ b/apps/web/src/components/photo-sidebar.tsx
@@ -12,8 +12,8 @@ import { usePhotoStore } from '@/stores/photo-store'
  * Left rail: the reorderable photo strip, with an "Add photos" button pinned
  * to the bottom. The button only appears once there's at least one photo —
  * before that, the centre empty-state hero carries the add action.
- * Dragging a file anywhere over the app reveals a square drop pad here, with
- * the strip blurred behind it — and a drop is accepted wherever it lands.
+ * Dragging a file anywhere over the app reveals a full-height drop pad here,
+ * with the strip blurred behind it — and a drop is accepted wherever it lands.
  */
 export function PhotoSidebar() {
   const addFiles = usePhotoStore((state) => state.addFiles)
@@ -40,8 +40,9 @@ export function PhotoSidebar() {
         <div className="mt-auto pt-2 lg:sticky lg:bottom-4">
           <Button
             type="button"
+            variant="outline"
             onClick={open}
-            className="w-full gap-2 shadow-sm"
+            className="border-primary text-primary hover:bg-primary hover:text-primary-foreground w-full gap-2"
           >
             <ImagePlus className="size-4" />
             Add photos
@@ -51,7 +52,7 @@ export function PhotoSidebar() {
 
       {dragging && (
         <div className="bg-background/70 absolute inset-0 z-30 flex items-center justify-center rounded-lg backdrop-blur-sm">
-          <div className="border-ring text-muted-foreground flex aspect-square w-full max-w-[220px] flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed text-center">
+          <div className="border-ring text-muted-foreground flex h-full w-full flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed text-center">
             <ImagePlus className="size-8" />
             <p className="text-foreground text-sm font-medium">
               Drop your photos…

From afe498e3c10f403a1e10201f144a4c14d4543020 Mon Sep 17 00:00:00 2001
From: ankitsejwal <ankit@sejw.al>
Date: Wed, 1 Jul 2026 13:19:06 +0530
Subject: [PATCH 6/6] Lift the mobile FAB with a stronger shadow and background
 ring

So it stays distinct when it floats over the coral Export button.
---
 apps/web/src/components/add-photos-fab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/add-photos-fab.tsx b/apps/web/src/components/add-photos-fab.tsx
index 028a2d4..b1770cd 100644
--- a/apps/web/src/components/add-photos-fab.tsx
+++ b/apps/web/src/components/add-photos-fab.tsx
@@ -23,7 +23,7 @@ export function AddPhotosFab({ className }: { className?: string }) {
         onClick={open}
         aria-label="Add photos"
         className={cn(
-          "bg-primary text-primary-foreground fixed right-4 bottom-4 z-40 flex size-14 items-center justify-center rounded-full shadow-lg transition-transform active:scale-95",
+          "bg-primary text-primary-foreground ring-background fixed right-4 bottom-4 z-40 flex size-14 items-center justify-center rounded-full shadow-2xl ring-2 transition-transform active:scale-95",
           className,
         )}
       >