Add remove group, format

src/lib/components/Avatar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import cx from 'classnames'
+  import cx from "classnames"
   import Icon from "@lib/components/Icon.svelte"
 
   export let src
@@ -7,11 +7,11 @@
 </script>
 
 <div
-  class={cx($$props.class, "!flex items-center justify-center rounded-full overflow-hidden")}
+  class={cx($$props.class, "!flex items-center justify-center overflow-hidden rounded-full")}
   style={`width: ${size * 4}px; height: ${size * 4}px;`}>
   {#if src}
     <img alt="" {src} />
   {:else}
-    <Icon icon="user-rounded" size={Math.round(size * .7)} />
+    <Icon icon="user-rounded" size={Math.round(size * 0.7)} />
   {/if}
 </div>

src/lib/components/Button.svelte

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

src/lib/components/CardButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import cx from 'classnames'
+  import cx from "classnames"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
 
@@ -7,10 +7,10 @@
   export let title
 </script>
 
-<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">
+<Button on:click class={cx($$props.class, "btn btn-neutral btn-lg h-24 text-left")}>
+  <div class="flex flex-grow items-center gap-6 py-4">
     <Icon class="bg-accent" size={7} {icon} />
-    <div class="flex flex-col gap-1 flex-grow">
+    <div class="flex flex-grow flex-col gap-1">
       <p class="text-bold">{title}</p>
       <p class="text-xs"><slot /></p>
     </div>

src/lib/components/Icon.svelte

@@ -10,6 +10,7 @@
   import {switcher} from "@welshman/lib"
   import AddSquare from "@assets/icons/Add Square.svg?dataurl"
   import AddCircle from "@assets/icons/Add Circle.svg?dataurl"
+  import AltArrowDown from "@assets/icons/Alt Arrow Down.svg?dataurl"
   import AltArrowRight from "@assets/icons/Alt Arrow Right.svg?dataurl"
   import AltArrowLeft from "@assets/icons/Alt Arrow Left.svg?dataurl"
   import ArrowRight from "@assets/icons/Arrow Right.svg?dataurl"
@@ -19,9 +20,11 @@
   import Copy from "@assets/icons/Copy.svg?dataurl"
   import Compass from "@assets/icons/Compass.svg?dataurl"
   import CompassBig from "@assets/icons/Compass Big.svg?dataurl"
+  import Exit from "@assets/icons/Exit.svg?dataurl"
   import FireMinimalistic from "@assets/icons/Fire Minimalistic.svg?dataurl"
   import GallerySend from "@assets/icons/Gallery Send.svg?dataurl"
   import Ghost from "@assets/icons/Ghost.svg?dataurl"
+  import Hashtag from "@assets/icons/Hashtag.svg?dataurl"
   import HandPills from "@assets/icons/Hand Pills.svg?dataurl"
   import HomeSmile from "@assets/icons/Home Smile.svg?dataurl"
   import InfoCircle from "@assets/icons/Info Circle.svg?dataurl"
@@ -29,10 +32,14 @@
   import Login from "@assets/icons/Login.svg?dataurl"
   import Login2 from "@assets/icons/Login 2.svg?dataurl"
   import Magnifer from "@assets/icons/Magnifer.svg?dataurl"
+  import MenuDots from "@assets/icons/Menu Dots.svg?dataurl"
   import Pallete2 from "@assets/icons/Pallete 2.svg?dataurl"
   import Plain from "@assets/icons/Plain.svg?dataurl"
   import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.svg?dataurl"
+  import Reply from "@assets/icons/Reply.svg?dataurl"
   import Settings from "@assets/icons/Settings.svg?dataurl"
+  import SmileCircle from "@assets/icons/Smile Circle.svg?dataurl"
+  import SquareShareLine from "@assets/icons/Square Share Line.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"
@@ -47,6 +54,7 @@
   const data = switcher(icon, {
     "add-square": AddSquare,
     "add-circle": AddCircle,
+    "alt-arrow-down": AltArrowDown,
     "alt-arrow-right": AltArrowRight,
     "alt-arrow-left": AltArrowLeft,
     "arrow-right": ArrowRight,
@@ -56,24 +64,30 @@
     copy: Copy,
     compass: Compass,
     "compass-big": CompassBig,
+    exit: Exit,
     "fire-minimalistic": FireMinimalistic,
     "gallery-send": GallerySend,
-    "ghost": Ghost,
+    ghost: Ghost,
+    hashtag: Hashtag,
     "hand-pills": HandPills,
     "home-smile": HomeSmile,
     "info-circle": InfoCircle,
     "link-round": LinkRound,
-    "login": Login,
+    login: Login,
     "login-2": Login2,
-    'magnifer': Magnifer,
-    'pallete-2': Pallete2,
+    magnifer: Magnifer,
+    "menu-dots": MenuDots,
+    "pallete-2": Pallete2,
     plain: Plain,
-    'remote-controller-minimalistic': RemoteControllerMinimalistic,
+    reply: Reply,
+    "remote-controller-minimalistic": RemoteControllerMinimalistic,
+    "smile-circle": SmileCircle,
     settings: Settings,
     "ufo-3": UFO3,
+    "square-share-line": SquareShareLine,
     "user-heart": UserHeart,
     "user-rounded": UserRounded,
-    "widget": Widget,
+    widget: Widget,
     "wifi-router-round": WiFiRouterRound,
   })
 

src/lib/components/InputProfilePicture.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import {randomId} from '@welshman/lib'
-  import Icon from '@lib/components/Icon.svelte'
+  import {randomId} from "@welshman/lib"
+  import Icon from "@lib/components/Icon.svelte"
 
   export let file: File | null = null
   export let url: string | null = null
@@ -42,13 +42,18 @@
     if (file) {
       const reader = new FileReader()
 
-      reader.addEventListener("load", () => { url = reader.result as string }, false)
+      reader.addEventListener(
+        "load",
+        () => {
+          url = reader.result as string
+        },
+        false,
+      )
       reader.readAsDataURL(file)
     } else {
       url = initialUrl
     }
   }
