web: rename a folder, and add one from the empty column

A folder's own menu gains a rename, which paints a label over the folder
without moving it — the frame ids and the recipes hang off the directory's
name, not the label. The empty part of the column answers a right click
with ADD FOLDER, the FOLDERS heading goes (the count already rides on
each row), and the column narrows to 118px so the stage takes the room.

docker/frontend/src/engine/library.ts

@@ -30,7 +30,11 @@ const THUMB_QUALITY = 0.75;
 const BATCH = 50;
 
 export interface LibraryFolder {
+  // The directory's own name: the store's key, and the prefix of every frame id
+  // found in it. A rename never touches this.
   name: string;
+  // What the tree paints instead, when the visitor has renamed the folder.
+  label?: string;
   handle: FileSystemDirectoryHandle;
 }
 
@@ -131,6 +135,13 @@ export async function pickFolder(): Promise<LibraryFolder | null> {
   return folder;
 }
 
+// A rename is a label over the folder, not a new folder: everything downstream —
+// the frame ids, the thumbnail store, the recipe each frame was left at — hangs
+// off `name`, which stays the directory's own.
+export async function renameFolder(folder: LibraryFolder, label: string): Promise<void> {
+  await ask(FOLDERS, 'readwrite', (s) => s.put({ ...folder, label }));
+}
+
 export async function removeFolder(name: string): Promise<void> {
   const ids = (await listPhotos(name)).map((p) => p.id);
   const db = await openDb();