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

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