From 1b8a0357082a17027b2c2f397f6643e5157ced47 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Thu, 5 Feb 2026 18:35:13 +0500
Subject: [PATCH] fix: resolve texts add and delete flow

---
 src/components/layout/AppHeader.svelte    |  1 -
 src/components/text/TextInlineEdit.svelte |  5 +++--
 src/components/text/TextManager.svelte    | 12 ++++++++----
 src/components/ui/Button.svelte           |  4 ++--
 src/states/texts.state.svelte.ts          |  2 +-
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/layout/AppHeader.svelte b/src/components/layout/AppHeader.svelte
index 187bb23..fe85e01 100644
--- a/src/components/layout/AppHeader.svelte
+++ b/src/components/layout/AppHeader.svelte
@@ -26,7 +26,6 @@
 </header>
 
 <style>
-  /* Header */
   .header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
diff --git a/src/components/text/TextInlineEdit.svelte b/src/components/text/TextInlineEdit.svelte
index 0b85e57..4749635 100644
--- a/src/components/text/TextInlineEdit.svelte
+++ b/src/components/text/TextInlineEdit.svelte
@@ -4,15 +4,16 @@
 
   interface Props {
     text: string;
+    id: number;
     ondelete: () => void;
   }
 
-  let { text = $bindable(), ondelete }: Props = $props();
+  let { text = $bindable(), id, ondelete }: Props = $props();
 </script>
 
 <div class="text-item">
   <input type="text" bind:value={text} />
-  <Button icon={IconCross} type="danger" on:click={ondelete} />
+  <Button icon={IconCross} type="danger" onclick={() => ondelete(id)} />
 </div>
 
 <style>
diff --git a/src/components/text/TextManager.svelte b/src/components/text/TextManager.svelte
index 404d3fb..3776950 100644
--- a/src/components/text/TextManager.svelte
+++ b/src/components/text/TextManager.svelte
@@ -10,11 +10,16 @@
   let text: string = $state("");
 
   function addText() {
-    console.log(text);
+    let trimmed = text.trim();
+    if (trimmed.length !== 0) {
+      textsState.addText(trimmed);
+    }
     text = "";
   }
 
-  function deleteText(id: number) {}
+  function deleteText(id: number) {
+    textsState.removeText(id);
+  }
 </script>
 
 <Card title="Тексты панелей">
@@ -24,13 +29,12 @@
   </InputGroup>
   <div class="texts-list">
     {#each textsState.texts as { text, id } (id)}
-      <TextInlineEdit {text} ondelete={() => deleteText(id)} />
+      <TextInlineEdit {id} {text} ondelete={() => deleteText(id)} />
     {/each}
   </div>
 </Card>
 
 <style>
-  /* Texts List */
   .texts-list {
     display: flex;
     flex-direction: column;
diff --git a/src/components/ui/Button.svelte b/src/components/ui/Button.svelte
index 17a5de3..46a8949 100644
--- a/src/components/ui/Button.svelte
+++ b/src/components/ui/Button.svelte
@@ -4,13 +4,13 @@
 
   interface Props {
     icon: Component;
+    onclick: MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
     label?: string;
     type?: "primary" | "secondary" | "danger" | "outline";
-    onclick: MouseEventHandler<HTMLButtonElement>;
   }
 
-  let { icon: Icon, disabled = false, label, type = "primary", onclick }: Props = $props();
+  let { icon: Icon, onclick, disabled = false, label = "", type = "primary" }: Props = $props();
 </script>
 
 <button
diff --git a/src/states/texts.state.svelte.ts b/src/states/texts.state.svelte.ts
index f397d9c..8222267 100644
--- a/src/states/texts.state.svelte.ts
+++ b/src/states/texts.state.svelte.ts
@@ -24,7 +24,7 @@ function createTextsState(): TextsState {
       nextId++;
     },
     removeText(id: number) {
-      texts.filter((textItem) => textItem.id === id);
+      texts = texts.filter((textItem) => textItem.id !== id);
     },
   };
 }