From 00277741a8d50cb348457749f045e9c2d733be6c Mon Sep 17 00:00:00 2001
From: mae taylor <mae@mae.wtf>
Date: Mon, 14 Jul 2025 18:16:40 +0100
Subject: [PATCH] refactor: move page header to own component

---
 src/lib/ui/core/PageHeader.svelte     |  6 +++--
 src/routes/+page.svelte               | 38 +++++----------------------
 src/routes/notifications/+page.svelte | 19 ++------------
 3 files changed, 12 insertions(+), 51 deletions(-)

diff --git a/src/lib/ui/core/PageHeader.svelte b/src/lib/ui/core/PageHeader.svelte
index 225d43b..941ea9f 100644
--- a/src/lib/ui/core/PageHeader.svelte
+++ b/src/lib/ui/core/PageHeader.svelte
@@ -4,7 +4,9 @@
 
 <header>
     <h1>{title}</h1>
-    <slot name="icon" />
+    <div class="header-items">
+        <slot/>
+    </div>
 </header>
 
 <style>
@@ -24,7 +26,7 @@
         font-size: 1.5em;
     }
 
-    nav {
+    header .header-items {
         margin-left: auto;
         display: flex;
         flex-direction: row;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4776e7a..f59c71f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,6 +7,7 @@
     import LoginForm from '$lib/ui/LoginForm.svelte';
     import Button from '$lib/ui/Button.svelte';
     import Post from '$lib/ui/post/Post.svelte';
+    import PageHeader from '../lib/ui/core/PageHeader.svelte';
 
     const lang = Lang('en_GB');
 
@@ -23,14 +24,11 @@
 </script>
 
 {#if $account}
-    <header>
-        <h1>{lang.string('timeline.home')}</h1>
-        <nav>
-            <Button centered active>{lang.string('timeline.home')}</Button>
-            <Button centered disabled>{lang.string('timeline.local')}</Button>
-            <Button centered disabled>{lang.string('timeline.federated')}</Button>
-        </nav>
-    </header>
+    <PageHeader title={lang.string('timeline.home')}>
+        <Button centered active>{lang.string('timeline.home')}</Button>
+        <Button centered disabled>{lang.string('timeline.local')}</Button>
+        <Button centered disabled>{lang.string('timeline.federated')}</Button>
+    </PageHeader>
 
     <div id="feed" role="feed">
         {#if $timeline.length <= 0}
@@ -47,30 +45,6 @@
 {/if}
 
 <style>
-    header {
-        width: 100%;
-        height: 64px;
-        margin: 16px 0;
-        padding: 0 8px;
-        display: flex;
-        flex-direction: row;
-        user-select: none;
-        box-sizing: border-box;
-
-    }
-
-    header h1 {
-        font-size: 1.5em;
-    }
-
-    nav {
-        margin-left: auto;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-    }
-
     #feed {
         margin-bottom: 20vh;
     }
diff --git a/src/routes/notifications/+page.svelte b/src/routes/notifications/+page.svelte
index 8a3d4c0..901da39 100644
--- a/src/routes/notifications/+page.svelte
+++ b/src/routes/notifications/+page.svelte
@@ -4,6 +4,7 @@
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
     import Notification from '$lib/ui/Notification.svelte';
+    import PageHeader from '../../lib/ui/core/PageHeader.svelte';
     import Lang from '$lib/lang';
 
     const lang = Lang('en_GB');
@@ -33,9 +34,7 @@
     });
 </script>
 
-<header>
-    <h1>{lang.string('navigation.notifications')}</h1>
-</header>
+<PageHeader title={lang.string('navigation.notifications')}/>
 
 <div class="notifications">
     {#if $notifications.length === 0}
@@ -50,20 +49,6 @@
 </div>
 
 <style>
-    header {
-        width: 100%;
-        height: 64px;
-        margin: 16px 0 8px 0;
-        padding: 0 8px;
-        display: flex;
-        flex-direction: row;
-        box-sizing: border-box;
-    }
-
-    h1 {
-        font-size: 1.5em;
-    }
-
     .loading {
         width: 100%;
         height: 80vh;