From b1c68972c9e1b9c35033c6970a957063c8dc4dd5 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Fri, 31 Oct 2025 16:18:58 -0700
Subject: [PATCH] Streamline deriveRoom

---
 src/app/components/RoomEdit.svelte          |  9 ++++-----
 src/app/components/RoomForm.svelte          |  8 +++-----
 src/app/components/RoomNameWithImage.svelte |  9 +++------
 src/app/core/state.ts                       |  4 +++-
 src/lib/components/ImageIcon.svelte         | 16 ++++++++++++++++
 src/routes/spaces/[relay]/[h]/+page.svelte  | 10 +++++-----
 6 files changed, 34 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/components/ImageIcon.svelte

diff --git a/src/app/components/RoomEdit.svelte b/src/app/components/RoomEdit.svelte
index 4f523de..11e940f 100644
--- a/src/app/components/RoomEdit.svelte
+++ b/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()}
diff --git a/src/app/components/RoomForm.svelte b/src/app/components/RoomForm.svelte
index ff228e3..29f1401 100644
--- a/src/app/components/RoomForm.svelte
+++ b/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}
diff --git a/src/app/components/RoomNameWithImage.svelte b/src/app/components/RoomNameWithImage.svelte
index 5753d95..1718dfb 100644
--- a/src/app/components/RoomNameWithImage.svelte
+++ b/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}
diff --git a/src/app/core/state.ts b/src/app/core/state.ts
index c15a82a..6918b7b 100644
--- a/src/app/core/state.ts
+++ b/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
diff --git a/src/lib/components/ImageIcon.svelte b/src/lib/components/ImageIcon.svelte
new file mode 100644
index 0000000..4574d8b
--- /dev/null
+++ b/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}
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index d7f01b1..0465c79 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/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} />