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);
   }

src/components/layout/Card.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    title: string | Snippet;
+    children: Snippet;
+    titleSnippet?: Snippet;
+  }
+
+  let { title, children, titleSnippet = emptySnippet }: Props = $props();
+</script>
+
+<!-- svelte-ignore block_empty -->
+{#snippet emptySnippet()}{/snippet}
+
+<section class="card">
+  <div class="card-header-row">
+    <h2 class="card-title">
+      {#if typeof title === "string"}
+        {title}
+      {:else}
+        {@render title()}
+      {/if}
+    </h2>
+    <div class="card-snippet">
+      {@render titleSnippet()}
+    </div>
+  </div>
+  <div class="card-body">
+    {@render children()}
+  </div>
+</section>
+
+<style>
+  .card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 16px;
+    margin-bottom: 16px;
+    transition: var(--transition);
+  }
+
+  .card-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .card-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+</style>

src/components/layout/PanelBar.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import IconArrowLeft from "$components/ui/Icons/IconArrowLeft.svelte";
+  import IconArrowRight from "$components/ui/Icons/IconArrowRight.svelte";
+  import Card from "./Card.svelte";
+</script>
+
+<div class="panel-bar">
+  <Card title="Фоновое изображение">фоновое изображение</Card>
+
+  {#snippet panelTitle()}
+    Панели <span class="badge" id="panelCount">0</span>
+  {/snippet}
+
+  {#snippet panelControls()}
+    <button id="prevPanel" class="nav-btn" disabled>
+      <IconArrowLeft />
+    </button>
+    <span id="panelIndicator" class="panel-indicator">0 / 0</span>
+    <button id="nextPanel" class="nav-btn" disabled>
+      <IconArrowRight />
+    </button>
+  {/snippet}
+
+  <Card title={panelTitle} titleSnippet={panelControls}>Панели</Card>
+</div>
+
+<style>
+</style>

src/components/layout/TextBar.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import TextManager from "$components/text/TextManager.svelte";
+  import Card from "./Card.svelte";
+</script>
+
+<div class="text-bar">
+  <Card title="Тексты панелей"><TextManager /></Card>
+
+  <Card title="Настройки текста">Настройки текста</Card>
+</div>
+
+<style>
+</style>