the sync lives with the folders it syncs

"Derived media" was a section sitting beside the block that lists `originals/`
and `derived/` — the same subject described twice, leaving the reader to work
out that the two were about one thing.

So the control moves under those folders, inside Root Location, and appears only
once both exist: before that the button would be asking to write into a
directory that is not there, and Create is the thing to press. An order, not a
choice.

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

web/MediaFolder.tsx

@@ -3,6 +3,7 @@ import { CircleAlert, CircleCheck, CircleDashed, FolderPlus, Loader2 } from 'luc
 import { useClient } from 'hooks/useClient';
 import { Button } from '@/components/ui/button';
 import { readableError } from './errors';
+import { MediaSync } from './MediaSync';
 
 /**
  * `<root>/media` — where the images and the files live.
@@ -13,6 +14,9 @@ import { readableError } from './errors';
  * No console. Making a directory either works or gives one line about why not, and a black transcript
  * box for a single sentence would make a small thing look like a large one.
  *
+ * Filling `derived/` hangs off the bottom of this once both folders exist — see `MediaSync`. It was a
+ * section of its own for an afternoon, which described the same two folders twice.
+ *
  * ── The children are listed, and the button repairs ──
  *
  * `originals/` and `derived/` are shown whether or not they are there, so a structure that is missing
@@ -119,6 +123,10 @@ export const MediaFolder = ({ rootPath }: { rootPath: string }) => {
       </div>
 
       {error && <p className="text-xs text-destructive">{error}</p>}
+
+      {/* Only once both folders exist. Until then the button would be asking to write into a directory
+          that is not there, and Create above is the thing to press. */}
+      {status.complete && <MediaSync />}
     </div>
   );
 };