Processed some UI issues on journal

README.md

@@ -31,7 +31,7 @@ pip install -r backend\requirements.txt
 Start FastAPI:
 
 ```powershell
-uvicorn backend.main:app --reload --port 8000 --env-file backend\.env
+uvicorn backend.main:app --reload --reload-dir backend --port 8000 --env-file backend\.env
 ```
 
 In a second terminal, start React:
@@ -51,14 +51,16 @@ The interface loads Roboto Flex from Google Fonts for its compact UI copy, while
 The form uses `POST /api/contact` and sends email through SMTP. Copy `backend/.env.example` to `backend/.env`, fill in the SMTP values, and start the API with the environment file:
 
 ```powershell
-uvicorn backend.main:app --reload --port 8000 --env-file backend\.env
+uvicorn backend.main:app --reload --reload-dir backend --port 8000 --env-file backend\.env
 ```
 
 If SMTP is unavailable, the API returns a clear delivery error and the page keeps Alex's direct email, LinkedIn, and GitHub links visible.
 
 ## Journal publisher
 
-Open `http://localhost:5173/blog/manage` and sign in with the journal admin password. The writing room uses Tiptap for headings, bold and italic text, lists, undo/redo, and inline font sizes. Publishing writes to Supabase when it is configured, or to `backend/data/posts.json` during local fallback mode.
+Click the lock icon beside the header navigation and enter the journal admin password. Signing in enables **New article**, **Edit**, and **Delete** controls throughout the journal. The account icon opens the admin menu and sign-out control. You can also open `http://localhost:5173/blog/manage` directly; the page prompts you to sign in before writing.
+
+The writing room uses Tiptap for headings, bold and italic text, lists, undo/redo, and inline font sizes. Creating, updating, and deleting articles uses Supabase when configured, or `backend/data/posts.json` in local fallback mode. Edit controls open `/blog/{slug}/edit` with the existing sections, formatting, topics, banner, and attachments. Editing a title preserves the published URL. Deleting an article requires confirmation and removes it from the journal; stored uploads remain available at their existing URLs.
 
 Set unique production values in `backend/.env`:
 
