Choose a cover in two parts, and let the app be installed

A cover is a colour *and* a pattern now, chosen in turn. Offering every
combination as its own entry meant fifteen colours times a dozen patterns
in a grid nobody could take in — and in practice only the handful someone
had thought to write out. Each pattern is previewed over the colour in
hand, so what is on screen is the cover as it will be. `cover_pattern` is
its own column: they are two decisions, and folding them into one number
would mean renumbering every cover the day a pattern is added.

For one day the patterns *were* twelve appended entries. Those indices
are read back as the colour-and-pattern pair they were drawn as, so
nothing chosen then looks different now.

And three separate reasons the install button never appeared, none of
them in anyone's configuration:

- `beforeinstallprompt` fires once, early — usually before React has
  mounted — and is never fired again. A listener added from inside a
  component simply missed it. It is caught at the top of index.html now.
- A `<link rel="manifest">` is fetched with credentials omitted unless it
  says otherwise. Behind a reverse proxy that authenticates in front of
  the app, that one request comes back as the proxy's login page and the
  browser reads it as an invalid manifest — while the app itself works
  perfectly, because its own requests carry the cookie.
- The service worker cached whatever came back, so a lapsed session could
  be stored as the application itself. The app would then "work offline"
  by showing a login screen it could never get past, curable only by
  clearing the site's data. Only successful, unredirected responses are
  cached now, and the cache name is bumped to drop anything already
  stored under the old rules.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/index.html

@@ -10,11 +10,32 @@
     <meta name="apple-mobile-web-app-title" content="InkNote" />
     <meta name="description" content="Write & draw — notes that sync everywhere" />
     <meta name="mobile-web-app-capable" content="yes" />
-    <link rel="manifest" href="./manifest.json" />
+    <!-- `use-credentials` because the manifest is otherwise fetched with
+         credentials omitted, cookies and all. Behind an authenticating reverse
+         proxy that request comes back as the proxy's login page, the browser
+         reads it as an invalid manifest, and no install is ever offered — while
+         the app itself works perfectly, because its own requests do carry the
+         cookie. Harmless without a proxy. -->
+    <link rel="manifest" href="./manifest.json" crossorigin="use-credentials" />
     <link rel="apple-touch-icon" href="./apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="192x192" href="./icon-192.png" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✏️</text></svg>" />
     <title>InkNote</title>
+    <script>
+      /* Catch the browser's install offer before anything else runs.
+       *
+       * `beforeinstallprompt` is fired once, early — usually before React has
+       * mounted — and is never fired again. Listening for it from inside a
+       * component meant it was simply missed, and the install button never
+       * appeared however correctly the site was served. It is stashed here, at
+       * the top of the document, and the app picks it up when it is ready. */
+      window.__inknoteInstallPrompt = null;
+      window.addEventListener("beforeinstallprompt", function (e) {
+        e.preventDefault();
+        window.__inknoteInstallPrompt = e;
+        window.dispatchEvent(new Event("inknote:installable"));
+      });
+    </script>
     <style>
       body { margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; }
       #root { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); height: 100vh; }

frontend/public/sw.js

