Hero is chosen by browsing originals, not typed

Nobody knows the path of a file they uploaded from a phone, and a text box
invites a typo that fails silently as a broken image on the live site. Browsing
`originals/` means the only values that can be stored are ones that exist.

The modal is the platform's file browser in pick mode — the same listing,
breadcrumb, sorting and thumbnails as everywhere else, with one branch changed.

It browses ORIGINALS and the site renders DERIVED, and that indirection is the
point of the pipeline: what somebody picks is the .mov or the 12-megapixel HEIC
that came off the camera, and what a browser can display is the ladder av-club
built beside it. Storing a derived file directly would pin the site to one
rendition, so the day the ladder changes every stored reference names a file that
is no longer the right one to serve.

The path is stored relative to `originals/`. The root is a setting and moves
between machines, so an absolute path would be a fact about one installation
written into content that outlives it.

No pathParam and no panelId on the modal's browser: its folder is not something
to put in a URL or remember, and both would leak a transient choice into shared
state.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/sections/HomePanel.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { ArrowDown, ArrowUp, Check, ImagePlus, Loader2, Trash2 } from 'lucide-react';
+import { ArrowDown, ArrowUp, Check, FolderOpen, ImagePlus, Loader2, Trash2 } from 'lucide-react';
 import { useClient } from 'hooks/useClient';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { readableError } from '../errors';
 import { useFlash } from '../useFlash';
 import { RichText } from '../RichText';
+import { MediaPicker } from '../MediaPicker';
 
 /**
  * The Home page: a hero, an intro, and an ordered gallery.
@@ -58,6 +59,7 @@ export const HomePanel = () => {
   const [busy, setBusy] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [saved, flashSaved] = useFlash();
+  const [picking, setPicking] = useState(false);
 
   /** Every write answers with the whole payload, so this is the only place state is set. */
   const apply = useCallback((data: Home) => {
@@ -185,13 +187,28 @@ export const HomePanel = () => {
           <p className="text-xs text-muted-foreground">The video or image across the top of the page.</p>
         </div>
 
-        <Input
-          value={heroUrl}
-          onChange={(event) => setHeroUrl(event.target.value)}
-          placeholder="/media/…"
-          className="font-mono text-xs"
-          autoComplete="off"
-          spellCheck={false}
+        {/*
+          A Browse button, not a field.
+
+          Nobody knows the path of a file they uploaded from a phone, and a text box invites a typo that
+          fails silently as a broken image on the live site. Browsing `originals/` means the only values
+          that can be stored are ones that exist.
+        */}
+        <div className="flex items-center gap-2">
+          <p className="min-w-0 flex-1 truncate rounded-md border border-border bg-muted/30 px-3 py-2 font-mono text-xs">
+            {heroUrl || <span className="text-muted-foreground/60">Nothing chosen</span>}
+          </p>
+          <Button variant="outline" size="sm" className="shrink-0" onClick={() => setPicking(true)}>
+            <FolderOpen className="size-3.5" />
+            Browse
+          </Button>
+        </div>
+
+        <MediaPicker
+          open={picking}
+          onClose={() => setPicking(false)}
+          onPick={setHeroUrl}
+          title="Choose the hero"
         />
         {/* The server clears the crop when the hero changes, because a rectangle describing a region of
             a different picture would crop the new one somewhere arbitrary. Said here so it is not a