Faster folders, working breadcrumbs and bug fixes (#7675)

## What this changes

- **Big folders don't lag.** The file list only draws the rows you can
actually see, so a folder with thousands of files feels the same as one
with ten. Selecting a file redraws that file, not the whole folder.

- **The 500-file limit is gone.** A mounted disk folder used to list
only its 500 newest files and quietly hide the rest. You now see
everything in it.

- **Back and the breadcrumbs work.** Walking into folders now leaves
proper history, so Back steps up one folder. Before, every folder
overwrote the same history entry, so Back dumped you out of the library
entirely.

- **Deep links to a folder work.** Opening a link to a folder that
hadn't finished loading used to bounce you to the top of the library. It
now waits for the folder to appear.

- **"New folder" is one button.** The version on an empty folder was a
different button, with a different name, that guessed where to put the
folder and greyed itself out when it couldn't. It's now the same menu as
the one in the top right.

- **"Local" in the left bar is just a filter.** Clicking it filters the
list by source. It used to switch you into a separate view with its own
rules for what counted as a file, its own empty screen, and its own
exceptions everywhere folders were involved.

- **Folders obey the source filter.** Picking Cloud or Local now filters
folders too, not just files, so mounted folders stop appearing under
every setting.

- **Opening a file that's already open** takes you to it, instead of
trying to add it a second time.

- **Opening a cloud file keeps it in its folder** instead of dropping it
at the top of the library.

Author: reecebrowne

frontend/editor/public/locales/en-US/translation.toml

@@ -4289,6 +4289,7 @@ back = "Back"
 backToFolder = "Back to {{folder}}"
 backToMyFiles = "Back to File library"
 breadcrumbs = "Folder path"
+breadcrumbsOverflow = "Show parent folders"
 bulkActions = "Actions"
 cancel = "Cancel"
 classification = "Classification"
@@ -4410,7 +4411,6 @@ everywhereHint = "Deletes the file from this device and the cloud."
 
 [filesPage.empty]
 hint = "Drop PDFs anywhere on this page to upload, or use the New folder button to organize your files."
-newFolderCta = "Create folder"
 title = "This folder is empty"
 uploadCta = "Upload files"
 
@@ -4420,10 +4420,6 @@ offlineHint = "Reconnect to load your cloud library."
 offlineTitle = "No cached cloud files"
 title = "No cloud files yet"
 
-[filesPage.empty.local]
-hint = "Files saved without uploading stay here. Drop a file to add one."
-title = "No local-only files"
-
 [filesPage.empty.noResults]
 hint = "No files in this folder match your filter. Try a different term or clear the filter."
 title = "No matching files"

frontend/editor/src/core/components/filesPage/FileGrid.render.test.tsx

@@ -0,0 +1,97 @@
+import { describe, it, expect, vi } from "vitest";
+import { render as baseRender } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import type { FileId } from "@app/types/file";
+import type { StirlingFileStub } from "@app/types/fileContext";
+
+/**
+ * The grid's items are memoized so a selection click re-renders the cards whose
+ * selection changed rather than the whole folder. That only holds while every prop
+ * they take stays stable - one inline object or closure at a call site silently
+ * undoes it, with no visible symptom until a folder is large. These count renders
+ * so that regression fails here instead of in someone's 500-file folder.
+ */
+
+// @app/ui wraps Mantine, so the provider has to be in the tree.
+const render = (ui: Parameters<typeof baseRender>[0]) =>
+  baseRender(ui, { wrapper: MantineProvider });
+// Every card renders this exactly once, so its calls are a per-card render count.
+const badgeRenders: { n: number } = { n: 0 };
+vi.mock("@app/components/shared/PolicyBadges", () => ({
+  PolicyBadges: () => {
+    badgeRenders.n += 1;
+    return null;
+  },
+}));
+const buildStub = (id: string, name: string): StirlingFileStub =>
+  ({
+    id: id as FileId,
+    name,
+    type: "application/pdf",
+    size: 1_000,
+    lastModified: 0,
+    isLeaf: true,
+    originalFileId: id,
+    versionNumber: 1,
+    // Set so useLazyThumbnail short-circuits instead of reading IndexedDB.
+    thumbnailUrl: "data:image/svg+xml,%3Csvg/%3E",
+  }) as StirlingFileStub;
+
+describe("FileGrid item memoization", () => {
+  it("re-renders only the cards whose selection changed", async () => {
+    const { FileGrid } = await import("@app/components/filesPage/FileGrid");
+    const { FileContextProvider } = await import("@app/contexts/FileContext");
+
+    const files = ["a", "b", "c", "d"].map((id) => buildStub(id, `${id}.pdf`));
+    const entries = files.map((file) => ({ kind: "file" as const, file }));
+
+    const props = {
+      entries,
+      viewMode: "grid" as const,
+      onSelectFile: () => {},
+      onOpenFolder: () => {},
+      onOpenFile: () => {},
+      onMoveFiles: () => {},
+      onMoveFolder: () => {},
+      onRenameFolder: () => {},
+      onDeleteFolder: () => {},
+      onChangeFolderAppearance: () => {},
+      onRemoveFiles: () => {},
+      onPromptMoveFiles: () => {},
+    };
+
+    const view = render(
+      <FileContextProvider>
+        <FileGrid {...props} selectedFileIds={new Set<FileId>()} />
+      </FileContextProvider>,
+    );
+    const cards = () =>
+      view.container.querySelectorAll(".files-page-card:not(.is-folder)");
+    expect(cards()).toHaveLength(4);
+    const initialRenders = badgeRenders.n;
+    expect(initialRenders).toBeGreaterThanOrEqual(4);
+
+    // Selecting one file changes isSelected for exactly one card. The rest take
+    // identical props, so memo should skip them.
+    view.rerender(
+      <FileContextProvider>
+        <FileGrid
+          {...props}
+          selectedFileIds={new Set<FileId>(["a" as FileId])}
+        />
+      </FileContextProvider>,
+    );
+    expect(cards()).toHaveLength(4);
+    expect(
+      view.container.querySelectorAll(".files-page-card.is-selected"),
+    ).toHaveLength(1);
+
+    // The point of the exercise: one card changed, so the re-render count moves by
+    // one card's worth and not four. Unmemoized items redraw the whole folder here.
+    const rerendered = badgeRenders.n - initialRenders;
+    const perCard = initialRenders / 4;
+    expect(rerendered).toBe(perCard);
+    // The real provider tree and four thumbnail-bearing cards cost seconds to mount,
+    // which the default budget cannot absorb alongside the rest of the suite.
+  }, 20_000);
+});

frontend/editor/src/core/components/filesPage/FileGrid.stories.tsx

@@ -5,6 +5,7 @@ import {
   type FilesPageEntry,
 } from "@app/components/filesPage/FileGrid";
 import { FileContextProvider } from "@app/contexts/FileContext";
+import { NewFolderButton } from "@app/components/filesPage/NewFolderButton";
 import type { StirlingFileStub } from "@app/types/fileContext";
 import type { FileId } from "@app/types/file";
 
@@ -109,6 +110,17 @@ export const Empty: Story = {
     loading: false,
     currentTab: "all",
     onEmptyUpload: () => {},
-    onEmptyCreateFolder: () => {},
+    // The page owns this control, so the story stands one up to keep both CTAs on
+    // screen here.
+    emptyNewFolderControl: (
+      <NewFolderButton
+        label="New folder"
+        size="md"
+        currentFolderId={null}
+        canAddLocalFolder={false}
+        onAddLocalFolder={() => {}}
+        onOpenDialog={() => {}}
+      />
+    ),
   },
 };