Add icon picker to room create component

src/app/components/IconPicker.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import {createSearch} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+
+  const iconModules = import.meta.glob("@assets/icons/*.svg", {
+    query: "?dataurl",
+    eager: true,
+  })
+
+  const icons = Object.entries(iconModules)
+    .map(([path, module]) => {
+      const name = path.split("/").pop()?.replace(".svg", "") || ""
+      return {
+        name,
+        url: (module as any).default,
+        searchText: name.replace(/[-_]/g, " ").toLowerCase(),
+      }
+    })
+    .filter(icon => icon.name && !icon.name.startsWith("icon-") && icon.name !== "index")
+    .sort((a, b) => a.name.localeCompare(b.name))
+
+  const iconSearch = createSearch(icons, {
+    getValue: icon => icon.name,
+    fuseOptions: {
+      keys: ["name", "searchText"],
+      threshold: 0.4,
+    },
+  })
+
+  type Props = {
+    onSelect: (iconUrl: string) => void
+  }
+
+  const {onSelect}: Props = $props()
+
+  let searchTerm = $state("")
+
+  const filteredIcons = $derived(searchTerm ? iconSearch.searchOptions(searchTerm) : icons)
+
+  const handleSelect = (iconUrl: string) => {
+    onSelect(iconUrl)
+  }
+</script>
+
+<div class="w-96 rounded-box bg-base-100 p-4 shadow-lg">
+  <label class="input input-bordered flex w-full items-center gap-2">
+    <Icon icon={Magnifier} />
+    <input bind:value={searchTerm} class="grow" type="text" placeholder="Search icons..." />
+  </label>
+  <div class="mt-2 max-h-80 overflow-y-auto">
+    <div class="grid grid-cols-8 gap-2 p-2">
+      {#each filteredIcons as icon}
+        <button
+          class="flex aspect-square items-center justify-center rounded-box transition-colors hover:bg-primary hover:text-primary-content"
+          onclick={() => handleSelect(icon.url)}
+          title={icon.name}>
+          <Icon icon={icon.url} class="h-6 w-6" />
+        </button>
+      {/each}
+    </div>
+  </div>
+</div>

src/app/components/MenuSpaceRoomItem.svelte

@@ -25,8 +25,10 @@
   href={path}
   {replaceState}
   notification={notify ? $notifications.has(path) : false}>
-  {#if $channel?.closed || $channel?.private}
-    <Icon icon={Lock} size={4} />
+  {#if $channel?.picture}
+    <Icon icon={$channel.picture} />
+  {:else if $channel?.closed || $channel?.private}
+    <Icon icon={Lock} />
   {:else}
     <Icon icon={Hashtag} />
   {/if}

src/app/components/RoomCreate.svelte

@@ -3,20 +3,24 @@
   import {uniqBy, nth} from "@welshman/lib"
   import {displayRelayUrl, makeRoomMeta} from "@welshman/util"
   import {deriveRelay, waitForThunkError, createRoom, editRoom, joinRoom} from "@welshman/app"
-  import {preventDefault} from "@lib/html"
-  import Field from "@lib/components/Field.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import Button from "@lib/components/Button.svelte"
+  import StickerSmileSquare from "@assets/icons/sticker-smile-square.svg?dataurl"
   import Hashtag from "@assets/icons/hashtag.svg?dataurl"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import UploadMinimalistic from "@assets/icons/upload-minimalistic.svg?dataurl"
+  import {preventDefault, compressFile} from "@lib/html"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import IconPickerButton from "@lib/components/IconPickerButton.svelte"
   import {hasNip29, loadChannel} from "@app/core/state"
   import {makeSpacePath} from "@app/util/routes"
   import {pushToast} from "@app/util/toast"
+  import {uploadFile} from "@app/core/commands"
 
   const {url} = $props()
 
@@ -28,6 +32,18 @@
   const tryCreate = async () => {
     room.tags = uniqBy(nth(0), [...room.tags, ["name", name]])
 
+    if (imageFile) {
+      const {error, result} = await uploadFile(imageFile)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
+      room.tags.push(["picture", result.url, ...result.tags])
+    } else if (selectedIcon) {
+      room.tags.push(["picture", selectedIcon])
+    }
+
     const createMessage = await waitForThunkError(createRoom(url, room))
 
     if (createMessage && !createMessage.match(/^duplicate:|already a member/)) {
@@ -63,6 +79,32 @@
 
   let name = $state("")
   let loading = $state(false)
+  let imageFile = $state<File | undefined>()
+  let imagePreview = $state<string | undefined>()
+  let selectedIcon = $state<string | undefined>()
+
+  const handleImageUpload = async (event: Event) => {
+    const file = (event.target as HTMLInputElement).files?.[0]
+
+    if (file && file.type.startsWith("image/")) {
+      selectedIcon = undefined
+      imageFile = await compressFile(file, {maxWidth: 64, maxHeight: 64})
+
+      const reader = new FileReader()
+
+      reader.onload = e => {
+        imagePreview = e.target?.result as string
+      }
+
+      reader.readAsDataURL(imageFile)
+    }
+  }
+
+  const handleIconSelect = (iconUrl: string) => {
+    imageFile = undefined
+    imagePreview = undefined
+    selectedIcon = iconUrl
+  }
 </script>
 
 <form class="column gap-4" onsubmit={preventDefault(create)}>
@@ -77,7 +119,7 @@
     {/snippet}
   </ModalHeader>
   {#if hasNip29($relay)}
-    <Field>
+    <FieldInline>
       {#snippet label()}
         <p>Room Name</p>
       {/snippet}
@@ -87,7 +129,39 @@
           <input bind:value={name} class="grow" type="text" />
         </label>
       {/snippet}
-    </Field>
+    </FieldInline>
+    <div class="flex items-center justify-between">
+      <p class="font-bold">Room Icon</p>
+      <div class="flex items-center gap-4">
+        {#if imagePreview}
+          <div class="flex items-center gap-2">
+            <span class="text-sm opacity-75">Selected:</span>
+            <img
+              src={imagePreview}
+              alt="Room icon preview"
+              class="h-8 w-8 rounded-lg object-cover" />
+          </div>
+        {:else if selectedIcon}
+          <div class="flex items-center gap-2">
+            <span class="text-sm opacity-75">Selected:</span>
+            <Icon icon={selectedIcon} class="h-8 w-8" />
+          </div>
+        {:else}
+          <span class="text-sm opacity-75">No icon selected</span>
+        {/if}
+        <div class="flex gap-2">
+          <IconPickerButton onSelect={handleIconSelect} class="btn btn-primary btn-sm">
+            <Icon icon={StickerSmileSquare} size={4} />
+            Select
+          </IconPickerButton>
+          <label class="btn btn-neutral btn-sm cursor-pointer">
+            <Icon icon={UploadMinimalistic} size={4} />
+            Upload
+            <input type="file" accept="image/*" class="hidden" onchange={handleImageUpload} />
+          </label>
+        </div>
+      </div>
+    </div>
   {:else}
     <p class="bg-alt card2 row-2">
       <Icon icon={Danger} />