adds i18n

web/src/lib/components/list/list_card.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
     import type { List } from "$lib/models/list";
     import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
+    import { _ } from "svelte-i18n";
     export let list: List;
     export let active: boolean = false;
 
     const dropdownItems: DropdownItem[] = [
-        { text: "Edit", value: "edit" },
-        { text: "Delete", value: "delete" },
+        { text: $_("edit"), value: "edit" },
+        { text: $_("delete"), value: "delete" },
     ];
 </script>
 
@@ -21,7 +22,9 @@
             alt="avatar"
         />
     {:else}
-        <div class="flex w-16 md:w-24 aspect-square shrink-0 items-center justify-center">
+        <div
+            class="flex w-16 md:w-24 aspect-square shrink-0 items-center justify-center"
+        >
             <i class="fa fa-table-list text-5xl"></i>
         </div>
     {/if}

web/src/lib/components/list/list_modal.svelte

@@ -6,10 +6,10 @@
     import { list } from "$lib/stores/list_store";
     import { createForm } from "$lib/vendor/svelte-form-lib/index";
     import { util } from "$lib/vendor/svelte-form-lib/util";
+    import { _ } from "svelte-i18n";
     import Modal from "../base/modal.svelte";
     import TextField from "../base/text_field.svelte";
     import Textarea from "../base/textarea.svelte";
-
     export let openModal: (() => void) | undefined = undefined;
     export let closeModal: (() => void) | undefined = undefined;
 
@@ -37,9 +37,8 @@
     }
 
     function handleAvatarSelection() {
-        const files = (
-            document.getElementById("avatar") as HTMLInputElement
-        ).files;
+        const files = (document.getElementById("avatar") as HTMLInputElement)
+            .files;
 
         if (!files) {
             return;
@@ -55,7 +54,7 @@
 
 <Modal
     id="list-modal"
-    title="New List"
+    title={$form.id ? $_("edit-list") : $_("new-list")}
     let:openModal
     bind:openModal
     bind:closeModal
@@ -67,7 +66,7 @@
         class="modal-content space-y-4"
         on:submit={handleSubmit}
     >
-        <label for="avatar" class="text-sm font-medium block"> Avatar </label>
+        <label for="avatar" class="text-sm font-medium block"> {$_('avatar')} </label>
         <input
             name="avatar"
             type="file"
@@ -87,13 +86,13 @@
             <button
                 class="btn-secondary"
                 type="button"
-                on:click={openAvatarBrowser}>Change...</button
+                on:click={openAvatarBrowser}>{$_('change')}...</button
             >
         </div>
 
         <TextField
             name="name"
-            label="Name"
+            label={$_("name")}
             bind:value={$form.name}
             error={$errors.name}
             on:change={handleChange}
@@ -101,14 +100,18 @@
 
         <Textarea
             name="description"
-            label="Description"
+            label={$_("description")}
             bind:value={$form.description}
             error={$errors.description}
             on:change={handleChange}
         ></Textarea>
     </form>
     <div slot="footer" class="flex items-center gap-4">
-        <button class="btn-secondary" on:click={closeModal}>Cancel</button>
-        <button class="btn-primary" type="submit" form="list-form">Save</button>
+        <button class="btn-secondary" on:click={closeModal}
+            >{$_("cancel")}</button
+        >
+        <button class="btn-primary" type="submit" form="list-form"
+            >{$_("save")}</button
+        >
     </div>
 </Modal>

web/src/lib/components/list/list_select_modal.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-    import { createEventDispatcher, onMount } from "svelte";
+    import { createEventDispatcher } from "svelte";
 
-    import { lists, lists_index } from "$lib/stores/list_store";
-    import Modal from "../base/modal.svelte";
     import type { List } from "$lib/models/list";
+    import { lists } from "$lib/stores/list_store";
     import { trail } from "$lib/stores/trail_store";
+    import { _ } from "svelte-i18n";
+    import Modal from "../base/modal.svelte";
 
     export let openModal: (() => void) | undefined = undefined;
     export let closeModal: (() => void) | undefined = undefined;
@@ -23,8 +24,8 @@
 
 <Modal
     id="list-modal"
-    title="Select List"
-    size="md"
+    title={$_("select-list")}
+    size="max-w-sm"
     let:openModal
     bind:openModal
     bind:closeModal