-
 </script>
 
 <form>
@@ -57,14 +62,14 @@
     for={id}
     aria-label="Drag and drop files here."
     style="background-image: url({url});"
-    class="relative flex justify-center items-center w-24 h-24 rounded-full border-2 border-dashed border-base-content transition-all bg-base-300 cursor-pointer bg-cover bg-center shrink-0"
+    class="relative flex h-24 w-24 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 border-dashed border-base-content bg-base-300 bg-cover bg-center transition-all"
     class:border-primary={active}
     on:dragenter|preventDefault|stopPropagation={onDragEnter}
     on:dragover|preventDefault|stopPropagation={onDragOver}
     on:dragleave|preventDefault|stopPropagation={onDragLeave}
     on:drop|preventDefault|stopPropagation={onDrop}>
     <div
-      class="bg-primary right-0 top-0 absolute rounded-full overflow-hidden"
+      class="absolute right-0 top-0 overflow-hidden rounded-full bg-primary"
       class:bg-error={file}
       class:bg-primary={!file}>
       {#if file}
@@ -73,10 +78,10 @@
           tabindex="-1"
           on:mousedown|stopPropagation={onClear}
           on:touchstart|stopPropagation={onClear}>
-          <Icon icon="close-circle" class="!bg-base-300 scale-150" />
+          <Icon icon="close-circle" class="scale-150 !bg-base-300" />
         </span>
       {:else}
-        <Icon icon="add-circle" class="!bg-base-300 scale-150" />
+        <Icon icon="add-circle" class="scale-150 !bg-base-300" />
       {/if}
     </div>
     {#if !file}

src/lib/components/Link.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import cx from 'classnames'
+  import cx from "classnames"
 
   export let href
   export let external = false
@@ -8,7 +8,7 @@
 <a
   {href}
   {...$$props}
-  class={cx($$props.class, "cursor-pointer underline text-primary")}
+  class={cx($$props.class, "cursor-pointer text-primary underline")}
   rel={external ? "noopener noreferer" : ""}
   target={external ? "_blank" : ""}>
   <slot />

src/lib/components/ModalBox.svelte

@@ -2,22 +2,22 @@
   import {emitter} from "@app/modal"
 
   const modalHeight = tweened(0, {
-		duration: 700,
-		easing: quintOut
-	})
+    duration: 700,
+    easing: quintOut,
+  })
 
-  emitter.on('close', () => modalHeight.set(0))
+  emitter.on("close", () => modalHeight.set(0))
 </script>
 
 <script lang="ts">
-  import {onMount} from 'svelte'
-  import {slide} from 'svelte/transition'
-	import {quintOut} from 'svelte/easing'
-	import {tweened} from 'svelte/motion'
-  import {last} from '@welshman/lib'
+  import {onMount} from "svelte"
+  import {slide} from "svelte/transition"
+  import {quintOut} from "svelte/easing"
+  import {tweened} from "svelte/motion"
+  import {last} from "@welshman/lib"
 
