It's a todo list.
7
fork

Configure Feed

Select the types of activity you want to include in your feed.

๐Ÿ’„ add 'coming soon' toast, mobile view, init style

+89 -17
+2 -1
package.json
··· 26 26 "dependencies": { 27 27 "@vercel/analytics": "^1.2.2", 28 28 "@vercel/speed-insights": "^1.0.10", 29 - "oslo": "^1.1.3" 29 + "oslo": "^1.1.3", 30 + "svelte-french-toast": "^1.2.0" 30 31 } 31 32 }
+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
··· 1 1 @tailwind base; 2 2 @tailwind components; 3 3 @tailwind utilities; 4 + 5 + @font-face { 6 + font-family: Apfel Grotezk; 7 + src: url("/ApfelGrotezk-Regular.woff2"), 8 + url("/ApfelGrotezk-Fett.woff2"); 9 + }
+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
··· 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

This is a binary file and will not be displayed.

static/ApfelGrotezk-Regular.woff2

This is a binary file and will not be displayed.

+5 -1
tailwind.config.js
··· 2 2 export default { 3 3 content: ['./src/**/*.{html,js,svelte,ts}'], 4 4 theme: { 5 - extend: {} 5 + extend: { 6 + fontFamily: { 7 + apfel: ["Apfel Grotezk"] 8 + } 9 + } 6 10 }, 7 11 plugins: [], 8 12 };