Rename channel to room

src/app/components/AlertAdd.svelte

@@ -21,7 +21,7 @@
 
   type Props = {
     url?: string
-    channel?: string
+    room?: string
     notifyChat?: boolean
     notifyThreads?: boolean
     notifyCalendar?: boolean
@@ -30,7 +30,7 @@
 
   let {
     url = "",
-    channel = "email",
+    room = "email",
     notifyChat = true,
     notifyThreads = true,
     notifyCalendar = true,
@@ -50,7 +50,7 @@
   const back = () => history.back()
 
   const submit = async () => {
-    if (channel === "email" && !email.includes("@")) {
+    if (room === "email" && !email.includes("@")) {
       return pushToast({
         theme: "error",
         message: "Please provide an email address",
@@ -100,7 +100,7 @@
         feed: makeIntersectionFeed(feedFromFilters(filters), makeRelayFeed(url)),
         claims: claim ? {[url]: claim} : {},
         description: `for ${displayList(display)} on ${displayRelayUrl(url)}`,
-        email: channel === "email" ? {cron, email} : undefined,
+        email: room === "email" ? {cron, email} : undefined,
       })
 
       if (error) {
@@ -116,7 +116,7 @@
 
   onMount(() => {
     if (!canSendPushNotifications()) {
-      channel = "email"
+      room = "email"
     }
   })
 </script>
@@ -136,14 +136,14 @@
         <p>Alert Type*</p>
       {/snippet}
       {#snippet input()}
-        <select bind:value={channel} class="select select-bordered">
+        <select bind:value={room} class="select select-bordered">
           <option value="email">Email Digest</option>
           <option value="push">Push Notification</option>
         </select>
       {/snippet}
     </FieldInline>
   {/if}
-  {#if channel === "email"}
+  {#if room === "email"}
     <FieldInline>
       {#snippet label()}
         <p>Email Address*</p>

src/app/components/AlertItem.svelte

@@ -17,14 +17,14 @@
   const {alert}: Props = $props()
 
   const cron = $derived(getTagValue("cron", alert.tags))
-  const channel = $derived(getTagValue("channel", alert.tags))
+  const room = $derived(getTagValue("room", alert.tags))
   const feeds = $derived(getTagValues("feed", alert.tags))
   const description = $derived(
     getTagValue("description", alert.tags) ||
       [
         `${cron?.endsWith("1") ? "Weekly" : "Daily"} alert for events`,
         displayFeeds(feeds.map(parseJson)),
-        `sent via ${channel}.`,
+        `sent via ${room}.`,
       ].join(" "),
   )
 

src/app/components/Alerts.svelte

@@ -24,11 +24,11 @@
 
   type Props = {
     url?: string
-    channel?: string
+    room?: string
     hideSpaceField?: boolean
   }
 
-  const {url = "", channel = "push", hideSpaceField = false}: Props = $props()
+  const {url = "", room = "push", hideSpaceField = false}: Props = $props()
 
   const dmStatus = $derived($dmAlert ? deriveAlertStatus(getAddress($dmAlert.event)) : undefined)
 
@@ -46,7 +46,7 @@
     }),
   )
 
-  const startAlert = () => pushModal(AlertAdd, {url, channel, hideSpaceField})
+  const startAlert = () => pushModal(AlertAdd, {url, room, hideSpaceField})
 
   const uncheckDmAlert = async (message: string) => {
     await sleep(100)

src/app/components/CalendarEventActions.svelte

@@ -5,7 +5,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
-  import ChannelName from "@app/components/ChannelName.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
   import EventActivity from "@app/components/EventActivity.svelte"
@@ -41,7 +41,7 @@
 <div class="flex flex-grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
     <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
-      Posted in #<ChannelName {h} {url} />
+      Posted in #<RoomName {h} {url} />
     </Link>
   {/if}
   <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />

src/app/components/CalendarEventItem.svelte

@@ -5,7 +5,7 @@
   import CalendarEventActions from "@app/components/CalendarEventActions.svelte"
   import CalendarEventHeader from "@app/components/CalendarEventHeader.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
-  import ChannelLink from "@app/components/ChannelLink.svelte"
+  import RoomLink from "@app/components/RoomLink.svelte"
   import {makeCalendarPath} from "@app/util/routes"
 
   type Props = {
@@ -24,7 +24,7 @@
     <span class="whitespace-nowrap py-1 text-sm opacity-75">
       Posted by <ProfileLink pubkey={event.pubkey} {url} />
       {#if h}
-        in <ChannelLink {url} {h} />
+        in <RoomLink {url} {h} />
       {/if}
     </span>
     <CalendarEventActions showActivity {url} {event} />

src/app/components/ChannelName.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  import {channelsById, makeChannelId} from "@app/core/state"
-
-  const {url, h} = $props()
-</script>
-
-{$channelsById.get(makeChannelId(url, h))?.name || h}

src/app/components/ConversationCard.svelte

@@ -8,7 +8,7 @@
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import {goToEvent} from "@app/util/routes"
-  import {displayChannel} from "@app/core/state"
+  import {displayRoom} from "@app/core/state"
 
   type Props = {
     url: string
@@ -30,7 +30,7 @@
         <div class="flex items-center gap-2 text-sm opacity-70">
           {#if h}
             <span class="truncate font-medium text-blue-400">
-              #{displayChannel(url, h)}
+              #{displayRoom(url, h)}
             </span>
             <span class="opacity-50">•</span>
           {/if}

src/app/components/EventShare.svelte

@@ -9,8 +9,8 @@
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import ChannelName from "@app/components/ChannelName.svelte"
-  import {channelsByUrl} from "@app/core/state"
+  import RoomName from "@app/components/RoomName.svelte"
+  import {roomsByUrl} from "@app/core/state"
   import {makeRoomPath} from "@app/util/routes"
 
   const {url, noun, event}: {url: string; noun: string; event: TrustedEvent} = $props()
@@ -39,14 +39,14 @@
     {/snippet}
   </ModalHeader>
   <div class="grid grid-cols-3 gap-2">
-    {#each $channelsByUrl.get(url) || [] as channel (channel.h)}
+    {#each $roomsByUrl.get(url) || [] as room (room.h)}
       <button
         type="button"
         class="btn"
-        class:btn-neutral={selection !== channel.h}
-        class:btn-primary={selection === channel.h}
-        onclick={() => toggleRoom(channel.h)}>
-        #<ChannelName {...channel} />
+        class:btn-neutral={selection !== room.h}
+        class:btn-primary={selection === room.h}
+        onclick={() => toggleRoom(room.h)}>
+        #<RoomName {...room} />
       </button>
     {/each}
   </div>

src/app/components/GoalActions.svelte

@@ -6,7 +6,7 @@
   import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
   import EventActivity from "@app/components/EventActivity.svelte"
   import EventActions from "@app/components/EventActions.svelte"
-  import ChannelName from "@app/components/ChannelName.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
   import {makeGoalPath, makeSpacePath} from "@app/util/routes"
 
@@ -33,7 +33,7 @@
 <div class="flex flex-grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
     <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
-      Posted in #<ChannelName {h} {url} />
+      Posted in #<RoomName {h} {url} />
     </Link>
   {/if}
   <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />

src/app/components/GoalItem.svelte

@@ -6,7 +6,7 @@
   import ProfileLink from "@app/components/ProfileLink.svelte"
   import GoalActions from "@app/components/GoalActions.svelte"
   import GoalSummary from "@app/components/GoalSummary.svelte"
-  import ChannelLink from "@app/components/ChannelLink.svelte"
+  import RoomLink from "@app/components/RoomLink.svelte"
   import {makeGoalPath} from "@app/util/routes"
 
   type Props = {
@@ -33,7 +33,7 @@
     <span class="whitespace-nowrap py-1 text-sm opacity-75">
       Posted by <ProfileLink pubkey={event.pubkey} {url} />
       {#if h}
-        in <ChannelLink {url} {h} />
+        in <RoomLink {url} {h} />
       {/if}
     </span>
     <GoalActions showActivity {url} {event} />

src/app/components/MenuSpace.svelte

@@ -98,7 +98,7 @@
 
   const manageAlerts = () => {
     const component = hasAlerts ? Alerts : AlertAdd
-    const params = {url, channel: "push", hideSpaceField: true}
+    const params = {url, room: "push", hideSpaceField: true}
 
     pushModal(component, params, {replaceState})
   }

src/app/components/MenuSpaceRoomItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
-  import ChannelNameWithImage from "@app/components/ChannelNameWithImage.svelte"
+  import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
   import {makeRoomPath} from "@app/util/routes"
   import {notifications} from "@app/util/notifications"
 
@@ -20,5 +20,5 @@
   href={path}
   {replaceState}
   notification={notify ? $notifications.has(path) : false}>
-  <ChannelNameWithImage {url} {h} />
+  <RoomNameWithImage {url} {h} />
 </SecondaryNavItem>

src/app/components/RoomEdit.svelte

@@ -12,7 +12,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import RoomForm from "@app/components/RoomForm.svelte"
-  import {deriveChannel} from "@app/core/state"
+  import {deriveRoom} from "@app/core/state"
   import {makeSpacePath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
@@ -24,8 +24,8 @@
 
   const {url, h}: Props = $props()
 
-  const channel = deriveChannel(url, h)
-  const initialValues = $channel ? readRoomMeta($channel.event) : makeRoomMeta({h})
+  const room = deriveRoom(url, h)
+  const initialValues = $room ? readRoomMeta($room.event) : makeRoomMeta({h})
 
   const back = () => history.back()
 

src/app/components/RoomItem.svelte

@@ -23,14 +23,14 @@
   import ThunkFailure from "@app/components/ThunkFailure.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
-  import ChannelItemZapButton from "@app/components/ChannelItemZapButton.svelte"
-  import ChannelItemEmojiButton from "@app/components/ChannelItemEmojiButton.svelte"
-  import ChannelItemMenuButton from "@app/components/ChannelItemMenuButton.svelte"
-  import ChannelItemMenuMobile from "@app/components/ChannelItemMenuMobile.svelte"
-  import ChannelItemContent from "@app/components/ChannelItemContent.svelte"
+  import RoomItemZapButton from "@app/components/RoomItemZapButton.svelte"
+  import RoomItemEmojiButton from "@app/components/RoomItemEmojiButton.svelte"
+  import RoomItemMenuButton from "@app/components/RoomItemMenuButton.svelte"
+  import RoomItemMenuMobile from "@app/components/RoomItemMenuMobile.svelte"
+  import RoomItemContent from "@app/components/RoomItemContent.svelte"
   import {colors, ENABLE_ZAPS, deriveEventsForUrl} from "@app/core/state"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
-  import {getChannelItemPath} from "@app/util/routes"
+  import {getRoomItemPath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
 
   interface Props {
@@ -53,7 +53,7 @@
     onEdit,
   }: Props = $props()
 
-  const path = getChannelItemPath(url, event)
+  const path = getRoomItemPath(url, event)
   const shouldProtect = canEnforceNip70(url)
   const today = formatTimestampAsDate(now())
   const profile = deriveProfile(event.pubkey, [url])
@@ -65,7 +65,7 @@
   const reply = () => replyTo!(event)
   const edit = canEdit(event) ? () => onEdit(event) : undefined
 
-  const onTap = () => pushModal(ChannelItemMenuMobile, {url, event, reply, edit})
+  const onTap = () => pushModal(RoomItemMenuMobile, {url, event, reply, edit})
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey, url})
 
@@ -105,7 +105,7 @@
         </div>
       {/if}
       <div class:mt-2={showPubkey && event.kind !== MESSAGE}>
-        <ChannelItemContent {url} {event} />
+        <RoomItemContent {url} {event} />
         {#if thunk}
           <ThunkFailure showToastOnRetry {thunk} class="mt-2 text-sm" />
         {/if}
@@ -142,9 +142,9 @@
       class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
       class:group-hover:opacity-100={!isMobile}>
       {#if ENABLE_ZAPS}
-        <ChannelItemZapButton {url} {event} />
+        <RoomItemZapButton {url} {event} />
       {/if}
-      <ChannelItemEmojiButton {url} {event} />
+      <RoomItemEmojiButton {url} {event} />
       {#if replyTo}
         <Button class="btn join-item btn-xs" onclick={reply}>
           <Icon icon={Reply} size={4} />
@@ -155,7 +155,7 @@
           <Icon icon={Pen} size={4} />
         </Button>
       {/if}
-      <ChannelItemMenuButton {url} {event} />
+      <RoomItemMenuButton {url} {event} />
     </button>
   {/if}
 </TapTarget>

src/app/components/RoomItemContent.svelte

@@ -5,11 +5,11 @@
   import {isMobile} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import NoteContent from "@app/components/NoteContent.svelte"
-  import {getChannelItemPath} from "@app/util/routes"
+  import {getRoomItemPath} from "@app/util/routes"
 
   const props: ComponentProps<typeof NoteContent> = $props()
 
-  const path = getChannelItemPath(props.url!, props.event)
+  const path = getRoomItemPath(props.url!, props.event)
 </script>
 
 <div class={cx("text-sm", {"card2 card2-sm bg-alt": props.event.kind !== MESSAGE})}>

src/app/components/RoomItemMenuButton.svelte

@@ -5,7 +5,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
-  import ChannelItemMenu from "@app/components/ChannelItemMenu.svelte"
+  import RoomItemMenu from "@app/components/RoomItemMenu.svelte"
 
   const {url, event} = $props()
 
@@ -34,7 +34,7 @@
   </Button>
   <Tippy
     bind:popover
-    component={ChannelItemMenu}
+    component={RoomItemMenu}
     props={{url, event, onClick}}
     params={{trigger: "manual", interactive: true}} />
 </div>

src/app/components/RoomItemMenuMobile.svelte

@@ -17,7 +17,7 @@
   import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
   import {ENABLE_ZAPS} from "@app/core/state"
   import {publishReaction, canEnforceNip70} from "@app/core/commands"
-  import {getChannelItemPath} from "@app/util/routes"
+  import {getRoomItemPath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
 
   type Props = {
@@ -28,7 +28,7 @@
 
   const {url, event, reply}: Props = $props()
 
-  const path = getChannelItemPath(url, event)
+  const path = getRoomItemPath(url, event)
 
   const shouldProtect = canEnforceNip70(url)
 

src/app/components/RoomLink.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import cx from "classnames"
   import Link from "@lib/components/Link.svelte"
-  import ChannelName from "@app/components/ChannelName.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
   import {makeSpacePath} from "@app/util/routes"
 
   type Props = {
@@ -17,5 +17,5 @@
 </script>
 
 <Link href={path} class={cx(props.class, {"link-content bg-alt": !unstyled})}>
-  #<ChannelName {h} {url} />
+  #<RoomName {h} {url} />
 </Link>

src/app/components/RoomName.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import {roomsById, makeRoomId} from "@app/core/state"
+
+  const {url, h} = $props()
+</script>
+
+{$roomsById.get(makeRoomId(url, h))?.name || h}

src/app/components/RoomNameWithImage.svelte

@@ -2,8 +2,8 @@
   import Lock from "@assets/icons/lock-keyhole.svg?dataurl"
   import Hashtag from "@assets/icons/hashtag.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import ChannelName from "@app/components/ChannelName.svelte"
-  import {deriveChannel} from "@app/core/state"
+  import RoomName from "@app/components/RoomName.svelte"
+  import {deriveRoom} from "@app/core/state"
 
   interface Props {
     url: any
@@ -12,21 +12,21 @@
 
   const {url, h}: Props = $props()
 
-  const channel = deriveChannel(url, h)
+  const room = deriveRoom(url, h)
 </script>
 
-{#if $channel?.picture}
-  {@const src = $channel.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}
-{:else if $channel?.closed || $channel?.private}
+{:else if $room?.closed || $room?.private}
   <Icon icon={Lock} />
 {:else}
   <Icon icon={Hashtag} />
 {/if}
 <div class="min-w-0 overflow-hidden text-ellipsis">
-  <ChannelName {url} {h} />
+  <RoomName {url} {h} />
 </div>

src/app/components/ThreadActions.svelte

@@ -2,7 +2,7 @@
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {getTagValue} from "@welshman/util"
   import Link from "@lib/components/Link.svelte"
-  import ChannelName from "@app/components/ChannelName.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
   import EventActivity from "@app/components/EventActivity.svelte"
@@ -33,7 +33,7 @@
 <div class="flex flex-grow flex-wrap justify-end gap-2">
   {#if h && showRoom}
     <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
-      Posted in #<ChannelName {h} {url} />
+      Posted in #<RoomName {h} {url} />
     </Link>
   {/if}
   <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />

src/app/components/ThreadItem.svelte

@@ -6,7 +6,7 @@
   import Content from "@app/components/Content.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
   import ThreadActions from "@app/components/ThreadActions.svelte"
-  import ChannelLink from "@app/components/ChannelLink.svelte"
+  import RoomLink from "@app/components/RoomLink.svelte"
   import {makeThreadPath} from "@app/util/routes"
 
   type Props = {
@@ -39,7 +39,7 @@
       Posted by
       <ProfileLink pubkey={event.pubkey} {url} />
       {#if h}
-        in <ChannelLink {url} {h} />
+        in <RoomLink {url} {h} />
       {/if}
     </span>
     <ThreadActions showActivity {url} {event} />