merge: develop dans main — release v1.0.0 (lecteur PDF/EPUB/CBZ avec zoom/pinch/modes, accueil refondu, pages d'erreur, profil clarifié — tickets #34 à #48)

apps/web/src/pages/BookErrorPages.test.ts

@@ -0,0 +1,23 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+describe("book missing error pages", () => {
+  it("does not render fallback books on the book detail page", () => {
+    const source = readFileSync(new URL("./BookPage.tsx", import.meta.url), "utf8");
+
+    expect(source).not.toContain("getApiFallback");
+    expect(source).toContain("setBook(null)");
+    expect(source).toContain("Livre introuvable");
+    expect(source).toContain("Ce livre n'existe pas dans le catalogue.");
+  });
+
+  it("does not open the reader with a fallback book", () => {
+    const source = readFileSync(new URL("./ReaderPage.tsx", import.meta.url), "utf8");
+
+    expect(source).not.toContain("getApiFallback");
+    expect(source).toContain("setBook(null)");
+    expect(source).toContain("reader-missing-page");
+    expect(source).toContain("Livre introuvable");
+    expect(source).toContain("Ce livre n'existe pas dans le catalogue.");
+  });
+});

apps/web/src/pages/BookPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { BookOpen, LibraryBig, RotateCcw } from "lucide-react";
 import type { BookDto, ProgressDto } from "@readabook/shared";
-import { api, getApiFallback } from "../api/client";
+import { api } from "../api/client";
 import { cleanBookDescription } from "../book/description";
 import { bookDisplayTitle, bookMetadataState, bookMetadataStateLabel, bookSeriesInfo, displayPublishedDate } from "../book/metadata";
 import { EmptyState, ErrorRibbon, FormatPill, LoadingState, Meter, Panel } from "../components/ui";
@@ -17,14 +17,17 @@ export function BookPage({ bookId }: { bookId: number }) {
     setLoading(true);
     setError(undefined);
     try {
-      const [nextBook, nextProgress] = await Promise.all([api.book(bookId), api.progress(bookId)]);
+      const nextBook = await api.book(bookId);
       setBook(nextBook);
-      setProgress(nextProgress);
-    } catch (loadError) {
-      const fallback = getApiFallback<BookDto>(loadError);
-      setBook(fallback ?? null);
+      try {
+        setProgress(await api.progress(bookId));
+      } catch {
+        setProgress(null);
+      }
+    } catch {
+      setBook(null);
       setProgress(null);
-      setError(fallback ? "Fiche chargee en mode secours." : "Fiche livre indisponible.");
+      setError("Ce livre n'existe pas dans le catalogue.");
     } finally {
       setLoading(false);
     }
@@ -43,13 +46,20 @@ export function BookPage({ bookId }: { bookId: number }) {
   if (loading && !book) return <LoadingState />;
   if (!book) {
     return (
-      <Panel>
-        <EmptyState title="Fiche introuvable" detail={error ?? "Le catalogue n'a pas renvoye cet ouvrage."} />
-        <button className="ghost-button" onClick={() => void loadBook()}>
-          <RotateCcw size={17} />
-          Reessayer
-        </button>
-      </Panel>
+      <section className="book-error-page" role="alert">
+        <Panel>
+          <EmptyState title="Livre introuvable" detail={error ?? "Le serveur n'a pas renvoye cet ouvrage."} />
+          <div className="book-card-actions">
+            <button className="ghost-button" onClick={() => navigate("/home")}>
+              Retour à l'accueil
+            </button>
+            <button className="ghost-button" onClick={() => void loadBook()}>
+              <RotateCcw size={17} />
+              Reessayer
+            </button>
+          </div>
+        </Panel>
+      </section>
     );
   }
 

apps/web/src/pages/HomePage.tsx

@@ -1,22 +1,19 @@
 import { useEffect, useState } from "react";
 import { BookOpen, LibraryBig, ScanLine } from "lucide-react";
 import { api } from "../api/client";
-import { hasActiveCoverWork, isBookCoverUpdating, type DashboardData } from "../api/types";
-import { bookDisplayTitle, bookMetadataState, bookMetadataStateLabel, bookVolumeLabel, displayPublishedDate } from "../book/metadata";
-import { BookCard } from "../components/BookCard";
+import type { DashboardData } from "../api/types";
+import { bookDisplayTitle, bookVolumeLabel } from "../book/metadata";
 import { EmptyState, LoadingState, Meter, Panel } from "../components/ui";
 import { navigate } from "../router";
 
 export function HomePage() {
   const [state, setState] = useState<DashboardData | null>(null);
-  const [fallback, setFallback] = useState(false);
 
   useEffect(() => {
     let alive = true;
     Promise.all([api.books(), api.continueReading(), api.libraries(), api.jobs()])
       .then(([books, continueReading, libraries, jobs]) => {
         if (!alive) return;
-        setFallback(books.some((book) => book.filePath.startsWith("/library/")) && jobs.length === 1);
         setState({ books, continueReading, libraries, jobs });
       })
       .catch(() => {
@@ -28,15 +25,33 @@ export function HomePage() {
   }, []);
 
   if (!state) return <LoadingState />;
-  const fallbackCoverLoading = hasActiveCoverWork(state.jobs);
+
+  const renderHomeBook = (
+    item: DashboardData["books"][number],
+    className = "home-book-card",
+    options: { href?: string; progressPercent?: number } = {}
+  ) => {
+    const volumeLabel = bookVolumeLabel(item);
+    return (
+      <button key={item.id} className={className} onClick={() => navigate(options.href ?? `/book/${item.id}`)}>
+        <span className="home-book-cover" aria-hidden="true">
+          {item.coverPath ? <img src={api.bookCoverUrl(item.id)} alt="" /> : <BookOpen size={24} />}
+        </span>
+        <span className="home-book-copy">
+          {volumeLabel && <span className="home-book-volume">{volumeLabel}</span>}
+          <strong>{bookDisplayTitle(item)}</strong>
+          <span>{item.author ?? "Auteur inconnu"}</span>
+          {options.progressPercent !== undefined && <Meter value={options.progressPercent} />}
+        </span>
+      </button>
+    );
+  };
 
   return (
-    <div className="page-grid">
-      <section className="hero-band">
+    <div className="page-grid home-page">
+      <section className="hero-band home-hero">
         <div>
-          <p>Cabinet de curiosites numerique</p>
-          <h1>Ouvrir, classer, reprendre.</h1>
-          <span>{fallback ? "API absente ou incomplete : specimens de demonstration actifs." : "Catalogue branche sur le serveur local."}</span>
+          <h1>Reprendre la lecture.</h1>
         </div>
         <button className="primary-button" onClick={() => navigate("/search")}>
           <ScanLine size={18} />
@@ -46,30 +61,17 @@ export function HomePage() {
 
       <Panel className="span-2">
         <div className="section-heading">
-          <h2>Reprise de lecture</h2>
-          <span>{state.continueReading.length} traces</span>
+          <h2>Livres en cours</h2>
+          <span>{state.continueReading.length} lectures</span>
         </div>
         {state.continueReading.length ? (
           <div className="continue-grid">
-            {state.continueReading.map((item) => {
-              const metadataState = bookMetadataState(item.book);
-              const publishedDate = displayPublishedDate(item.book.publishedDate);
-              const volumeLabel = bookVolumeLabel(item.book);
-              return (
-                <button key={item.book.id} className="continue-tile" onClick={() => navigate(`/reader/${item.book.id}`)}>
-                  <span className="continue-cover" aria-hidden="true">
-                    {item.book.coverPath ? <img src={api.bookCoverUrl(item.book.id)} alt="" /> : <BookOpen size={22} />}
-                  </span>
-                  <span className="continue-copy">
-                    <strong>{bookDisplayTitle(item.book)}</strong>
-                    <span>{item.book.author ?? "Auteur inconnu"}</span>
-                    {(volumeLabel || publishedDate) && <span>{[volumeLabel, publishedDate].filter(Boolean).join(" · ")}</span>}
-                    <span className={`metadata-pill metadata-${metadataState}`}>{bookMetadataStateLabel(item.book)}</span>
-                    <Meter value={item.progress.percent} />
-                  </span>
-                </button>
-              );
-            })}
+            {state.continueReading.map((item) =>
+              renderHomeBook(item.book, "home-book-card continue-tile", {
+                href: `/reader/${item.book.id}`,
+                progressPercent: item.progress.percent
+              })
+            )}
           </div>
         ) : (
           <EmptyState title="Aucune trace" detail="Les lectures reprises apparaitront ici." />
@@ -91,10 +93,8 @@ export function HomePage() {
         </div>
       </Panel>
 
-      <section className="book-grid span-3">
-        {state.books.map((book) => (
-          <BookCard key={book.id} book={book} coverLoading={isBookCoverUpdating(book, fallbackCoverLoading)} />
-        ))}
+      <section className="home-book-grid span-3">
+        {state.books.map((book) => renderHomeBook(book))}
       </section>
     </div>
   );

apps/web/src/pages/HomePageProgressScroll.test.ts

@@ -2,17 +2,61 @@ import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 
 describe("home progress list layout", () => {
-  it("keeps the continue reading list scrollable after six visible books", () => {
+  it("keeps the continue reading list scrollable after three visible books", () => {
     const styles = readFileSync(new URL("../styles/app.css", import.meta.url), "utf8");
-    const continueGrid = styles.match(/\.continue-grid\s*\{[^}]+\}/)?.[0] ?? "";
     const continueTile = styles.match(/\.continue-tile\s*\{[^}]+\}/)?.[0] ?? "";
 
-    expect(continueGrid).toContain("--continue-visible-rows: 6");
-    expect(continueGrid).toContain("--continue-tile-block-size: 118px");
-    expect(continueGrid).toContain("max-height: calc((var(--continue-tile-block-size) * var(--continue-visible-rows)) + (10px * (var(--continue-visible-rows) - 1)))");
-    expect(continueGrid).toContain("overflow-y: auto");
-    expect(continueGrid).toContain("scrollbar-gutter: stable");
+    expect(styles).toContain(".continue-grid,\n.library-list {\n  --continue-visible-rows: 3;");
+    expect(styles).toContain("--continue-tile-block-size: 112px");
+    expect(styles).toContain("max-height: calc((var(--continue-tile-block-size) * var(--continue-visible-rows)) + (10px * (var(--continue-visible-rows) - 1)))");
+    expect(styles).toContain("overflow-y: auto");
+    expect(styles).toContain("scrollbar-gutter: stable");
     expect(continueTile).toContain("block-size: var(--continue-tile-block-size)");
     expect(continueTile).toContain("overflow: hidden");
   });
+
+  it("keeps home book cards scoped and simplified", () => {
+    const source = readFileSync(new URL("./HomePage.tsx", import.meta.url), "utf8");
+
+    expect(source).toContain("renderHomeBook");
+    expect(source).toContain("home-book-card");
+    expect(source).toContain("progressPercent");
+    expect(source).toContain("<Meter value={options.progressPercent} />");
+    expect(source).toContain("progressPercent: item.progress.percent");
+    expect(source).not.toContain("<BookCard");
+    expect(source).not.toContain("FormatPill");
+    expect(source).not.toContain("bookMetadataState");
+    expect(source).not.toContain("bookMetadataStateLabel");
+    expect(source).not.toContain("displayPublishedDate");
+    expect(source).not.toContain("book.description");
+    expect(source).not.toContain("book.language");
+    expect(source).not.toContain("API absente ou incomplete");
+    expect(source).not.toContain("specimens de demonstration actifs");
+    expect(source).not.toContain("Catalogue branche sur le serveur local");
+    expect(source).not.toContain("Bibliotheque personnelle");
+  });
+
+  it("keeps visible book grids capped to five columns", () => {
+    const styles = readFileSync(new URL("../styles/app.css", import.meta.url), "utf8");
+    const bookGrid = styles.match(/\.book-grid\s*\{[^}]+\}/)?.[0] ?? "";
+    const homeBookGrid = styles.match(/\.home-book-grid\s*\{[^}]+\}/)?.[0] ?? "";
+
+    expect(bookGrid).toContain("grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--book-grid-column-min), calc((100% - (var(--book-grid-gap) * 4)) / 5))), 1fr))");
+    expect(homeBookGrid).toContain("grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--book-grid-column-min), calc((100% - (var(--book-grid-gap) * 4)) / 5))), 1fr))");
+    expect(bookGrid).toContain("width: 100%");
+    expect(homeBookGrid).toContain("width: 100%");
+    expect(bookGrid).not.toContain("max-width");
+    expect(homeBookGrid).not.toContain("max-width");
+  });
+
+  it("keeps the library list capped like continue reading", () => {
+    const styles = readFileSync(new URL("../styles/app.css", import.meta.url), "utf8");
+    const libraryButton = styles.match(/\.library-list button\s*\{[^}]+\}/)?.[0] ?? "";
+
+    expect(styles).toContain(".continue-grid,\n.library-list {\n  --continue-visible-rows: 3;");
+    expect(styles).toContain("height: calc((var(--continue-tile-block-size) * var(--continue-visible-rows)) + (10px * (var(--continue-visible-rows) - 1)))");
+    expect(styles).toContain("max-height: calc((var(--continue-tile-block-size) * var(--continue-visible-rows)) + (10px * (var(--continue-visible-rows) - 1)))");
+    expect(libraryButton).toContain("block-size: var(--continue-tile-block-size)");
+    expect(libraryButton).toContain("overflow: hidden");
+  });
 });

apps/web/src/pages/ProfilePage.tsx

@@ -42,14 +42,24 @@ export function ProfilePage({ session, onSessionChange }: { session: Session; on
   return (
     <div className="page-grid">
       <Panel className="profile-panel">
-        <UserRound size={28} />
-        <h1>{session.user?.name ?? "Lecteur invite"}</h1>
-        <p>{session.user?.email ?? "Session non connectee"}</p>
-        <span>{session.user?.role ?? "vitrine"}</span>
-        <button className="ghost-button" onClick={logout}>
-          <LogOut size={17} />
-          Sortir
-        </button>
+        <div className="profile-identity">
+          <span className="profile-avatar" aria-hidden="true">
+            <UserRound size={28} />
+          </span>
+          <h1>{session.user?.name ?? "Lecteur invite"}</h1>
+          <p>{session.user?.email ?? "Session non connectee"}</p>
+          <span>{session.user?.role ?? "vitrine"}</span>
+        </div>
+        <div className="profile-actions">
+          <button className="ghost-button" onClick={() => document.getElementById("profile-security-form")?.scrollIntoView({ block: "start" })}>
+            <KeyRound size={17} />
+            Modifier
+          </button>
+          <button className="ghost-button" onClick={logout}>
+            <LogOut size={17} />
+            Sortir
+          </button>
+        </div>
       </Panel>
       <Panel className="span-2">
         <div className="section-heading">
@@ -59,7 +69,7 @@ export function ProfilePage({ session, onSessionChange }: { session: Session; on
         <p className="muted-copy">Change l'email et le mot de passe admin initial des que le cabinet est installe.</p>
         <ErrorRibbon message={error} />
         {success && <div className="success-ribbon">{success}</div>}
-        <form className="stack-form" onSubmit={updateSecurity}>
+        <form id="profile-security-form" className="stack-form" onSubmit={updateSecurity}>
           <label>
             Email
             <input value={email} onChange={(event) => setEmail(event.target.value)} type="email" required />

apps/web/src/pages/ProfilePagePolish.test.ts

@@ -0,0 +1,17 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+describe("profile page polish", () => {
+  it("focuses the left column on identity and immediate actions", () => {
+    const source = readFileSync(new URL("./ProfilePage.tsx", import.meta.url), "utf8");
+    const styles = readFileSync(new URL("../styles/app.css", import.meta.url), "utf8");
+
+    expect(source).toContain("profile-identity");
+    expect(source).toContain("profile-avatar");
+    expect(source).toContain("profile-actions");
+    expect(source).toContain('id="profile-security-form"');
+    expect(source).toContain("scrollIntoView");
+    expect(styles).toContain(".profile-identity");
+    expect(styles).toContain(".profile-actions");
+  });
+});

apps/web/src/pages/ReaderPage.tsx

@@ -1,6 +1,6 @@
 import { Component, useCallback, useEffect, useMemo, useState, type ErrorInfo, type ReactNode } from "react";
 import type { BookDto } from "@readabook/shared";
-import { api, getApiFallback } from "../api/client";
+import { api } from "../api/client";
 import { CbzReader } from "../reader/CbzReader";
 import { EpubReader } from "../reader/EpubReader";
 import { pageLocator, parseCbrPageLocator, parseCbzPageLocator, parsePdfPageLocator, pdfPagePercent } from "../reader/locators";
@@ -11,6 +11,7 @@ import { majorityVisiblePage, type ReaderMode } from "../reader/readerScroll";
 import { useReaderPreferences } from "../reader/useReaderPreferences";
 import { useReaderProgress } from "../reader/useReaderProgress";
 import { navigate } from "../router";
+import { EmptyState, LoadingState, Panel } from "../components/ui";
 
 const idleControls: ReaderControls = {
   canPrevious: false,
@@ -74,10 +75,9 @@ export function ReaderPage({ bookId }: { bookId: number }) {
     setError(undefined);
     try {
       setBook(await api.book(bookId));
-    } catch (loadError) {
-      const fallback = getApiFallback<BookDto>(loadError);
-      setBook(fallback ?? null);
-      setError(fallback ? "Lecteur ouvert en mode secours." : "Ouvrage indisponible.");
+    } catch {
+      setBook(null);
+      setError("Ce livre n'existe pas dans le catalogue.");
     } finally {
       setLoading(false);
     }
@@ -206,6 +206,26 @@ export function ReaderPage({ bookId }: { bookId: number }) {
     [changeMode, mode, supportsMode]
   );
 
+  if (loading && !book) return <LoadingState />;
+
+  if (!book) {
+    return (
+      <section className="reader-missing-page" role="alert">
+        <Panel>
+          <EmptyState title="Livre introuvable" detail={error ?? "Le serveur n'a pas renvoye cet ouvrage."} />
+          <div className="reader-error-actions">
+            <button className="ghost-button" onClick={() => navigate("/home")}>
+              Retour à l'accueil
+            </button>
+            <button className="ghost-button" onClick={() => void loadBook()}>
+              Réessayer
+            </button>
+          </div>
+        </Panel>
+      </section>
+    );
+  }
+
   return (
     <ReaderShell
       title={book?.title ?? "Ouverture du lecteur"}
@@ -251,14 +271,7 @@ export function ReaderPage({ bookId }: { bookId: number }) {
           </div>
         )}
       >
-        {!book ? (
-          <div className="reader-fallback">
-            <span>{error ?? "Chargement du livre."}</span>
-            <button className="ghost-button" onClick={() => void loadBook()}>
-              Reessayer
-            </button>
-          </div>
-        ) : book.format === "pdf" ? (
+        {book.format === "pdf" ? (
           <PdfReader
             url={fileUrl}
             page={page}

apps/web/src/styles/app.css

@@ -161,9 +161,12 @@ h2 {
 }
 
 .book-grid {
+  --book-grid-column-min: 240px;
+  --book-grid-gap: 16px;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--book-grid-column-min), calc((100% - (var(--book-grid-gap) * 4)) / 5))), 1fr));
+  gap: var(--book-grid-gap);
+  width: 100%;
 }
 
 .book-card {
@@ -237,6 +240,15 @@ h2 {
   white-space: pre-line;
 }
 
+.book-error-page,
+.reader-missing-page {
+  display: grid;
+  align-items: center;
+  width: min(100%, 680px);
+  min-height: 60vh;
+  margin: 0 auto;
+}
+
 .book-card-description {
   display: -webkit-box;
   overflow: hidden;
@@ -356,6 +368,24 @@ h2 {
   background: rgba(169, 72, 52, 0.12);
 }
 
+.home-page {
+  align-items: start;
+  gap: 18px;
+}
+
+.home-hero {
+  min-height: 176px;
+  border-color: rgba(247, 240, 223, 0.13);
+  background:
+    linear-gradient(180deg, rgba(247, 240, 223, 0.08), rgba(247, 240, 223, 0.025)),
+    rgba(23, 17, 13, 0.74);
+}
+
+.home-hero h1 {
+  max-width: 740px;
+  font-size: clamp(2.2rem, 5vw, 4.1rem);
+}
+
 .continue-grid,
 .library-list,
 .job-list {
@@ -363,9 +393,11 @@ h2 {
   gap: 10px;
 }
 
-.continue-grid {
-  --continue-visible-rows: 6;
-  --continue-tile-block-size: 118px;
+.continue-grid,
+.library-list {
+  --continue-visible-rows: 3;
+  --continue-tile-block-size: 112px;
+  height: calc((var(--continue-tile-block-size) * var(--continue-visible-rows)) + (10px * (var(--continue-visible-rows) - 1)));
   max-height: calc((var(--continue-tile-block-size) * var(--continue-visible-rows)) + (10px * (var(--continue-visible-rows) - 1)));
   overflow-y: auto;
   padding-right: 4px;
@@ -416,12 +448,97 @@ h2 {
 }
 
 .continue-tile {
-  grid-template-columns: 52px minmax(0, 1fr);
-  align-items: start;
   block-size: var(--continue-tile-block-size);
   overflow: hidden;
 }
 
+.library-list button {
+  block-size: var(--continue-tile-block-size);
+  overflow: hidden;
+}
+
+.home-book-grid {
+  --book-grid-column-min: 190px;
+  --book-grid-gap: 14px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--book-grid-column-min), calc((100% - (var(--book-grid-gap) * 4)) / 5))), 1fr));
+  gap: var(--book-grid-gap);
+  width: 100%;
+}
+
+.home-book-card {
+  display: grid;
+  grid-template-columns: 62px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid rgba(247, 240, 223, 0.12);
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.035);
+  color: var(--ink);
+  text-align: left;
+}
+
+.home-book-card:hover {
+  border-color: rgba(213, 168, 77, 0.42);
+  background: rgba(255, 255, 255, 0.055);
+}
+
+.home-book-cover {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  aspect-ratio: 2 / 3;
+  overflow: hidden;
+  border: 1px solid rgba(247, 240, 223, 0.14);
+  border-radius: 5px;
+  background:
+    linear-gradient(135deg, rgba(213, 168, 77, 0.16), rgba(45, 111, 99, 0.16)),
+    var(--paper-soft);
+  color: var(--brass);
+}
+
+.home-book-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.home-book-copy {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.home-book-copy strong,
+.home-book-copy span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.home-book-copy strong {
+  line-height: 1.15;
+}
+
+.home-book-copy > span {
+  color: var(--ink-muted);
+}
+
+.home-book-volume {
+  width: max-content;
+  max-width: 100%;
+  padding: 3px 6px;
+  border: 1px solid rgba(213, 168, 77, 0.42);
+  border-radius: 999px;
+  color: #f5dfaa;
+  font-size: 0.72rem;
+  font-weight: 900;
+  background: rgba(213, 168, 77, 0.1);
+}
+
 .continue-cover {
   display: grid;
   place-items: center;
@@ -868,8 +985,54 @@ select {
 
 .profile-panel {
   display: grid;
-  gap: 10px;
+  align-content: start;
+  gap: 18px;
+}
+
+.profile-identity {
+  display: grid;
   justify-items: start;
+  gap: 8px;
+}
+
+.profile-avatar {
+  display: grid;
+  place-items: center;
+  width: 52px;
+  height: 52px;
+  border: 1px solid rgba(247, 240, 223, 0.14);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.045);
+  color: var(--brass);
+}
+
+.profile-identity h1 {
+  margin-bottom: 0;
+  font-size: 1.8rem;
+  line-height: 1.05;
+}
+
+.profile-identity p {
+  margin-bottom: 0;
+  color: var(--ink-muted);
+  overflow-wrap: anywhere;
+}
+
+.profile-identity span:not(.profile-avatar) {
+  width: max-content;
+  max-width: 100%;
+  padding: 4px 7px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--ink-muted);
+  font-size: 0.76rem;
+  font-weight: 900;
+}
+
+.profile-actions {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
 }
 
 .reader-page {