fix: use text state

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
+    themeState.toggle();
-    const currentTheme = document.documentElement.getAttribute("data-theme");
-    const newTheme = currentTheme === "light" ? "dark" : "light";
-    document.documentElement.setAttribute("data-theme", newTheme);
-    localStorage.setItem("theme", newTheme);
   }
 </script>
 

src/components/layout/Card.svelte

@@ -39,6 +39,7 @@
     padding: 16px;
     margin-bottom: 16px;
     transition: var(--transition);
+    overflow: hidden;
   }
 
   .card-title {

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>

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";
 

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>
 

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

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