Rough out chat

src/lib/components/Avatar.svelte

@@ -13,7 +13,7 @@
     style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px; background-image: url(${src}); ${$$props.style || ""}`} />
 {:else}
   <div
-    class={cx($$props.class, "rounded-full !flex center")}
+    class={cx($$props.class, "center !flex rounded-full")}
     style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px; ${$$props.style || ""}`}>
     <Icon {icon} size={Math.round(size * 0.8)} />
   </div>

src/lib/components/Collapse.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import {slide} from '@lib/transition'
-  import Icon from '@lib/components/Icon.svelte'
+  import {slide} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
 
   const toggle = () => {
     isOpen = !isOpen
@@ -9,10 +9,10 @@
   let isOpen = false
 </script>
 
-<div class="flex flex-col gap-4 relative {$$props.class}">
+<div class="relative flex flex-col gap-4 {$$props.class}">
   <button
     type="button"
-    class="absolute top-8 right-8 cursor-pointer w-4 h-4 transition-all"
+    class="absolute right-8 top-8 h-4 w-4 cursor-pointer transition-all"
     class:rotate-90={!isOpen}
     on:click={toggle}>
     <Icon icon="alt-arrow-down" />

src/lib/components/Drawer.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {randomId} from '@welshman/lib'
-  import Icon from '@lib/components/Icon.svelte'
+  import {randomId} from "@welshman/lib"
 
   const id = randomId()
 
@@ -31,8 +30,8 @@
   </div>
   <div class="drawer-side z-modal">
     <label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="menu bg-base-200 text-base-content min-h-full w-80 p-0">
+    <div class="menu min-h-full w-80 bg-base-200 p-0 text-base-content">
       <slot />
-  </div>
+    </div>
   </div>
 </div>

src/lib/components/EmojiPicker.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-  import 'emoji-picker-element'
-  import type {Emoji} from 'emoji-picker-element/shared'
-  import {onMount} from 'svelte'
+  import "emoji-picker-element"
+  import type {Emoji} from "emoji-picker-element/shared"
+  import {onMount} from "svelte"
 
   export let onClick: (emoji: Emoji) => void
 
   let element: Element
 
   onMount(() => {
-    element.addEventListener('emoji-click', (event: any) => onClick(event.detail as Emoji))
+    element.addEventListener("emoji-click", (event: any) => onClick(event.detail as Emoji))
   })
 </script>
 

src/lib/components/Icon.svelte

@@ -84,7 +84,7 @@
     document: Document,
     earth: Earth,
     pen: Pen,
-    'pen-new-square': PenNewSquare,
+    "pen-new-square": PenNewSquare,
     "headphones-round": HeadphonesRound,
     "add-circle": AddCircle,
     "alt-arrow-down": AltArrowDown,
@@ -112,7 +112,7 @@
     hashtag: Hashtag,
     "hand-pills": HandPills,
     "home-smile": HomeSmile,
-    "inbox": Inbox,
+    inbox: Inbox,
     "info-circle": InfoCircle,
     "info-square": InfoSquare,
     key: Key,

src/lib/components/ModalBox.svelte

@@ -5,6 +5,6 @@
   export let props = {}
 </script>
 
-<div class="modal-box bg-alt overflow-visible" transition:fly={{duration: 100}}>
+<div class="bg-alt modal-box overflow-visible" transition:fly={{duration: 100}}>
   <svelte:component this={component} {...props} />
 </div>

src/lib/components/SecondaryNav.svelte

@@ -1,3 +1,3 @@
-<div class="flex w-60 flex-shrink-0 flex-col gap-1 bg-base-300 max-h-screen">
+<div class="flex max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300">
   <slot />
 </div>

src/lib/components/Tippy.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import {onMount} from 'svelte'
-  import type {SvelteComponent, ComponentType, ComponentProps} from 'svelte'
+  import {onMount} from "svelte"
+  import type {SvelteComponent, ComponentType, ComponentProps} from "svelte"
   import tippy, {type Instance, type Props} from "tippy.js"
 
   export let component: ComponentType
@@ -14,15 +14,17 @@
   $: instance?.$set(props)
 
   onMount(() => {
-    const target = document.createElement("div")
+    if (element) {
+      const target = document.createElement("div")
 
-    popover = tippy(element, {content: target, ...params})
+      popover = tippy(element, {content: target, ...params})
 
-    instance = new component({target, props})
+      instance = new component({target, props})
 
-    return () => {
-      popover?.destroy()
-      instance?.$destroy()
+      return () => {
+        popover?.destroy()
+        instance?.$destroy()
+      }
     }
   })
 </script>

src/lib/components/WotScore.svelte

@@ -14,7 +14,7 @@
 </style>
 
 <script lang="ts">
-  import {clamp} from '@welshman/lib'
+  import {clamp} from "@welshman/lib"
 
   export let score
   export let max = 100
@@ -26,7 +26,7 @@
   $: normalizedScore = clamp([0, max], score) / max
   $: dashOffset = 100 - 44 * normalizedScore
   $: style = `transform: rotate(${135 - normalizedScore * 180}deg)`
-  $: stroke = active ? 'var(--primary)' : 'var(--base-content)'
+  $: stroke = active ? "var(--primary)" : "var(--base-content)"
 </script>
 
 <div class="relative h-[14px] w-[14px]">