@@ -67,11 +69,15 @@ JOURNAL_ADMIN_PASSWORD=replace-with-a-strong-password
 JOURNAL_TOKEN_SECRET=replace-with-a-long-random-secret
 ```
 
-The login endpoint returns a signed session that expires after four hours. The password remains server-side and the browser stores only the temporary token.
+The login endpoint returns a signed admin session that expires after four hours. The password remains server-side and the browser stores only the temporary token. The shared session restores after refresh and expires automatically. Every create, update, delete, and upload endpoint verifies the admin token on the server.
+
+Reading the journal is public and independent of the admin session. Journal lists and article pages retry temporary failures once, refresh after successful sign-in, and offer **Try again** if the store remains unavailable. Existing content stays visible during failed refreshes. A temporary session-check failure preserves the saved token and can recover when the connection returns. Supabase reads use bounded retries and log the failure type/code without credentials or article content.
 
 Use **+ Section** in the editor to add a section heading and opening paragraph. Section headings receive the same divider and uppercase drop cap as the starter articles, with formatting visible in the editor. Existing H2 headings use this styling automatically.
 
-The publisher accepts a banner image (JPEG, PNG, WebP, or GIF, up to 8 MB) and up to ten additional photos or files (20 MB each). The banner appears in the journal thumbnail and above the article title; additional photos and downloadable files appear below the body. Uploads require an admin session. File contents are saved in `backend/data/uploads` in both article storage modes; set `JOURNAL_UPLOAD_DIR` to a persistent mounted directory in production and include it in backups. Uploaded files are publicly accessible by their generated URLs. Removing a selection from an unpublished draft does not delete its stored upload.
+The media picker supports drag-and-drop or file browsing, a live banner preview with the article title and subtitle, file-size and format checks, and duplicate detection by file name and size. Uploads have individual progress, cancel, and retry controls; a failed file does not stop the remaining queue. Retry or remove pending/failed uploads before publishing. Use the up/down controls to set the order of additional photos and files. Replacing a banner keeps the previous image until the replacement uploads successfully.
+
+The publisher accepts a banner image (JPEG, PNG, WebP, or GIF, up to 8 MB) and up to ten additional photos or files (20 MB each). The banner appears in the journal thumbnail and behind the article title and subtitle with a readability overlay; additional photos and downloadable files appear below the body. Uploads require an admin session. File contents are saved in `backend/data/uploads` in both article storage modes; set `JOURNAL_UPLOAD_DIR` to a persistent mounted directory in production and include it in backups. Uploaded files are publicly accessible by their generated URLs. Removing a selection from an unpublished draft does not delete its stored upload.
 
 For an existing Supabase project, run `bash scripts/setup_supabase.sh --schema-only` to add the nullable `banner` and default-empty `attachments` columns before running the updated backend. Existing articles remain compatible.
 
@@ -109,6 +115,10 @@ The access token must be project-scoped with **Database: Read-write** permission
 - `POST /api/auth/login`
 - `GET /api/auth/session`
 - `POST /api/posts` (authenticated)
+- `PUT /api/posts/{slug}` (authenticated)
+- `DELETE /api/posts/{slug}` (authenticated)
+- `POST /api/uploads` (authenticated)
+- `GET /api/uploads/{upload_id}`
 - `GET /api/resume`
 - `POST /api/contact`
 

backend/main.py

@@ -3,6 +3,7 @@ from __future__ import annotations
 import hashlib
 import hmac
 import json
+import logging
 import os
 import re
 import smtplib
@@ -23,7 +24,8 @@ from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse
 from pydantic import BaseModel, EmailStr, Field
 from starlette.concurrency import run_in_threadpool
-from supabase import Client, create_client
+from httpx import TransportError
+from supabase import Client, ClientOptions, PostgrestAPIError, create_client
 
 
 BASE_DIR = Path(__file__).resolve().parent
@@ -36,6 +38,7 @@ POSTS_LOCK = threading.Lock()
 ADMIN_TOKEN_TTL = 60 * 60 * 4
 UPLOAD_DIR = Path(os.getenv("JOURNAL_UPLOAD_DIR", str(DATA_DIR / "uploads"))).resolve()
 MAX_UPLOAD_BYTES = 20 * 1024 * 1024
+logger = logging.getLogger("uvicorn.error")
 
 
 class ArticleMedia(BaseModel):
@@ -60,7 +63,7 @@ app.add_middleware(
     CORSMiddleware,
     allow_origins=origins,
     allow_credentials=True,
-    allow_methods=["GET", "POST"],
+    allow_methods=["GET", "POST", "PUT", "DELETE"],
     allow_headers=["*"],
 )
 
@@ -111,7 +114,11 @@ def get_supabase() -> Client | None:
             status_code=500,
             detail="Supabase configuration is incomplete.",
         )
-    return create_client(url, key)
+    return create_client(url, key, options=ClientOptions(
+        postgrest_client_timeout=8,
+        auto_refresh_token=False,
+        persist_session=False,
+    ))
 
 
 def articles_table() -> str:
@@ -121,6 +128,25 @@ def articles_table() -> str:
     return table
 
 
+def read_article_query(query: Any) -> Any:
+    # Bound reads to two attempts, including SDK retries. Never retry mutations.
+    for attempt in range(2):
+        try:
+            return query.retry(False).execute()
+        except Exception as exc:
+            code = str(getattr(exc, "code", ""))
+            transient = isinstance(exc, TransportError) or (
+                isinstance(exc, PostgrestAPIError) and code in {"500", "502", "503", "504", "520", "522", "524"}
+            )
+            # Log the error type and code, not credentials, article data, or response bodies.
+            safe_code = code if re.fullmatch(r"[A-Za-z0-9_]{1,20}", code) else "unknown"
+            logger.warning("Journal read failed: type=%s code=%s attempt=%s", type(exc).__name__, safe_code, attempt + 1)
+            if transient and attempt == 0:
+                time.sleep(0.2)
+                continue
+            raise HTTPException(status_code=502, detail="The journal store is temporarily unavailable. Please try again.") from exc
+
+
 def article_records(include_content: bool = True) -> list[dict[str, Any]]:
     client = get_supabase()
     if client is None:
@@ -135,18 +161,9 @@ def article_records(include_content: bool = True) -> list[dict[str, Any]]:
     columns = "slug,title,excerpt,published_at,read_time,tags,accent,banner,attachments"
     if include_content:
         columns += ",content"
-    try:
-        response = (
-            client.table(articles_table())
-            .select(columns)
-            .order("published_at", desc=True)
-            .execute()
-        )
-    except Exception as exc:
-        raise HTTPException(
-            status_code=status.HTTP_502_BAD_GATEWAY,
-            detail="The journal store is temporarily unavailable.",
-        ) from exc
+    response = read_article_query(
+        client.table(articles_table()).select(columns).order("published_at", desc=True)
+    )
     return response.data or []
 
 
@@ -263,12 +280,13 @@ def admin_login(payload: LoginPayload) -> dict[str, Any]:
         "token_type": "bearer",
         "expires_at": expires_at,
         "expires_in": ADMIN_TOKEN_TTL,
+        "role": "admin",
     }
 
 
 @app.get("/api/auth/session")
-def admin_session(_: None = Depends(require_admin)) -> dict[str, bool]:
-    return {"authenticated": True}
+def admin_session(_: None = Depends(require_admin)) -> dict[str, Any]:
+    return {"authenticated": True, "role": "admin"}
 
 
 @app.get("/api/posts")
@@ -349,11 +367,7 @@ def download_media(upload_id: str) -> FileResponse:
     )
 
 
-@app.post("/api/posts", status_code=status.HTTP_201_CREATED)
-def create_post(
-    payload: NewPostPayload, _: None = Depends(require_admin)
-) -> dict[str, Any]:
-    slug = post_slug(payload.title)
+def validated_article(payload: NewPostPayload, slug: str) -> dict[str, Any]:
     clean_tags = list(dict.fromkeys(tag.strip() for tag in payload.tags if tag.strip()))
     if not clean_tags:
         raise HTTPException(status_code=422, detail="Add at least one topic tag.")
@@ -373,6 +387,25 @@ def create_post(
         raise HTTPException(status_code=422, detail="The article body is too short.")
     if len(json.dumps(article["content"], ensure_ascii=False)) > 250_000:
         raise HTTPException(status_code=422, detail="The formatted article is too large.")
+    return article
+
+
+def save_local_posts(records: list[dict[str, Any]]) -> None:
+    # Call while holding POSTS_LOCK so readers only see a complete replacement.
+    temporary_path = POSTS_PATH.with_suffix(".json.tmp")
+    temporary_path.write_text(
+        json.dumps(records, indent=2, ensure_ascii=False) + "\n", encoding="utf-8"
+    )
+    temporary_path.replace(POSTS_PATH)
+    read_data.cache_clear()
+
+
+@app.post("/api/posts", status_code=status.HTTP_201_CREATED)
+def create_post(
+    payload: NewPostPayload, _: None = Depends(require_admin)
+) -> dict[str, Any]:
+    slug = post_slug(payload.title)
+    article = validated_article(payload, slug)
 
     client = get_supabase()
     if client is not None:
@@ -409,17 +442,62 @@ def create_post(
                 detail="A journal post with this title already exists.",
             )
         current_posts.append(article)
-        temporary_path = POSTS_PATH.with_suffix(".json.tmp")
-        temporary_path.write_text(
-            json.dumps(current_posts, indent=2, ensure_ascii=False) + "\n",
-            encoding="utf-8",
-        )
-        temporary_path.replace(POSTS_PATH)
-        read_data.cache_clear()
+        save_local_posts(current_posts)
 
     return article
 
 
+@app.put("/api/posts/{slug}")
+def update_post(
+    slug: str, payload: NewPostPayload, _: None = Depends(require_admin)
+) -> dict[str, Any]:
+    if not re.fullmatch(r"[a-z0-9-]+", slug):
+        raise HTTPException(status_code=404, detail="Post not found")
+    # Keep published URLs stable when an admin changes the title.
+    article = validated_article(payload, slug)
+    client = get_supabase()
+    if client is not None:
+        try:
+            response = client.table(articles_table()).update(article).eq("slug", slug).execute()
+        except Exception as exc:
+            raise HTTPException(status_code=502, detail="The article could not be updated. Please try again.") from exc
+        if not response.data:
+            raise HTTPException(status_code=404, detail="Post not found")
+        return response.data[0]
+
+    with POSTS_LOCK:
+        records = json.loads(POSTS_PATH.read_text(encoding="utf-8"))
+        for index, existing in enumerate(records):
+            if existing["slug"] == slug:
+                records[index] = {**existing, **article}
+                save_local_posts(records)
+                return records[index]
+    raise HTTPException(status_code=404, detail="Post not found")
+
+
+@app.delete("/api/posts/{slug}")
+def delete_post(slug: str, _: None = Depends(require_admin)) -> dict[str, bool]:
+    if not re.fullmatch(r"[a-z0-9-]+", slug):
+        raise HTTPException(status_code=404, detail="Post not found")
+    client = get_supabase()
+    if client is not None:
+        try:
+            response = client.table(articles_table()).delete().eq("slug", slug).execute()
+        except Exception as exc:
+            raise HTTPException(status_code=502, detail="The article could not be deleted. Please try again.") from exc
+        if not response.data:
+            raise HTTPException(status_code=404, detail="Post not found")
+        return {"deleted": True}
+
+    with POSTS_LOCK:
+        records = json.loads(POSTS_PATH.read_text(encoding="utf-8"))
+        remaining = [post for post in records if post["slug"] != slug]
+        if len(remaining) == len(records):
+            raise HTTPException(status_code=404, detail="Post not found")
+        save_local_posts(remaining)
+    return {"deleted": True}
+
+
 @app.get("/api/posts/{slug}")
 def post_by_slug(slug: str) -> dict[str, Any]:
     if not re.fullmatch(r"[a-z0-9-]+", slug):
@@ -427,19 +505,11 @@ def post_by_slug(slug: str) -> dict[str, Any]:
 
     client = get_supabase()
     if client is not None:
-        try:
-            response = (
-                client.table(articles_table())
-                .select("slug,title,excerpt,published_at,read_time,tags,accent,content,banner,attachments")
-                .eq("slug", slug)
-                .limit(1)
-                .execute()
-            )
-        except Exception as exc:
-            raise HTTPException(
-                status_code=status.HTTP_502_BAD_GATEWAY,
-                detail="The journal store is temporarily unavailable.",
-            ) from exc
+        response = read_article_query(
+            client.table(articles_table())
+            .select("slug,title,excerpt,published_at,read_time,tags,accent,content,banner,attachments")
+            .eq("slug", slug).limit(1)
+        )
         if response.data:
             return response.data[0]
         raise HTTPException(status_code=404, detail="Post not found")

backend/requirements.txt

@@ -1,4 +1,5 @@
 fastapi
+httpx
 Pillow
 uvicorn[standard]
 email-validator

backend/test_articles.py

@@ -4,10 +4,12 @@ import os
 from pathlib import Path
 from tempfile import TemporaryDirectory
 import unittest
-from unittest.mock import patch
+from unittest.mock import MagicMock, patch
 
 from fastapi.testclient import TestClient
 from PIL import Image
+from httpx import ReadTimeout, RemoteProtocolError
+from supabase import PostgrestAPIError
 
 from backend import main
 
@@ -79,6 +81,99 @@ class ArticleMediaTests(unittest.TestCase):
         self.assertEqual(downloaded.headers["x-content-type-options"], "nosniff")
         self.assertIn("attachment", downloaded.headers["content-disposition"])
 
+    def article_payload(self):
+        return {
+            "title": "An editable article", "excerpt": "An introduction with enough detail for readers.",
+            "published_at": "2026-09-12", "read_time": 3, "tags": ["Custom topic"],
+            "content": {"type": "doc", "content": [{"type": "paragraph", "content": [
+                {"type": "text", "text": "An original article body with enough text to validate and publish."}
+            ]}]},
+        }
+
+    def test_admin_role_and_protected_crud(self):
+        self.assertEqual(self.client.post("/api/auth/login", json={"password": "wrong"}).status_code, 401)
+        session = self.client.get("/api/auth/session", headers=self.headers)
+        self.assertEqual(session.json(), {"authenticated": True, "role": "admin"})
+        payload = self.article_payload()
+        self.assertEqual(self.client.post("/api/posts", json=payload).status_code, 401)
+        created = self.client.post("/api/posts", json=payload, headers=self.headers).json()
+        path = f'/api/posts/{created["slug"]}'
+        for headers in ({}, {"Authorization": "Bearer 1.invalid"}):
+            self.assertEqual(self.client.put(path, json=payload, headers=headers).status_code, 401)
+            self.assertEqual(self.client.delete(path, headers=headers).status_code, 401)
+        self.assertEqual(self.client.get(path).json()["title"], payload["title"])
+
+        payload["title"] = "The updated article title"
+        payload["tags"] = ["Updated topic"]
+        payload["attachments"] = [self.upload(b"updated notes", name="notes.txt").json()]
+        updated = self.client.put(path, json=payload, headers=self.headers)
+        self.assertEqual(updated.status_code, 200, updated.text)
+        self.assertEqual(updated.json()["slug"], created["slug"])
+        self.assertEqual(self.client.get(path).json()["attachments"], payload["attachments"])
+        self.assertEqual(self.client.get("/api/posts").json()[0]["title"], payload["title"])
+        invalid = {**payload, "content": {"type": "doc", "content": []}}
+        self.assertEqual(self.client.put(path, json=invalid, headers=self.headers).status_code, 422)
+        self.assertEqual(self.client.put("/api/posts/missing", json=payload, headers=self.headers).status_code, 404)
+        self.assertEqual(self.client.delete(path, headers=self.headers).status_code, 200)
+        self.assertEqual(self.client.get(path).status_code, 404)
+        self.assertEqual(self.client.get("/api/posts").json(), [])
+        self.assertEqual(json.loads(main.POSTS_PATH.read_text()), [])
+        self.assertEqual(self.client.delete(path, headers=self.headers).status_code, 404)
+
+    def test_supabase_update_delete_are_scoped_and_report_failures(self):
+        client = MagicMock()
+        table = client.table.return_value
+        payload = self.article_payload()
+        table.update.return_value.eq.return_value.execute.return_value.data = [{**payload, "slug": "original-url"}]
+        table.delete.return_value.eq.return_value.execute.return_value.data = [{"slug": "original-url"}]
+        with patch.object(main, "get_supabase", return_value=client):
+            updated = self.client.put("/api/posts/original-url", json=payload, headers=self.headers)
+            self.assertEqual(updated.status_code, 200)
+            table.update.return_value.eq.assert_called_once_with("slug", "original-url")
+            self.assertEqual(self.client.delete("/api/posts/original-url", headers=self.headers).status_code, 200)
+            table.delete.return_value.eq.assert_called_once_with("slug", "original-url")
+            table.update.return_value.eq.return_value.execute.return_value.data = []
+            self.assertEqual(self.client.put("/api/posts/missing", json=payload, headers=self.headers).status_code, 404)
+            table.delete.return_value.eq.return_value.execute.return_value.data = []
+            self.assertEqual(self.client.delete("/api/posts/missing", headers=self.headers).status_code, 404)
+            table.update.return_value.eq.return_value.execute.side_effect = RuntimeError("offline")
+            self.assertEqual(self.client.put("/api/posts/original-url", json=payload, headers=self.headers).status_code, 502)
+            table.delete.return_value.eq.return_value.execute.side_effect = RuntimeError("offline")
+            self.assertEqual(self.client.delete("/api/posts/original-url", headers=self.headers).status_code, 502)
+
+    def test_journal_reads_retry_transient_errors_but_remain_public(self):
+        client = MagicMock()
+        query = MagicMock()
+        query.retry.return_value = query
+        client.table.return_value.select.return_value.order.return_value = query
+        client.table.return_value.select.return_value.eq.return_value.limit.return_value = query
+        article = {**self.article_payload(), "slug": "test-article", "accent": "mint"}
+        response = MagicMock(data=[article])
+        with patch.object(main, "get_supabase", return_value=client), patch.object(main.time, "sleep"):
+            for path in ("/api/posts", "/api/posts/test-article"):
+                for failure in (
+                    RemoteProtocolError("connection ended"),
+                    ReadTimeout("read timed out"),
+                    PostgrestAPIError({"code": "503", "message": "unavailable"}),
+                ):
+                    query.execute.reset_mock()
+                    query.execute.side_effect = [failure, response]
+                    result = self.client.get(path)  # No admin token: reading stays public.
+                    self.assertEqual(result.status_code, 200, result.text)
+                    self.assertEqual(query.execute.call_count, 2)
+                query.execute.reset_mock()
+                query.execute.side_effect = ReadTimeout("offline")
+                self.assertEqual(self.client.get(path).status_code, 502)
+                self.assertEqual(query.execute.call_count, 2)
+                query.execute.reset_mock()
+                query.execute.side_effect = PostgrestAPIError({"code": "42P01", "message": "missing table"})
+                self.assertEqual(self.client.get(path).status_code, 502)
+                self.assertEqual(query.execute.call_count, 1)
+            query.execute.side_effect = None
+            query.execute.return_value = MagicMock(data=[])
+            self.assertEqual(self.client.get("/api/posts").json(), [])
+            self.assertEqual(self.client.get("/api/posts/missing").status_code, 404)
+
 
 if __name__ == "__main__":
     unittest.main()

frontend/index.html

@@ -11,7 +11,9 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2230%22 fill=%22%232f5147%22/><text x=%2250%22 y=%2264%22 text-anchor=%22middle%22 font-size=%2244%22 fill=%22white%22 font-family=%22Arial%22>AH</text></svg>" />
+    <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <title>Alex Herlan — Software Engineer</title>
   </head>
   <body>

frontend/src/App.jsx

@@ -2,6 +2,7 @@ import { lazy, Suspense, useEffect, useState } from "react";
 import { Route, Routes, useLocation } from "react-router-dom";
 import { getProfile } from "./api";
 import Layout from "./components/Layout";
+import AdminProvider from "./components/AdminSession";
 import AboutPage from "./pages/AboutPage";
 import BlogPage from "./pages/BlogPage";
 import ContactPage from "./pages/ContactPage";
@@ -38,7 +39,7 @@ export default function App() {
   }, []);
 
   return (
-    <Layout profile={profile}>
+    <AdminProvider><Layout profile={profile}>
       <ScrollToTop />
       <Suspense fallback={<div className="container content-page"><LoadingState label="Opening page" /></div>}>
         <Routes>
@@ -50,6 +51,7 @@ export default function App() {
           <Route path="/skills" element={<SkillsPage />} />
           <Route path="/blog" element={<BlogPage />} />
           <Route path="/blog/manage" element={<JournalAdminPage />} />
+          <Route path="/blog/:slug/edit" element={<JournalAdminPage />} />
           <Route path="/blog/:slug" element={<BlogPostPage />} />
           <Route
             path="/contact"
@@ -58,6 +60,6 @@ export default function App() {
           <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </Suspense>
-    </Layout>
+    </Layout></AdminProvider>
   );
 }

frontend/src/api.js

@@ -1,48 +1,112 @@
 const API_BASE = import.meta.env.VITE_API_BASE_URL ?? "";
 
-async function request(path, options = {}) {
-  const response = await fetch(`${API_BASE}${path}`, {
-    ...options,
-    headers: {
-      "Content-Type": options.body instanceof File ? "application/octet-stream" : "application/json",
-      ...options.headers,
-    },
-  });
+function reportExpiredSession(token) {
+  window.dispatchEvent(new CustomEvent("journal-session-expired", { detail: { token } }));
+}
 
-  if (!response.ok) {
-    let detail = "Something went wrong. Please try again.";
-    try {
-      const body = await response.json();
-      detail = typeof body.detail === "string" ? body.detail : detail;
-    } catch {
-      // Keep the friendly fallback when a proxy or server returns non-JSON.
+async function request(path, { timeoutMs = 0, ...options } = {}) {
+  const controller = new AbortController();
+  const abort = () => controller.abort();
+  if (options.signal?.aborted) controller.abort();
+  options.signal?.addEventListener("abort", abort, { once: true });
+  const timer = timeoutMs ? setTimeout(abort, timeoutMs) : null;
+  try {
+    const response = await fetch(`${API_BASE}${path}`, {
+      ...options,
+      signal: controller.signal,
+      headers: { "Content-Type": "application/json", ...options.headers },
+    });
+    if (!response.ok) {
+      if (response.status === 401 && options.headers?.Authorization) {
+        reportExpiredSession(options.headers.Authorization.replace(/^Bearer /, ""));
+      }
+      let detail = "Something went wrong. Please try again.";
+      try {
+        const body = await response.json();
+        if (typeof body.detail === "string") detail = body.detail;
+      } catch { /* Keep the fallback for proxy errors. */ }
+      const error = new Error(detail);
+      error.status = response.status;
+      throw error;
+    }
+    return await response.json();
+  } catch (error) {
+    if (controller.signal.aborted && !options.signal?.aborted) {
+      const timeout = new Error("The request took too long. Please try again.");
+      timeout.status = 408;
+      throw timeout;
     }
-    const error = new Error(detail);
-    error.status = response.status;
     throw error;
+  } finally {
+    if (timer !== null) clearTimeout(timer);
+    options.signal?.removeEventListener("abort", abort);
   }
+}
 
-  return response.json();
+function retryDelay(signal) {
+  return new Promise((resolve, reject) => {
+    const abort = () => { clearTimeout(timer); reject(new DOMException("Canceled", "AbortError")); };
+    const timer = setTimeout(() => { signal?.removeEventListener("abort", abort); resolve(); }, 400);
+    if (signal?.aborted) abort();
+    else signal?.addEventListener("abort", abort, { once: true });
+  });
+}
+
+async function readRequest(path, options = {}) {
+  for (let attempt = 0; attempt < 2; attempt += 1) {
+    try { return await request(path, { timeoutMs: 20000, ...options }); }
+    catch (error) {
+      const temporary = error instanceof TypeError || error.status === 408 || error.status >= 500;
+      if (options.signal?.aborted || !temporary || attempt === 1) throw error;
+      await retryDelay(options.signal);
+    }
+  }
 }
 
 export const getProfile = (signal) => request("/api/profile", { signal });
 export const getExperience = (signal) => request("/api/experience", { signal });
 export const getSkills = (signal) => request("/api/skills", { signal });
-export const getPosts = (signal) => request("/api/posts", { signal });
-export const getPost = (slug, signal) => request(`/api/posts/${slug}`, { signal });
+export const getPosts = (signal) => readRequest("/api/posts", { signal });
+export const getPost = (slug, signal) => readRequest(`/api/posts/${slug}`, { signal });
 export const mediaUrl = (media) => `${API_BASE}${media.url}`;
-export const uploadMedia = (file, purpose, token) => request(`/api/uploads?name=${encodeURIComponent(file.name)}&purpose=${purpose}`, {
-  method: "POST",
-  headers: { Authorization: `Bearer ${token}` },
-  body: file,
-});
+export function uploadMedia(file, purpose, token, { onProgress, signal } = {}) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    const abort = () => xhr.abort();
+    if (signal?.aborted) { reject(new DOMException("Upload canceled", "AbortError")); return; }
+    xhr.open("POST", `${API_BASE}/api/uploads?name=${encodeURIComponent(file.name)}&purpose=${purpose}`);
+    xhr.setRequestHeader("Authorization", `Bearer ${token}`);
+    xhr.setRequestHeader("Content-Type", "application/octet-stream");
+    xhr.responseType = "json";
+    xhr.timeout = 120000;
+    xhr.upload.onprogress = (event) => {
+      if (event.lengthComputable) onProgress?.(Math.round(event.loaded / event.total * 100));
+    };
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300 && xhr.response) resolve(xhr.response);
+      else {
+        if (xhr.status === 401) reportExpiredSession(token);
+        const error = new Error(typeof xhr.response?.detail === "string" ? xhr.response.detail : "Upload failed. Please try again.");
+        error.status = xhr.status;
+        reject(error);
+      }
+    };
+    xhr.onerror = () => reject(new Error("Connection lost. Check your connection and retry."));
+    xhr.ontimeout = () => reject(new Error("Upload timed out. Please retry."));
+    xhr.onabort = () => reject(new DOMException("Upload canceled", "AbortError"));
+    xhr.onloadend = () => signal?.removeEventListener("abort", abort);
+    signal?.addEventListener("abort", abort, { once: true });
+    xhr.send(file);
+  });
+}
 export const loginAdmin = (password) =>
   request("/api/auth/login", {
     method: "POST",
     body: JSON.stringify({ password }),
   });
 export const getAdminSession = (token, signal) =>
-  request("/api/auth/session", {
+  readRequest("/api/auth/session", {
+    timeoutMs: 5000,
     signal,
     headers: { Authorization: `Bearer ${token}` },
   });
@@ -52,6 +116,15 @@ export const createPost = (payload, token) =>
     headers: { Authorization: `Bearer ${token}` },
     body: JSON.stringify(payload),
   });
+export const updateArticle = (slug, payload, token) => request(`/api/posts/${slug}`, {
+  method: "PUT",
+  headers: { Authorization: `Bearer ${token}` },
+  body: JSON.stringify(payload),
+});
+export const deleteArticle = (slug, token) => request(`/api/posts/${slug}`, {
+  method: "DELETE",
+  headers: { Authorization: `Bearer ${token}` },
+});
 export const sendContactMessage = (payload) =>
   request("/api/contact", {
     method: "POST",

frontend/src/articleContent.js

@@ -0,0 +1,13 @@
+// Starter articles use section arrays; the editor uses Tiptap documents.
+export function editableDocument(content) {
+  if (!Array.isArray(content)) return content;
+  return { type: "doc", content: content.flatMap((section) => [
+    ...(section.heading ? [{ type: "heading", attrs: { level: 2 }, content: [{ type: "text", text: section.heading }] }] : []),
+    ...section.paragraphs.map((text) => ({ type: "paragraph", ...(text ? { content: [{ type: "text", text }] } : {}) })),
+  ]) };
+}
+
+export function articlePlainText(node) {
+  if (!node) return "";
+  return [node.text ?? "", ...(node.content ?? []).map(articlePlainText)].filter(Boolean).join(" ").trim();
+}

frontend/src/components/AdminSession.jsx

@@ -0,0 +1,128 @@
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { Link } from "react-router-dom";
+import { getAdminSession, loginAdmin } from "../api";
+import Modal from "./Modal";
+import Icon from "./Icon";
+
+const TOKEN_KEY = "alex-journal-admin";
+const AdminContext = createContext(null);
+export const useAdmin = () => useContext(AdminContext);
+
+export default function AdminProvider({ children }) {
+  const [token, setToken] = useState(() => sessionStorage.getItem(TOKEN_KEY) ?? "");
+  const [checking, setChecking] = useState(Boolean(token));
+  const [role, setRole] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [sessionRevision, setSessionRevision] = useState(0);
+  const [checkAttempt, setCheckAttempt] = useState(0);
+  const tokenRef = useRef(token);
+  const verifiedToken = useRef("");
+
+  const signOut = useCallback(() => {
+    tokenRef.current = "";
+    verifiedToken.current = "";
+    sessionStorage.removeItem(TOKEN_KEY);
+    setToken("");
+    setRole(null);
+    setChecking(false);
+    setPassword("");
+    setOpen(false);
+  }, []);
+
+  useEffect(() => {
+    if (!token || verifiedToken.current === token) return;
+    const controller = new AbortController();
+    setChecking(true);
+    getAdminSession(token, controller.signal)
+      .then((session) => {
+        if (!controller.signal.aborted && tokenRef.current === token) {
+          verifiedToken.current = token;
+          setRole(session.role);
+          setError("");
+          setSessionRevision((current) => current + 1);
+        }
+      })
+      .catch((requestError) => {
+        if (!controller.signal.aborted && tokenRef.current === token) {
+          if (requestError.status === 401) signOut();
+          setError(requestError.status === 401 ? requestError.message : "Could not check your session. Retry when your connection is back, or sign in again.");
+        }
+      })
+      .finally(() => { if (!controller.signal.aborted) setChecking(false); });
+    return () => controller.abort();
+  }, [token, checkAttempt, signOut]);
+
+  useEffect(() => {
+    const retry = () => { if (tokenRef.current && !verifiedToken.current) setCheckAttempt((current) => current + 1); };
+    window.addEventListener("online", retry);
+    window.addEventListener("focus", retry);
+    return () => { window.removeEventListener("online", retry); window.removeEventListener("focus", retry); };
+  }, []);
+
+  useEffect(() => {
+    const expire = (event) => {
+      const expiredToken = event?.detail?.token ?? token;
+      if (!expiredToken || expiredToken !== tokenRef.current) return;
+      signOut();
+      setError("Your session ended. Sign in again to manage articles.");
+    };
+    window.addEventListener("journal-session-expired", expire);
+    const expiresAt = Number(token.split(".")[0]) * 1000;
+    const timer = token ? setTimeout(expire, Math.max(0, expiresAt - Date.now())) : null;
+    return () => {
+      window.removeEventListener("journal-session-expired", expire);
+      if (timer !== null) clearTimeout(timer);
+    };
+  }, [token, signOut]);
+
+  async function signIn(event) {
+    event.preventDefault();
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      const session = await loginAdmin(password);
+      sessionStorage.setItem(TOKEN_KEY, session.access_token);
+      tokenRef.current = session.access_token;
+      verifiedToken.current = session.access_token;
+      setToken(session.access_token);
+      setRole(session.role);
+      setChecking(false);
+      setSessionRevision((current) => current + 1);
+      setPassword("");
+      setOpen(false);
+    } catch (requestError) {
+      setError(requestError.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const isAdmin = role === "admin" && Boolean(token) && !checking;
+  const close = () => { setOpen(false); setPassword(""); };
+  return <AdminContext.Provider value={{ token, checking, isAdmin, sessionRevision, signOut, openSignIn: () => setOpen(true) }}>
+    {children}
+    {open && <Modal title={isAdmin ? "Admin account" : "Admin sign in"} onClose={close} busy={busy}>
+      {isAdmin ? <div className="admin-account">
+        <span className="publisher-badge"><span /> Admin</span>
+        <p>You can create, edit, and delete journal articles.</p>
+        <Link className="button button--primary" to="/blog/manage" onClick={close}><Icon name="plus" size={18} /> New article</Link>
+        <Link className="button" to="/blog" onClick={close}>Manage articles</Link>
+        <button className="text-button" type="button" onClick={signOut}><Icon name="logout" size={18} /> Sign out</button>
+      </div> : <form className="admin-signin" onSubmit={signIn}>
+        <p>Enter the admin password to manage journal articles.</p>
+        <label className="publisher-field">
+          <span>Admin password</span>
+          <input autoFocus autoComplete="current-password" type="password" required maxLength={200}
+            value={password} onChange={(event) => setPassword(event.target.value)} />
+        </label>
+        {error && <p className="form-status form-status--error" role="alert">{error}</p>}
+        {token && !checking && <button className="text-button" type="button" onClick={() => setCheckAttempt((current) => current + 1)}>Retry session check</button>}
+        <button className="button button--primary" type="submit" disabled={busy || checking}>{busy ? "Signing in…" : "Sign in"}</button>
+      </form>}
+    </Modal>}
+  </AdminContext.Provider>;
+}

frontend/src/components/ArticleAdminActions.jsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { deleteArticle } from "../api";
+import { useAdmin } from "./AdminSession";
+import Icon from "./Icon";
+import Modal from "./Modal";
+
+export default function ArticleAdminActions({ post, onDeleted }) {
+  const { isAdmin, token } = useAdmin();
+  const [confirming, setConfirming] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  if (!isAdmin) return null;
+
+  async function remove() {
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      await deleteArticle(post.slug, token);
+      setConfirming(false);
+      onDeleted(post.slug);
+    } catch (requestError) {
+      setError(requestError.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return <div className="article-admin-actions">
+    <Link className="text-button" to={`/blog/${post.slug}/edit`}><Icon name="edit" size={16} /> Edit</Link>
+    <button className="text-button text-button--danger" type="button" onClick={() => { setError(""); setConfirming(true); }}>
+      <Icon name="trash" size={16} /> Delete
+    </button>
+    {confirming && <Modal title="Delete article?" onClose={() => setConfirming(false)} busy={busy}>
+      <p>“{post.title}” will be removed from the journal. This cannot be undone.</p>
+      {error && <p className="form-status form-status--error" role="alert">{error}</p>}
+      <div className="dialog-actions">
+        <button autoFocus className="button" type="button" disabled={busy} onClick={() => setConfirming(false)}>Cancel</button>
+        <button className="button button--danger" type="button" disabled={busy} onClick={remove}>{busy ? "Deleting…" : "Delete article"}</button>
+      </div>
+    </Modal>}
+  </div>;
+}

frontend/src/components/ArticleUploads.jsx

@@ -1,40 +1,184 @@
+import { useEffect, useId, useRef, useState } from "react";
 import { mediaUrl } from "../api";
+import Icon from "./Icon";
 
-export default function ArticleUploads({ banner, attachments, busy, onUpload, onRemoveBanner, onRemoveAttachment }) {
-  return (
-    <fieldset className="article-uploads" disabled={busy}>
-      <legend>Photos & files</legend>
-      <label className="publisher-field">
-        <span>Banner image</span>
-        <small>Shown on the journal thumbnail and above the article title. JPEG, PNG, WebP or GIF, up to 8 MB.</small>
-        <input type="file" accept="image/jpeg,image/png,image/webp,image/gif" onChange={(event) => {
-          onUpload(Array.from(event.target.files), "banner");
-          event.target.value = "";
-        }} />
-      </label>
-      {banner && <div className="upload-preview">
-        <img src={mediaUrl(banner)} alt="Banner preview" />
-        <span>{banner.name}</span>
-        <button type="button" className="text-button" onClick={onRemoveBanner}>Remove banner</button>
+const imageTypes = ["image/jpeg", "image/png", "image/webp", "image/gif"];
+const isImage = (file) => imageTypes.includes(file.type) || (!file.type && /\.(jpe?g|png|webp|gif)$/i.test(file.name));
+const fileSize = (size) => size < 1024 * 1024 ? `${Math.max(1, Math.round(size / 1024))} KB` : `${(size / 1024 / 1024).toFixed(1)} MB`;
+
+function Dropzone({ purpose, disabled, onFiles, hasBanner }) {
+  const input = useRef(null);
+  const depth = useRef(0);
+  const [dragging, setDragging] = useState(false);
+  const hintId = useId();
+  const banner = purpose === "banner";
+  return <div className={`upload-dropzone ${dragging && !disabled ? "is-dragging" : ""} ${disabled ? "is-disabled" : ""}`}
+    onDragEnter={(event) => { event.preventDefault(); depth.current += 1; setDragging(true); }}
+    onDragOver={(event) => { event.preventDefault(); event.dataTransfer.dropEffect = disabled ? "none" : "copy"; }}
+    onDragLeave={(event) => { event.preventDefault(); depth.current -= 1; if (depth.current <= 0) setDragging(false); }}
+    onDrop={(event) => {
+      event.preventDefault(); depth.current = 0; setDragging(false);
+      if (!disabled) onFiles(Array.from(event.dataTransfer.files), purpose);
+    }}>
+    <span className="upload-dropzone__icon"><Icon name={banner ? "photo" : "upload"} size={25} /></span>
+    <strong>{banner ? hasBanner ? "Drop a new banner to replace it" : "Give your article a cover" : "Add something worth sharing"}</strong>
+    <p>{banner ? "Drag an image here, or choose one below." : "Drop photos, documents, or other files here."}</p>
+    <button type="button" className="upload-browse" disabled={disabled} aria-describedby={hintId} onClick={() => input.current.click()}>
+      <Icon name="plus" size={16} /> {banner ? hasBanner ? "Replace banner" : "Choose banner" : "Browse files"}
+    </button>
+    <small id={hintId}>{banner ? "JPG, PNG, WebP or GIF · Up to 8 MB" : "Up to 10 files · 20 MB each"}</small>
+    <input ref={input} className="upload-input" type="file" tabIndex={-1}
+      aria-label={banner ? "Banner image" : "Additional photos & files"}
+      accept={banner ? "image/jpeg,image/png,image/webp,image/gif" : undefined}
+      multiple={!banner} disabled={disabled} onChange={(event) => {
+        onFiles(Array.from(event.target.files), purpose);
+        event.target.value = "";
+      }} />
+  </div>;
+}
+
+export default function ArticleUploads({ banner, attachments, busy, title, subtitle, onUpload, onPendingChange, onRemoveBanner, onRemoveAttachment, onMoveAttachment }) {
+  const [tasks, setTasks] = useState([]);
+  const [messages, setMessages] = useState([]);
+  const queue = useRef([]);
+  const running = useRef(false);
+  const mounted = useRef(true);
+  const previews = useRef(new Set());
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      queue.current.forEach((task) => task.controller?.abort());
+      previews.current.forEach((url) => URL.revokeObjectURL(url));
+      previews.current.clear();
+      onPendingChange(false);
+    };
+  }, [onPendingChange]);
+
+  function updateQueue(next) {
+    queue.current = next;
+    if (mounted.current) { setTasks(next); onPendingChange(next.length > 0); }
+  }
+
+  function forget(id) {
+    const task = queue.current.find((item) => item.id === id);
+    if (task?.preview) { URL.revokeObjectURL(task.preview); previews.current.delete(task.preview); }
+    updateQueue(queue.current.filter((item) => item.id !== id));
+  }
+
+  function change(id, values) {
+    updateQueue(queue.current.map((task) => task.id === id ? { ...task, ...values } : task));
+  }
+
+  async function processQueue() {
+    if (running.current) return;
+    running.current = true;
+    try {
+      let task;
+      while (mounted.current && (task = queue.current.find((item) => item.status === "queued"))) {
+        const controller = new AbortController();
+        const id = task.id;
+        change(id, { status: "uploading", controller, progress: 0 });
+        try {
+          await onUpload(task.file, task.purpose, {
+            signal: controller.signal,
+            onProgress: (progress) => { if (mounted.current) change(id, { progress }); },
+          });
+          if (mounted.current) forget(id);
+        } catch (error) {
+          if (mounted.current && error.name !== "AbortError") change(id, { status: "error", error: error.message });
+        }
+      }
+    } finally {
+      running.current = false;
+    }
+  }
+
+  function addFiles(files, purpose) {
+    if (busy || !files.length) return;
+    const errors = [];
+    if (purpose === "banner" && (files.length > 1 || queue.current.some((task) => task.purpose === "banner"))) {
+      setMessages(["Choose one banner at a time. Finish or remove the current banner upload first."]);
+      return;
+    }
+    const additions = [];
+    const existing = [...attachments, ...queue.current.filter((task) => task.purpose === "attachment").map((task) => task.file)];
+    for (const file of files) {
+      const limit = (purpose === "banner" ? 8 : 20) * 1024 * 1024;
+      if (!file.size) { errors.push(`${file.name}: this file is empty.`); continue; }
+      if (file.size > limit) { errors.push(`${file.name}: exceeds the ${purpose === "banner" ? 8 : 20} MB limit.`); continue; }
+      if (purpose === "banner" && !isImage(file)) { errors.push(`${file.name}: choose a JPG, PNG, WebP, or GIF image.`); continue; }
+      if (purpose === "attachment" && existing.some((item) => item.name === file.name && item.size === file.size)) {
+        errors.push(`${file.name}: already added.`); continue;
+      }
+      if (purpose === "attachment" && existing.length >= 10) { errors.push(`${file.name}: all 10 attachment slots are filled.`); continue; }
+      const preview = isImage(file) ? URL.createObjectURL(file) : null;
+      if (preview) previews.current.add(preview);
+      additions.push({ id: crypto.randomUUID(), file, purpose, preview, status: "queued", progress: 0 });
+      if (purpose === "attachment") existing.push(file);
+    }
+    setMessages(errors);
+    if (additions.length) {
+      updateQueue([...queue.current, ...additions]);
+      processQueue();
+    }
+  }
+
+  function cancel(task) { task.controller?.abort(); forget(task.id); }
+  const bannerTask = tasks.find((task) => task.purpose === "banner");
+  const heroImage = bannerTask?.preview ?? (banner ? mediaUrl(banner) : null);
+  const attachmentCount = attachments.length + tasks.filter((task) => task.purpose === "attachment").length;
+
+  return <fieldset className="article-uploads" disabled={busy}>
+    <legend>Photos & files</legend>
+    <div className="upload-section">
+      <div className="upload-section__heading"><div><h3>Banner image</h3><p>Your journal thumbnail and article cover.</p></div><span className="upload-label">Optional</span></div>
+      {heroImage && <div className="upload-hero-preview">
+        <img src={heroImage} alt="Banner preview" />
+        <div><span>{bannerTask ? "Preview · Upload pending" : "Hero preview"}</span><strong>{title || "Your article title"}</strong><p>{subtitle || "Your subtitle appears here, over the cover image."}</p></div>
       </div>}
-      <label className="publisher-field">
-        <span>Additional photos & files</span>
-        <small>Displayed below the article text, in upload order. Up to 10 files, 20 MB each.</small>
-        <input type="file" multiple onChange={(event) => {
-          onUpload(Array.from(event.target.files), "attachment");
-          event.target.value = "";
-        }} />
-      </label>
+      {banner && <div className="upload-saved-banner"><span><Icon name="check" size={15} /> {banner.name} <small>{fileSize(banner.size)}</small></span>
+        <button type="button" className="text-button" disabled={Boolean(bannerTask)} onClick={onRemoveBanner}>Remove banner</button></div>}
+      <Dropzone purpose="banner" hasBanner={Boolean(banner)} disabled={busy || Boolean(bannerTask)} onFiles={addFiles} />
+      <small className="upload-tip">Wide images work best. The cover is cropped to fill the hero and thumbnail.</small>
+    </div>
+
+    <div className="upload-section">
+      <div className="upload-section__heading"><div><h3>Additional photos & files</h3><p>Shown below your article, in this order.</p></div><span className="upload-label">{attachmentCount}/10</span></div>
+      <Dropzone purpose="attachment" disabled={busy || attachmentCount >= 10} onFiles={addFiles} />
       {attachments.length > 0 && <ul className="upload-list">
-        {attachments.map((file) => <li key={file.url}>
-          {file.media_type.startsWith("image/") && <img src={mediaUrl(file)} alt="" />}
-          <span>{file.name} <small>({Math.ceil(file.size / 1024)} KB)</small></span>
-          <button type="button" className="text-button" aria-label={`Remove ${file.name}`} onClick={() => onRemoveAttachment(file.url)}>Remove</button>
+        {attachments.map((file, index) => <li key={file.url}>
+          <span className="upload-file-icon">{file.media_type.startsWith("image/") ? <img src={mediaUrl(file)} alt="" /> : <Icon name="file" size={24} />}</span>
+          <div className="upload-file-info"><strong>{file.name}</strong><small>{fileSize(file.size)} · <span className="upload-ready">Ready</span></small></div>
+          <div className="upload-file-actions">
+            <button type="button" className="upload-icon-button" disabled={index === 0} aria-label={`Move ${file.name} up`} title="Move up" onClick={() => onMoveAttachment(file.url, -1)}><Icon name="up" size={17} /></button>
+            <button type="button" className="upload-icon-button" disabled={index === attachments.length - 1} aria-label={`Move ${file.name} down`} title="Move down" onClick={() => onMoveAttachment(file.url, 1)}><Icon name="down" size={17} /></button>
+            <button type="button" className="upload-icon-button" aria-label={`Remove ${file.name}`} title="Remove file" onClick={() => onRemoveAttachment(file.url)}><Icon name="close" size={17} /></button>
+          </div>
         </li>)}
       </ul>}
-      {busy && <p role="status">Uploading…</p>}
-    </fieldset>
-  );
+    </div>
+
+    {messages.length > 0 && <div className="upload-feedback" role="alert"><strong>Some files could not be added</strong><ul>{messages.map((message, index) => <li key={index}>{message}</li>)}</ul><button type="button" className="text-button" onClick={() => setMessages([])}>Dismiss</button></div>}
+    {tasks.length > 0 && <div className="upload-queue">
+      <h3>Upload queue</h3>
+      <ul className="upload-list">{tasks.map((task) => <li key={task.id} className={task.status === "error" ? "has-error" : ""}>
+        <span className="upload-file-icon">{task.preview ? <img src={task.preview} alt="" /> : <Icon name="file" size={24} />}</span>
+        <div className="upload-file-info"><strong>{task.file.name}</strong><small>{fileSize(task.file.size)} · {task.purpose === "banner" ? "Banner" : "Attachment"}</small>
+          {task.status === "error" ? <p role="alert">{task.error}</p> : <>
+            <small>{task.status === "queued" ? "Waiting to upload" : task.progress === 100 ? "Processing file…" : `Uploading ${task.progress}%`}</small>
+            <progress max="100" value={task.progress} aria-label={`Uploading ${task.file.name}`} />
+          </>}
+        </div>
+        <div className="upload-file-actions">
+          {task.status === "error" && <button type="button" className="text-button" aria-label={`Retry ${task.file.name}`} onClick={() => { change(task.id, { status: "queued", error: "" }); processQueue(); }}>Retry</button>}
+          <button type="button" className="upload-icon-button" aria-label={`${task.status === "error" ? "Remove" : "Cancel"} upload ${task.file.name}`} onClick={() => cancel(task)}><Icon name="close" size={18} /></button>
+        </div>
+      </li>)}</ul>
+      <p className="upload-tip" role="status">{tasks.some((task) => task.status === "error") ? "Retry or remove failed uploads before publishing." : "You can keep writing while your files upload."}</p>
+    </div>}
+  </fieldset>;
 }
 
 export function ArticleAttachments({ attachments = [] }) {

frontend/src/components/Icon.jsx

@@ -1,4 +1,12 @@
 const paths = {
+  upload: <path d="M12 16V3m-5 5 5-5 5 5M4 16v5h16v-5" />,
+  photo: <><rect x="3" y="3" width="18" height="18" rx="3" /><circle cx="8" cy="8" r="1.5" /><path d="m3 17 6-6 4 4 3-3 5 5" /></>,
+  file: <><path d="M14 2H5v20h14V7l-5-5Zm0 0v6h5M8 13h8M8 17h5" /></>,
+  up: <path d="m6 14 6-6 6 6" />,
+  down: <path d="m6 10 6 6 6-6" />,
+  user: <><circle cx="12" cy="8" r="4" /><path d="M4 21v-2a8 8 0 0 1 16 0v2" /></>,
+  edit: <><path d="m15 4 5 5M4 20l5-1L21 7a2 2 0 0 0-5-5L4 14v6Z" /></>,
+  trash: <><path d="M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7M14 10v7" /></>,
   arrow: <path d="M5 12h14m-5-5 5 5-5 5" />,
   arrowLeft: <path d="m11 17-5-5 5-5m-5 5h13" />,
   arrowUpRight: <path d="M7 17 17 7M8 7h9v9" />,

frontend/src/components/Layout.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import Icon from "./Icon";
+import { useAdmin } from "./AdminSession";
 
 const navItems = [
   { label: "About", to: "/" },
@@ -11,6 +12,7 @@ const navItems = [
 ];
 
 function Header({ name }) {
+  const { isAdmin, checking, openSignIn } = useAdmin();
   const [menuOpen, setMenuOpen] = useState(false);
   const location = useLocation();
 
@@ -20,10 +22,11 @@ function Header({ name }) {
     <header className="site-header">
       <div className="container header-inner">
         <NavLink className="brand" to="/" aria-label={`${name} home`}>
-          <span className="brand-mark">AH</span>
+          <img className="brand-mark brand-photo" src="/alex-avatar-96.webp" width="42" height="42" alt="" />
           <span className="brand-name">{name}</span>
         </NavLink>
 
+        <div className="header-actions">
         <nav className={`nav-shell ${menuOpen ? "is-open" : ""}`} aria-label="Main navigation">
           {navItems.map((item) => (
             <NavLink
@@ -37,6 +40,13 @@ function Header({ name }) {
           ))}
         </nav>
 
+        <button type="button" className={`icon-button header-signin ${isAdmin ? "is-admin" : ""}`}
+          aria-label={isAdmin ? "Admin account" : "Admin sign in"} title={isAdmin ? "Admin account" : "Admin sign in"}
+          aria-haspopup="dialog" disabled={checking} onClick={openSignIn}>
+          <Icon name={isAdmin ? "user" : "lock"} />
+          {isAdmin && <span className="admin-indicator" />}
+        </button>
+
         <button
           aria-expanded={menuOpen}
           aria-label={menuOpen ? "Close navigation" : "Open navigation"}
@@ -46,6 +56,7 @@ function Header({ name }) {
         >
           <Icon name={menuOpen ? "close" : "menu"} />
         </button>
+        </div>
       </div>
     </header>
   );
@@ -75,6 +86,41 @@ export default function Layout({ children, profile }) {
   const name = profile?.display_name ?? "Alex Herlan";
   const isAbout = location.pathname === "/";
 
+  useEffect(() => {
+    let pressed = null;
+    let origin = null;
+    const clear = () => {
+      pressed?.removeAttribute("data-pressed");
+      pressed = null;
+      origin = null;
+    };
+    const press = (event) => {
+      clear();
+      if (!event.isPrimary || event.button !== 0) return;
+      const control = event.target.closest?.(".button, .culture-link");
+      if (!control || control.matches(":disabled")) return;
+      pressed = control;
+      origin = { x: event.clientX, y: event.clientY };
+      pressed.setAttribute("data-pressed", "true");
+    };
+    const move = (event) => {
+      if (origin && Math.hypot(event.clientX - origin.x, event.clientY - origin.y) > 10) clear();
+    };
+    window.addEventListener("pointerdown", press, { passive: true });
+    window.addEventListener("pointermove", move, { passive: true });
+    window.addEventListener("pointerup", clear);
+    window.addEventListener("pointercancel", clear);
+    window.addEventListener("blur", clear);
+    return () => {
+      clear();
+      window.removeEventListener("pointerdown", press);
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", clear);
+      window.removeEventListener("pointercancel", clear);
+      window.removeEventListener("blur", clear);
+    };
+  }, []);
+
   return (
     <div className="app-shell">
       <a className="skip-link" href="#main-content">Skip to content</a>

frontend/src/components/Modal.jsx

@@ -0,0 +1,21 @@
+import { useEffect, useId, useRef } from "react";
+import Icon from "./Icon";
+
+export default function Modal({ title, children, onClose, busy = false }) {
+  const dialog = useRef(null);
+  const titleId = useId();
+  useEffect(() => {
+    const element = dialog.current;
+    element.showModal();
+    return () => element.close();
+  }, []);
+
+  return <dialog ref={dialog} className="admin-dialog" aria-labelledby={titleId}
+    onCancel={(event) => { event.preventDefault(); if (!busy) onClose(); }}>
+    <div className="admin-dialog__heading">
+      <h2 id={titleId}>{title}</h2>
+      <button type="button" className="icon-button" aria-label="Close dialog" disabled={busy} onClick={onClose}><Icon name="close" /></button>
+    </div>
+    {children}
+  </dialog>;
+}

frontend/src/components/Status.jsx

@@ -7,15 +7,15 @@ export function LoadingState({ label = "Loading" }) {
   );
 }
 
-export function ErrorState({ message }) {
+export function ErrorState({ message, onRetry, retrying = false }) {
   return (
     <div className="state-card state-card--error" role="alert">
       <span className="state-icon">!</span>
       <div>
         <strong>That didn’t load.</strong>
         <p>{message}</p>
+        {onRetry && <button className="button" type="button" disabled={retrying} onClick={onRetry}>{retrying ? "Retrying..." : "Try again"}</button>}
       </div>
     </div>
   );
 }
-

frontend/src/pages/BlogPage.jsx

@@ -1,8 +1,12 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Link } from "react-router-dom";
-import { getPosts, mediaUrl } from "../api";
+import { mediaUrl } from "../api";
+import { mainTopics, topicKey } from "../topics";
+import useJournalResource from "../useJournalResource";
 import Icon from "../components/Icon";
 import PageHeader from "../components/PageHeader";
+import ArticleAdminActions from "../components/ArticleAdminActions";
+import { useAdmin } from "../components/AdminSession";
 import { ErrorState, LoadingState } from "../components/Status";
 
 function formatDate(date) {
@@ -13,7 +17,7 @@ function formatDate(date) {
   }).format(new Date(`${date}T12:00:00`));
 }
 
-function PostCard({ post, featured }) {
+function PostCard({ post, featured, onDeleted }) {
   return (
     <article className={`post-card post-card--${post.accent} ${featured ? "post-card--featured" : ""} reveal`}>
       <Link to={`/blog/${post.slug}`} aria-label={`Read ${post.title}`}>
@@ -39,42 +43,34 @@ function PostCard({ post, featured }) {
           </div>
         </div>
       </Link>
+      <ArticleAdminActions post={post} onDeleted={onDeleted} />
     </article>
   );
 }
 
 export default function BlogPage() {
-  const [posts, setPosts] = useState([]);
+  const { isAdmin } = useAdmin();
+  const { data, setData: setPosts, loading, error, reload } = useJournalResource();
+  const posts = data ?? [];
   const [query, setQuery] = useState("");
-  const [activeTag, setActiveTag] = useState("All");
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    const controller = new AbortController();
-    getPosts(controller.signal)
-      .then((result) => {
-        if (!controller.signal.aborted) setPosts(result);
-      })
-      .catch((requestError) => {
-        if (requestError.name !== "AbortError") setError(requestError.message);
-      })
-      .finally(() => {
-        if (!controller.signal.aborted) setLoading(false);
-      });
-    return () => controller.abort();
-  }, []);
-
-  const tags = useMemo(() => {
-    const counts = new Map();
-    posts.flatMap((post) => post.tags).forEach((tag) => counts.set(tag, (counts.get(tag) ?? 0) + 1));
-    return ["All", ...[...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 6).map(([tag]) => tag)];
+  const [activeTag, setActiveTag] = useState(null);
+  const [showOthers, setShowOthers] = useState(false);
+  const tags = [null, ...mainTopics];
+  const customTopics = useMemo(() => {
+    const mainKeys = new Set(mainTopics.map(topicKey));
+    const custom = new Map();
+    posts.flatMap((post) => post.tags).forEach((tag) => {
+      const key = topicKey(tag);
+      if (key && !mainKeys.has(key) && !custom.has(key)) custom.set(key, tag.trim());
+    });
+    return [...custom.values()].sort((a, b) => a.localeCompare(b));
   }, [posts]);
+  const customActive = activeTag !== null && !mainTopics.some((tag) => topicKey(tag) === topicKey(activeTag));
 
   const filteredPosts = useMemo(() => {
     const needle = query.trim().toLowerCase();
     return posts.filter((post) => {
-      const matchesTag = activeTag === "All" || post.tags.includes(activeTag);
+      const matchesTag = activeTag === null || post.tags.some((tag) => topicKey(tag) === topicKey(activeTag));
       const matchesQuery = !needle || `${post.title} ${post.excerpt} ${post.tags.join(" ")}`.toLowerCase().includes(needle);
       return matchesTag && matchesQuery;
     });
@@ -88,8 +84,8 @@ export default function BlogPage() {
         description="Practical observations on applied AI, resilient products, and the technology choices behind them."
         aside={(
           <div className="journal-heading-aside">
-            <p className="issue-count">{posts.length || 10}<span>field notes</span></p>
-            <Link className="write-link" to="/blog/manage"><Icon name="plus" size={15} /> Write</Link>
+            <p className="issue-count">{posts.length}<span>field notes</span></p>
+            {isAdmin && <Link className="write-link" to="/blog/manage"><Icon name="plus" size={15} /> New article</Link>}
           </div>
         )}
       />
@@ -105,27 +101,44 @@ export default function BlogPage() {
             value={query}
           />
         </label>
-        <div className="filter-row" aria-label="Filter articles by topic">
+        <div className="journal-filters">
+        <div className="filter-row filter-row--wrap" role="group" aria-label="Filter articles by topic">
           {tags.map((tag) => (
             <button
               className={activeTag === tag ? "is-active" : ""}
-              key={tag}
-              onClick={() => setActiveTag(tag)}
+              aria-pressed={activeTag === tag}
+              key={tag ?? "all-filter"}
+              onClick={() => { setActiveTag(tag); setShowOthers(false); }}
               type="button"
             >
-              {tag}
+              {tag ?? "All"}
             </button>
           ))}
+          <button type="button" className={`others-filter ${showOthers || customActive ? "is-active" : ""}`}
+            aria-expanded={showOthers} aria-controls="journal-custom-topics" onClick={() => setShowOthers((current) => !current)}>
+            Others{customActive && <span> · {activeTag}</span>} <Icon name="chevron" size={14} />
+          </button>
+        </div>
+        <div id="journal-custom-topics" className="custom-topic-filters" hidden={!showOthers}>
+          <p>Custom topics <span>{customTopics.length}</span></p>
+          {customTopics.length ? <div className="filter-row filter-row--wrap" role="group" aria-label="Filter by custom topic">
+            {customTopics.map((tag) => <button key={topicKey(tag)} type="button"
+              className={topicKey(activeTag ?? "") === topicKey(tag) ? "is-active" : ""}
+              aria-pressed={topicKey(activeTag ?? "") === topicKey(tag)} onClick={() => setActiveTag(tag)}>{tag}</button>)}
+          </div> : <small>{loading ? "Loading topics..." : "No custom topics yet."}</small>}
+        </div>
         </div>
       </div>
 
-      {loading && <LoadingState label="Fetching field notes" />}
-      {error && <ErrorState message={error} />}
+      {loading && !data && <LoadingState label="Fetching field notes" />}
+      {error && <ErrorState message={error} onRetry={reload} />}
+      {loading && data && <p role="status">Refreshing articles...</p>}
 
-      {!loading && !error && filteredPosts.length > 0 && (
+      {filteredPosts.length > 0 && (
         <div className="posts-grid">
           {filteredPosts.map((post, index) => (
-            <PostCard featured={index === 0 && !query && activeTag === "All"} key={post.slug} post={post} />
+            <PostCard featured={index === 0 && !query && activeTag === null} key={post.slug} post={post}
+              onDeleted={(slug) => setPosts((current) => current.filter((item) => item.slug !== slug))} />
           ))}
         </div>
       )}

frontend/src/pages/BlogPostPage.jsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
-import { Link, useParams } from "react-router-dom";
-import { getPost, mediaUrl } from "../api";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { mediaUrl } from "../api";
 import { ArticleAttachments } from "../components/ArticleUploads";
+import ArticleAdminActions from "../components/ArticleAdminActions";
+import useJournalResource from "../useJournalResource";
 import Icon from "../components/Icon";
 import { RichTextArticle } from "../components/RichTextEditor";
 import { ErrorState, LoadingState } from "../components/Status";
@@ -16,33 +17,15 @@ function formatDate(date) {
 
 export default function BlogPostPage() {
   const { slug } = useParams();
-  const [post, setPost] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState("");
+  const navigate = useNavigate();
+  const { data: post, loading, error, reload } = useJournalResource(slug);
 
-  useEffect(() => {
-    const controller = new AbortController();
-    setLoading(true);
-    setError("");
-    getPost(slug, controller.signal)
-      .then((result) => {
-        if (!controller.signal.aborted) setPost(result);
-      })
-      .catch((requestError) => {
-        if (requestError.name !== "AbortError") setError(requestError.message);
-      })
-      .finally(() => {
-        if (!controller.signal.aborted) setLoading(false);
-      });
-    return () => controller.abort();
-  }, [slug]);
-
-  if (loading) {
+  if (loading && !post) {
     return <div className="container content-page"><LoadingState label="Opening the note" /></div>;
   }
 
-  if (error) {
-    return <div className="container content-page"><ErrorState message={error} /></div>;
+  if (error && !post) {
+    return <div className="container content-page"><ErrorState message={error} onRetry={reload} /></div>;
   }
 
   if (!post) {
@@ -51,11 +34,13 @@ export default function BlogPostPage() {
 
   return (
     <article className="article-page">
+      {error && <div className="article-container"><ErrorState message={error} onRetry={reload} /></div>}
       <header className={`article-hero article-hero--${post.accent}`}>
         {post.banner && <img className="article-banner" src={mediaUrl(post.banner)} alt="" />}
         <div className="article-hero__shape" aria-hidden="true"><Icon name="spark" size={50} /></div>
         <div className="article-container reveal">
           <Link className="back-link" to="/blog"><Icon name="arrowLeft" size={17} /> Back to journal</Link>
+          <ArticleAdminActions post={post} onDeleted={() => navigate("/blog")} />
           <div className="article-tags">
             {post.tags.map((tag) => <span key={tag}>{tag}</span>)}
           </div>

frontend/src/pages/ContactPage.jsx

@@ -139,6 +139,8 @@ export default function ContactPage({ profile, error }) {
       </div>
 
       <div className="culture-card culture-card--wide reveal">
+        <img className="culture-photo" src="/alex_music.jpg" alt="Alex playing guitar" width="206" height="206" loading="lazy" />
+        <div className="culture-content">
         <div className="culture-intro">
           <p className="eyebrow">Beyond the build</p>
           <h2><strong>I love music</strong> and nearly always have something playing on Spotify.</h2>
@@ -159,6 +161,7 @@ export default function ContactPage({ profile, error }) {
             </a>
           ))}
         </div>
+        </div>
       </div>
     </section>
   );

frontend/src/pages/JournalAdminPage.jsx

@@ -1,27 +1,18 @@
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { createPost, getAdminSession, loginAdmin, uploadMedia } from "../api";
+import { useEffect, useRef, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { createPost, getPost, updateArticle, uploadMedia } from "../api";
 import ArticleUploads from "../components/ArticleUploads";
 import Icon from "../components/Icon";
 import PageHeader from "../components/PageHeader";
 import RichTextEditor from "../components/RichTextEditor";
-import { LoadingState } from "../components/Status";
+import { ErrorState, LoadingState } from "../components/Status";
+import { useAdmin } from "../components/AdminSession";
+import { editableDocument, articlePlainText } from "../articleContent";
+import { mainTopics as suggestedTopics } from "../topics";
 
-const TOKEN_KEY = "alex-journal-admin";
 const today = new Date().toISOString().slice(0, 10);
 const emptyDocument = { type: "doc", content: [{ type: "paragraph" }] };
-const suggestedTopics = [
-  "AI",
-  "React",
-  "FastAPI",
-  "Supabase",
-  "Python",
-  "Cloud",
-  "DevOps",
-  "Product",
-  "Reliability",
-  "Security",
-];
+
 
 const initialPost = {
   title: "",
@@ -33,10 +24,15 @@ const initialPost = {
 };
 
 export default function JournalAdminPage() {
+  const { slug } = useParams();
+  return <ArticleForm key={slug ?? "new"} slug={slug} />;
+}
+
+function ArticleForm({ slug }) {
   const navigate = useNavigate();
-  const [token, setToken] = useState(() => sessionStorage.getItem(TOKEN_KEY) ?? "");
-  const [checking, setChecking] = useState(Boolean(token));
-  const [password, setPassword] = useState("");
+  const { token, checking, isAdmin, signOut, openSignIn } = useAdmin();
+  const [loading, setLoading] = useState(Boolean(slug));
+  const [loadError, setLoadError] = useState("");
   const [post, setPost] = useState(initialPost);
   const [article, setArticle] = useState(emptyDocument);
   const [articleText, setArticleText] = useState("");
@@ -44,80 +40,72 @@ export default function JournalAdminPage() {
   const [attachments, setAttachments] = useState([]);
   const [uploading, setUploading] = useState(false);
   const [customTopic, setCustomTopic] = useState("");
+  const [topicMessage, setTopicMessage] = useState("");
+  const topicInput = useRef(null);
   const [status, setStatus] = useState({ type: "idle", message: "" });
 
   useEffect(() => {
-    if (!token) {
-      setChecking(false);
-      return undefined;
-    }
-
+    if (!slug) return;
     const controller = new AbortController();
-    getAdminSession(token, controller.signal)
-      .catch((error) => {
-        if (error.name !== "AbortError") {
-          sessionStorage.removeItem(TOKEN_KEY);
-          setToken("");
-          setStatus({ type: "error", message: "Your session ended. Sign in again." });
-        }
+    getPost(slug, controller.signal)
+      .then((existing) => {
+        if (controller.signal.aborted) return;
+        const document = editableDocument(existing.content);
+        setPost({ title: existing.title, excerpt: existing.excerpt, published_at: existing.published_at,
+          read_time: existing.read_time, tags: existing.tags, accent: existing.accent });
+        setArticle(document);
+        setArticleText(articlePlainText(document));
+        setBanner(existing.banner ?? null);
+        setAttachments(existing.attachments ?? []);
       })
-      .finally(() => {
-        if (!controller.signal.aborted) setChecking(false);
-      });
+      .catch((error) => { if (error.name !== "AbortError") setLoadError(error.message); })
+      .finally(() => { if (!controller.signal.aborted) setLoading(false); });
     return () => controller.abort();
-  }, [token]);
-
-  async function signIn(event) {
-    event.preventDefault();
-    setStatus({ type: "sending", message: "Signing in…" });
-    try {
-      const result = await loginAdmin(password);
-      sessionStorage.setItem(TOKEN_KEY, result.access_token);
-      setToken(result.access_token);
-      setPassword("");
-      setStatus({ type: "success", message: "Signed in. Your session lasts four hours." });
-    } catch (error) {
-      setStatus({ type: "error", message: error.message });
-    }
-  }
-
-  function signOut() {
-    sessionStorage.removeItem(TOKEN_KEY);
-    setToken("");
-    setStatus({ type: "idle", message: "" });
-  }
+  }, [slug]);
 
   function updatePost(event) {
     setPost((current) => ({ ...current, [event.target.name]: event.target.value }));
   }
 
   function toggleTopic(topic) {
-    setPost((current) => {
-      if (current.tags.includes(topic)) {
-        return { ...current, tags: current.tags.filter((item) => item !== topic) };
-      }
-      if (current.tags.length >= 6) {
-        setStatus({ type: "error", message: "Choose up to six topics." });
-        return current;
-      }
-      return { ...current, tags: [...current.tags, topic] };
-    });
+    if (!post.tags.includes(topic) && post.tags.length >= 6) {
+      setTopicMessage("You can select up to six topics. Remove one to add another.");
+      return;
+    }
+    setTopicMessage("");
+    setPost((current) => ({ ...current, tags: current.tags.includes(topic)
+      ? current.tags.filter((item) => item !== topic) : [...current.tags, topic] }));
   }
 
   function addCustomTopic() {
-    const topic = customTopic.trim();
-    if (!topic || post.tags.includes(topic)) return;
+    const typed = customTopic.trim();
+    if (!typed) return;
+    const topic = [...suggestedTopics, ...post.tags].find((item) => item.toLowerCase() === typed.toLowerCase()) ?? typed;
+    if (post.tags.includes(topic)) {
+      setCustomTopic("");
+      setTopicMessage(`${topic} is already selected.`);
+      topicInput.current?.focus();
+      return;
+    }
     if (post.tags.length >= 6) {
-      setStatus({ type: "error", message: "Choose up to six topics." });
+      setTopicMessage("You can select up to six topics. Remove one to add another.");
       return;
     }
     setPost((current) => ({ ...current, tags: [...current.tags, topic] }));
     setCustomTopic("");
+    setTopicMessage(`${topic} added and selected.`);
+    topicInput.current?.focus();
+  }
+
+  function removeCustomTopic(topic) {
+    setPost((current) => ({ ...current, tags: current.tags.filter((item) => item !== topic) }));
+    setTopicMessage(`${topic} removed.`);
+    topicInput.current?.focus();
   }
 
   async function publish(event) {
     event.preventDefault();
-    if (uploading || status.type === "sending") return;
+    if (!isAdmin || uploading || status.type === "sending") return;
     if (!post.tags.length) {
       setStatus({ type: "error", message: "Choose at least one topic." });
       return;
@@ -135,89 +123,60 @@ export default function JournalAdminPage() {
       attachments,
     };
 
-    setStatus({ type: "sending", message: "Publishing…" });
+    setStatus({ type: "sending", message: slug ? "Saving changes..." : "Publishing..." });
     try {
-      const created = await createPost(payload, token);
+      const created = slug ? await updateArticle(slug, payload, token) : await createPost(payload, token);
       setStatus({ type: "success", message: "Published. Opening the article…" });
       navigate(`/blog/${created.slug}`);
     } catch (error) {
-      if (error.status === 401) {
-        sessionStorage.removeItem(TOKEN_KEY);
-        setToken("");
-      }
       setStatus({ type: "error", message: error.message });
     }
   }
 
-  async function uploadFiles(files, purpose) {
-    if (!files.length || uploading) return;
-    if (purpose === "attachment" && attachments.length + files.length > 10) {
-      setStatus({ type: "error", message: "Choose up to 10 additional files." });
-      return;
-    }
-    const limit = (purpose === "banner" ? 8 : 20) * 1024 * 1024;
-    if (files.some((file) => !file.size || file.size > limit)) {
-      setStatus({ type: "error", message: `Choose non-empty files up to ${limit / 1024 / 1024} MB each.` });
-      return;
-    }
-    setUploading(true);
-    setStatus({ type: "idle", message: "" });
-    try {
-      for (const file of files) {
-        const uploaded = await uploadMedia(file, purpose, token);
-        if (purpose === "banner") setBanner(uploaded);
-        else setAttachments((current) => [...current, uploaded]);
-      }
-    } catch (error) {
-      setStatus({ type: "error", message: error.message });
-    } finally {
-      setUploading(false);
-    }
+  async function uploadFile(file, purpose, options) {
+    const uploaded = await uploadMedia(file, purpose, token, options);
+    if (options.signal.aborted) return;
+    if (purpose === "banner") setBanner(uploaded);
+    else setAttachments((current) => [...current, uploaded]);
+  }
+
+  function moveAttachment(url, direction) {
+    setAttachments((current) => {
+      const index = current.findIndex((file) => file.url === url);
+      const next = index + direction;
+      if (index < 0 || next < 0 || next >= current.length) return current;
+      const ordered = [...current];
+      [ordered[index], ordered[next]] = [ordered[next], ordered[index]];
+      return ordered;
+    });
   }
 
   return (
     <section className="content-page container publisher-page">
       <PageHeader
         eyebrow="Journal studio"
-        title="Publish a field note."
-        description="A focused writing room with rich-text editing and Supabase-ready storage."
-        aside={token ? <span className="publisher-badge"><span /> Authenticated</span> : null}
+        title={slug ? "Edit your field note." : "Publish a field note."}
+        description="Write in sections, add photos and files, and share your field notes."
+        aside={isAdmin ? <span className="publisher-badge"><span /> Admin</span> : null}
       />
 
       {checking && <LoadingState label="Checking your session" />}
 
-      {!checking && !token && (
-        <form className="publisher-login reveal" onSubmit={signIn}>
-          <span className="publisher-login__icon"><Icon name="lock" size={24} /></span>
-          <div>
-            <p className="eyebrow">Private access</p>
-            <h2>Sign in to write</h2>
-            <p>The publisher uses one server-side password. It is never stored in the browser.</p>
-          </div>
-          <label>
-            <span>Admin password</span>
-            <input
-              autoComplete="current-password"
-              autoFocus
-              onChange={(event) => setPassword(event.target.value)}
-              placeholder="Enter your journal password"
-              required
-              type="password"
-              value={password}
-            />
-          </label>
-          <button className="button button--primary" disabled={status.type === "sending"} type="submit">
-            Unlock publisher <Icon name="arrow" size={18} />
-          </button>
-          {status.message && <p className={`form-status form-status--${status.type}`} role="status">{status.message}</p>}
-        </form>
+      {!checking && !isAdmin && (
+        <div className="publisher-login">
+          <h2>Sign in to manage articles</h2>
+          <p>Use your admin password to create or edit a journal article.</p>
+          <button className="button button--primary" type="button" onClick={openSignIn}><Icon name="lock" size={18} /> Sign in</button>
+        </div>
       )}
+      {isAdmin && loading && <LoadingState label="Loading article" />}
+      {isAdmin && loadError && <ErrorState message={loadError} />}
 
-      {!checking && token && (
+      {isAdmin && !loading && !loadError && (
         <form className="publisher-form reveal" onSubmit={publish}>
           <div className="publisher-toolbar">
             <div>
-              <p className="eyebrow">New article</p>
+              <p className="eyebrow">{slug ? "Edit article" : "New article"}</p>
               <p>Write, format, choose the topics, and publish from one clean workspace.</p>
             </div>
             <button className="text-button" onClick={signOut} type="button"><Icon name="logout" size={16} /> Sign out</button>
@@ -268,22 +227,41 @@ export default function JournalAdminPage() {
                   {post.tags.includes(topic) ? "✓ " : "+ "}{topic}
                 </button>
               ))}
+              {post.tags.filter((topic) => !suggestedTopics.includes(topic)).map((topic) => (
+                <span className="topic-chip is-active" key={topic}>
+                  <span><Icon name="check" size={13} /> {topic}</span>
+                  <button className="topic-chip__remove" type="button" aria-label={`Remove topic ${topic}`}
+                    title={`Remove ${topic}`} onClick={() => removeCustomTopic(topic)}><Icon name="close" size={14} /></button>
+                </span>
+              ))}
             </div>
             <div className="custom-topic">
+              <div className="custom-topic__input">
+              <label className="sr-only" htmlFor="custom-topic">Custom topic</label>
               <input
+                ref={topicInput}
+                id="custom-topic"
+                aria-describedby="topic-shortcut topic-feedback"
+                aria-keyshortcuts="Enter"
+                enterKeyHint="done"
                 maxLength="40"
-                onChange={(event) => setCustomTopic(event.target.value)}
+                onChange={(event) => { setCustomTopic(event.target.value); setTopicMessage(""); }}
                 onKeyDown={(event) => {
                   if (event.key === "Enter") {
                     event.preventDefault();
+                    if (event.nativeEvent.isComposing || event.keyCode === 229) return;
                     addCustomTopic();
                   }
                 }}
                 placeholder="Add another topic"
                 value={customTopic}
               />
-              <button onClick={addCustomTopic} type="button">Add topic</button>
+              <kbd aria-hidden="true">Enter ↵</kbd>
+              </div>
+              <button onClick={addCustomTopic} disabled={!customTopic.trim()} type="button">Add topic</button>
             </div>
+            <p className="topic-hint" id="topic-shortcut">Type a topic and press <kbd>Enter</kbd> to add and select it. Use × on a custom topic to remove it.</p>
+            <p className="topic-feedback" id="topic-feedback" role="status">{topicMessage}</p>
           </fieldset>
 
           <div className="publisher-field publisher-field--wide">
@@ -293,13 +271,15 @@ export default function JournalAdminPage() {
           </div>
 
           <p className="section-help">Use + Section to add a heading and a new section. Each section gets a divider and an automatic uppercase drop cap on its opening paragraph.</p>
-          <ArticleUploads banner={banner} attachments={attachments} busy={uploading || status.type === "sending"}
-            onUpload={uploadFiles} onRemoveBanner={() => setBanner(null)}
+          <ArticleUploads banner={banner} attachments={attachments} busy={status.type === "sending"}
+            title={post.title} subtitle={post.excerpt} onPendingChange={setUploading} onMoveAttachment={moveAttachment}
+            onUpload={uploadFile} onRemoveBanner={() => setBanner(null)}
             onRemoveAttachment={(url) => setAttachments((current) => current.filter((file) => file.url !== url))} />
 
           <div className="publisher-submit">
-            <button className="button button--primary" disabled={uploading || status.type === "sending"} type="submit">
-              <Icon name="plus" size={18} /> {status.type === "sending" ? "Publishing…" : "Publish article"}
+            <Link className="text-button" to={slug ? `/blog/${slug}` : "/blog"}>Cancel</Link>
+            <button className="button button--primary" disabled={!isAdmin || uploading || status.type === "sending"} type="submit">
+              <Icon name={slug ? "check" : "plus"} size={18} /> {status.type === "sending" ? "Saving..." : slug ? "Save changes" : "Publish article"}
             </button>
             {status.message && <p className={`form-status form-status--${status.type}`} role="status">{status.message}</p>}
           </div>

frontend/src/styles.css

@@ -189,7 +189,6 @@ button {
 
 .nav-link:hover {
   color: var(--ink);
-  transform: translateY(-1px);
 }
 
 .nav-link.is-active {
@@ -1078,6 +1077,21 @@ button {
   background: rgba(255, 255, 255, 0.72);
 }
 
+.journal-filters { flex: 1; min-width: 0; }
+.journal-tools:has(.journal-filters) { align-items: flex-start; }
+.filter-row--wrap { flex-wrap: wrap; overflow: visible; }
+.filter-row--wrap button { max-width: 100%; overflow-wrap: anywhere; }
+.filter-row .others-filter { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); }
+.others-filter svg { flex-shrink: 0; transition: transform 150ms ease; }
+.others-filter[aria-expanded="true"] svg { transform: rotate(180deg); }
+.custom-topic-filters { margin-top: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.45); }
+.custom-topic-filters[hidden] { display: none; }
+.custom-topic-filters > p { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ink-soft); font-size: 11px; font-weight: 650; }
+.custom-topic-filters > p span { padding: 2px 7px; border-radius: 10px; background: var(--mint); font-size: 10px; }
+.custom-topic-filters > small { color: var(--ink-soft); font-size: 11px; }
+.custom-topic-filters .filter-row button { background: var(--surface); }
+.custom-topic-filters .filter-row button.is-active { color: white; background: var(--sage-deep); }
+
 .posts-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -1750,7 +1764,7 @@ button {
 
 .culture-intro {
   display: grid;
-  grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr);
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
   align-items: end;
   gap: 8px 48px;
   margin-bottom: 28px;
@@ -2057,6 +2071,32 @@ button {
   box-shadow: 0 8px 19px rgba(47, 81, 71, 0.15);
 }
 
+.topic-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 38px;
+  max-width: 100%;
+  padding-left: 13px;
+  border-radius: 12px;
+  color: white;
+  background: var(--sage-deep);
+  font-size: 12px;
+  font-weight: 680;
+  box-shadow: 0 8px 19px rgba(47, 81, 71, 0.15);
+}
+.topic-chip > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
+.topic-chip > span svg { flex-shrink: 0; }
+.topic-options .topic-chip__remove { display: grid; place-items: center; flex-shrink: 0; width: 36px; padding: 0; color: white; background: transparent; }
+.topic-options .topic-chip__remove:hover { background: rgba(255, 255, 255, 0.16); }
+.topic-options .topic-chip__remove:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }
+.custom-topic__input { position: relative; display: flex; flex: 1; min-width: 0; }
+.custom-topic__input input { width: 100%; padding-right: 82px; }
+.custom-topic__input > kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
+.topic-picker kbd { padding: 3px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; color: var(--ink-soft); background: #f0f3ef; font: 10px ui-monospace, monospace; white-space: nowrap; }
+.topic-hint, .topic-feedback { margin: 0; font-size: 11px; line-height: 1.8; color: var(--ink-soft); }
+.topic-feedback { color: var(--sage-deep); }
+
 .custom-topic {
   display: flex;
   max-width: 430px;
@@ -2075,6 +2115,7 @@ button {
   background: #fbfcfa;
   font-size: 14px;
 }
+.custom-topic .custom-topic__input input { padding-right: 82px; }
 
 .custom-topic input:focus {
   border-color: rgba(47, 81, 71, 0.43);
@@ -2715,37 +2756,229 @@ button {
   height: 100%;
   object-fit: cover;
 }
-.article-hero:has(.article-banner) { padding-top: 0; }
+.article-hero:has(.article-banner) {
+  isolation: isolate;
+  color: #fff;
+}
 .article-banner {
   display: block;
+  position: absolute;
+  inset: 0;
   width: 100%;
-  height: clamp(220px, 38vw, 500px);
+  height: 100%;
   object-fit: cover;
-  margin-bottom: clamp(36px, 6vw, 72px);
+  z-index: -2;
+}
+.article-hero:has(.article-banner)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(110deg, rgba(15, 29, 24, 0.82), rgba(15, 29, 24, 0.58));
+  z-index: -1;
+  pointer-events: none;
+}
+.article-hero:has(.article-banner) .article-container {
   position: relative;
   z-index: 1;
 }
+.article-hero:has(.article-banner) .article-container > p,
+.article-hero:has(.article-banner) .article-byline,
+.article-hero:has(.article-banner) .article-byline--simple span + span::before {
+  color: rgba(255, 255, 255, 0.9);
+}
+.article-hero:has(.article-banner) .article-tags span {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.16);
+  border-color: rgba(255, 255, 255, 0.3);
+}
 .article-hero:has(.article-banner) .article-hero__shape { display: none; }
 .article-uploads {
   display: grid;
-  gap: 24px;
+  grid-column: 1 / -1;
+  gap: 30px;
   min-width: 0;
-  padding: 24px;
+  margin: 0;
+  padding: clamp(18px, 3vw, 30px);
   border: 1px solid var(--line);
-  border-radius: 18px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.45);
 }
-.article-uploads legend { padding-inline: 8px; }
+.article-uploads legend { padding-inline: 10px; font-size: 16px; }
+.section-help { grid-column: 1 / -1; }
 .article-uploads small, .section-help { color: var(--ink-soft); line-height: 1.6; }
-.article-uploads input[type="file"] { max-width: 100%; padding: 12px 0; }
-.upload-preview { display: grid; gap: 12px; justify-items: start; overflow-wrap: anywhere; }
-.upload-preview img { width: 100%; max-height: 240px; object-fit: cover; border-radius: 12px; }
-.upload-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
-.upload-list li { display: flex; align-items: center; gap: 14px; }
-.upload-list li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
-.upload-list img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
+.upload-section { display: grid; gap: 14px; min-width: 0; }
+.upload-section + .upload-section { border-top: 1px solid var(--line); padding-top: 28px; }
+.upload-section__heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
+.upload-section__heading h3, .upload-queue h3 { margin: 0 0 5px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
+.upload-section__heading p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
+.upload-label { flex-shrink: 0; padding: 3px 9px; border-radius: 20px; background: var(--mint); color: var(--sage-deep); font-size: 11px; }
+.upload-dropzone {
+  display: grid;
+  justify-items: center;
+  gap: 9px;
+  padding: 26px 18px;
+  border: 1.5px dashed #b7cbc0;
+  border-radius: 17px;
+  background: linear-gradient(135deg, #f2f7f3, #fafcf9);
+  text-align: center;
+  transition: border-color 150ms, background 150ms, box-shadow 150ms;
+}
+.upload-dropzone:hover, .upload-dropzone:focus-within { border-color: var(--sage-deep); }
+.upload-dropzone.is-dragging { border-color: var(--sage-deep); background: var(--mint); box-shadow: inset 0 0 0 2px var(--sage-deep); }
+.upload-dropzone.is-disabled { opacity: 0.6; }
+.upload-dropzone__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 16px; background: #e3eee6; color: var(--sage-deep); }
+.upload-dropzone strong { font-size: 15px; font-weight: 600; }
+.upload-dropzone p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
+.upload-dropzone small { font-size: 11px; }
+.upload-browse { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 40px; margin-top: 5px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--sage-deep); font-size: 12px; font-weight: 650; cursor: pointer; }
+.article-uploads .upload-input { display: none; }
+.upload-tip { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
+.upload-hero-preview { position: relative; isolation: isolate; display: grid; align-items: end; min-height: 220px; overflow: hidden; border-radius: 16px; background: var(--sage-deep); color: white; }
+.upload-hero-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
+.upload-hero-preview::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(15,29,24,.82), rgba(15,29,24,.58)); }
+.upload-hero-preview > div { display: grid; gap: 12px; padding: 25px; }
+.upload-hero-preview span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
+.upload-hero-preview strong { font-family: Georgia, serif; font-size: clamp(24px, 3vw, 38px); line-height: 1.1; font-weight: 400; overflow-wrap: anywhere; }
+.upload-hero-preview p { margin: 0; max-width: 500px; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.9); overflow-wrap: anywhere; }
+.upload-saved-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
+.upload-saved-banner > span { min-width: 0; overflow-wrap: anywhere; color: var(--sage-deep); }
+.upload-saved-banner .text-button { flex-shrink: 0; font-size: 11px; }
+.upload-list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
+.upload-list li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
+.upload-file-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 46px; border-radius: 9px; overflow: hidden; background: var(--mint); color: var(--sage-deep); }
+.upload-file-icon img { width: 100%; height: 100%; object-fit: cover; }
+.upload-file-info { flex: 1; min-width: 0; display: grid; gap: 3px; overflow-wrap: anywhere; }
+.upload-file-info strong { font-size: 12px; font-weight: 600; }
+.upload-file-info small { font-size: 10px; }
+.upload-ready { color: var(--sage-deep); }
+.upload-file-actions { display: flex; align-items: center; flex-shrink: 0; gap: 2px; }
+.upload-icon-button { display: grid; place-items: center; width: 34px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; }
+.upload-icon-button:hover { background: var(--mint); color: var(--sage-deep); }
+.upload-icon-button:disabled { opacity: 0.25; }
+.upload-queue { display: grid; gap: 12px; }
+.upload-file-info progress { width: 100%; height: 6px; margin-top: 4px; accent-color: var(--sage-deep); }
+.upload-file-info p { margin: 0; color: #9a3434; font-size: 11px; line-height: 1.6; }
+.upload-list .has-error { border-color: #d7af9e; background: #fff9f6; }
+.upload-feedback { padding: 16px; border: 1px solid #d7af9e; border-radius: 14px; background: #fff9f6; color: #803f30; font-size: 12px; overflow-wrap: anywhere; }
+.upload-feedback ul { margin: 8px 0 12px; padding-left: 18px; line-height: 1.7; }
+@media (min-width: 900px) {
+  .article-uploads { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
+  .upload-section + .upload-section { border-top: 0; border-left: 1px solid var(--line); padding-top: 0; padding-left: 28px; }
+  .upload-feedback, .upload-queue { grid-column: 1 / -1; }
+}
+@media (max-width: 480px) {
+  .upload-list li { flex-wrap: wrap; gap: 8px; }
+  .upload-file-actions { margin-left: auto; }
+  .upload-file-info { flex-basis: calc(100% - 54px); }
+  .upload-icon-button { width: 40px; height: 40px; }
+  .upload-saved-banner { align-items: flex-start; }
+}
 .article-attachments { margin-top: 55px; padding-top: 48px; border-top: 1px solid var(--line); }
 .article-attachments figure { margin: 24px 0; }
 .article-attachments img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 12px; }
 .article-attachments figcaption { margin-top: 10px; color: var(--ink-soft); font-size: 14px; overflow-wrap: anywhere; }
 .article-file { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 20px; margin-block: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-wrap: anywhere; }
 .article-file small { color: var(--ink-soft); }
+
+.header-actions { display: flex; align-items: center; gap: 12px; }
+.icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  flex: 0 0 auto;
+  border: 1px solid var(--line);
+  border-radius: 15px;
+  color: var(--ink);
+  background: var(--surface);
+  cursor: pointer;
+}
+.icon-button:hover { background: var(--mint); }
+.header-signin { position: relative; }
+.header-signin.is-admin { color: #fff; background: var(--sage-deep); }
+.admin-indicator { position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #bde9a8; }
+.admin-dialog {
+  width: min(460px, calc(100vw - 32px));
+  max-height: calc(100dvh - 40px);
+  overflow: auto;
+  padding: 28px;
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  color: var(--ink);
+  background: var(--paper);
+  box-shadow: var(--shadow);
+  font-family: Roboto, ui-sans-serif, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  text-align: left;
+}
+.admin-dialog::backdrop { background: rgba(15, 29, 24, 0.5); backdrop-filter: blur(5px); }
+.admin-dialog__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
+.admin-dialog .admin-dialog__heading h2 { margin: 0; font-family: Georgia, serif; font-size: 28px; font-weight: 400; line-height: 1.2; }
+.admin-signin, .admin-account { display: grid; gap: 20px; }
+.admin-signin p, .admin-account p { margin: 0; }
+.admin-signin .publisher-field { margin: 0; }
+.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
+.article-admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
+.post-card:has(.article-admin-actions) { display: flex; flex-direction: column; }
+.post-card:has(.article-admin-actions) > a { height: auto; flex: 1; }
+.post-card > .article-admin-actions { padding: 16px 24px; border-top: 1px solid var(--line); }
+.article-hero .article-admin-actions { width: fit-content; padding: 10px 18px; border-radius: 12px; background: var(--paper); color: var(--ink); margin: -16px 0 28px; }
+.text-button--danger { color: #9a3434; }
+.button--danger { color: #fff; background: #9a3434; border-color: #9a3434; }
+.button--danger:hover { background: #7e2929; }
+button:disabled { cursor: not-allowed; opacity: 0.6; }
+@media (max-width: 600px) {
+  .header-actions { gap: 8px; }
+  .admin-dialog { padding: 22px; }
+}
+
+.brand-photo { display: block; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: transparent; }
+.culture-card--wide { display: grid; grid-template-columns: 206px minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 40px); }
+.culture-photo { display: block; width: 100%; max-width: 206px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 22px; box-shadow: 0 14px 30px rgba(35, 30, 45, 0.18); }
+.culture-content { min-width: 0; }
+@media (max-width: 1000px) {
+  .culture-card--wide { grid-template-columns: 170px minmax(0, 1fr); gap: 26px; }
+  .culture-content .culture-intro { grid-template-columns: 1fr; gap: 12px; }
+  .culture-content .culture-links { grid-template-columns: 1fr; }
+}
+@media (max-width: 520px) {
+  .culture-card--wide { grid-template-columns: 1fr; }
+  .culture-photo { width: 180px; max-width: 100%; }
+}
+
+/* Motion feedback is reserved for large action buttons and interest cards. */
+:is(.button, .culture-link) {
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition: translate 160ms ease, scale 120ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
+}
+:is(button, .button, .nav-link, .culture-link, .brand, .write-link, .social-list a):focus-visible {
+  outline: 3px solid #668979;
+  outline-offset: 4px;
+}
+@media (hover: hover) and (pointer: fine) {
+  :is(.button, .culture-link):not(:disabled):hover {
+    translate: 0 -2px;
+    filter: brightness(1.04);
+    box-shadow: 0 7px 18px rgba(36, 52, 47, 0.14);
+  }
+  .button:hover, .culture-link:hover { transform: none; }
+}
+:is(.button, .culture-link):not(:disabled):active,
+:is(.button, .culture-link)[data-pressed="true"] {
+  translate: 0 1px;
+  scale: 0.97;
+  filter: brightness(0.94);
+  box-shadow: 0 2px 5px rgba(36, 52, 47, 0.12);
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(.button, .culture-link),
+  :is(.button, .culture-link):hover,
+  :is(.button, .culture-link):active,
+  :is(.button, .culture-link)[data-pressed="true"] {
+    translate: none !important;
+    scale: none !important;
+    transition: none !important;
+  }
+}

frontend/src/topics.js

@@ -0,0 +1,6 @@
+export const mainTopics = [
+  "AI", "React", "FastAPI", "Supabase", "Python", "Cloud",
+  "DevOps", "Product", "Reliability", "Security", "Music", "Life",
+];
+
+export const topicKey = (topic) => topic.trim().toLowerCase();

frontend/src/useJournalResource.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from "react";
+import { getPost, getPosts } from "./api";
+import { useAdmin } from "./components/AdminSession";
+
+// Article reads are public. Sign-in only triggers a fresh read, never gates it.
+export default function useJournalResource(slug = null) {
+  const { sessionRevision } = useAdmin();
+  const [attempt, setAttempt] = useState(0);
+  const [state, setState] = useState({ key: slug, data: null, loading: true, error: "" });
+  const reload = useCallback(() => setAttempt((current) => current + 1), []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    setState((current) => ({ key: slug, data: current.key === slug ? current.data : null, loading: true, error: "" }));
+    const request = slug === null ? getPosts(controller.signal) : getPost(slug, controller.signal);
+    request.then((data) => {
+      if (!controller.signal.aborted) setState({ key: slug, data, loading: false, error: "" });
+    }).catch((error) => {
+      if (!controller.signal.aborted) setState((current) => ({ ...current, loading: false, error: error.message }));
+    });
+    return () => controller.abort();
+  }, [slug, sessionRevision, attempt]);
+
+  useEffect(() => {
+    if (!state.error) return;
+    const visible = () => { if (document.visibilityState === "visible") reload(); };
+    window.addEventListener("online", reload);
+    window.addEventListener("focus", reload);
+    document.addEventListener("visibilitychange", visible);
+    return () => {
+      window.removeEventListener("online", reload);
+      window.removeEventListener("focus", reload);
+      document.removeEventListener("visibilitychange", visible);
+    };
+  }, [state.error, reload]);
+
+  const setData = useCallback((update) => {
+    setState((current) => ({ ...current, data: typeof update === "function" ? update(current.data) : update }));
+  }, []);
+  return { ...state, loading: state.key !== slug || state.loading, data: state.key === slug ? state.data : null, reload, setData };
+}