It's a todo list.
update svelte page stores imports
+9
-9
+2
-2
src/routes/+layout.svelte
+2
-2
src/routes/+layout.svelte
···
1
1
<script lang="ts">
2
2
import "../app.css";
3
3
import { onMount } from "svelte";
4
-
import { page } from "$app/stores";
4
+
import { page } from "$app/state";
5
5
import { goto } from "$app/navigation";
6
6
import { fade } from "svelte/transition";
7
7
import toast, { Toaster } from "svelte-french-toast";
···
24
24
}
25
25
26
26
onMount(() => {
27
-
if ($page.url.pathname === "/") {
27
+
if (page.url.pathname === "/") {
28
28
goto(`/${pinned_list.value}`);
29
29
}
30
30
});
+7
-7
src/routes/[id]/+page.svelte
+7
-7
src/routes/[id]/+page.svelte
···
1
1
<script lang="ts">
2
-
import { page } from "$app/stores";
2
+
import { page } from "$app/state";
3
3
import { local_lists, pinned_list, generateId, type List } from "$lib/stores.svelte";
4
4
import { goto } from "$app/navigation";
5
5
import toast from "svelte-french-toast";
6
6
7
7
let is_menu_open = $state(false);
8
-
let list : List | undefined = $state(local_lists.value!.find((l) => l.id === $page.params.id));
8
+
let list : List | undefined = $state(local_lists.value!.find((l) => l.id === page.params.id));
9
9
let task_input = $state("");
10
10
let user_lists = $derived(local_lists.value) as List[];
11
11
···
56
56
}
57
57
58
58
function deleteList() {
59
-
if (pinned_list.value === $page.params.id) {
59
+
if (pinned_list.value === page.params.id) {
60
60
toast.error("Cannot delete pinned list");
61
61
return;
62
62
}
63
63
64
-
local_lists.value = local_lists.value!.filter((l) => l.id !== $page.params.id);
64
+
local_lists.value = local_lists.value!.filter((l) => l.id !== page.params.id);
65
65
list = local_lists.value.find((l) => l.id === pinned_list.value);
66
66
goto(`/${list!.id}`);
67
67
}
···
140
140
<input
141
141
type="text"
142
142
bind:value={task.description}
143
-
class="w-full hover:underline text-ellipsis overflow-hidden bg-transparent"
143
+
class={`w-full hover:underline text-ellipsis overflow-hidden bg-transparent ${task.is_completed && "text-white/50"}`}
144
144
/>
145
145
</div>
146
146
147
-
<div class="flex lg:hidden group-hover:flex gap-4 w-fit">
147
+
<div class="flex gap-4 w-fit">
148
148
<button
149
149
onclick={() => deleteTask(task.id)}
150
150
class="px-4 py-2 bg-red-500 rounded-xl text-white"
···
155
155
</li>
156
156
{/each}
157
157
<li class="flex gap-4 w-full">
158
+
<input type="text" bind:value={task_input} class="bg-transparent pr-4 py-2 border-b w-full"/>
158
159
<button onclick={addTask} class="px-5 rounded-full bg-white text-black">
159
160
+
160
161
</button>
161
-
<input type="text" bind:value={task_input} class="bg-transparent pr-4 py-2 border-b w-full"/>
162
162
</li>
163
163
</ul>
164
164