It's a todo list.
💄 add 'coming soon' toast, mobile view, init style
+89
-17
+2
-1
package.json
+2
-1
package.json
+20
pnpm-lock.yaml
+20
pnpm-lock.yaml
···
14
14
oslo:
15
15
specifier: ^1.1.3
16
16
version: 1.1.3
17
+
svelte-french-toast:
18
+
specifier: ^1.2.0
19
+
version: 1.2.0(svelte@5.0.0-next.69)
17
20
18
21
devDependencies:
19
22
'@sveltejs/adapter-auto':
···
1820
1823
- sugarss
1821
1824
dev: true
1822
1825
1826
+
/svelte-french-toast@1.2.0(svelte@5.0.0-next.69):
1827
+
resolution: {integrity: sha512-5PW+6RFX3xQPbR44CngYAP1Sd9oCq9P2FOox4FZffzJuZI2mHOB7q5gJBVnOiLF5y3moVGZ7u2bYt7+yPAgcEQ==}
1828
+
peerDependencies:
1829
+
svelte: ^3.57.0 || ^4.0.0
1830
+
dependencies:
1831
+
svelte: 5.0.0-next.69
1832
+
svelte-writable-derived: 3.1.0(svelte@5.0.0-next.69)
1833
+
dev: false
1834
+
1823
1835
/svelte-hmr@0.15.3(svelte@5.0.0-next.69):
1824
1836
resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
1825
1837
engines: {node: ^12.20 || ^14.13.1 || >= 16}
···
1875
1887
svelte: 5.0.0-next.69
1876
1888
typescript: 5.4.2
1877
1889
dev: true
1890
+
1891
+
/svelte-writable-derived@3.1.0(svelte@5.0.0-next.69):
1892
+
resolution: {integrity: sha512-cTvaVFNIJ036vSDIyPxJYivKC7ZLtcFOPm1Iq6qWBDo1fOHzfk6ZSbwaKrxhjgy52Rbl5IHzRcWgos6Zqn9/rg==}
1893
+
peerDependencies:
1894
+
svelte: ^3.2.1 || ^4.0.0-next.1
1895
+
dependencies:
1896
+
svelte: 5.0.0-next.69
1897
+
dev: false
1878
1898
1879
1899
/svelte@5.0.0-next.69:
1880
1900
resolution: {integrity: sha512-9/rJteePoaLTpZXvlnJn6PmFxpXHtRAEXZi/tydCpb0NiwkVG9aAlHriVaLA7gFiIHBPNE/n56MPvujnqnjgtw==}
+6
src/app.css
+6
src/app.css
+29
-9
src/routes/+layout.svelte
+29
-9
src/routes/+layout.svelte
···
1
1
<script lang="ts">
2
2
import "../app.css";
3
+
import { onMount } from "svelte";
3
4
import { page } from "$app/stores";
4
-
import { onMount } from "svelte";
5
+
import { goto } from "$app/navigation";
5
6
import { fade } from "svelte/transition";
7
+
import toast, { Toaster } from "svelte-french-toast";
6
8
import { persisted, pinned_list } from "$lib/stores.svelte";
7
-
import { goto } from "$app/navigation";
8
9
9
10
const theme = persisted<string>("theme", "light");
10
11
let is_menu_open = $state(false);
···
13
14
: "text-white absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-[size:20px_20px]"
14
15
);
15
16
17
+
function comingSoon() {
18
+
toast("Coming soon!", { icon: "🙈", position: "bottom-end" });
19
+
}
20
+
16
21
onMount(() => {
17
22
if ($page.url.pathname === "/") {
18
23
goto(`/${pinned_list.value}`);
···
20
25
});
21
26
</script>
22
27
23
-
<div class={`${theme_style} flex flex-col w-full h-full min-w-screen min-h-screen p-8`}>
28
+
<div class={`${theme_style} font-apfel flex flex-col w-full h-full min-w-screen min-h-screen p-8`}>
24
29
<main class="p-4 w-full h-full">
25
30
<slot />
26
31
</main>
···
32
37
transition:fade={{ duration: 150 }}
33
38
class={`${theme.value === "light" ? "border-black" : "border-[#00091d]"} w-fit border z-50 flex flex-col items-start gap-2 h-fit p-2 rounded-xl bg-white`}
34
39
>
35
-
<button class="line-through flex gap-2 text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center">
40
+
<button
41
+
onclick={comingSoon}
42
+
class="flex gap-2 text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center"
43
+
>
36
44
<img src="/shooting-star.svg" alt="Item 1" class="w-8 h-8" />
37
45
Try a new list
38
46
</button>
39
-
<button class="line-through flex gap-2 text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center">
47
+
<button
48
+
onclick={comingSoon}
49
+
class="flex gap-2 text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center"
50
+
>
40
51
<img src="/sparkles-line.svg" alt="Item 2" class="w-8 h-8" />
41
52
AI Suggestions
42
53
</button>
···
51
62
<img src="/menu-line.svg" alt="Menu" class="w-12 h-12" />
52
63
</button>
53
64
54
-
<a href="/explore" class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full">
65
+
<!-- TODO: change to <a href='/explore'> -->
66
+
<button
67
+
onclick={comingSoon}
68
+
class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full"
69
+
>
55
70
<img src="/planet-rocket.svg" alt="Explore Page" class="w-12 h-12"/>
56
-
</a>
71
+
</button>
57
72
58
-
<a href="/login" class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full">
73
+
<!-- TODO: change to <a href='/login'> -->
74
+
<button
75
+
onclick={comingSoon}
76
+
class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full"
77
+
>
59
78
<img src="/login-line.svg" alt="Login" class="w-12 h-12"/>
60
-
</a>
79
+
</button>
61
80
</nav>
62
81
</div>
63
82
···
73
92
/>
74
93
</button>
75
94
</aside>
95
+
<Toaster />
76
96
</div>
+27
-6
src/routes/[id]/+page.svelte
+27
-6
src/routes/[id]/+page.svelte
···
12
12
$effect(() => local_lists.update());
13
13
</script>
14
14
15
-
<main class="flex flex-col p-4 gap-8">
15
+
<main class="flex flex-col w-full p-2 lg:p-4 gap-8 text-xl lg:text-3xl">
16
16
{#if list}
17
-
<p>{list.title}</p>
18
-
<ul>
17
+
<input
18
+
type="text"
19
+
bind:value={list.title}
20
+
class="text-5xl font-bold bg-transparent"
21
+
/>
22
+
<ul class="flex flex-col gap-4">
19
23
{#each list.tasks as task (task.id)}
20
-
<li class="flex gap-4">
21
-
<input type="checkbox" bind:checked={task.is_completed} />
22
-
<input type="text" bind:value={task.description} />
24
+
<li class="group flex justify-between items-center gap-4">
25
+
<div class="flex w-full gap-4 items-center pr-4 py-2">
26
+
<input
27
+
type="checkbox"
28
+
bind:checked={task.is_completed}
29
+
class="w-6 h-6 bg-transparent"
30
+
/>
31
+
<input
32
+
type="text"
33
+
bind:value={task.description}
34
+
class="w-full hover:underline text-ellipsis overflow-hidden bg-transparent"
35
+
/>
36
+
</div>
37
+
38
+
<div class="flex lg:hidden group-hover:flex gap-4 w-fit">
39
+
<button class="hidden lg:flex px-4 py-2 text-xl bg-red-500 rounded-xl text-white">
40
+
Delete
41
+
</button>
42
+
</div>
23
43
</li>
24
44
{/each}
25
45
</ul>
46
+
26
47
{:else}
27
48
<p>Loading...</p>
28
49
{/if}
static/ApfelGrotezk-Fett.woff2
static/ApfelGrotezk-Fett.woff2
This is a binary file and will not be displayed.
static/ApfelGrotezk-Regular.woff2
static/ApfelGrotezk-Regular.woff2
This is a binary file and will not be displayed.