feat: WIP: update to new components structure

src/components/layout/AppHeader.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import IconMoon from "$components/ui/Icons/IconMoon.svelte";
+  import IconSun from "$components/ui/Icons/IconSun.svelte";
+
   interface Props {}
 
   let {}: Props = $props();
@@ -16,20 +19,8 @@
   <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>
+      <IconSun />
+      <IconMoon />
     </button>
   </div>
 </header>
@@ -73,29 +64,29 @@
     background: rgba(255, 255, 255, 0.3);
   }
 
-  .theme-toggle svg {
+  :global(.theme-toggle svg) {
     width: 18px;
     height: 18px;
     position: absolute;
     transition: var(--transition);
   }
 
-  .sun-icon {
+  :global(.sun-icon) {
     opacity: 1;
     transform: rotate(0deg);
   }
 
-  .moon-icon {
+  :global(.moon-icon) {
     opacity: 0;
     transform: rotate(90deg);
   }
 
-  :global([data-theme="dark"]) .sun-icon {
+  :global([data-theme="dark"] .sun-icon) {
     opacity: 0;
     transform: rotate(90deg);
   }
 
-  :global([data-theme="dark"]) .moon-icon {
+  :global([data-theme="dark"] .moon-icon) {
     opacity: 1;
     transform: rotate(0deg);
   }