feat: divide page into components

src/components/AppHeader.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { Button } from "../lib/components/ui";
+
+  let {
+    onUploadNewImage
+  }: {
+    onUploadNewImage?: () => void;
+  } = $props();
+</script>
+
+<div class="app-header">
+  <h1>Twitch Panels Creator</h1>
+  {#if onUploadNewImage}
+    <Button variant="primary" onclick={onUploadNewImage}>Загрузить изображение</Button>
+  {/if}
+</div>
+
+<style>
+  .app-header {
+    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;
+    font-weight: 600;
+  }
+</style>

src/components/BackgroundPreview.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { Button } from "../lib/components/ui";
+
+  let {
+    backgroundImage,
+    onUploadNewImage
+  }: {
+    backgroundImage?: string | null;
+    onUploadNewImage: () => void;
+  } = $props();
+</script>
+
+{#if backgroundImage}
+  <div class="background-preview">
+    <div class="background-header">
+      <h3>Фоновое изображение</h3>
+      <Button variant="secondary" size="sm" onclick={onUploadNewImage}>Загрузить</Button>
+    </div>
+    <img src={backgroundImage} alt="Фон" />
+  </div>
+{/if}
+
+<style>
+  .background-preview {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .background-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .background-preview h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .background-preview img {
+    width: 100%;
+    max-width: 320px;
+    height: auto;
+    border-radius: 4px;
+  }
+</style>

src/components/ImageManager.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import ImageUpload from "./ImageUpload.svelte";
+  import ImageCropper from "./ImageCropper.svelte";
+
+  let {
+    currentStep,
+    uploadedImage,
+    onImageUpload,
+    onCropComplete,
+    onCropCancel
+  }: {
+    currentStep: string;
+    uploadedImage: string | null;
+    onImageUpload: (image: string) => void;
+    onCropComplete: (croppedImage: string) => void;
+    onCropCancel: () => void;
+  } = $props();
+</script>
+
+{#if currentStep === "upload"}
+  <ImageUpload onImageSelect={onImageUpload} />
+{:else if currentStep === "crop" && uploadedImage}
+  <ImageCropper imageSrc={uploadedImage} onCropComplete={onCropComplete} onCancel={onCropCancel} />
+{/if}

src/components/PanelsList.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { Panel } from "../lib/types/panel";
+  import PanelPreview from "./PanelPreview.svelte";
+  import { Button } from "../lib/components/ui";
+
+  let {
+    panels,
+    onDownload,
+    onDownloadAll
+  }: {
+    panels: Panel[];
+    onDownload: (panel: Panel) => void;
+    onDownloadAll: () => void;
+  } = $props();
+</script>
+
+{#if panels.length > 0}
+  <div class="panels-container">
+    <div class="panels-header">
+      <h2>Созданные панели ({panels.length})</h2>
+      <Button variant="primary" onclick={onDownloadAll}>Скачать все</Button>
+    </div>
+    <div class="panels-list">
+      {#each panels as panel (panel.id)}
+        <div class="panel-item">
+          <PanelPreview
+            panel={panel}
+            onDownload={() => onDownload(panel)}
+          />
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .panels-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .panels-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 8px;
+    color: white;
+  }
+
+  .panels-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  .panels-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .panel-item {
+    border: 2px solid #e9ecef;
+    border-radius: 8px;
+    overflow: hidden;
+    background: white;
+  }
+</style>

src/components/TextSection.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import TextManager from "./TextManager.svelte";
+
+  let {
+    texts,
+    onTextAdd,
+    onTextUpdate,
+    onTextDelete
+  }: {
+    texts: Array<{ id: string; text: string }>;
+    onTextAdd: (text: string) => void;
+    onTextUpdate: (id: string, text: string) => void;
+    onTextDelete: (id: string) => void;
+  } = $props();
+</script>
+
+<div class="text-section">
+  <h2>Добавьте тексты для панелей</h2>
+  <TextManager
+    onTextAdd={onTextAdd}
+    onTextUpdate={onTextUpdate}
+    onTextDelete={onTextDelete}
+    texts={texts}
+  />
+</div>
+
+<style>
+  .text-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .text-section h2 {
+    margin: 0;
+    color: #333;
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+</style>