feat(files): folders managed in place, a grid per folder, drop to upload, open on one file

- Own folders are made, renamed and deleted from the rail (right click, long press,
  Shift+F10) or the "…" beside an open folder's name; any folder's retention is a
  submenu (7/30/90 days, until deleted). Deleting confirms where its files go.
- List or grid per folder, sharing one sort; the grid is the one media card.
- A file dropped anywhere on the page opens Upload with it, bound for the folder
  on screen.
- A link (?item=) or the upload notice opens Files on the file: its page turned
  to, the keyboard on it, a ring round it.
- An in-place name field left by Enter or Escape hands the focus back to what
  replaced it (the row, the entry, the "…") instead of dropping it on <body>.
- The table's saved page size is per account.

frontend/src/components/FilesRail.tsx

@@ -1,7 +1,8 @@
+import { useEffect, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-import { FolderOpen, HardDrive, Users } from "lucide-react";
+import { FolderOpen, FolderPlus, HardDrive, Users } from "lucide-react";
 import { api, type FileFolder } from "../lib/api";
 import { compareText } from "../lib/collate";
 import { formatBytes } from "../lib/format";
@@ -11,30 +12,46 @@ import { useLiveQuery } from "../lib/useLiveQuery";
 import FilterRail from "./FilterRail";
 import { folderIcon, folderLabel } from "./fileFolders";
 import { sameView, useFiles, useFilesActions, type FilesView } from "./filesContext";
+import { RenameField } from "./RenameField";
+import { useFolderActions } from "./useFolderActions";
+import { ContextMenu } from "./ui/ContextMenu";
 import { Pressable } from "./ui/Pressable";
 import { type PanelItem } from "./ui/PanelGroups";
+import { useContextMenu } from "./ui/useContextMenu";
 
 // The Files module's left rail: the library's places — every file, the ones shared with me, the
 // source folders the library fills by itself, the user's own folders — and the storage meter. Lifted
 // to App level like the other rails (the SidePanel's collapse and customise come with it); the view it
-// picks lives in FilesProvider, which the Files page reads.
+// picks lives in FilesProvider, which the Files page reads. A folder's right click (or long press, or
+// Shift+F10) opens its menu (`useFolderActions`); the same menu is the "…" beside an open folder's
+// name on the page, so nothing here is reachable only by a gesture.
+
+const folderKey = (f: FileFolder) => f.id;
 
 function Entry({
   icon: Icon,
   label,
   count,
   view,
+  trigger,
+  folderId,
 }: {
   icon: React.ComponentType<{ className?: string }>;
   label: string;
   count?: number;
   view: FilesView;
+  /** The folder's menu triggers (right click, long press, Shift+F10). */
+  trigger?: Record<string, unknown>;
+  /** A folder's entry is found by it, to hand the keyboard back after a rename. */
+  folderId?: number;
 }) {
   const { view: current } = useFiles();
   const { setView } = useFilesActions();
   const active = sameView(view, current);
   return (
     <Pressable
+      {...trigger}
+      data-folder-id={folderId}
       selectable
       layer={!active}
       aria-current={active ? "page" : undefined}
@@ -108,6 +125,28 @@ export default function FilesRail({
   const sources = folders.filter((f) => f.kind === "source" && shown(f)).sort(byName);
   const own = folders.filter((f) => f.kind === "own").sort(byName);
 
+  const [renamingId, setRenamingId] = useState<number | null>(null);
+  const [creating, setCreating] = useState(false);
+  // A name field left by Enter or Escape hands the keyboard back to what stands there now: the
+  // folder's entry, or the New-folder command (RenameField).
+  const railRef = useRef<HTMLDivElement>(null);
+  const refocusFolder = useRef<number | null>(null);
+  useEffect(() => {
+    const id = refocusFolder.current;
+    if (renamingId !== null || id === null) return;
+    refocusFolder.current = null;
+    railRef.current?.querySelector<HTMLElement>(`[data-folder-id="${id}"]`)?.focus();
+  }, [renamingId]);
+  const newFolder = useRef<HTMLButtonElement>(null);
+  const refocusNew = useRef(false);
+  useEffect(() => {
+    if (creating || !refocusNew.current) return;
+    refocusNew.current = false;
+    newFolder.current?.focus();
+  }, [creating]);
+  const folderActions = useFolderActions({ onRename: (f) => setRenamingId(f.id) });
+  const menu = useContextMenu<FileFolder>({ keyOf: folderKey });
+
   const failed = foldersQ.isError && !foldersQ.data && (
     <Pressable
       onClick={() => foldersQ.refetch()}
@@ -116,15 +155,29 @@ export default function FilesRail({
       {t("common.loadError")} — {t("common.retry")}
     </Pressable>
   );
-  const entry = (f: FileFolder) => (
-    <Entry
-      key={f.id}
-      icon={folderIcon(f)}
-      label={folderLabel(f, t)}
-      count={f.count}
-      view={{ kind: "folder", id: f.id }}
-    />
-  );
+  const entry = (f: FileFolder) =>
+    renamingId === f.id ? (
+      <RenameField
+        key={f.id}
+        initial={f.name ?? ""}
+        label={t("files.folder.rename")}
+        onDone={(name, byKey) => {
+          if (byKey) refocusFolder.current = f.id;
+          setRenamingId(null);
+          if (name !== null) folderActions.rename(f, name);
+        }}
+      />
+    ) : (
+      <Entry
+        key={f.id}
+        icon={folderIcon(f)}
+        label={folderLabel(f, t)}
+        count={f.count}
+        view={{ kind: "folder", id: f.id }}
+        trigger={menu.triggerProps(f)}
+        folderId={f.id}
+      />
+    );
 
   const items: PanelItem[] = [
     {
@@ -159,12 +212,34 @@ export default function FilesRail({
       id: "own",
       title: t("files.rail.own"),
       body: (
-        <div className="flex flex-col gap-0.5">
+        <div ref={railRef} className="flex flex-col gap-0.5">
           {failed}
           {own.map(entry)}
-          {foldersQ.data && own.length === 0 && (
+          {foldersQ.data && own.length === 0 && !creating && (
             <span className="px-2 py-1 text-xs text-muted">{t("files.rail.noOwn")}</span>
           )}
+          {creating ? (
+            <RenameField
+              initial=""
+              label={t("files.folder.newName")}
+              onDone={(name, byKey) => {
+                refocusNew.current = byKey;
+                setCreating(false);
+                if (name !== null) void folderActions.add(name);
+              }}
+            />
+          ) : (
+            foldersQ.data && (
+              <Pressable
+                ref={newFolder}
+                onClick={() => setCreating(true)}
+                className="flex min-h-8 w-full items-center gap-2 rounded-lg px-2 text-sm text-muted hover:text-fg"
+              >
+                <FolderPlus className="size-4 shrink-0" />
+                {t("files.folder.new")}
+              </Pressable>
+            )
+          )}
         </div>
       ),
     },
@@ -182,6 +257,11 @@ export default function FilesRail({
       items={items}
     >
       <StorageMeter />
+      <ContextMenu
+        menu={menu}
+        ariaLabel={t("files.folder.menu")}
+        items={menu.target ? folderActions.items(menu.target) : []}
+      />
     </FilterRail>
   );
 }