From 1cafeb5ec92c1dc4ad74fbed58b15a8ab2f3c0cf Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 1 Jul 2025 15:30:44 -0400
Subject: Move the `/ch` channel view to `/c` (for conversation).

---
 src/routes.rs                                 |   2 +-
 ui/lib/components/Channel.svelte              |   2 +-
 ui/routes/(app)/+layout.svelte                |   4 +-
 ui/routes/(app)/c/[conversation]/+page.svelte | 117 ++++++++++++++++++++++++++
 ui/routes/(app)/ch/[channel]/+page.svelte     | 117 --------------------------
 5 files changed, 121 insertions(+), 121 deletions(-)
 create mode 100644 ui/routes/(app)/c/[conversation]/+page.svelte
 delete mode 100644 ui/routes/(app)/ch/[channel]/+page.svelte

diff --git a/src/routes.rs b/src/routes.rs
index e38f744..49d9fb6 100644
--- a/src/routes.rs
+++ b/src/routes.rs
@@ -15,7 +15,7 @@ pub fn routes(app: &App) -> Router<App> {
     // UI routes that require the administrator to complete setup first.
     let ui_setup_required = Router::new()
         .route("/", get(ui::handlers::index))
-        .route("/ch/{channel}", get(ui::handlers::conversation))
+        .route("/c/{conversation}", get(ui::handlers::conversation))
         .route("/invite/{invite}", get(ui::handlers::invite))
         .route("/login", get(ui::handlers::login))
         .route("/me", get(ui::handlers::me))
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index 4f908d2..9004e50 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <li class:active>
-  <a href="/ch/{id}">
+  <a href="/c/{id}">
     {#if hasUnreads}
       <span class="badge has-unreads">❦</span>
     {:else}
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index c7e1f22..e3272bc 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -20,7 +20,7 @@
   onDestroy(session.end.bind(session));
 
   let pageContext = getContext('page');
-  let channel = $derived(page.params.channel);
+  let channel = $derived(page.params.conversation);
 
   let channels = $derived(session.channels);
 
@@ -60,7 +60,7 @@
     const lastActiveChannel = getLastActiveChannel();
     const inRoot = page.url.pathname === '/';
     if (inRoot && lastActiveChannel) {
-      goto(`/ch/${lastActiveChannel}`);
+      goto(`/c/${lastActiveChannel}`);
     } else if (channel) {
       setLastActiveChannel(channel || null);
     }
diff --git a/ui/routes/(app)/c/[conversation]/+page.svelte b/ui/routes/(app)/c/[conversation]/+page.svelte
new file mode 100644
index 0000000..4d2cc86
--- /dev/null
+++ b/ui/routes/(app)/c/[conversation]/+page.svelte
@@ -0,0 +1,117 @@
+<script>
+  import { DateTime } from 'luxon';
+  import { page } from '$app/state';
+  import MessageInput from '$lib/components/MessageInput.svelte';
+  import MessageRun from '$lib/components/MessageRun.svelte';
+  import Message from '$lib/components/Message.svelte';
+  import { runs } from '$lib/runs.js';
+
+  const { data } = $props();
+  const { session, outbox } = data;
+  let activeChannel;
+
+  const channelId = $derived(page.params.conversation);
+  const channel = $derived(session.channels.find((channel) => channel.id === channelId));
+  const messages = $derived(
+    session.messages.filter((message) => message.conversation === channelId),
+  );
+  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))),
+  );
+  const messageRuns = $derived(runs(messages.concat(unsentSkeletons), session.currentUser));
+
+  function inView(parentElement, element) {
+    const parRect = parentElement.getBoundingClientRect();
+    const parentTop = parRect.top;
+    const parentBottom = parRect.bottom;
+
+    const elRect = element.getBoundingClientRect();
+    const elementTop = elRect.top;
+    const elementBottom = elRect.bottom;
+
+    return parentTop < elementTop && parentBottom > elementBottom;
+  }
+
+  function getLastVisibleMessage() {
+    if (activeChannel) {
+      const childElements = activeChannel.getElementsByClassName('message');
+      const lastInView = Array.from(childElements)
+        .reverse()
+        .find((el) => {
+          return inView(activeChannel, el);
+        });
+      return lastInView;
+    }
+  }
+
+  function setLastRead() {
+    const lastInView = getLastVisibleMessage();
+    const at = !!lastInView ? DateTime.fromISO(lastInView.dataset.at) : channel?.at;
+    if (!!at) {
+      session.local.updateLastReadAt(channelId, at);
+    }
+  }
+
+  $effect(() => {
+    const _ = session.messages;
+    setLastRead();
+  });
+
+  $effect(() => {
+    // This is just to force it to track messageRuns.
+    const _ = messageRuns;
+    document.querySelector('.message-run:last-child .message:last-child')?.scrollIntoView();
+  });
+
+  function handleKeydown(event) {
+    if (event.key === 'Escape') {
+      setLastRead(); // TODO: pass in "last message DT"?
+    }
+  }
+
+  let lastReadCallback = null;
+
+  function onscroll() {
+    clearTimeout(lastReadCallback); // Fine if lastReadCallback is null still.
+    lastReadCallback = setTimeout(setLastRead, 2 * 1000);
+  }
+
+  async function sendMessage(message) {
+    outbox.postToChannel(channelId, message);
+  }
+
+  async function deleteMessage(id) {
+    outbox.deleteMessage(id);
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="active-channel" {onscroll} bind:this={activeChannel}>
+  {#each messageRuns as { sender, ownMessage, messages }}
+    <MessageRun
+      {sender}
+      class={{
+        ['own-message']: ownMessage,
+        ['other-message']: !ownMessage,
+      }}
+    >
+      {#each messages as message}
+        <Message
+          {...message}
+          editable={ownMessage}
+          {deleteMessage}
+          class={{
+            unsent: !message.id,
+            deleted: deleted.includes(message.id),
+          }}
+        />
+      {/each}
+    </MessageRun>
+  {/each}
+</div>
+<div class="create-message">
+  <MessageInput {sendMessage} />
+</div>
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
deleted file mode 100644
index ef000fc..0000000
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ /dev/null
@@ -1,117 +0,0 @@
-<script>
-  import { DateTime } from 'luxon';
-  import { page } from '$app/state';
-  import MessageInput from '$lib/components/MessageInput.svelte';
-  import MessageRun from '$lib/components/MessageRun.svelte';
-  import Message from '$lib/components/Message.svelte';
-  import { runs } from '$lib/runs.js';
-
-  const { data } = $props();
-  const { session, outbox } = data;
-  let activeChannel;
-
-  const channelId = $derived(page.params.channel);
-  const channel = $derived(session.channels.find((channel) => channel.id === channelId));
-  const messages = $derived(
-    session.messages.filter((message) => message.conversation === channelId),
-  );
-  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))),
-  );
-  const messageRuns = $derived(runs(messages.concat(unsentSkeletons), session.currentUser));
-
-  function inView(parentElement, element) {
-    const parRect = parentElement.getBoundingClientRect();
-    const parentTop = parRect.top;
-    const parentBottom = parRect.bottom;
-
-    const elRect = element.getBoundingClientRect();
-    const elementTop = elRect.top;
-    const elementBottom = elRect.bottom;
-
-    return parentTop < elementTop && parentBottom > elementBottom;
-  }
-
-  function getLastVisibleMessage() {
-    if (activeChannel) {
-      const childElements = activeChannel.getElementsByClassName('message');
-      const lastInView = Array.from(childElements)
-        .reverse()
-        .find((el) => {
-          return inView(activeChannel, el);
-        });
-      return lastInView;
-    }
-  }
-
-  function setLastRead() {
-    const lastInView = getLastVisibleMessage();
-    const at = !!lastInView ? DateTime.fromISO(lastInView.dataset.at) : channel?.at;
-    if (!!at) {
-      session.local.updateLastReadAt(channelId, at);
-    }
-  }
-
-  $effect(() => {
-    const _ = session.messages;
-    setLastRead();
-  });
-
-  $effect(() => {
-    // This is just to force it to track messageRuns.
-    const _ = messageRuns;
-    document.querySelector('.message-run:last-child .message:last-child')?.scrollIntoView();
-  });
-
-  function handleKeydown(event) {
-    if (event.key === 'Escape') {
-      setLastRead(); // TODO: pass in "last message DT"?
-    }
-  }
-
-  let lastReadCallback = null;
-
-  function onscroll() {
-    clearTimeout(lastReadCallback); // Fine if lastReadCallback is null still.
-    lastReadCallback = setTimeout(setLastRead, 2 * 1000);
-  }
-
-  async function sendMessage(message) {
-    outbox.postToChannel(channelId, message);
-  }
-
-  async function deleteMessage(id) {
-    outbox.deleteMessage(id);
-  }
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<div class="active-channel" {onscroll} bind:this={activeChannel}>
-  {#each messageRuns as { sender, ownMessage, messages }}
-    <MessageRun
-      {sender}
-      class={{
-        ['own-message']: ownMessage,
-        ['other-message']: !ownMessage,
-      }}
-    >
-      {#each messages as message}
-        <Message
-          {...message}
-          editable={ownMessage}
-          {deleteMessage}
-          class={{
-            unsent: !message.id,
-            deleted: deleted.includes(message.id),
-          }}
-        />
-      {/each}
-    </MessageRun>
-  {/each}
-</div>
-<div class="create-message">
-  <MessageInput {sendMessage} />
-</div>
-- 
cgit v1.2.3