It's a todo list.
1<script lang="ts">
2 import "../app.css";
3 import { onMount, type Snippet } from "svelte";
4 import { page } from "$app/state";
5 import { goto } from "$app/navigation";
6 import { fade } from "svelte/transition";
7 import toast, { Toaster } from "svelte-french-toast";
8 import { pinned_list } from "$lib/stores.svelte";
9 import { PersistedState } from "runed";
10
11 interface Props {
12 children: Snippet
13 }
14
15 let { children }: Props = $props();
16
17 let theme = new PersistedState<string>("theme", "dark");
18 let is_menu_open = $state(false);
19 let theme_style = $derived(theme.current === "dark"
20 ? "text-white absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-size-[20px_20px]"
21 : "text-black absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] bg-size-[16px_16px]"
22 );
23
24 function comingSoon() {
25 toast("Coming soon!", { icon: "🙈", position: "top-center" });
26 }
27
28 onMount(() => {
29 if (page.url.pathname === "/") {
30 goto(`/${pinned_list.current}`);
31 }
32 });
33</script>
34
35<div class={`${theme_style} font-apfel flex flex-col w-full h-full min-w-screen min-h-screen p-8 overflow-auto`}>
36 <section class="p-4 w-full h-full">
37 {@render children()}
38 </section>
39
40 <aside class="z-50 fixed inset-x-0 bottom-0 text-black! flex w-full h-fit items-end justify-between p-8 pointer-events-none">
41 <div class="flex flex-col justify-start gap-4 pointer-events-auto">
42 {#if is_menu_open}
43 <menu
44 transition:fade={{ duration: 150 }}
45 class={`${theme.current === "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`}
46 >
47 <button
48 onclick={() => {
49 comingSoon();
50 is_menu_open = false;
51 }}
52 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"
53 >
54 <img src="/shooting-star-line.svg" alt="Item 1" class="w-8 h-8" />
55 Try a new list
56 </button>
57 <button
58 onclick={() => {
59 comingSoon();
60 is_menu_open = false;
61 }}
62 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"
63 >
64 <img src="/sparkles-line.svg" alt="Item 2" class="w-8 h-8" />
65 AI Suggestions
66 </button>
67 </menu>
68 {/if}
69
70 <nav class={`${theme.current === "light" ? "border-black" : "border-[#00091d]"} border z-50 flex self-center items-center gap-4 mx-auto w-fit h-fit p-2 rounded-xl bg-white`}>
71 <button
72 onclick={() => is_menu_open = !is_menu_open}
73 class="w-full h-fit hover:bg-slate-500/10 rounded-full"
74 >
75 <img src="/menu-line.svg" alt="Menu" class="w-12 h-12" />
76 </button>
77
78 <!-- TODO: change to <a href='/explore'> -->
79 <button
80 onclick={comingSoon}
81 class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full"
82 >
83 <img src="/planet-rocket.svg" alt="Explore Page" class="w-12 h-12"/>
84 </button>
85
86 <!-- TODO: change to <a href='/login'> -->
87 <button
88 onclick={comingSoon}
89 class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full"
90 >
91 <img src="/login-line.svg" alt="Login" class="w-12 h-12"/>
92 </button>
93 </nav>
94 </div>
95
96
97 <button
98 onclick={() => { theme.current = theme.current === "light" ? "dark" : "light" }}
99 class={`${theme.current === "light" ? "border-black" : "border-[#00091d]"} border w-fit h-fit p-2 bg-white rounded-xl pointer-events-auto`}
100 >
101 <img
102 src="/light-bulb.svg"
103 alt="Theme toggle button"
104 class="w-12 h-12 hover:bg-slate-500/10 rounded-full"
105 />
106 </button>
107 </aside>
108 <Toaster />
109</div>
110
111<style lang="postcss">
112 @reference "tailwindcss";
113</style>