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
+              <ImageIcon src={imagePreview} alt="Room icon preview" />
-                src={imagePreview}
-                alt="Room icon preview"
-                class="h-5 w-5 rounded-lg object-cover" />
             </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)")}
+  <ImageIcon {src} alt="Room icon" />
-    <Icon icon={src} />
-  {:else}
-    <img alt="Room icon" {src} class="h-6 w-6 rounded-lg" />
-  {/if}
 {:else}
   <Icon icon={Hashtag} />
 {/if}

src/app/core/state.ts

@@ -98,6 +98,7 @@ import {
   RelayMode,
   verifyEvent,
   readRoomMeta,
+  makeRoomMeta,
 } from "@welshman/util"
 import type {
   TrustedEvent,
@@ -612,7 +613,8 @@ export const {
   },
 })
 
-export const deriveRoom = (url: string, h: string) => _deriveRoom(makeRoomId(url, h))
+export const deriveRoom = (url: string, h: string) =>
+  derived(_deriveRoom(makeRoomId(url, h)), $meta => $meta || makeRoomMeta({h}))
 
 export const displayRoom = (url: string, h: string) =>
   roomsById.get().get(makeRoomId(url, h))?.name || h

src/lib/components/ImageIcon.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Icon from "@lib/components/Icon.svelte"
+
+  type Props = {
+    src: string
+    alt: string
+  }
+
+  const {src, alt}: Props = $props()
+</script>
+
+{#if src.includes("image/svg") || src.endsWith(".svg")}
+  <Icon icon={src} />
+{:else}
+  <img {src} {alt} class="h-5 w-5 rounded-lg object-cover" />
+{/if}

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -386,11 +386,11 @@
 
 <PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4">
   <div bind:this={dynamicPadding}></div>
-  {#if $room?.isPrivate && $membershipStatus !== MembershipStatus.Granted}
+  {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
     <div class="py-20">
       <div class="card2 col-8 m-auto max-w-md items-center text-center">
         <p class="opacity-75">You aren't currently a member of this room.</p>
-        {#if !$room?.isClosed}
+        {#if !$room.isClosed}
           {#if $membershipStatus === MembershipStatus.Pending}
             <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
               <Icon icon={ClockCircle} />
@@ -452,12 +452,12 @@
 </PageContent>
 
 <div class="chat__compose bg-base-200" bind:this={chatCompose}>
-  {#if $room?.isPrivate && $membershipStatus !== MembershipStatus.Granted}
+  {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
     <!-- pass -->
-  {:else if $room?.isRestricted && $membershipStatus !== MembershipStatus.Granted}
+  {:else if $room.isRestricted && $membershipStatus !== MembershipStatus.Granted}
     <div class="bg-alt card m-4 flex flex-row items-center justify-between px-4 py-3">
       <p>Only members are allowed to post to this room.</p>
-      {#if !$room?.isClosed}
+      {#if !$room.isClosed}
         {#if $membershipStatus === MembershipStatus.Pending}
           <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
             <Icon icon={ClockCircle} />