From 95c72340fe4e543cb7e3c2edeab8c79b30d1df8e Mon Sep 17 00:00:00 2001
From: Christoph Brandau <c.brandau91@gmail.com>
Date: Wed, 9 Sep 2026 09:24:18 +0200
Subject: [PATCH] feat(ui): add consistent page-header layout and styles

Introduce a shared page-header/page-heading pattern and CSS to
standardize headers across top-level sections. Components were
updated to adopt the new classes and slightly smaller icon sizing
for a more compact, consistent header appearance. This improves
visual consistency and makes future header adjustments simpler.

- Add reusable page-header styles for spacing, borders, and bg
- Standardize icon sizing and heading layout across screens
---
 src/app.css                                   | 33 +++++++++++++++++++
 src/lib/components/IssueCenter.svelte         |  4 +--
 src/lib/components/RepositoryDashboard.svelte |  4 +--
 src/lib/components/ReviewCenter.svelte        |  4 +--
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index 7c991e7..12834af 100644
--- a/src/app.css
+++ b/src/app.css
@@ -9069,3 +9069,36 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   --color-sync-ahead: #9a5200;
   --color-sync-behind: #0755c8;
 }
+
+/* Consistent page headers for repositories, pull requests, and issues. */
+section > header.page-header.page-header {
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  min-height: 54px;
+  height: auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 8px 24px;
+  border-bottom: 1px solid var(--color-border-subtle);
+  background: color-mix(in srgb, var(--app-bg) 94%, var(--color-surface));
+}
+.page-header .page-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.page-header .page-heading > svg {
+  flex: 0 0 auto;
+  color: var(--color-accent);
+}
+.page-header.page-header .page-heading h1 {
+  margin: 0;
+  color: var(--color-ink);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: normal;
+}
diff --git a/src/lib/components/IssueCenter.svelte b/src/lib/components/IssueCenter.svelte
index 9535f25..e9f2277 100644
--- a/src/lib/components/IssueCenter.svelte
+++ b/src/lib/components/IssueCenter.svelte
@@ -172,8 +172,8 @@
 <svelte:window onkeydown={event => { if (event.key === "Escape" && selectedId) void closeDetails(); }} />
 
 <section class="issue-center" aria-label="Issues">
-  <header class="workspace-heading">
-    <div class="workspace-title"><span class="workspace-symbol"><CircleDot size={21} strokeWidth={1.7} /></span><div><h1>Issues</h1><p>{de ? "Arbeit im Blick. Über alle Integrationen." : "Work in focus. Across your integrations."}</p></div></div>
+  <header class="workspace-heading page-header">
+    <div class="page-heading"><CircleDot size={17} /><h1>Issues</h1></div>
     <button class="workspace-button" onclick={onOpenSettings} title={de ? "Integrationen konfigurieren" : "Configure integrations"}><Settings2 size={14} />{de ? "Integrationen" : "Integrations"}</button>
   </header>
   {#if !sources.length}
diff --git a/src/lib/components/RepositoryDashboard.svelte b/src/lib/components/RepositoryDashboard.svelte
index 05057bb..ff23c1b 100644
--- a/src/lib/components/RepositoryDashboard.svelte
+++ b/src/lib/components/RepositoryDashboard.svelte
@@ -164,8 +164,8 @@
 </script>
 
 <section class="repo-dashboard" aria-label={de ? "Repository-Verwaltung" : "Repository management"}>
-  <header class="dashboard-header">
-    <h1>Repository Management</h1>
+  <header class="dashboard-header page-header">
+    <div class="page-heading"><FolderGit2 size={17} /><h1>Dashboard</h1></div>
     <div class="header-actions">
       <button type="button" onclick={onClone} disabled={isBusy}><Download size={14} />{de ? "Klonen" : "Clone"}</button>
       <button type="button" onclick={onInit} disabled={isBusy}><FolderGit2 size={14} />{de ? "Initialisieren" : "Initialize"}</button>
diff --git a/src/lib/components/ReviewCenter.svelte b/src/lib/components/ReviewCenter.svelte
index 36a7fa5..5f23bf2 100644
--- a/src/lib/components/ReviewCenter.svelte
+++ b/src/lib/components/ReviewCenter.svelte
@@ -402,8 +402,8 @@
 {/if}
 
 <section class:has-inspector={detailOpen && !!selected} class="review-center" aria-label="Review Center">
-  <header class="review-header">
-    <div class="review-heading"><GitPullRequest size={17} /><h1>Review Center</h1></div>
+  <header class="review-header page-header">
+    <div class="review-heading page-heading"><GitPullRequest size={17} /><h1>Review Center</h1></div>
     {#if activeSource}<button class="create-review" type="button" disabled={loading} onclick={() => { detailOpen = false; createOpen = true; }}><GitPullRequest size={14}/>{activeSource.provider.startsWith("gitlab") ? (de ? "MR erstellen" : "Create MR") : (de ? "PR erstellen" : "Create PR")}</button>{/if}
   </header>