From 90cad7196b69bb6631ddb87b9609b10d3f4c54b6 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Wed, 9 Sep 2026 06:09:06 -0500
Subject: [PATCH] fix: label file selections and distinguish pending trash

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/FileTree.test.tsx                |  2 ++
 ui/src/components/FileTree.tsx                     |  1 +
 .../WorkFolderBrowser.selection.test.tsx           | 14 ++++++++++++++
 ui/src/components/WorkFolderBrowser.tsx            |  4 +++-
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/FileTree.test.tsx b/ui/src/components/FileTree.test.tsx
index 2c07ec53cf..9c37cfa96d 100644
--- a/ui/src/components/FileTree.test.tsx
+++ b/ui/src/components/FileTree.test.tsx
@@ -85,6 +85,8 @@ describe("FileTree", () => {
     const input = row("docs")?.querySelector("input[type='checkbox']") as HTMLInputElement | null;
     expect(input?.checked).toBe(false);
     expect(input?.indeterminate).toBe(true);
+    expect(input?.getAttribute("aria-label")).toBe("Select docs");
+    expect(row("docs/a.md")?.querySelector("input")?.getAttribute("aria-label")).toBe("Select docs/a.md");
     expect(row("docs")?.getAttribute("aria-checked")).toBe("mixed");
   });
 
diff --git a/ui/src/components/FileTree.tsx b/ui/src/components/FileTree.tsx
index 4e7a00f768..fa8433b9cb 100644
--- a/ui/src/components/FileTree.tsx
+++ b/ui/src/components/FileTree.tsx
@@ -439,6 +439,7 @@ export function FileTree({
               <label className="flex items-center pl-2" onClick={(event) => event.stopPropagation()}>
                 <input
                   type="checkbox"
+                  aria-label={`Select ${node.path}`}
                   checked={allChecked}
                   ref={(element) => {
                     if (element) element.indeterminate = someChecked;
diff --git a/ui/src/components/WorkFolderBrowser.selection.test.tsx b/ui/src/components/WorkFolderBrowser.selection.test.tsx
index ab5355ebe2..3df7667fb2 100644
--- a/ui/src/components/WorkFolderBrowser.selection.test.tsx
+++ b/ui/src/components/WorkFolderBrowser.selection.test.tsx
@@ -52,6 +52,20 @@ afterEach(async () => {
   await act(async () => root.unmount()); client.clear(); container.remove(); vi.clearAllMocks();
 });
 describe("cached file selection and retained trash", () => {
+  it("does not report empty trash or no saved files while loading or after a list failure", async () => {
+    let rejectList!: (error: Error) => void;
+    api.list.mockImplementationOnce(() => new Promise((_resolve, reject) => { rejectList = reject; }));
+    await click(button("Trash")!);
+    expect(container.textContent).toContain("Loading trash…");
+    expect(container.textContent).not.toContain("Trash is empty.");
+    expect(container.textContent).not.toContain("No saved files");
+    await act(async () => { rejectList(new Error("Storage unavailable")); });
+    await settle();
+    expect(container.textContent).toContain("Trash could not be loaded.");
+    expect(container.textContent).toContain("Storage unavailable");
+    expect(container.textContent).not.toContain("Trash is empty.");
+    expect(container.textContent).not.toContain("No saved files");
+  });
   it("does not flash an old preview error while retrying a cached file", async () => {
     const row = (path: string) => container.querySelector<HTMLElement>(`[data-file-tree-path="${path}"]`)!;
     await click(row("a.txt"));
diff --git a/ui/src/components/WorkFolderBrowser.tsx b/ui/src/components/WorkFolderBrowser.tsx
index 5345d1d8f5..791ca4353d 100644
--- a/ui/src/components/WorkFolderBrowser.tsx
+++ b/ui/src/components/WorkFolderBrowser.tsx
@@ -82,6 +82,8 @@ export function WorkFolderBrowser({ owner, exampleFiles, readOnly = false, fillH
     : saving ? "Saving…"
     : failures.length > 0 ? "Run save failed"
     : !lastSaved && statuses.some((status) => status.active) ? "Waiting for first save"
+    : !lastSaved && !exampleFiles && filesQuery.isPending ? "Loading files…"
+    : !lastSaved && filesQuery.isError && !filesQuery.data ? "File list unavailable"
     : lastSaved || lastOperation || files.length > 0 ? "Saved"
     : "No saved files";
   const disabled = mutation.isPending || Boolean(exampleFiles);
@@ -117,7 +119,7 @@ export function WorkFolderBrowser({ owner, exampleFiles, readOnly = false, fillH
       </ul>
     </div>}
     <p className="sr-only" aria-live="polite">{announcement}</p>
-    {trash ? <TabsContent value="trash" className={cn("overflow-auto", fillHeight ? "min-h-0 flex-1" : "max-h-96")}><p className="mb-3 text-sm text-muted-foreground">Deleted cached files are retained here. Restore them to return them to Files.</p>{files.length === 0 ? <p className="text-sm text-muted-foreground">Trash is empty.</p> : files.map((file) => <div key={file.id} className="flex items-center gap-2 border-b py-2">
+    {trash ? <TabsContent value="trash" className={cn("overflow-auto", fillHeight ? "min-h-0 flex-1" : "max-h-96")}><p className="mb-3 text-sm text-muted-foreground">Deleted cached files are retained here. Restore them to return them to Files.</p>{!exampleFiles && filesQuery.isPending ? <p role="status" className="text-sm text-muted-foreground">Loading trash…</p> : filesQuery.isError && !filesQuery.data ? <p className="text-sm text-muted-foreground">Trash could not be loaded.</p> : files.length === 0 ? <p className="text-sm text-muted-foreground">Trash is empty.</p> : files.map((file) => <div key={file.id} className="flex items-center gap-2 border-b py-2">
       <span className="min-w-0 flex-1 truncate text-sm">{file.path}</span>{canManageTrash && <Button size="sm" variant="outline" disabled={disabled} onClick={() => mutation.mutate({ type: "restore", fileId: file.id })}><RotateCcw aria-hidden />Restore</Button>}
       {!readOnly && <AlertDialog><AlertDialogTrigger asChild><Button size="sm" variant="ghost" disabled={disabled}>Purge…</Button></AlertDialogTrigger>
         <AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Permanently delete {file.path}?</AlertDialogTitle>