Work on layout, modals, toast:

2025-12-09 10:27:02 +00:00 · 2024-08-05 14:45:16 -07:00
parent b2fc469b41
commit a89d20b0e1
33 changed files with 2269 additions and 84 deletions
--- a/.ackrc
+++ b/.ackrc
@@ -0,0 +1 @@
+--ignore-dir=.svelte-kit
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -16,17 +16,27 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "^9.6.0",
+		"autoprefixer": "^10.4.19",
+		"classnames": "^2.5.1",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
+		"postcss": "^8.4.40",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.4.7",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@poppanator/sveltekit-svg": "^4.2.1",
+		"@welshman/lib": "^0.0.12",
+		"daisyui": "^4.12.10",
+		"nostr-login": "^1.5.2"
+	}
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/src/app.css
+++ b/src/app.css
@@ -0,0 +1,45 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.button {
+  padding: 12px 16px;
+  display: flex;
+  border-radius: var(--rounded-btn, 0.5rem);
+  cursor: pointer;
+  animation: button-pop 200ms ease-out;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.button:active:hover, .button:active:focus {
+  animation: button-pop 0s ease-out;
+  transform: scale(var(--btn-focus-scale, 0.97));
+}
+
+[data-theme="dark"] {
+  --stark: #111;
+  --stark-content: #eee;
+}
+
+[data-theme="light"] {
+  --stark: #eee;
+  --stark-content: #111;
+}
+
+.text-stark {
+  color: var(--stark);
+}
+
+.text-stark-content {
+  color: var(--stark-content);
+}
+
+.bg-stark {
+  background-color: var(--stark);
+}
+
+.bg-stark-content {
+  background-color: var(--stark-content);
+}
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Icon from 'lib/components/Icon.svelte'
+  import PrimaryNavItem from 'lib/components/PrimaryNavItem.svelte'
+  import {spaces} from 'app/state'
+</script>
+
+<div class="w-14 bg-base-100 relative">
+  <div class="absolute z-nav-active ml-2 w-12 h-[144px] bg-base-300 -top-[44px]" />
+  <div class="flex flex-col justify-between h-full">
+    <div>
+      <PrimaryNavItem title="Hodlbod">
+        <div class="w-10 rounded-full border border-solid border-base-300">
+          <img alt="" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+        </div>
+      </PrimaryNavItem>
+      {#each $spaces as {id, name, picture} (id)}
+        <PrimaryNavItem title={name}>
+          <div class="w-10 rounded-full border border-solid border-base-300">
+            <img alt={name} src={picture} />
+          </div>
+        </PrimaryNavItem>
+      {/each}
+      <PrimaryNavItem title="Add Space">
+        <div class="w-10 !flex justify-center items-center">
+          <Icon size={7} icon="add-circle" />
+        </div>
+      </PrimaryNavItem>
+      <PrimaryNavItem title="Browse Spaces">
+        <div class="w-10 !flex justify-center items-center">
+          <Icon size={6} icon="compass-big" />
+        </div>
+      </PrimaryNavItem>
+    </div>
+    <div>
+      <PrimaryNavItem title="Settings">
+        <div class="w-10 !flex justify-center items-center">
+          <Icon size={7} icon="settings" />
+        </div>
+      </PrimaryNavItem>
+    </div>
+  </div>
+</div>
+
+<style>
+  .z-nav-active {
+    -webkit-mask-image: url('/nav-active.svg');
+    mask-image: url('/nav-active.svg');
+  }
+</style>
--- a/src/app/components/SecondaryNav.svelte
+++ b/src/app/components/SecondaryNav.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Icon from 'lib/components/Icon.svelte'
+  import SecondaryNavItem from 'lib/components/SecondaryNavItem.svelte'
+</script>
+
+<div class="w-60 bg-base-300 flex flex-col gap-1 px-2 py-4">
+  <SecondaryNavItem href="/">
+    <Icon icon="home-smile" /> Home
+  </SecondaryNavItem>
+  <SecondaryNavItem href="/friends">
+    <Icon icon="user-heart" /> Friends
+  </SecondaryNavItem>
+  <SecondaryNavItem href="/notes">
+    <Icon icon="clipboard-text" /> Saved Notes
+  </SecondaryNavItem>
+  <div class="uppercase text-sm font-bold flex justify-between items-center text-stark-content px-4 py-2">
+    Conversations
+    <div class="cursor-pointer">
+      <Icon icon="add-circle" class="bg-stark-content" />
+    </div>
+  </div>
+</div>
+
--- a/src/app/state.ts
+++ b/src/app/state.ts
@@ -0,0 +1,36 @@
+import {readable, writable} from 'svelte/store'
+import type {FlyParams} from 'svelte/types'
+import {fly as baseFly} from 'svelte/transition'
+import {pushState} from '$app/navigation'
+
+// Animations
+
+export const fly = (node: Element, params: FlyParams | undefined) => baseFly(node, {y: 20, ...params})
+
+// Toast
+
+export const toast = writable(null)
+
+// Modals
+
+// TODO: fix memory leak here by listening to history somehow
+export const modals = new Map()
+
+export const pushModal = (component, props) => {
+  const id = Math.random()
+
+  modals.set(id, {component, props})
+  pushState('', {modal: id})
+
+  return id
+}
+
+// App state
+
+export const spaces = readable([
+  {
+    id: 'test',
+    name: "Test",
+    picture: "https://images.unsplash.com/photo-1721853046219-209921be684e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8"
+  }
+])
--- a/src/assets/icons/Add
+++ b/src/assets/icons/Add
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
--- a/src/assets/icons/Add
+++ b/src/assets/icons/Add
@@ -0,0 +1,4 @@
+<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 120C20 72.8595 20 49.2893 34.6447 34.6447C49.2893 20 72.8595 20 120 20C167.14 20 190.711 20 205.355 34.6447C220 49.2893 220 72.8595 220 120C220 167.14 220 190.711 205.355 205.355C190.711 220 167.14 220 120 220C72.8595 220 49.2893 220 34.6447 205.355C20 190.711 20 167.14 20 120Z" stroke="#1C274C" stroke-width="15"/>
+<path d="M150 120L120 120M120 120L90 120M120 120L120 90M120 120L120 150" stroke="#1C274C" stroke-width="15" stroke-linecap="round"/>
+</svg>
--- a/src/assets/icons/Alt
+++ b/src/assets/icons/Alt
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 5L15 12L9 19" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/icons/Clipboard
+++ b/src/assets/icons/Clipboard
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 4.00195C18.175 4.01406 19.3529 4.11051 20.1213 4.87889C21 5.75757 21 7.17179 21 10.0002V16.0002C21 18.8286 21 20.2429 20.1213 21.1215C19.2426 22.0002 17.8284 22.0002 15 22.0002H9C6.17157 22.0002 4.75736 22.0002 3.87868 21.1215C3 20.2429 3 18.8286 3 16.0002V10.0002C3 7.17179 3 5.75757 3.87868 4.87889C4.64706 4.11051 5.82497 4.01406 8 4.00195" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M7 14.5H15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M7 18H12.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M8 3.5C8 2.67157 8.67157 2 9.5 2H14.5C15.3284 2 16 2.67157 16 3.5V4.5C16 5.32843 15.3284 6 14.5 6H9.5C8.67157 6 8 5.32843 8 4.5V3.5Z" stroke="#1C274C" stroke-width="1.5"/>
+</svg>
--- a/src/assets/icons/Compass
+++ b/src/assets/icons/Compass
--- a/src/assets/icons/Compass
+++ b/src/assets/icons/Compass
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7898 18.9746C8.49749 21.4915 5.35132 22.75 3.55428 21.5288C3.1282 21.2393 2.76071 20.8718 2.47117 20.4457C1.25001 18.6487 2.50848 15.5025 5.02542 9.21017C5.56228 7.86802 5.8307 7.19695 6.29238 6.67048C6.41002 6.53633 6.53633 6.41002 6.67048 6.29238C7.19695 5.8307 7.86802 5.56228 9.21017 5.02542C15.5025 2.50848 18.6487 1.25001 20.4457 2.47117C20.8718 2.7607 21.2393 3.1282 21.5288 3.55428C22.75 5.35132 21.4915 8.49749 18.9746 14.7898C18.4377 16.132 18.1693 16.8031 17.7076 17.3295C17.59 17.4637 17.4637 17.59 17.3295 17.7076C16.8031 18.1693 16.132 18.4377 14.7898 18.9746Z" stroke="#1C274C" stroke-width="1.5"/>
+<circle cx="12" cy="12" r="3" stroke="#1C274C" stroke-width="1.5"/>
+</svg>
--- a/src/assets/icons/Compass.svg
+++ b/src/assets/icons/Compass.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M13.024 14.5601C10.7142 15.484 9.5593 15.946 8.89964 15.4977C8.74324 15.3914 8.60834 15.2565 8.50206 15.1001C8.0538 14.4405 8.51575 13.2856 9.43967 10.9758C9.63673 10.4831 9.73527 10.2368 9.90474 10.0435C9.94792 9.99429 9.99429 9.94792 10.0435 9.90474C10.2368 9.73527 10.4831 9.63673 10.9758 9.43966C13.2856 8.51575 14.4405 8.0538 15.1001 8.50206C15.2565 8.60834 15.3914 8.74324 15.4977 8.89964C15.946 9.5593 15.484 10.7142 14.5601 13.024C14.363 13.5166 14.2645 13.763 14.095 13.9562C14.0518 14.0055 14.0055 14.0518 13.9562 14.095C13.763 14.2645 13.5166 14.363 13.024 14.5601Z" stroke="#1C274C" stroke-width="1.5"/>
+</svg>
--- a/src/assets/icons/Hand
+++ b/src/assets/icons/Hand
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.79623 6.64075C7.73459 5.57912 7.73459 3.85786 8.79623 2.79623C9.85786 1.73459 11.5791 1.73459 12.6408 2.79623L15.2038 5.35925C16.2654 6.42088 16.2654 8.14214 15.2038 9.20377C14.1421 10.2654 12.4209 10.2654 11.3592 9.20377L8.79623 6.64075Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M14 4C14 4 13.7749 5.16765 12.4712 6.47139C11.1674 7.77513 10 8 10 8" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M5 20.3884H7.25993C8.27079 20.3884 9.29253 20.4937 10.2763 20.6964C12.0166 21.0549 13.8488 21.0983 15.6069 20.8138C16.4738 20.6734 17.326 20.4589 18.0975 20.0865C18.7939 19.7504 19.6469 19.2766 20.2199 18.7459C20.7921 18.216 21.388 17.3487 21.8109 16.6707C22.1736 16.0894 21.9982 15.3762 21.4245 14.943C20.7873 14.4619 19.8417 14.462 19.2046 14.9433L17.3974 16.3084C16.697 16.8375 15.932 17.3245 15.0206 17.4699C14.911 17.4874 14.7962 17.5033 14.6764 17.5172M14.6764 17.5172C14.6403 17.5214 14.6038 17.5254 14.5668 17.5292M14.6764 17.5172C14.8222 17.486 14.9669 17.396 15.1028 17.2775C15.746 16.7161 15.7866 15.77 15.2285 15.1431C15.0991 14.9977 14.9475 14.8764 14.7791 14.7759C11.9817 13.1074 7.62942 14.3782 5 16.2429M14.6764 17.5172C14.6399 17.525 14.6033 17.5292 14.5668 17.5292M14.5668 17.5292C14.0434 17.5829 13.4312 17.5968 12.7518 17.5326" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<rect x="2" y="14" width="3" height="8" rx="1.5" stroke="#1C274C" stroke-width="1.5"/>
+</svg>
--- a/src/assets/icons/Home
+++ b/src/assets/icons/Home
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 12.2039C2 9.91549 2 8.77128 2.5192 7.82274C3.0384 6.87421 3.98695 6.28551 5.88403 5.10813L7.88403 3.86687C9.88939 2.62229 10.8921 2 12 2C13.1079 2 14.1106 2.62229 16.116 3.86687L18.116 5.10812C20.0131 6.28551 20.9616 6.87421 21.4808 7.82274C22 8.77128 22 9.91549 22 12.2039V13.725C22 17.6258 22 19.5763 20.8284 20.7881C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.7881C2 19.5763 2 17.6258 2 13.725V12.2039Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M9 16C9.85038 16.6303 10.8846 17 12 17C13.1154 17 14.1496 16.6303 15 16" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
--- a/src/assets/icons/Plain.svg
+++ b/src/assets/icons/Plain.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.6357 15.6701L20.3521 10.5208C21.8516 6.02242 22.6013 3.77322 21.414 2.58595C20.2268 1.39869 17.9776 2.14842 13.4792 3.64788L8.32987 5.36432C4.69923 6.57453 2.88392 7.17964 2.36806 8.06698C1.87731 8.91112 1.87731 9.95369 2.36806 10.7978C2.88392 11.6852 4.69923 12.2903 8.32987 13.5005C8.91282 13.6948 9.2043 13.792 9.44793 13.9551C9.68404 14.1131 9.88687 14.316 10.0449 14.5521C10.208 14.7957 10.3052 15.0872 10.4995 15.6701C11.7097 19.3008 12.3148 21.1161 13.2022 21.6319C14.0463 22.1227 15.0889 22.1227 15.933 21.6319C16.8204 21.1161 17.4255 19.3008 18.6357 15.6701Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M16.2116 8.84823C16.5061 8.55696 16.5087 8.0821 16.2175 7.78758C15.9262 7.49307 15.4513 7.49044 15.1568 7.78171L16.2116 8.84823ZM10.6627 14.336L16.2116 8.84823L15.1568 7.78171L9.6079 13.2695L10.6627 14.336Z" fill="#1C274C"/>
+</svg>
--- a/src/assets/icons/Settings.svg
+++ b/src/assets/icons/Settings.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="3" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M13.7654 2.15224C13.3978 2 12.9319 2 12 2C11.0681 2 10.6022 2 10.2346 2.15224C9.74457 2.35523 9.35522 2.74458 9.15223 3.23463C9.05957 3.45834 9.0233 3.7185 9.00911 4.09799C8.98826 4.65568 8.70226 5.17189 8.21894 5.45093C7.73564 5.72996 7.14559 5.71954 6.65219 5.45876C6.31645 5.2813 6.07301 5.18262 5.83294 5.15102C5.30704 5.08178 4.77518 5.22429 4.35436 5.5472C4.03874 5.78938 3.80577 6.1929 3.33983 6.99993C2.87389 7.80697 2.64092 8.21048 2.58899 8.60491C2.51976 9.1308 2.66227 9.66266 2.98518 10.0835C3.13256 10.2756 3.3397 10.437 3.66119 10.639C4.1338 10.936 4.43789 11.4419 4.43786 12C4.43783 12.5581 4.13375 13.0639 3.66118 13.3608C3.33965 13.5629 3.13248 13.7244 2.98508 13.9165C2.66217 14.3373 2.51966 14.8691 2.5889 15.395C2.64082 15.7894 2.87379 16.193 3.33973 17C3.80568 17.807 4.03865 18.2106 4.35426 18.4527C4.77508 18.7756 5.30694 18.9181 5.83284 18.8489C6.07289 18.8173 6.31632 18.7186 6.65204 18.5412C7.14547 18.2804 7.73556 18.27 8.2189 18.549C8.70224 18.8281 8.98826 19.3443 9.00911 19.9021C9.02331 20.2815 9.05957 20.5417 9.15223 20.7654C9.35522 21.2554 9.74457 21.6448 10.2346 21.8478C10.6022 22 11.0681 22 12 22C12.9319 22 13.3978 22 13.7654 21.8478C14.2554 21.6448 14.6448 21.2554 14.8477 20.7654C14.9404 20.5417 14.9767 20.2815 14.9909 19.902C15.0117 19.3443 15.2977 18.8281 15.781 18.549C16.2643 18.2699 16.8544 18.2804 17.3479 18.5412C17.6836 18.7186 17.927 18.8172 18.167 18.8488C18.6929 18.9181 19.2248 18.7756 19.6456 18.4527C19.9612 18.2105 20.1942 17.807 20.6601 16.9999C21.1261 16.1929 21.3591 15.7894 21.411 15.395C21.4802 14.8691 21.3377 14.3372 21.0148 13.9164C20.8674 13.7243 20.6602 13.5628 20.3387 13.3608C19.8662 13.0639 19.5621 12.558 19.5621 11.9999C19.5621 11.4418 19.8662 10.9361 20.3387 10.6392C20.6603 10.4371 20.8675 10.2757 21.0149 10.0835C21.3378 9.66273 21.4803 9.13087 21.4111 8.60497C21.3592 8.21055 21.1262 7.80703 20.6602 7C20.1943 6.19297 19.9613 5.78945 19.6457 5.54727C19.2249 5.22436 18.693 5.08185 18.1671 5.15109C17.9271 5.18269 17.6837 5.28136 17.3479 5.4588C16.8545 5.71959 16.2644 5.73002 15.7811 5.45096C15.2977 5.17191 15.0117 4.65566 14.9909 4.09794C14.9767 3.71848 14.9404 3.45833 14.8477 3.23463C14.6448 2.74458 14.2554 2.35523 13.7654 2.15224Z" stroke="#1C274C" stroke-width="1.5"/>
+</svg>
--- a/src/assets/icons/UFO
+++ b/src/assets/icons/UFO
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9219 12.1491C20.5252 14.7729 20.9934 17.1486 19.9011 18.241C18.2711 19.8709 13.784 18.0264 9.87877 14.1212C5.97353 10.2159 4.12901 5.72878 5.75892 4.09887C6.85128 3.00651 9.22702 3.47475 11.8508 5.07801" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M11.4847 5.4441C13.3314 3.59741 16.3255 3.59741 18.1722 5.4441L18.5558 5.82769C20.4025 7.67439 20.4025 10.6685 18.5558 12.5152C18.4304 12.6405 18.2697 12.7246 18.0952 12.6933C17.5987 12.6042 16.3769 12.1341 14.1213 9.87854C11.8658 7.62298 11.3957 6.40113 11.3066 5.90468C11.2752 5.73021 11.3594 5.56944 11.4847 5.4441Z" stroke="#1C274C" stroke-width="1.5"/>
+<circle cx="12" cy="12.0002" r="1" transform="rotate(45 12 12.0002)" fill="#1C274C"/>
+<circle cx="9.17157" cy="7.75748" r="1" transform="rotate(45 9.17157 7.75748)" fill="#1C274C"/>
+<circle cx="16.2426" cy="14.8283" r="1" transform="rotate(45 16.2426 14.8283)" fill="#1C274C"/>
+<path d="M3.63603 20.364L7.75735 16.2427" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M9.99982 21.9995L12.7071 19.7781" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M2.00015 14L4.22183 11.293" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
--- a/src/assets/icons/User
+++ b/src/assets/icons/User
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="6" r="4" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M18 17.5C18 19.9853 18 22 10 22C2 22 2 19.9853 2 17.5C2 15.0147 5.58172 13 10 13C14.4183 13 18 15.0147 18 17.5Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M18.0885 12.5385L18.5435 11.9423L18.0885 12.5385ZM19 8.64354L18.4681 9.17232C18.6089 9.31392 18.8003 9.39354 19 9.39354C19.1997 9.39354 19.3911 9.31392 19.5319 9.17232L19 8.64354ZM19.9115 12.5385L19.4565 11.9423L19.9115 12.5385ZM18.5435 11.9423C18.0571 11.571 17.619 11.274 17.2659 10.8891C16.9387 10.5324 16.75 10.1638 16.75 9.69973H15.25C15.25 10.6481 15.6642 11.362 16.1606 11.9031C16.6311 12.4161 17.2372 12.8322 17.6335 13.1347L18.5435 11.9423ZM16.75 9.69973C16.75 9.28775 16.9898 8.95469 17.2973 8.81862C17.5635 8.7008 17.9874 8.68874 18.4681 9.17232L19.5319 8.11476C18.6627 7.24047 17.5865 7.0503 16.6903 7.44694C15.8352 7.82533 15.25 8.69929 15.25 9.69973H16.75ZM17.6335 13.1347C17.7825 13.2483 17.9756 13.3959 18.1793 13.5111C18.3832 13.6265 18.6656 13.75 19 13.75V12.25C19.0344 12.25 19.0168 12.2615 18.9179 12.2056C18.8187 12.1495 18.7061 12.0663 18.5435 11.9423L17.6335 13.1347ZM20.3665 13.1347C20.7628 12.8322 21.3689 12.4161 21.8394 11.9031C22.3358 11.362 22.75 10.6481 22.75 9.69973H21.25C21.25 10.1638 21.0613 10.5324 20.7341 10.8891C20.381 11.274 19.9429 11.571 19.4565 11.9423L20.3665 13.1347ZM22.75 9.69973C22.75 8.69929 22.1648 7.82533 21.3097 7.44694C20.4135 7.0503 19.3373 7.24047 18.4681 8.11476L19.5319 9.17232C20.0126 8.68874 20.4365 8.7008 20.7027 8.81862C21.0102 8.95469 21.25 9.28775 21.25 9.69973H22.75ZM19.4565 11.9423C19.2939 12.0663 19.1813 12.1495 19.0821 12.2056C18.9832 12.2615 18.9656 12.25 19 12.25V13.75C19.3344 13.75 19.6168 13.6265 19.8207 13.5111C20.0244 13.3959 20.2175 13.2483 20.3665 13.1347L19.4565 11.9423Z" fill="#1C274C"/>
+</svg>
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import cx from 'classnames'
+  import {switcher} from '@welshman/lib'
+  import AddSquare from 'assets/icons/Add Square.svg?dataurl'
+  import AddCircle from 'assets/icons/Add Circle.svg?dataurl'
+  import AltArrowRight from 'assets/icons/Alt Arrow Right.svg?dataurl'
+  import ClipboardText from 'assets/icons/Clipboard Text.svg?dataurl'
+  import Compass from 'assets/icons/Compass.svg?dataurl'
+  import CompassBig from 'assets/icons/Compass Big.svg?dataurl'
+  import HandPills from 'assets/icons/Hand Pills.svg?dataurl'
+  import HomeSmile from 'assets/icons/Home Smile.svg?dataurl'
+  import Plain from 'assets/icons/Plain.svg?dataurl'
+  import Settings from 'assets/icons/Settings.svg?dataurl'
+  import UFO3 from 'assets/icons/UFO 3.svg?dataurl'
+  import UserHeart from 'assets/icons/User Heart.svg?dataurl'
+
+  export let icon
+  export let size = 5
+
+  const px = size * 4
+
+  const data = switcher(icon, {
+    'add-square': AddSquare,
+    'add-circle': AddCircle,
+    'alt-arrow-right': AltArrowRight,
+    'clipboard-text': ClipboardText,
+    'compass': Compass,
+    'compass-big': CompassBig,
+    'hand-pills': HandPills,
+    'home-smile': HomeSmile,
+    'plain': Plain,
+    'settings': Settings,
+    'ufo-3': UFO3,
+    'user-heart': UserHeart,
+  })
+
+  if (!data) {
+    throw new Error(`Invalid icon: ${icon}`)
+  }
+</script>
+
+<div
+  class={cx($$props.class, "bg-base-content")}
+  style="mask-image: url({data}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px;" />
+
+<style>
+  div {
+    mask-repeat: none;
+    mask-size: 100% 100%;
+  }
+</style>
--- a/src/lib/components/PrimaryNavItem.svelte
+++ b/src/lib/components/PrimaryNavItem.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let title
+</script>
+
+<div class="relative z-nav-item flex justify-center items-center w-14 h-14">
+  <div class="avatar rounded-full p-1 bg-base-300 cursor-pointer tooltip tooltip-right" data-tip={title}>
+    <slot />
+  </div>
+</div>
--- a/src/lib/components/SecondaryNavItem.svelte
+++ b/src/lib/components/SecondaryNavItem.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let href
+  export let active
+</script>
+
+<a {href} class="button group hover:bg-base-100 transition-all justify-start border-none">
+  <div class="flex items-center gap-3 group-hover:brightness=[1.5]" class:group-hover:brightness-[1.4]={active}>
+    <slot />
+  </div>
+</a>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import "src/app.css"
+  import {onMount} from 'svelte'
+  import {page} from '$app/stores'
+  import {onNavigate} from '$app/navigation'
+  import Icon from 'lib/components/Icon.svelte'
+  import PrimaryNav from 'app/components/PrimaryNav.svelte'
+  import SecondaryNav from 'app/components/SecondaryNav.svelte'
+  import {fly, toast, modals, pushModal} from 'app/state'
+
+  const login = async () => {
+    const nl = await import('nostr-login')
+
+    nl.init({
+      noBanner: true,
+      title: 'Welcome to Flotilla!',
+      description: 'Log in with your Nostr account or sign up to join.',
+      methods: "connect,extension,local",
+      onAuth(npub: string) {
+        console.log(npub)
+      }
+    })
+
+    nl.launch()
+  }
+
+  let modal
+
+  $: {
+    if ($page.state.modal) {
+      modal?.showModal()
+    } else {
+      modal?.close()
+    }
+  }
+</script>
+
+<div class="flex h-screen" data-theme="dark">
+  <PrimaryNav />
+  <SecondaryNav />
+  <div class="bg-base-200 flex-grow">
+    <slot />
+  </div>
+</div>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle">
+  <div class="modal-box">
+    {#if $page.state.modal}
+      {@const {component, props} = modals.get($page.state.modal)}
+      <svelte:component this={component} {...props} />
+    {/if}
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button />
+  </form>
+</dialog>
+
+{#if $toast}
+  <div transition:fly class="toast">
+    <div class="alert">
+      <span>{$toast.message}</span>
+    </div>
+  </div>
+{/if}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,46 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+  import Icon from 'lib/components/Icon.svelte'
+</script>
+
+<div class="hero bg-base-200 min-h-screen">
+  <div class="hero-content">
+    <div class="max-w-xl flex flex-col gap-4">
+      <h1 class="text-5xl text-center text-stark-content">Welcome to</h1>
+      <h1 class="text-5xl font-bold uppercase text-center mb-4 text-stark-content">Flotilla</h1>
+      <div class="grid gap-3 grid-cols-2">
+        <div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
+          <Icon class="bg-accent" size={7} icon="add-circle" />
+          <div class="flex flex-col gap-1">
+            <p class="text-stark-content">Create a group</p>
+            <p class="text-xs">Invite all your friends, do life together.<p>
+          </div>
+          <Icon size={7} icon="alt-arrow-right" />
+        </div>
+        <div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
+          <Icon class="bg-accent" size={7} icon="compass" />
+          <div class="flex flex-col gap-1">
+            <p class="text-stark-content">Discover groups</p>
+            <p class="text-xs">Find a community based on your hobbies or interests.<p>
+          </div>
+          <Icon size={7} icon="alt-arrow-right" />
+        </div>
+        <div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
+          <Icon class="bg-accent" size={7} icon="plain" />
+          <div class="flex flex-col gap-1">
+            <p class="text-stark-content">Leave feedback</p>
+            <p class="text-xs">Let us know how we can improve by giving us feedback.<p>
+          </div>
+          <Icon size={7} icon="alt-arrow-right" />
+        </div>
+        <div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
+          <Icon class="bg-accent" size={7} icon="hand-pills" />
+          <div class="flex flex-col gap-1">
+            <p class="text-stark-content">Donate to Flotilla</p>
+            <p class="text-xs">Support the project by donating to the developer.<p>
+          </div>
+          <Icon size={7} icon="alt-arrow-right" />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
--- a/src/routes/friends/+page.svelte
+++ b/src/routes/friends/+page.svelte
@@ -0,0 +1 @@
+
--- a/src/routes/notes/+page.svelte
+++ b/src/routes/notes/+page.svelte
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
--- a/static/nav-active.svg
+++ b/static/nav-active.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 81 243" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M81 121V122V242.5C81 204 71 173 42.5 167C30.3292 164.438 0.796806 154.599 0.50222 121.5C0.796806 88.4011 30.3292 78.5623 42.5 76C71 70 81 39 81 0.5V121Z" fill="black"/>
+</svg>
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -16,3 +16,4 @@ const config = {
 };

 export default config;
+
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,49 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+    zIndex: {
+      none: 0,
+      'nav-active': 1,
+      'nav-item': 2,
+    },
+  },
+  plugins: [require('daisyui')],
+  daisyui: {
+    themes: [
+      "light",
+      "dark",
+      "cupcake",
+      "bumblebee",
+      "emerald",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+      "valentine",
+      "halloween",
+      "garden",
+      "forest",
+      "aqua",
+      "lofi",
+      "pastel",
+      "fantasy",
+      "wireframe",
+      "black",
+      "luxury",
+      "dracula",
+      "cmyk",
+      "autumn",
+      "business",
+      "acid",
+      "lemonade",
+      "night",
+      "coffee",
+      "winter",
+      "dim",
+      "nord",
+      "sunset",
+    ],
+  },
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,34 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import * as path from "path"
+import {sveltekit} from '@sveltejs/kit/vite'
+import svg from '@poppanator/sveltekit-svg'
+import {defineConfig} from 'vite'

 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [
+  	sveltekit(),
+  	svg({
+      svgoOptions: {
+        multipass: true,
+        plugins: [
+          {
+            name: 'preset-default',
+            params: {
+              overrides: {
+                removeViewBox: false,
+              },
+            },
+          },
+          "removeDimensions",
+        ],
+      },
+    })
+	],
+  resolve: {
+    alias: {
+      'src': path.resolve(__dirname, "src"),
+      'app': path.resolve(__dirname, "src/app"),
+      'lib': path.resolve(__dirname, "src/lib"),
+      'assets': path.resolve(__dirname, "src/assets"),
+    },
+  },
 });