Streamline deriveRoom

src/app/components/RoomEdit.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
   import type {RoomMeta} from "@welshman/util"
-  import {displayRelayUrl, makeRoomMeta, readRoomMeta} from "@welshman/util"
+  import {displayRelayUrl} from "@welshman/util"
   import {deleteRoom, waitForThunkError, repository} from "@welshman/app"
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
@@ -25,11 +25,10 @@
   const {url, h}: Props = $props()
 
   const room = deriveRoom(url, h)
-  const initialValues = $room ? readRoomMeta($room.event) : makeRoomMeta({h})
 
   const back = () => history.back()
 
-  const onsubmit = (room: RoomMeta) => goto(makeSpacePath(url, room.h))
+  const onsubmit = (room: RoomMeta) => goto(makeSpacePath(url, h))
 
   const startDelete = () =>
     pushModal(Confirm, {
@@ -37,7 +36,7 @@
       message:
         "This room will no longer be accessible to space members, and all messages posted to it will be deleted.",
       confirm: async () => {
-        const thunk = deleteRoom(url, makeRoomMeta({h}))
+        const thunk = deleteRoom(url, $room)
         const message = await waitForThunkError(thunk)
 
         if (message) {
@@ -50,7 +49,7 @@
     })
 </script>
 
-<RoomForm {url} {onsubmit} {initialValues}>
+<RoomForm {url} {onsubmit} initialValues={$room}>
   {#snippet header()}
     <ModalHeader>
       {#snippet title()}

src/app/components/RoomForm.svelte

@@ -9,6 +9,7 @@
   import {preventDefault, compressFile} from "@lib/html"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import ImageIcon from "@lib/components/ImageIcon.svelte"
   import IconPickerButton from "@lib/components/IconPickerButton.svelte"
   import {pushToast} from "@app/util/toast"
   import {uploadFile} from "@app/core/commands"
@@ -113,10 +114,7 @@
           {#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-5 w-5 rounded-lg object-cover" />
+              <ImageIcon src={imagePreview} alt="Room icon preview" />
             </div>
           {:else if selectedIcon}
             <div class="flex items-center gap-2">
@@ -148,7 +146,7 @@
     {#snippet input()}
       <label class="input input-bordered flex w-full items-center gap-2">
         {#if imagePreview}
-          <img src={imagePreview} alt="Room icon preview" class="h-5 w-5 rounded-lg object-cover" />
+          <ImageIcon src={imagePreview} alt="Room icon preview" />
         {:else if selectedIcon}
           <Icon icon={selectedIcon} class="h-8 w-8" />
         {:else}

src/app/components/RoomNameWithImage.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Hashtag from "@assets/icons/hashtag.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
+  import ImageIcon from "@lib/components/ImageIcon.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import {deriveRoom} from "@app/core/state"
 
@@ -14,13 +15,9 @@
   const room = deriveRoom(url, h)
 </script>
 
-{#if $room?.picture}
+{#if $room.picture}
   {@const src = $room.picture}
-  {#if src.match("\.(png|svg)$") || src.match("image/(png|svg)")}
-    <Icon icon={src} />
-  {:else}
-    <img alt="Room icon" {src} class="h-6 w-6 rounded-lg" />
-  {/if}
+  <ImageIcon {src} alt="Room icon" />
 {:else}
   <Icon icon={Hashtag} />
 {/if}