3 files changed, 44 insertions, 34 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index e3272bc..658d966 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -7,9 +7,8 @@
 
   import TinyGesture from 'tinygesture';
 
-  import * as api from '$lib/apiServer.js';
-  import ChannelList from '$lib/components/ChannelList.svelte';
-  import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
+  import ConversationList from '$lib/components/ConversationList.svelte';
+  import CreateConversationForm from '$lib/components/CreateConversationForm.svelte';
 
   let gesture = null;
 
@@ -20,9 +19,9 @@
   onDestroy(session.end.bind(session));
 
   let pageContext = getContext('page');
-  let channel = $derived(page.params.conversation);
+  let conversationId = $derived(page.params.conversation);
 
-  let channels = $derived(session.channels);
+  let conversations = $derived(session.conversations);
 
   function setUpGestures() {
     if (!browser) {
@@ -46,28 +45,35 @@
     }
   });
 
-  const STORE_KEY_LAST_ACTIVE = 'pilcrow:lastActiveChannel';
+  // Automatically migrate last-active-channel info now that we call them "conversations."
+  const STORE_KEY_LAST_ACTIVE = 'pilcrow:lastActiveConversation';
+  const STORE_KEY_LAST_ACTIVE_CHANNEL = 'pilcrow:lastActiveChannel';
 
-  function getLastActiveChannel() {
-    return browser && JSON.parse(localStorage.getItem(STORE_KEY_LAST_ACTIVE));
+  function getLastActiveConversation() {
+    const stored =
+      localStorage.getItem(STORE_KEY_LAST_ACTIVE) ??
+      localStorage.getItem(STORE_KEY_LAST_ACTIVE_CHANNEL);
+    return JSON.parse(stored);
   }
 
-  function setLastActiveChannel(channelId) {
-    browser && localStorage.setItem(STORE_KEY_LAST_ACTIVE, JSON.stringify(channelId));
+  function setLastActiveConversation(conversationId) {
+    localStorage.setItem(STORE_KEY_LAST_ACTIVE, JSON.stringify(conversationId));
+    // Once we've saved to the new key, we no longer need the old one. Clean it up.
+    localStorage.removeItem(STORE_KEY_LAST_ACTIVE_CHANNEL);
   }
 
   afterNavigate(() => {
-    const lastActiveChannel = getLastActiveChannel();
+    const conversationId = getLastActiveConversation();
     const inRoot = page.url.pathname === '/';
-    if (inRoot && lastActiveChannel) {
-      goto(`/c/${lastActiveChannel}`);
-    } else if (channel) {
-      setLastActiveChannel(channel || null);
+    if (inRoot && conversationId) {
+      goto(`/c/${conversationId}`);
+    } else if (conversationId) {
+      setLastActiveConversation(conversationId || null);
     }
   });
 
-  async function createChannel(name) {
-    outbox.createChannel(name);
+  async function createConversation(name) {
+    outbox.createConversation(name);
   }
 
   function onbeforeunload(event) {
@@ -114,9 +120,9 @@
 
 <div id="interface">
   <nav id="sidebar" data-expanded={pageContext.showMenu}>
-    <ChannelList active={channel} {channels} />
-    <div class="create-channel">
-      <CreateChannelForm {createChannel} />
+    <ConversationList active={conversationId} {conversations} />
+    <div class="create-conversation">
+      <CreateConversationForm {createConversation} />
     </div>
   </nav>
   <main>
diff --git a/ui/routes/(app)/+page.svelte b/ui/routes/(app)/+page.svelte
index 007c5c6..1db0eb2 100644
--- a/ui/routes/(app)/+page.svelte
+++ b/ui/routes/(app)/+page.svelte
@@ -1,3 +1,3 @@
-<div class="no-active-channel">
-  <span class="vertical-aligner"> Please select or create a channel. </span>
+<div class="no-active-conversation">
+  <span class="vertical-aligner">Please select or create a conversation.</span>
 </div>
diff --git a/ui/routes/(app)/c/[conversation]/+page.svelte b/ui/routes/(app)/c/[conversation]/+page.svelte
index 4d2cc86..e6cd845 100644
--- a/ui/routes/(app)/c/[conversation]/+page.svelte
+++ b/ui/routes/(app)/c/[conversation]/+page.svelte
@@ -8,14 +8,18 @@
 
   const { data } = $props();
   const { session, outbox } = data;
-  let activeChannel;
+  let activeConversation;
 
-  const channelId = $derived(page.params.conversation);
-  const channel = $derived(session.channels.find((channel) => channel.id === channelId));
+  const conversationId = $derived(page.params.conversation);
+  const conversation = $derived(
+    session.conversations.find((conversation) => conversation.id === conversationId),
+  );
   const messages = $derived(
-    session.messages.filter((message) => message.conversation === channelId),
+    session.messages.filter((message) => message.conversation === conversationId),
+  );
+  const unsent = $derived(
+    outbox.messages.filter((message) => message.conversation === conversationId),
   );
-  const unsent = $derived(outbox.messages.filter((message) => message.channel === channelId));
   const deleted = $derived(outbox.deleted.map((message) => message.messageId));
   const unsentSkeletons = $derived(
     unsent.map((message) => message.toSkeleton($state.snapshot(session.currentUser))),
@@ -35,12 +39,12 @@
   }
 
   function getLastVisibleMessage() {
-    if (activeChannel) {
-      const childElements = activeChannel.getElementsByClassName('message');
+    if (activeConversation) {
+      const childElements = activeConversation.getElementsByClassName('message');
       const lastInView = Array.from(childElements)
         .reverse()
         .find((el) => {
-          return inView(activeChannel, el);
+          return inView(activeConversation, el);
         });
       return lastInView;
     }
@@ -48,9 +52,9 @@
 
   function setLastRead() {
     const lastInView = getLastVisibleMessage();
-    const at = !!lastInView ? DateTime.fromISO(lastInView.dataset.at) : channel?.at;
+    const at = !!lastInView ? DateTime.fromISO(lastInView.dataset.at) : conversation?.at;
     if (!!at) {
-      session.local.updateLastReadAt(channelId, at);
+      session.local.updateLastReadAt(conversationId, at);
     }
   }
 
@@ -79,7 +83,7 @@
   }
 
   async function sendMessage(message) {
-    outbox.postToChannel(channelId, message);
+    outbox.sendToConversation(conversationId, message);
   }
 
   async function deleteMessage(id) {
@@ -89,7 +93,7 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-<div class="active-channel" {onscroll} bind:this={activeChannel}>
+<div class="active-conversation" {onscroll} bind:this={activeConversation}>
   {#each messageRuns as { sender, ownMessage, messages }}
     <MessageRun
       {sender}