Rename "channel" to "conversation" throughout the client.

Existing client state, stored in local storage, is migrated to new keys (that mention "conversation" instead of "channel" where appropriate) the first time the client loads.

1 files changed, 26 insertions, 20 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>