@@ -1,4 +1,21 @@
-const CACHE_NAME = 'inknote-v7';
+/* Bumped to v8 to throw away anything cached under the old rules — including,
+   behind an authenticating reverse proxy, a login page that had been stored as
+   the application itself. */
+const CACHE_NAME = 'inknote-v8';
+
+/**
+ * Whether a response is the thing that was asked for, and worth keeping.
+ *
+ * Behind a proxy that authenticates in front of the app, a request whose session
+ * has lapsed comes back as that proxy's login page — sometimes as a redirect,
+ * sometimes as a plain 200. Storing either one poisons the cache: the app then
+ * "works offline" by showing a login screen it can never get past, and the only
+ * cure is clearing the site's data by hand.
+ *
+ * A redirected response cannot be cached at all — `Cache.put` rejects on one —
+ * so this also stops an unhandled rejection on every navigation.
+ */
+const worthCaching = (r) => r && r.ok && !r.redirected && r.type !== 'opaqueredirect';
 
 // Install — don't precache, just activate immediately
 self.addEventListener('install', () => {
@@ -28,8 +45,10 @@ self.addEventListener('fetch', (e) => {
   if (e.request.mode === 'navigate') {
     e.respondWith(
       fetch(e.request).then(r => {
-        const clone = r.clone();
-        caches.open(CACHE_NAME).then(c => c.put(e.request, clone));
+        if (worthCaching(r)) {
+          const clone = r.clone();
+          caches.open(CACHE_NAME).then(c => c.put(e.request, clone)).catch(() => {});
+        }
         return r;
       }).catch(() => caches.match(e.request).then(r => r || caches.match('/')))
     );
@@ -41,7 +60,7 @@ self.addEventListener('fetch', (e) => {
     caches.open(CACHE_NAME).then(cache =>
       cache.match(e.request).then(cached => {
         const fetchP = fetch(e.request).then(r => {
-          if (r.ok) cache.put(e.request, r.clone());
+          if (worthCaching(r)) cache.put(e.request, r.clone()).catch(() => {});
           return r;
         }).catch(() => cached);
         return cached || fetchP;

frontend/src/App.jsx

@@ -8,7 +8,7 @@ import { usePwaInstall } from "./hooks/usePwaInstall";
 import { useNotebookDnd } from "./hooks/useNotebookDnd";
 import { useNavigationHistory } from "./hooks/useNavigationHistory";
 
-import { COVERS, DEFAULT_FOLDERS } from "./ui/constants.jsx";
+import { DEFAULT_FOLDERS, coverBackground } from "./ui/constants.jsx";
 import { I } from "./ui/icons.jsx";
 import { makeTheme, FONT_UI } from "./ui/theme";
 import { ConfirmDialog } from "./ui/ConfirmDialog.jsx";
@@ -509,7 +509,7 @@ export default function App() {
       .filter((nb) => nb.id !== note.folderId)
       .map((nb) => ({
         label: nb.name,
-        colorDot: COVERS[nb.cover % COVERS.length].bg,
+        colorDot: coverBackground(nb.cover, nb.coverPattern),
         action: () => data.moveNote(note.id, nb.id),
       }));
     return targets.length > 0 ? [{ label: "Move to...", icon: I.move, submenu: targets }] : [];

frontend/src/features/notebooks/Dashboard.jsx

@@ -1,4 +1,4 @@
-import { COVERS } from "../../ui/constants.jsx";
+import { coverBackground } from "../../ui/constants.jsx";
 import { I } from "../../ui/icons.jsx";
 import { NotebookCover } from "../../ui/NotebookCover.jsx";
 import { fmtDate } from "../../ui/format";
@@ -188,7 +188,7 @@ export function Dashboard({
                         width: 14,
                         height: 10,
                         borderRadius: 2,
-                        background: COVERS[nb.cover % COVERS.length].bg,
+                        background: coverBackground(nb.cover, nb.coverPattern),
                         flexShrink: 0,
                       }}
                     />

frontend/src/hooks/usePwaInstall.ts

@@ -28,8 +28,19 @@ const isStandalone = () =>
   // iOS keeps its own flag rather than reporting the display mode.
   (navigator as unknown as { standalone?: boolean }).standalone === true;
 
+/**
+ * The offer, if the browser made one before the app was running.
+ *
+ * `beforeinstallprompt` fires once, early, and is never fired again. A listener
+ * added from a component is routinely too late — which is why the install button
+ * never appeared even on a correctly served site. `index.html` catches it at the
+ * top of the document and leaves it here.
+ */
+const stashed = (): BeforeInstallPromptEvent | null =>
+  (window as unknown as { __inknoteInstallPrompt?: BeforeInstallPromptEvent }).__inknoteInstallPrompt ?? null;
+
 export function usePwaInstall(): PwaInstall {
-  const [event, setEvent] = useState<BeforeInstallPromptEvent | null>(null);
+  const [event, setEvent] = useState<BeforeInstallPromptEvent | null>(stashed);
   const [installed, setInstalled] = useState(isStandalone);
 
   useEffect(() => {
@@ -37,14 +48,20 @@ export function usePwaInstall(): PwaInstall {
       e.preventDefault();
       setEvent(e as BeforeInstallPromptEvent);
     };
+    // Fired by the catcher in index.html when the offer arrives after mount.
+    const onStashed = () => setEvent(stashed());
     const onInstalled = () => {
       setInstalled(true);
       setEvent(null);
     };
     window.addEventListener("beforeinstallprompt", onPrompt);
+    window.addEventListener("inknote:installable", onStashed);
     window.addEventListener("appinstalled", onInstalled);
+    // One more look, in case it landed between the first render and this effect.
+    setEvent((current) => current ?? stashed());
     return () => {
       window.removeEventListener("beforeinstallprompt", onPrompt);
+      window.removeEventListener("inknote:installable", onStashed);
       window.removeEventListener("appinstalled", onInstalled);
     };
   }, []);
@@ -55,7 +72,10 @@ export function usePwaInstall(): PwaInstall {
     const { outcome } = await event.userChoice;
     // The captured event is single-use; drop it either way so the button does
     // not linger after a decision.
-    if (outcome === "accepted") setEvent(null);
+    if (outcome === "accepted") {
+      setEvent(null);
+      (window as unknown as { __inknoteInstallPrompt?: unknown }).__inknoteInstallPrompt = null;
+    }
   };
 
   /* An app can only be installed from a secure origin. Served over plain HTTP

frontend/src/syncEngine.ts

@@ -71,6 +71,7 @@ interface ServerNotebook {
   id: string;
   name: string;
   cover_index?: number;
+  cover_pattern?: number;
   sort_order?: number;
   max_versions?: number | null;
   sort_mode?: string | null;
@@ -409,6 +410,7 @@ export async function fullSync(): Promise<void> {
       id: nb.id,
       name: nb.name,
       cover: nb.cover_index || 0,
+      coverPattern: nb.cover_pattern || 0,
       sortOrder: nb.sort_order || 0,
       maxVersions: nb.max_versions ?? null,
       sortMode: (nb.sort_mode as Notebook["sortMode"]) ?? null,
@@ -484,13 +486,17 @@ function toNoteMeta(n: ServerNote, trashed: boolean): NoteMeta {
 
 /** Every kind of change that can wait offline. */
 type QueuedAction =
-  | { action: "createNotebook"; data: { localId: string; name: string; cover: number; sortOrder: number } }
+  | {
+      action: "createNotebook";
+      data: { localId: string; name: string; cover: number; coverPattern?: number; sortOrder: number };
+    }
   | {
       action: "updateNotebook";
       data: {
         id: string;
         name?: string;
         cover?: number;
+        coverPattern?: number;
         sortOrder?: number;
         maxVersions?: number | null;
         sortMode?: Notebook["sortMode"];
@@ -562,12 +568,22 @@ async function processEntry(entry: QueueEntry): Promise<void> {
   switch (a.action) {
     case "createNotebook": {
       const d = a.data;
-      const r = await api.post<{ id: string }>("/notebooks", { name: d.name, coverIndex: d.cover });
+      const r = await api.post<{ id: string }>("/notebooks", {
+        name: d.name,
+        coverIndex: d.cover,
+        coverPattern: d.coverPattern || 0,
+      });
       if (r.id !== d.localId) {
         // The server assigned a different id — repoint everything that referenced
         // the temporary local one.
         await db.deleteNotebook(d.localId);
-        await db.putNotebook({ id: r.id, name: d.name, cover: d.cover, sortOrder: d.sortOrder || 0 });
+        await db.putNotebook({
+          id: r.id,
+          name: d.name,
+          cover: d.cover,
+          coverPattern: d.coverPattern || 0,
+          sortOrder: d.sortOrder || 0,
+        });
         for (const n of await db.getAllNotes()) {
           if (n.folderId === d.localId) await db.putNote({ ...n, folderId: r.id });
         }
@@ -581,6 +597,7 @@ async function processEntry(entry: QueueEntry): Promise<void> {
       await api.put(`/notebooks/${a.data.id}`, {
         name: a.data.name,
         coverIndex: a.data.cover,
+        coverPattern: a.data.coverPattern,
         sortOrder: a.data.sortOrder,
         ...(a.data.maxVersions !== undefined ? { maxVersions: a.data.maxVersions } : {}),
         ...(a.data.sortMode !== undefined ? { sortMode: a.data.sortMode } : {}),
@@ -698,11 +715,25 @@ export async function getNotebooks(): Promise<Notebook[]> {
   return db.getAllNotebooks();
 }
 
-export async function createNotebook({ name, cover }: { name: string; cover: number }): Promise<Notebook> {
+export async function createNotebook({
+  name,
+  cover,
+  coverPattern = 0,
+}: {
+  name: string;
+  cover: number;
+  coverPattern?: number;
+}): Promise<Notebook> {
   if (_online && api.token) {
     try {
-      const r = await api.post<{ id: string }>("/notebooks", { name, coverIndex: cover });
-      const nb: Notebook = { id: r.id, name, cover, sortOrder: (await db.getAllNotebooks()).length };
+      const r = await api.post<{ id: string }>("/notebooks", { name, coverIndex: cover, coverPattern });
+      const nb: Notebook = {
+        id: r.id,
+        name,
+        cover,
+        coverPattern,
+        sortOrder: (await db.getAllNotebooks()).length,
+      };
       await db.putNotebook(nb);
       notifyData("notebook", nb);
       return nb;
@@ -716,13 +747,14 @@ export async function createNotebook({ name, cover }: { name: string; cover: num
     id: lid,
     name,
     cover,
+    coverPattern,
     sortOrder: (await db.getAllNotebooks()).length,
     _pendingCreate: true,
   };
   await db.putNotebook(nb);
   await enqueue({
     action: "createNotebook",
-    data: { localId: lid, name, cover, sortOrder: nb.sortOrder },
+    data: { localId: lid, name, cover, coverPattern, sortOrder: nb.sortOrder },
   });
   notifyData("notebook", nb);
   notifyStatus("pending");
@@ -742,6 +774,7 @@ export async function updateNotebook(id: string, updates: Partial<Notebook>): Pr
       await api.put(`/notebooks/${id}`, {
         name: updates.name,
         coverIndex: updates.cover,
+        coverPattern: updates.coverPattern,
         sortOrder: updates.sortOrder,
         // null is meaningful here — it clears the notebook's own setting — so it
         // has to travel, while undefined must stay away and change nothing.
@@ -760,6 +793,7 @@ export async function updateNotebook(id: string, updates: Partial<Notebook>): Pr
       id,
       name: updates.name,
       cover: updates.cover,
+      coverPattern: updates.coverPattern,
       sortOrder: updates.sortOrder,
       maxVersions: updates.maxVersions,
       sortMode: updates.sortMode,

frontend/src/types.ts

@@ -90,6 +90,8 @@ export interface Notebook {
   id: string;
   name: string;
   cover: number;
+  /** Pattern laid over the colour, chosen separately from it. */
+  coverPattern?: number;
   sortOrder: number;
   /** Versions kept per note here; null means the server's default. */
   maxVersions?: number | null;

frontend/src/ui/NotebookCover.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { COVERS } from "./constants.jsx";
+import { coverBackground, coverStyle } from "./constants.jsx";
 
 /* ═══════ NOTEBOOK COVER ═══════ */
 export function NotebookCover({
@@ -15,7 +15,10 @@ export function NotebookCover({
   onDragOver,
   onDrop,
 }) {
-  const cover = COVERS[notebook.cover % COVERS.length];
+  // Colour and pattern are two choices; the spine and accent come from the
+  // colour, the face from both.
+  const cover = coverStyle(notebook.cover, notebook.coverPattern);
+  const face = coverBackground(notebook.cover, notebook.coverPattern);
   const [hovered, setHovered] = useState(false);
   return (
     <button
@@ -114,7 +117,7 @@ export function NotebookCover({
             top: 0,
             right: 0,
             bottom: 0,
-            background: cover.bg,
+            background: face,
             borderRadius: "2px 8px 8px 2px",
             boxShadow: isActive
               ? `0 4px 20px rgba(0,0,0,0.3),0 0 0 3px ${cover.accent}88`

frontend/src/ui/NotebookModals.jsx

@@ -1,9 +1,87 @@
 import { useMemo, useState } from "react";
-import { COVERS } from "./constants.jsx";
+import { COVERS, PATTERNS, coverBackground, coverParts } from "./constants.jsx";
+
+/**
+ * Choosing a cover: its colour, then the pattern over it.
+ *
+ * Two decisions rather than one list. Offering every combination as its own
+ * entry meant fifteen colours times a dozen patterns in a grid nobody could take
+ * in — and only the handful someone had thought to write out. Each pattern is
+ * previewed over the colour that is currently chosen, so what is on screen is
+ * the cover as it will be, not a sample of the pattern on its own.
+ */
+function CoverChooser({ T, cover, pattern, onCover, onPattern }) {
+  const swatch = (selected) => ({
+    width: "100%",
+    aspectRatio: "3/4",
+    borderRadius: 8,
+    border: selected ? `3px solid ${T.active}` : "2px solid transparent",
+    cursor: "pointer",
+    position: "relative",
+    overflow: "hidden",
+  });
+
+  return (
+    <div style={{ marginBottom: 22 }}>
+      <div style={{ fontSize: 12, color: T.muted, marginBottom: 8 }}>Cover colour</div>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(5,1fr)",
+          gap: 8,
+          maxHeight: 200,
+          overflowY: "auto",
+          paddingRight: 4,
+        }}
+      >
+        {COVERS.map((c, i) => (
+          <button
+            key={i}
+            data-cover-option={i}
+            onClick={() => onCover(i)}
+            style={{ ...swatch(coverParts(cover, pattern).cover === i), background: c.bg }}
+          >
+            <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: c.spine }} />
+          </button>
+        ))}
+      </div>
+
+      <div style={{ fontSize: 12, color: T.muted, margin: "14px 0 8px" }}>Pattern</div>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(5,1fr)",
+          gap: 8,
+          maxHeight: 200,
+          overflowY: "auto",
+          paddingRight: 4,
+        }}
+      >
+        {PATTERNS.map((p, i) => (
+          <button
+            key={p.id}
+            data-pattern-option={i}
+            title={p.label}
+            onClick={() => onPattern(i)}
+            style={{
+              ...swatch(coverParts(cover, pattern).pattern === i),
+              // Previewed over the colour in hand, because that is the cover.
+              background: coverBackground(cover, i),
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
 
 export function EditNotebookModal({ notebook, onClose, onSave, dark, defaultMaxVersions }) {
   const [name, setName] = useState(notebook.name);
-  const [sel, setSel] = useState(notebook.cover);
+  /* Colour and pattern are separate choices now. A notebook saved when they
+     were one list holds an index into that list, so it is read back as the pair
+     it was drawn as rather than repainting itself. */
+  const [sel, setSel] = useState(() => coverParts(notebook.cover, notebook.coverPattern).cover);
+  const [pat, setPat] = useState(() => coverParts(notebook.cover, notebook.coverPattern).pattern);
   // Empty means "use the server's default", which is why it is a string here and
   // not a number with a stand-in value.
   const [versions, setVersions] = useState(notebook.maxVersions == null ? "" : String(notebook.maxVersions));
@@ -11,7 +89,7 @@ export function EditNotebookModal({ notebook, onClose, onSave, dark, defaultMaxV
   const save = () => {
     if (!name.trim()) return;
     const n = versions.trim() === "" ? null : Math.max(1, Math.round(Number(versions)));
-    onSave({ name: name.trim(), cover: sel, maxVersions: Number.isFinite(n) ? n : null });
+    onSave({ name: name.trim(), cover: sel, coverPattern: pat, maxVersions: Number.isFinite(n) ? n : null });
   };
   const T = useMemo(
     () => ({
@@ -112,44 +190,13 @@ export function EditNotebookModal({ notebook, onClose, onSave, dark, defaultMaxV
             for the server's default{defaultMaxVersions ? `, which is ${defaultMaxVersions}` : ""}.
           </div>
         </div>
-        <div style={{ marginBottom: 22 }}>
-          <div style={{ fontSize: 12, color: T.muted, marginBottom: 8 }}>Cover style</div>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "repeat(5,1fr)",
-              gap: 8,
-              /* Scrolls rather than growing. With patterns the list is long
-                 enough that the dialog would run past the bottom of a laptop
-                 screen and take the Create button with it. */
-              maxHeight: 268,
-              overflowY: "auto",
-              paddingRight: 4,
-            }}
-          >
-            {COVERS.map((c, i) => (
-              <button
-                key={i}
-                data-cover-option={i}
-                onClick={() => setSel(i)}
-                style={{
-                  width: "100%",
-                  aspectRatio: "3/4",
-                  borderRadius: 8,
-                  background: c.bg,
-                  border: sel === i ? `3px solid ${T.active}` : "2px solid transparent",
-                  cursor: "pointer",
-                  position: "relative",
-                  overflow: "hidden",
-                }}
-              >
-                <div
-                  style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: c.spine }}
-                />
-              </button>
-            ))}
-          </div>
-        </div>
+        <CoverChooser
+          T={T}
+          cover={sel}
+          pattern={pat}
+          onCover={setSel}
+          onPattern={setPat}
+        />
         <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
           <button
             onClick={onClose}
@@ -192,6 +239,7 @@ export function EditNotebookModal({ notebook, onClose, onSave, dark, defaultMaxV
 export function CreateNotebookModal({ onClose, onCreate, dark }) {
   const [name, setName] = useState("");
   const [sel, setSel] = useState(0);
+  const [pat, setPat] = useState(0);
   const T = useMemo(
     () => ({
       bg: dark ? "#161b22" : "#fff",
@@ -258,47 +306,16 @@ export function CreateNotebookModal({ onClose, onCreate, dark }) {
             boxSizing: "border-box",
           }}
           onKeyDown={(e) => {
-            if (e.key === "Enter" && name.trim()) onCreate({ name: name.trim(), cover: sel });
+            if (e.key === "Enter" && name.trim()) onCreate({ name: name.trim(), cover: sel, coverPattern: pat });
           }}
         />
-        <div style={{ marginBottom: 22 }}>
-          <div style={{ fontSize: 12, color: T.muted, marginBottom: 8 }}>Choose cover style</div>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "repeat(5,1fr)",
-              gap: 8,
-              /* Scrolls rather than growing. With patterns the list is long
-                 enough that the dialog would run past the bottom of a laptop
-                 screen and take the Create button with it. */
-              maxHeight: 268,
-              overflowY: "auto",
-              paddingRight: 4,
-            }}
-          >
-            {COVERS.map((c, i) => (
-              <button
-                key={i}
-                data-cover-option={i}
-                onClick={() => setSel(i)}
-                style={{
-                  width: "100%",
-                  aspectRatio: "3/4",
-                  borderRadius: 8,
-                  background: c.bg,
-                  border: sel === i ? `3px solid ${T.active}` : "2px solid transparent",
-                  cursor: "pointer",
-                  position: "relative",
-                  overflow: "hidden",
-                }}
-              >
-                <div
-                  style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: c.spine }}
-                />
-              </button>
-            ))}
-          </div>
-        </div>
+        <CoverChooser
+          T={T}
+          cover={sel}
+          pattern={pat}
+          onCover={setSel}
+          onPattern={setPat}
+        />
         <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
           <button
             onClick={onClose}
@@ -317,7 +334,7 @@ export function CreateNotebookModal({ onClose, onCreate, dark }) {
           </button>
           <button
             onClick={() => {
-              if (name.trim()) onCreate({ name: name.trim(), cover: sel });
+              if (name.trim()) onCreate({ name: name.trim(), cover: sel, coverPattern: pat });
             }}
             style={{
               padding: "8px 20px",

frontend/src/ui/NotebookPicker.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 
-import { COVERS } from "./constants.jsx";
+import { coverBackground } from "./constants.jsx";
 
 /**
  * Asks which notebook something should go into.
@@ -141,7 +141,7 @@ export function NotebookPicker({ notebooks, title, confirmLabel = "Continue", on
                     height: 10,
                     borderRadius: 3,
                     flexShrink: 0,
-                    background: COVERS[nb.cover % COVERS.length].bg,
+                    background: coverBackground(nb.cover, nb.coverPattern),
                   }}
                 />
                 <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>

frontend/src/ui/Sidebar.jsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { COVERS, DEFAULT_FOLDERS } from "./constants.jsx";
+import { DEFAULT_FOLDERS, coverBackground } from "./constants.jsx";
 import { I } from "./icons.jsx";
 import { FONT_UI } from "./theme";
 
@@ -352,7 +352,7 @@ export function Sidebar({
                     width: 20,
                     height: 14,
                     borderRadius: 3,
-                    background: COVERS[nb.cover % COVERS.length].bg,
+                    background: coverBackground(nb.cover, nb.coverPattern),
                     flexShrink: 0,
                     boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
                   }}

frontend/src/ui/constants.jsx

@@ -40,94 +40,6 @@ export const COVERS = [
   { bg: "linear-gradient(135deg,#1f1c2c,#928dab)", spine: "#15131f", accent: "#b39ddb" },
   { bg: "linear-gradient(135deg,#654ea3,#eaafc8)", spine: "#4e3c7e", accent: "#f8bbd0" },
 
-  /* ── Patterned ──
-   *
-   * A cover is stored as an *index* into this list, so these are appended and
-   * never reordered: renumbering them would silently repaint every notebook
-   * anyone already has.
-   *
-   * Drawn entirely with CSS gradient layers — no image files, nothing to
-   * upload, nothing to fetch, and they stay crisp at any size and work offline
-   * like everything else here. `background` takes a stack of layers, topmost
-   * first, so each of these is a pattern laid over the colour beneath it.
-   *
-   * The patterns are deliberately faint. A cover is read at the size of a thumb
-   * with a title across it, and anything louder fights the title. */
-
-  // Ruled paper — the one that actually looks like a notebook.
-  {
-    bg: "repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 17px), linear-gradient(135deg,#1b2735,#2c5364)",
-    spine: "#101a24",
-    accent: "#80cbc4",
-  },
-  // Graph paper.
-  {
-    bg: "repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px 20px), repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 20px), linear-gradient(135deg,#243b2f,#3e7a5e)",
-    spine: "#16281f",
-    accent: "#a5d6a7",
-  },
-  // Diagonal pinstripe.
-  {
-    bg: "repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 6px,transparent 6px 14px), linear-gradient(135deg,#3a1c71,#5c2a8f)",
-    spine: "#2a1352",
-    accent: "#ce93d8",
-  },
-  // Wide diagonal bands.
-  {
-    bg: "repeating-linear-gradient(-45deg,rgba(0,0,0,.16) 0 18px,transparent 18px 36px), linear-gradient(135deg,#f7971e,#ffd200)",
-    spine: "#c2740f",
-    accent: "#fff59d",
-  },
-  // Dots.
-  {
-    bg: "radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.5px) 0 0/13px 13px, linear-gradient(135deg,#8b1e3f,#3c1053)",
-    spine: "#5e1029",
-    accent: "#f48fb1",
-  },
-  // Cross-hatch, both diagonals.
-  {
-    bg: "repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 11px), repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 11px), linear-gradient(135deg,#232526,#414345)",
-    spine: "#141516",
-    accent: "#b0bec5",
-  },
-  // Linen weave — very fine, reads as texture rather than as lines.
-  {
-    bg: "repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px), repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 4px), linear-gradient(135deg,#6b705c,#a5a58d)",
-    spine: "#4a4e40",
-    accent: "#ddbea9",
-  },
-  // Broad horizontal bands. Two crossed diagonals were meant to be a chevron
-  // and came out as noisy plaid — at thumbnail size a pattern has to be one
-  // idea, not two.
-  {
-    bg: "repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 13px,transparent 13px 26px), linear-gradient(135deg,#0b486b,#f56217)",
-    spine: "#073349",
-    accent: "#ffcc80",
-  },
-  // Light from the top corner, over deep blue — nothing repeating at all.
-  {
-    bg: "radial-gradient(120% 85% at 18% 0%,rgba(255,255,255,.22),transparent 62%), linear-gradient(135deg,#0f2027,#16324f)",
-    spine: "#08161d",
-    accent: "#90caf9",
-  },
-  // Two washes crossing, like ink bleeding into paper.
-  {
-    bg: "radial-gradient(80% 60% at 85% 15%,rgba(255,145,180,.35),transparent 60%), radial-gradient(90% 70% at 10% 90%,rgba(120,200,255,.30),transparent 60%), linear-gradient(135deg,#20143a,#3a2757)",
-    spine: "#150d28",
-    accent: "#f8bbd0",
-  },
-  // A band across the foot, the way a label sits on a ledger.
-  {
-    bg: "linear-gradient(0deg,rgba(0,0,0,.35) 0 22%,transparent 22%), linear-gradient(135deg,#134e5e,#71b280)",
-    spine: "#0b3a46",
-    accent: "#b9f6ca",
-  },
-  // Fine vertical rules on near-black — a ledger.
-  {
-    bg: "repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 26px), linear-gradient(135deg,#111318,#242a33)",
-    spine: "#0a0c10",
-    accent: "#cfd8dc",
-  },
 ];
 /* The icon is a key rather than an emoji: the sidebar draws it from the app's
  * own set, so it matches the stroke weight of everything around it and looks
@@ -137,3 +49,105 @@ export const DEFAULT_FOLDERS = [
   { id: "starred", name: "Starred", icon: "star" },
   { id: "trash", name: "Trash", icon: "trash" },
 ];
+
+/**
+ * A pattern laid over a cover, chosen separately from its colour.
+ *
+ * Two decisions rather than one list: a cover is a colour *and* a texture, and
+ * offering every combination as its own entry would mean fifteen gradients times
+ * a dozen patterns in a grid nobody could take in. Picking each in turn is both
+ * shorter and gives every combination, not the handful someone wrote out.
+ *
+ * `layers` are CSS background layers laid **over** the gradient — no image
+ * files, nothing to upload, crisp at any size and offline like the rest of the
+ * app. They are deliberately faint: a cover is read at the size of a thumb with
+ * a title across it, and anything louder fights the title. One idea each, too —
+ * two crossed diagonals meant as a chevron came out as noisy plaid at that size.
+ */
+export const PATTERNS = [
+  { id: "plain", label: "Plain", layers: "" },
+  {
+    id: "ruled",
+    label: "Ruled",
+    layers: "repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 17px)",
+  },
+  {
+    id: "grid",
+    label: "Grid",
+    layers:
+      "repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 20px), repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 20px)",
+  },
+  {
+    id: "pinstripe",
+    label: "Pinstripe",
+    layers: "repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0 6px,transparent 6px 14px)",
+  },
+  {
+    id: "bands",
+    label: "Bands",
+    layers: "repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 13px,transparent 13px 26px)",
+  },
+  {
+    id: "dots",
+    label: "Dots",
+    layers: "radial-gradient(rgba(255,255,255,.18) 1.4px,transparent 1.5px) 0 0/13px 13px",
+  },
+  {
+    id: "hatch",
+    label: "Cross-hatch",
+    layers:
+      "repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 11px), repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 11px)",
+  },
+  {
+    id: "linen",
+    label: "Linen",
+    layers:
+      "repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 4px), repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px 4px)",
+  },
+  {
+    id: "ledger",
+    label: "Ledger",
+    layers: "repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 26px)",
+  },
+  {
+    id: "glow",
+    label: "Corner light",
+    layers: "radial-gradient(120% 85% at 18% 0%,rgba(255,255,255,.20),transparent 62%)",
+  },
+  {
+    id: "foot",
+    label: "Foot band",
+    layers: "linear-gradient(0deg,rgba(0,0,0,.34) 0 22%,transparent 22%)",
+  },
+];
+
+/**
+ * Covers written before patterns were their own choice.
+ *
+ * Twelve patterned entries were appended to `COVERS` for a day, so a notebook
+ * may still hold an index into them. Rather than let those repaint themselves,
+ * each is read back as the colour-and-pattern pair it was drawn as.
+ */
+const LEGACY_COVER = {
+  15: [11, 1], 16: [2, 2], 17: [3, 3], 18: [9, 4], 19: [5, 5],
+  20: [8, 6], 21: [12, 7], 22: [4, 4], 23: [8, 9], 24: [0, 9],
+  25: [2, 10], 26: [8, 8],
+};
+
+/** The colour and pattern a notebook is actually drawn with. */
+export function coverParts(cover, pattern) {
+  const legacy = LEGACY_COVER[cover];
+  if (legacy) return { cover: legacy[0], pattern: legacy[1] };
+  return { cover: ((cover % COVERS.length) + COVERS.length) % COVERS.length, pattern: pattern || 0 };
+}
+
+/** The CSS `background` for a cover: its pattern laid over its colour. */
+export function coverBackground(cover, pattern) {
+  const parts = coverParts(cover, pattern);
+  const base = COVERS[parts.cover];
+  const layers = PATTERNS[parts.pattern]?.layers;
+  return layers ? `${layers}, ${base.bg}` : base.bg;
+}
+
+/** The rest of a cover's colours — the spine, and the accent used beside it. */
+export const coverStyle = (cover, pattern) => COVERS[coverParts(cover, pattern).cover];