Work on login screen

src/lib/components/Button.svelte

@@ -0,0 +1,3 @@
+<button on:click type="button" {...$$props}>
+  <slot />
+</button>

src/lib/components/CardButton.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import cx from 'classnames'
   import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
 
   export let icon
   export let title
 </script>
 
-<button on:click class={cx($$props.class, "btn btn-neutral btn-lg text-left h-24")}>
+<Button on:click class={cx($$props.class, "btn btn-neutral btn-lg text-left h-24")}>
   <div class="flex gap-6 py-4 flex-grow items-center">
     <Icon class="bg-accent" size={7} {icon} />
     <div class="flex flex-col gap-1 flex-grow">
@@ -15,4 +16,4 @@
     </div>
     <Icon size={7} icon="alt-arrow-right" />
   </div>
-</button>
+</Button>

src/lib/components/Icon.svelte

@@ -23,11 +23,14 @@
   import HomeSmile from "@assets/icons/Home Smile.svg?dataurl"
   import InfoCircle from "@assets/icons/Info Circle.svg?dataurl"
   import LinkRound from "@assets/icons/Link Round.svg?dataurl"
+  import Login from "@assets/icons/Login.svg?dataurl"
+  import Login2 from "@assets/icons/Login 2.svg?dataurl"
   import Plain from "@assets/icons/Plain.svg?dataurl"
   import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.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"
+  import UserRounded from "@assets/icons/User Rounded.svg?dataurl"
   import WiFiRouterRound from "@assets/icons/Wi-Fi Router Round.svg?dataurl"
 
   export let icon
@@ -51,11 +54,14 @@
     "home-smile": HomeSmile,
     "info-circle": InfoCircle,
     "link-round": LinkRound,
+    "login": Login,
+    "login-2": Login2,
     plain: Plain,
     'remote-controller-minimalistic': RemoteControllerMinimalistic,
     settings: Settings,
     "ufo-3": UFO3,
     "user-heart": UserHeart,
+    "user-rounded": UserRounded,
     "wifi-router-round": WiFiRouterRound,
   })
 
@@ -65,5 +71,5 @@
 </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;" />
+  class={$$props.class}
+  style="mask-image: url({data}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px; background-color: currentcolor;" />

src/lib/components/ModalBox.svelte

@@ -1,8 +1,12 @@
 <script context="module" lang="ts">
+  import {emitter} from "@app/modal"
+
   const modalHeight = tweened(0, {
 		duration: 700,
 		easing: quintOut
 	})
+
+  emitter.on('close', () => modalHeight.set(0))
 </script>
 
 <script lang="ts">
@@ -13,7 +17,7 @@
   import {last} from '@welshman/lib'
 
 	export let component
-	export let props
+	export let props = {}
 
   let box: HTMLElement
   let content: HTMLElement
@@ -21,7 +25,7 @@
 
   onMount(() => {
     naturalHeight = content.clientHeight + 48
-    $modalHeight = naturalHeight
+    modalHeight.set(naturalHeight)
   })
 </script>
 

src/lib/components/PrimaryNavItem.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+
   export let title
 </script>
 
-<button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
+<Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
   <div
     class="avatar tooltip tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
     data-tip={title}>
     <slot />
   </div>
-</button>
+</Button>

src/lib/util.ts

@@ -0,0 +1,31 @@
+import {throttle} from 'throttle-debounce'
+import {browser} from '$app/environment'
+import {writable} from 'svelte/store'
+
+export const parseJson = (json: string) => {
+  if (!json) return null
+
+  try {
+    return JSON.parse(json)
+  } catch (e) {
+    return null
+  }
+}
+
+export const getJson = (k: string) =>
+  browser ? parseJson(localStorage.getItem(k) || "") : null
+
+export const setJson = (k: string, v: any) => {
+  if (browser) {
+    localStorage.setItem(k, JSON.stringify(v))
+  }
+}
+
+export const synced = <T>(key: string, defaultValue: T, delay = 300) => {
+  const init = getJson(key)
+  const store = writable<T>(init === null ? defaultValue : init)
+
+  store.subscribe(throttle(delay, (value: T) => setJson(key, value)))
+
+  return store
+}