From 60b577b6df8ba7a44c3678fdc8d69bf86029bd53 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Thu, 5 Feb 2026 23:05:23 +0500
Subject: [PATCH] fix: use text state

---
 src/components/layout/AppHeader.svelte           |  7 ++-----
 src/components/layout/Card.svelte                |  1 +
 src/components/text/TextInlineEdit.svelte        |  5 +++--
 src/components/text/TextManager.svelte           |  2 +-
 src/routes/+layout.svelte                        |  7 +++++++
 .../{texts.state.svelte.ts => texts.svelte.ts}   |  8 +-------
 src/states/theme.svelte.ts                       | 16 ++++++++++++++++
 7 files changed, 31 insertions(+), 15 deletions(-)
 rename src/states/{texts.state.svelte.ts => texts.svelte.ts} (74%)
 create mode 100644 src/states/theme.svelte.ts

diff --git a/src/components/layout/AppHeader.svelte b/src/components/layout/AppHeader.svelte
index fe85e01..a4b60a9 100644
--- a/src/components/layout/AppHeader.svelte
+++ b/src/components/layout/AppHeader.svelte
@@ -1,17 +1,14 @@
 <script lang="ts">
   import IconMoon from "$components/ui/Icons/IconMoon.svelte";
   import IconSun from "$components/ui/Icons/IconSun.svelte";
+  import { themeState } from "$states/theme.svelte";
 
   interface 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);
+    themeState.toggle();
   }
 </script>
 
diff --git a/src/components/layout/Card.svelte b/src/components/layout/Card.svelte
index 1f14ef7..9026e83 100644
--- a/src/components/layout/Card.svelte
+++ b/src/components/layout/Card.svelte
@@ -39,6 +39,7 @@
     padding: 16px;
     margin-bottom: 16px;
     transition: var(--transition);
+    overflow: hidden;
   }
 
   .card-title {
diff --git a/src/components/text/TextInlineEdit.svelte b/src/components/text/TextInlineEdit.svelte
index 4749635..82b31af 100644
--- a/src/components/text/TextInlineEdit.svelte
+++ b/src/components/text/TextInlineEdit.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
   import Button from "$components/ui/Button.svelte";
   import IconCross from "$components/ui/Icons/IconCross.svelte";
+  import { fly } from "svelte/transition";
 
   interface Props {
     text: string;
     id: number;
-    ondelete: () => void;
+    ondelete: (id: number) => void;
   }
 
   let { text = $bindable(), id, ondelete }: Props = $props();
 </script>
 
-<div class="text-item">
+<div class="text-item" transition:fly={{ x: 600, duration: 300 }}>
   <input type="text" bind:value={text} />
   <Button icon={IconCross} type="danger" onclick={() => ondelete(id)} />
 </div>
diff --git a/src/components/text/TextManager.svelte b/src/components/text/TextManager.svelte
index 3776950..ac9b513 100644
--- a/src/components/text/TextManager.svelte
+++ b/src/components/text/TextManager.svelte
@@ -3,7 +3,7 @@
   import InputGroup from "$components/layout/InputGroup.svelte";
   import Button from "$components/ui/Button.svelte";
   import IconPlus from "$components/ui/Icons/IconPlus.svelte";
-  import { textsState } from "$states/texts.state.svelte";
+  import { textsState } from "$states/texts.svelte";
   import TextInlineEdit from "./TextInlineEdit.svelte";
   import TextInput from "./TextInput.svelte";
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 81e50ff..0ba8014 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,18 @@
 <script lang="ts">
   import AppHeader from "$components/layout/AppHeader.svelte";
+  import { themeState } from "$states/theme.svelte";
   import type { Snippet } from "svelte";
 
   interface Props {
     children: Snippet;
   }
 
+  $effect(() => {
+    const newTheme = themeState.theme;
+    document.documentElement.setAttribute("data-theme", newTheme);
+    localStorage.setItem("theme", newTheme);
+  });
+
   let { children }: Props = $props();
 </script>
 
diff --git a/src/states/texts.state.svelte.ts b/src/states/texts.svelte.ts
similarity index 74%
rename from src/states/texts.state.svelte.ts
rename to src/states/texts.svelte.ts
index 8222267..6c84c31 100644
--- a/src/states/texts.state.svelte.ts
+++ b/src/states/texts.svelte.ts
@@ -3,15 +3,9 @@ export interface TextItem {
   id: number;
 }
 
-export interface TextsState {
-  texts: Array<TextItem>;
-  addText(text: string): void;
-  removeText(id: number): void;
-}
-
 const defaultTexts: Array<TextItem> = ["About me", "Links", "Projects"].map((text, idx) => ({ text, id: idx }));
 
-function createTextsState(): TextsState {
+function createTextsState() {
   let texts: Array<TextItem> = $state(defaultTexts);
   let nextId = $state(defaultTexts.length);
 
diff --git a/src/states/theme.svelte.ts b/src/states/theme.svelte.ts
new file mode 100644
index 0000000..c790e78
--- /dev/null
+++ b/src/states/theme.svelte.ts
@@ -0,0 +1,16 @@
+export type Theme = "dark" | "light";
+
+function createThemeState() {
+  let current: Theme = $state("dark");
+
+  return {
+    get theme() {
+      return current;
+    },
+    toggle() {
+      current = current === "dark" ? "light" : "dark";
+    },
+  };
+}
+
+export const themeState = createThemeState();