-	export let component
-	export let props = {}
+  export let component
+  export let props = {}
 
   let box: HTMLElement
   let content: HTMLElement
@@ -29,7 +29,11 @@
   })
 </script>
 
-<div class="modal-box" bind:this={box} style={`height: ${$modalHeight}px`} class:overflow-hidden={$modalHeight !== naturalHeight}>
+<div
+  class="modal-box"
+  bind:this={box}
+  style={`height: ${$modalHeight}px`}
+  class:overflow-hidden={$modalHeight !== naturalHeight}>
   <div bind:this={content}>
     <svelte:component this={component} {...props} />
   </div>

src/lib/components/Popover.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import {fly} from "@lib/transition"
+
+  export let onClose
+  export let hideOnClick = false
+
+  const onMouseUp = (e: any) => {
+    if (hideOnClick || !element.contains(e.target)) {
+      setTimeout(onClose)
+    }
+  }
+
+  const onKeyDown = (e: any) => {
+    if (e.key === "Escape") {
+      setTimeout(onClose)
+    }
+  }
+
+  let element: HTMLElement
+</script>
+
+<svelte:window on:mouseup={onMouseUp} on:keydown={onKeyDown} />
+
+<div class="relative w-full" bind:this={element}>
+  <div transition:fly|local class="absolute z-popover w-full">
+    <slot />
+  </div>
+</div>

src/lib/components/SecondaryNavHeader.svelte

@@ -0,0 +1,3 @@
+<div class="flex items-center justify-between px-4 py-2 text-sm font-bold uppercase">
+  <slot />
+</div>

src/lib/components/SecondaryNavItem.svelte

@@ -1,36 +1,57 @@
+<style>
+  a,
+  button {
+    padding: 12px 16px;
+    display: flex;
+    border-radius: var(--rounded-btn, 0.5rem);
+    cursor: pointer;
+    animation: nav-button-pop 200ms ease-out;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  a:active:hover,
+  a:active:focus,
+  button:active:hover,
+  button:active:focus {
+    animation: button-pop 0s ease-out;
+    transform: scale(var(--btn-focus-scale, 0.97));
+  }
+</style>
+
 <script lang="ts">
+  import cx from "classnames"
   import {page} from "$app/stores"
 
-  export let href
+  export let href: string = ""
 
   $: active = $page.route.id?.startsWith(href)
 </script>
 
-<a
-  {href}
-  class="group justify-start border-none transition-all hover:bg-base-100 hover:text-base-content"
-  class:text-base-content={active}
-  class:bg-base-100={active}>
-  <div class="flex items-center gap-3">
+{#if href}
+  <a
+    {...$$props}
+    {href}
+    on:click
+    class={cx(
+      $$props.class,
+      "flex items-center gap-3 transition-all hover:bg-base-100 hover:text-base-content",
+    )}
+    class:text-base-content={active}
+    class:bg-base-100={active}>
     <slot />
-  </div>
-</a>
-
-<style>
-a {
-  padding: 12px 16px;
-  display: flex;
-  border-radius: var(--rounded-btn, 0.5rem);
-  cursor: pointer;
-  animation: nav-button-pop 200ms ease-out;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-a:active:hover,
-a:active:focus {
-  animation: button-pop 0s ease-out;
-  transform: scale(var(--btn-focus-scale, 0.97));
-}
-</style>
+  </a>
+{:else}
+  <button
+    {...$$props}
+    on:click
+    class={cx(
+      $$props.class,
+      "flex items-center gap-3 transition-all hover:bg-base-100 hover:text-base-content",
+    )}
+    class:text-base-content={active}
+    class:bg-base-100={active}>
+    <slot />
+  </button>
+{/if}

src/lib/components/SecondaryNavSection.svelte

@@ -0,0 +1,3 @@
+<div class="flex flex-col gap-1 px-2 py-4">
+  <slot />
+</div>

src/lib/components/Spinner.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import {slide, fade} from 'svelte/transition'
+  import {slide, fade} from "svelte/transition"
 
   export let loading
 </script>
 
 <span class="flex items-center">
   {#if loading}
-    <span class="pr-3" transition:slide|local={{axis: 'x'}}>
+    <span class="pr-3" transition:slide|local={{axis: "x"}}>
       <span class="loading loading-spinner" transition:fade|local={{duration: 100}} />
     </span>
   {/if}