readded title

docs/design/ui-ux.md

@@ -35,9 +35,15 @@ theme** — so tokens here are named/structured to map onto Compose (`ColorSchem
     its first image (else a placeholder); a location/track a **mini-map**; a saved query a
     distinct glyph.
 - **Record view**: a **full drill-in** in its own tab. Inherits the parent folder's **background
-  image** and **accent colour**. The **title lives only in the header bar** (not repeated in the
-  body). Header tools: ⓘ (Info/properties), link icon (Links), ≡ menu — these **switch the right
-  panel** (there is no separate in-panel tab strip; the header buttons are the single control).
+  image** and **accent colour**. Header tools: ⓘ (Info/properties), link icon (Links), edit
+  (pencil) — the first two **switch the right panel** (no separate in-panel tab strip; the header
+  buttons are the single control).
+  - **The header stays a fully generic component** — breadcrumb (`⌂ / Type / Title`) + tools,
+    with **no type-specific content and no `if(type…)`**. All type variance lives in the body.
+  - **The title always leads the body as an H1**, for every type. This is *not* redundant with
+    the header: the header title is **breadcrumb/navigation** (small, type-prefixed), the body H1
+    is the **document heading** (like Notion / a browser tab). Keeping the checkbox etc. in the
+    body — not the header — is what keeps the header generic.
   - **Outgoing links** are marked **inline** in the body text (like HTML links).
   - **Links panel** (right): **List/Graph switch on top**, then two **independent** Incoming/
     Outgoing toggles (both can be active). List → two labelled sections; Graph → one graph with
@@ -55,7 +61,8 @@ Properties are **always frontmatter** — only the *default rendering* differs b
 - **Standard types (Task / Contact / Event)** → the type defines a **core block always rendered
   in the body**, because usability *and* the Card/CalDAV projection depend on it. The rest of the
   properties still live in the Info panel. Core blocks:
-  - **Task**: a checkbox (done state) + title, plus core property pills (due, priority, status).
+  - **Task**: the done-checkbox sits **before the body H1 title** (Todoist-style); the core block
+    below is then just the property pills (due, priority, status).
   - **Contact**: name in the header; a contact card — avatar, email/phone/mobile rows, address
     with a **mini-map**.
   - **Event**: on the left a date card + time range + all-day toggle; on the **right edge** the

docs/design/wireframes/record-view.html

@@ -59,7 +59,7 @@
   .rechead .tools button.on{background:#fff;color:var(--accent)}
 
   .recbody{padding:22px 28px;min-width:0}
-  .recbody h1{font-family:var(--font-display);font-size:24px;margin:0 0 4px;font-weight:600;text-wrap:balance}
+  .recbody h1{font-family:var(--font-display);font-size:24px;margin:0 0 12px;font-weight:600;display:flex;align-items:center;gap:13px}
   .recbody .sub{color:var(--muted);font-size:13px;margin-bottom:18px}
   .recbody p{margin:0 0 14px;max-width:64ch}
   .recbody a.wlink{color:var(--edge-out);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;cursor:pointer;font-weight:500}
@@ -79,7 +79,7 @@
   .taskcheck{width:28px;height:28px;border:2px solid var(--accent);border-radius:8px;display:grid;place-items:center;background:transparent;flex:none}
   .taskcheck svg{opacity:0;color:#fff;width:18px;height:18px}
   .taskcheck.done{background:var(--accent)} .taskcheck.done svg{opacity:1}
-  .tasktitle{font-family:var(--font-display);font-size:22px;font-weight:600}
+  .tasktitle{font-weight:600}
   .taskcheck.done + .tasktitle{text-decoration:line-through;color:var(--muted)}
   .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
   .chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);
@@ -262,7 +262,6 @@
     task:{tab:"Task",icon:'<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="m8 12 3 3 5-6"/></svg>',
       accent:"#E08A2B", type:"Task", title:"Route planen",
       core:'<div class="core">'
-        +'<div class="taskrow"><button class="taskcheck" id="taskcheck" onclick="toggleTask()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m5 12 4.5 4.5L19 6"/></svg></button><span class="tasktitle" id="tasktitle">Route planen</span></div>'
         +'<div class="chips"><span class="chip">'+PI.date+'<span class="k">Fällig</span> 02.08.2026</span>'
         +'<span class="chip"><span class="badge"></span><span class="k">Priorität</span> Hoch</span>'
         +'<span class="chip"><span class="k">Status</span> Offen</span></div></div>',
@@ -390,7 +389,11 @@
     document.getElementById("app").style.setProperty("--accent",r.accent);
     document.getElementById("recType").textContent=r.type;
     document.getElementById("recCrumb").textContent=r.title;
-    document.getElementById("recbody").innerHTML=(r.core||"")+r.body;
+    // Body always leads with the title (H1). Header stays generic; type variance lives here.
+    const titleInner = curType==="task"
+      ? '<button class="taskcheck" id="taskcheck" onclick="toggleTask()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m5 12 4.5 4.5L19 6"/></svg></button><span class="tasktitle" id="tasktitle">'+r.title+'</span>'
+      : r.title;
+    document.getElementById("recbody").innerHTML='<h1>'+titleInner+'</h1>'+(r.core||"")+r.body;
 
     // Info panel: editable properties (empty ones are hidden)
     let h='<div class="panellabel"><span class="t">Properties</span></div>';