feat(web): show projects as tiles or as a list, by the person's choice

apps/web/src/config.ts

@@ -337,6 +337,11 @@ export const wording = {
       archived: "Archived",
     },
     lastActivity: (relative: string) => `Active ${relative}`,
+    view: {
+      label: "Show projects as",
+      grid: "Tiles",
+      rows: "List",
+    },
     loading: "Reading your projects…",
     emptyTitle: "No projects yet",
     emptyLead: "Start one from New project; it shows here from then on.",

apps/web/src/library-view-setting.test.ts

@@ -0,0 +1,9 @@
+import { expect, test } from "bun:test";
+import { parseLibraryView } from "./library-view-setting.ts";
+
+test("only the two layouts are read back; anything else leaves the default", () => {
+  expect(parseLibraryView("grid")).toBe("grid");
+  expect(parseLibraryView("rows")).toBe("rows");
+  expect(parseLibraryView("tiles")).toBeNull();
+  expect(parseLibraryView("")).toBeNull();
+});

apps/web/src/library-view-setting.ts

@@ -0,0 +1,24 @@
+/**
+ * How the Projects page lays projects out, tiles or a list of one-liners, kept
+ * in this browser. Tiles until the person chooses.
+ */
+import {
+  useStoredPreference,
+  writeStoredPreference,
+} from "./stored-preference.ts";
+
+const LIBRARY_VIEW_KEY = "builder-library-view";
+
+/** Tiles, or a list of one line per project. */
+export type ViewMode = "grid" | "rows";
+
+export const parseLibraryView = (raw: string): ViewMode | null =>
+  raw === "grid" || raw === "rows" ? raw : null;
+
+export function useLibraryView(): ViewMode {
+  return useStoredPreference(LIBRARY_VIEW_KEY, parseLibraryView, "grid");
+}
+
+export function writeLibraryView(mode: ViewMode): void {
+  writeStoredPreference(LIBRARY_VIEW_KEY, mode);
+}

apps/web/src/pages/project-library.css

@@ -142,3 +142,56 @@
     ),
     color-mix(in oklab, var(--cover-b) 15%, var(--wb-card));
 }
+
+.library-page .library-view {
+  display: inline-flex;
+  gap: var(--space-1);
+}
+
+/* As a list: one line per project, a small swatch of its cover at the start,
+   the stage and last activity after the name, and the menu at the end. */
+.library-page .library-grid[data-view="rows"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.library-page .library-grid[data-view="rows"] .library-card-open {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-12) var(--space-2) var(--space-3);
+}
+
+.library-page .library-grid[data-view="rows"] .library-cover {
+  flex: none;
+  width: 2rem;
+  aspect-ratio: 1;
+  border-radius: var(--radius-lg);
+}
+
+.library-page .library-grid[data-view="rows"] .library-card-body {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0;
+}
+
+.library-page .library-grid[data-view="rows"] .library-card-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.library-page .library-grid[data-view="rows"] .library-card-meta {
+  flex-wrap: nowrap;
+  padding-right: 0;
+  white-space: nowrap;
+}
+
+.library-page .library-grid[data-view="rows"] .library-card-menu {
+  top: 50%;
+  bottom: auto;
+  transform: translateY(-50%);
+}