It's a todo list.
init default user pref with theme + openPinOnLoad, implemenet openPinOnLoad, change coming soon feats and style in layout menu
+32
-19
+7
src/lib/stores.svelte.ts
+7
src/lib/stores.svelte.ts
···
26
26
]);
27
27
28
28
export const pinned_list = new PersistedState<string>("pinned_list", local_lists.current[0].id);
29
+
30
+
const DEFAULT_USER_PREFERENCES = {
31
+
theme: "dark",
32
+
openPinOnLoad: false
33
+
};
34
+
35
+
export const user_preferences = new PersistedState("easyUserPreferences", DEFAULT_USER_PREFERENCES);
+16
-18
src/routes/+layout.svelte
+16
-18
src/routes/+layout.svelte
···
5
5
import { goto } from "$app/navigation";
6
6
import { fade } from "svelte/transition";
7
7
import toast, { Toaster } from "svelte-french-toast";
8
-
import { pinned_list } from "$lib/stores.svelte";
9
-
import { PersistedState } from "runed";
8
+
import { pinned_list, user_preferences } from "$lib/stores.svelte";
10
9
11
10
interface Props {
12
11
children: Snippet
···
14
13
15
14
let { children }: Props = $props();
16
15
17
-
let theme = new PersistedState<string>("theme", "dark");
18
16
let is_menu_open = $state(false);
19
-
let theme_style = $derived(theme.current === "dark"
17
+
let theme_style = $derived(user_preferences.current.theme === "dark"
20
18
? "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
19
: "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
20
);
···
26
24
}
27
25
28
26
onMount(() => {
29
-
if (page.url.pathname === "/") {
27
+
if (user_preferences.current.openPinOnLoad && page.url.pathname === "/") {
30
28
goto(`/${pinned_list.current}`);
31
29
}
32
30
});
···
38
36
</section>
39
37
40
38
<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">
39
+
<div class="flex flex-col justify-items-start items-start gap-4 pointer-events-auto w-fit">
42
40
{#if is_menu_open}
43
41
<menu
44
42
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`}
43
+
class={`${user_preferences.current.theme === "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
44
>
47
45
<button
48
46
onclick={() => {
···
52
50
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
51
>
54
52
<img src="/shooting-star-line.svg" alt="Item 1" class="w-8 h-8" />
55
-
Try a new list
53
+
Try random list
56
54
</button>
57
55
<button
58
56
onclick={() => {
···
61
59
}}
62
60
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
61
>
64
-
<img src="/sparkles-line.svg" alt="Item 2" class="w-8 h-8" />
65
-
AI Suggestions
62
+
<img src="/planet-rocket.svg" alt="Explore Page" class="w-8 h-8"/>
63
+
Explore lists
66
64
</button>
67
65
</menu>
68
66
{/if}
69
67
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`}>
68
+
<nav class={`${user_preferences.current.theme === "light" ? "border-black" : "border-[#00091d]"} border z-50 flex self-left items-center gap-4 mx-0 w-fit h-fit p-2 rounded-xl bg-white`}>
71
69
<button
72
70
onclick={() => is_menu_open = !is_menu_open}
73
71
class="w-full h-fit hover:bg-slate-500/10 rounded-full"
···
76
74
</button>
77
75
78
76
<!-- 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"
77
+
<a
78
+
href="/"
79
+
class="w-full h-full items-center hover:bg-slate-500/10 rounded-full"
82
80
>
83
-
<img src="/planet-rocket.svg" alt="Explore Page" class="w-12 h-12"/>
84
-
</button>
81
+
<img src="/home-statistics.svg" alt="Home" class="w-8 py-4 pl-3"/>
82
+
</a>
85
83
86
84
<!-- TODO: change to <a href='/login'> -->
87
85
<button
···
95
93
96
94
97
95
<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`}
96
+
onclick={() => { user_preferences.current.theme = user_preferences.current.theme === "light" ? "dark" : "light" }}
97
+
class={`${user_preferences.current.theme === "light" ? "border-black" : "border-[#00091d]"} border w-fit h-fit p-2 bg-white rounded-xl pointer-events-auto`}
100
98
>
101
99
<img
102
100
src="/light-bulb.svg"
+8
-1
src/routes/+page.svelte
+8
-1
src/routes/+page.svelte
+1
static/home-statistics.svg
+1
static/home-statistics.svg
···
1
+
<svg width="512" height="512" viewBox="0 0 24 24" style="color:currentColor" xmlns="http://www.w3.org/2000/svg" class="h-full w-full"><path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 19v-8.5a1 1 0 0 0-.4-.8l-7-5.25a1 1 0 0 0-1.2 0l-7 5.25a1 1 0 0 0-.4.8V19a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1M8 13v3m4-6v6m4-1v1"/></svg>
