From aa15a392f187dad77107b78dbe52309d8a71b905 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Fri, 12 Sep 2025 17:27:16 +0200
Subject: [PATCH] Update cospend layout styling to match site theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change navigation text from "View All Payments" to "All Payments"
- Remove Nord theme background overrides to use global site background
- Update side panel styling to match site colors in light/dark modes
- Maintain existing functionality while improving visual consistency

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/routes/cospend/+layout.svelte | 71 ++++++++++++++++++++++---------
 1 file changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/routes/cospend/+layout.svelte b/src/routes/cospend/+layout.svelte
index 6573c24..b831d83 100644
--- a/src/routes/cospend/+layout.svelte
+++ b/src/routes/cospend/+layout.svelte
@@ -5,9 +5,18 @@
   import { fly } from 'svelte/transition';
   import { quintOut } from 'svelte/easing';
   import PaymentModal from '$lib/components/PaymentModal.svelte';
+  import Header from '$lib/components/Header.svelte';
+  import UserHeader from '$lib/components/UserHeader.svelte';
 
+  export let data;
+  
   let showModal = false;
   let paymentId = null;
+  let user;
+  
+  if (data.session) {
+    user = data.session.user;
+  }
 
   $: {
     // Check if URL contains payment view route OR if we have paymentId in state
@@ -37,28 +46,37 @@
   }
 </script>
 
-<div class="layout-container" class:has-modal={showModal}>
-  <div class="main-content">
-    <slot />
-  </div>
+<Header>
+  <ul class="site_header" slot="links">
+    <li><a href="/cospend">Dashboard</a></li>
+    <li><a href="/cospend/payments">All Payments</a></li>
+    <li><a href="/cospend/recurring">Recurring Payments</a></li>
+  </ul>
+  <UserHeader slot="right_side" {user}></UserHeader>
+  
+  <div class="layout-container" class:has-modal={showModal}>
+    <div class="main-content">
+      <slot />
+    </div>
 
-  <div class="side-panel">
-    {#if showModal}
-      <div class="modal-content">
-        {#key paymentId}
-          <div in:fly={{x: 50, duration: 300, easing: quintOut}} out:fly={{x: -50, duration: 300, easing: quintOut}}>
-            <PaymentModal {paymentId} on:close={() => showModal = false} on:paymentDeleted={handlePaymentDeleted} />
-          </div>
-        {/key}
-      </div>
-    {/if}
+    <div class="side-panel">
+      {#if showModal}
+        <div class="modal-content">
+          {#key paymentId}
+            <div in:fly={{x: 50, duration: 300, easing: quintOut}} out:fly={{x: -50, duration: 300, easing: quintOut}}>
+              <PaymentModal {paymentId} on:close={() => showModal = false} on:paymentDeleted={handlePaymentDeleted} />
+            </div>
+          {/key}
+        </div>
+      {/if}
+    </div>
   </div>
-</div>
+</Header>
 
 <style>
   .layout-container {
     display: flex;
-    min-height: 100vh;
+    min-height: calc(100vh - 4rem);
   }
 
   .main-content {
@@ -72,11 +90,11 @@
 
   .side-panel {
     position: fixed;
-    top: 0;
+    top: 4rem;
     right: 0;
     width: 400px;
-    height: 100vh;
-    background: white;
+    height: calc(100vh - 4rem);
+    background: #fbf9f3;
     border-left: 1px solid #dee2e6;
     box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
     z-index: 100;
@@ -103,6 +121,13 @@
     overflow-y: auto;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .side-panel {
+      background: var(--background-dark);
+      border-left-color: #434C5E;
+    }
+  }
+
   @media (max-width: 768px) {
     .layout-container.has-modal {
       flex-direction: column;
@@ -122,6 +147,14 @@
       border-left: none;
       border-top: 1px solid #dee2e6;
       box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+      top: auto;
+      bottom: 0;
+    }
+  }
+
+  @media (max-width: 768px) and (prefers-color-scheme: dark) {
+    .side-panel {
+      border-top-color: #434C5E;
     }
   }
 </style>