Add icon picker to room create component

src/lib/components/EmojiButton.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {onDestroy} from "svelte"
   import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {between, throttle} from "@welshman/lib"
@@ -27,10 +26,6 @@
   })
 
   let popover: Instance | undefined = $state()
-
-  onDestroy(() => {
-    popover = undefined
-  })
 </script>
 
 <svelte:document onmousemove={onMouseMove} />

src/lib/components/IconPickerButton.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import {type Instance} from "tippy.js"
+  import {between, throttle} from "@welshman/lib"
+  import Button from "@lib/components/Button.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
+  import IconPicker from "@app/components/IconPicker.svelte"
+
+  const {...props} = $props()
+
+  const open = () => popover?.show()
+
+  const onClick = (iconUrl: string) => {
+    props.onSelect(iconUrl)
+    popover?.hide()
+  }
+
+  const onMouseMove = throttle(300, ({clientX, clientY}: any) => {
+    if (popover) {
+      const {x, width} = popover.popper.getBoundingClientRect()
+
+      if (!between([x - 50, x + width + 50], clientX)) {
+        popover.hide()
+      }
+    }
+  })
+
+  let popover: Instance | undefined = $state()
+</script>
+
+<svelte:document onmousemove={onMouseMove} />
+
+<Tippy
+  bind:popover
+  component={IconPicker}
+  props={{onSelect: onClick}}
+  params={{trigger: "manual", interactive: true}}>
+  <Button onclick={open} class={props.class}>
+    {@render props.children?.()}
+  </Button>
+</Tippy>

src/lib/html.ts

@@ -136,7 +136,10 @@ export const scrollToEvent = async (id: string, attempts = 3): Promise<boolean>
   return false
 }
 
-export const compressFile = async (file: File | Blob): Promise<File> => {
+export const compressFile = async (
+  file: File | Blob,
+  options: Record<string, any> = {},
+): Promise<File> => {
   const {default: Compressor} = await import("compressorjs")
 
   return new Promise<File>((resolve, _reject) => {
@@ -144,6 +147,7 @@ export const compressFile = async (file: File | Blob): Promise<File> => {
       maxWidth: 2048,
       maxHeight: 2048,
       convertSize: 10 * 1024 * 1024,
+      ...options,
       success: result => resolve(result as File),
       error: e => {
         // Non-images break compressor, return the original file