From 1ddee74796fc0718ac71309a0a816790af8bafac Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Thu, 5 Feb 2026 11:39:51 +0500
Subject: [PATCH] fix: refactor and update style for app header

---
 src/components/layout/AppContainer.svelte |   3 -
 src/components/layout/AppHeader.svelte    | 104 ++++++++++++++++++----
 src/routes/+layout.svelte                 |  85 ++++++++++++++++++
 3 files changed, 173 insertions(+), 19 deletions(-)
 create mode 100644 src/routes/+layout.svelte

diff --git a/src/components/layout/AppContainer.svelte b/src/components/layout/AppContainer.svelte
index c07d231..06e5deb 100644
--- a/src/components/layout/AppContainer.svelte
+++ b/src/components/layout/AppContainer.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import ErrorMessage from "$components/feedback/ErrorMessage.svelte";
   import AppContent from "$components/layout/AppContent.svelte";
-  import AppHeader from "$components/layout/AppHeader.svelte";
 
   interface Props {
     errorMessage: string | undefined;
@@ -39,8 +38,6 @@
 </script>
 
 <div class="app-container">
-  <AppHeader />
-
   <ErrorMessage {errorMessage} />
 
   <AppContent
diff --git a/src/components/layout/AppHeader.svelte b/src/components/layout/AppHeader.svelte
index bfc90b0..39f62a5 100644
--- a/src/components/layout/AppHeader.svelte
+++ b/src/components/layout/AppHeader.svelte
@@ -1,30 +1,102 @@
 <script lang="ts">
-  interface Props {
-    onUploadNewImage?: () => void;
-  }
+  interface Props {}
 
-  let { onUploadNewImage }: Props = $props();
+  let {}: Props = $props();
+
+  function toggleTheme() {
+    // TODO: need refactoring
+    const currentTheme = document.documentElement.getAttribute("data-theme");
+    const newTheme = currentTheme === "light" ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", newTheme);
+    localStorage.setItem("theme", newTheme);
+  }
 </script>
 
-<div class="app-header">
-  <h1>Twitch Panels Creator</h1>
-</div>
+<header class="header">
+  <div class="header-content">
+    <h1>Twitch Panels</h1>
+    <button class="theme-toggle" aria-label="Toggle theme" onclick={toggleTheme}>
+      <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="5"></circle>
+        <line x1="12" y1="1" x2="12" y2="3"></line>
+        <line x1="12" y1="21" x2="12" y2="23"></line>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+        <line x1="1" y1="12" x2="3" y2="12"></line>
+        <line x1="21" y1="12" x2="23" y2="12"></line>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+      </svg>
+      <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      </svg>
+    </button>
+  </div>
+</header>
 
 <style>
-  .app-header {
+  /* Header */
+  .header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 16px 20px;
+    border-radius: var(--radius);
+    margin-bottom: 16px;
+  }
+
+  .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1.5rem;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 12px;
-    color: white;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }
 
-  .app-header h1 {
-    margin: 0;
-    font-size: 2rem;
+  .header h1 {
+    font-size: 20px;
     font-weight: 600;
   }
+
+  .theme-toggle {
+    width: 36px;
+    height: 36px;
+    border-radius: 6px;
+    border: none;
+    background: rgba(255, 255, 255, 0.2);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition);
+    position: relative;
+  }
+
+  .theme-toggle:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  .theme-toggle svg {
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    transition: var(--transition);
+  }
+
+  .sun-icon {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+
+  .moon-icon {
+    opacity: 0;
+    transform: rotate(90deg);
+  }
+
+  :global([data-theme="dark"]) .sun-icon {
+    opacity: 0;
+    transform: rotate(90deg);
+  }
+
+  :global([data-theme="dark"]) .moon-icon {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..81e50ff
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+  import AppHeader from "$components/layout/AppHeader.svelte";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+  }
+
+  let { children }: Props = $props();
+</script>
+
+<div class="container">
+  <AppHeader />
+  {@render children()}
+</div>
+
+<style>
+  :root {
+    --bg-primary: #ffffff;
+    --bg-secondary: #fafafa;
+    --bg-card: #ffffff;
+    --bg-hover: #f5f5f5;
+
+    --text-primary: #1a1a1a;
+    --text-secondary: #666666;
+    --text-tertiary: #999999;
+
+    --border-color: #e5e5e5;
+    --border-hover: #d4d4d4;
+
+    --accent-primary: #6366f1;
+    --accent-hover: #4f46e5;
+    --accent-light: #eef2ff;
+
+    --danger: #ef4444;
+
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    --radius: 8px;
+    --transition: all 0.15s ease;
+  }
+
+  :global([data-theme="dark"]) {
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #1a1a1a;
+    --bg-card: #1a1a1a;
+    --bg-hover: #2a2a2a;
+
+    --text-primary: #f5f5f5;
+    --text-secondary: #a3a3a3;
+    --text-tertiary: #737373;
+
+    --border-color: #2a2a2a;
+    --border-hover: #3a3a3a;
+
+    --accent-primary: #818cf8;
+    --accent-hover: #6366f1;
+    --accent-light: #312e81;
+
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
+  }
+
+  :global(*) {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  :global(body) {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    min-height: 100vh;
+    padding: 16px;
+    transition: var(--transition);
+    line-height: 1.5;
+  }
+
+  .container {
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+</style>