3 files changed, 51 insertions, 25 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 02f7d19..d1bd7d0 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -1,13 +1,21 @@
 <script>
-  import { page } from '$app/state';
-  import { goto } from '$app/navigation';
-  import { browser } from '$app/environment';
   import { getContext, onDestroy, onMount } from 'svelte';
+
+  import { browser } from '$app/environment';
+  import { goto, afterNavigate } from '$app/navigation';
+  import { page } from '$app/state';
+
   import TinyGesture from 'tinygesture';
 
   import * as api from '$lib/apiServer.js';
-  import { channelsList, currentUser, logins, messages, onEvent } from '$lib/store';
-
+  import {
+    channelsList,
+    channelsMetaList,
+    currentUser,
+    logins,
+    messages,
+    onEvent
+  } from '$lib/store';
   import ChannelList from '$lib/components/ChannelList.svelte';
   import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
 
@@ -20,11 +28,14 @@
   let channel = $derived(page.params.channel);
 
   let rawChannels = $derived($channelsList.channels);
+  let rawChannelsMeta = $derived($channelsMetaList.channelsMeta);
   let rawMessages = $derived($messages);
 
   let enrichedChannels = $derived.by(() => {
     const channels = rawChannels;
+    const channelsMeta = rawChannelsMeta;
     const messages = rawMessages;
+
     const enrichedChannels = [];
     if (channels && messages) {
       for (let ch of channels) {
@@ -32,7 +43,7 @@
         let lastRun = runs?.slice(-1)[0];
         let lastMessage = lastRun?.messages.slice(-1)[0];
         let lastMessageAt = lastMessage?.at;
-        let hasUnreads = lastMessageAt > ch.lastReadAt;
+        let hasUnreads = lastMessageAt > channelsMeta[ch.id]?.lastReadAt;
         enrichedChannels.push({
           ...ch,
           hasUnreads
@@ -110,6 +121,26 @@
     return '';
   }
 
+  const STORE_KEY_LAST_ACTIVE = 'pilcrow:lastActiveChannel';
+
+  function getLastActiveChannel() {
+    return browser && JSON.parse(localStorage.getItem(STORE_KEY_LAST_ACTIVE));
+  }
+
+  function setLastActiveChannel(channelId) {
+    browser && localStorage.setItem(STORE_KEY_LAST_ACTIVE, JSON.stringify(channelId));
+  }
+
+  afterNavigate(() => {
+    const lastActiveChannel = getLastActiveChannel();
+    const inRoot = page.url.pathname === '/';
+    if (inRoot && lastActiveChannel) {
+      goto(`/ch/${lastActiveChannel}`);
+    } else if (channel) {
+      setLastActiveChannel(channel || null);
+    }
+  });
+
   async function createChannel(name) {
     await api.createChannel(name);
   }
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 8de9859..095e66a 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -3,7 +3,7 @@
   import { page } from '$app/state';
   import ActiveChannel from '$lib/components/ActiveChannel.svelte';
   import MessageInput from '$lib/components/MessageInput.svelte';
-  import { channelsList, currentUser, logins, messages } from '$lib/store';
+  import { channelsList, channelsMetaList, currentUser, logins, messages } from '$lib/store';
   import * as api from '$lib/apiServer';
 
   let channel = $derived(page.params.channel);
@@ -34,27 +34,22 @@
   }
 
   function getLastVisibleMessage() {
-    const parentElement = activeChannel;
-    const childElements = parentElement.getElementsByClassName('message');
-    const lastInView = Array.from(childElements)
-      .reverse()
-      .find((el) => {
-        return inView(parentElement, el);
-      });
-    return lastInView;
+    if (activeChannel) {
+      const childElements = activeChannel.getElementsByClassName('message');
+      const lastInView = Array.from(childElements)
+        .reverse()
+        .find((el) => {
+          return inView(activeChannel, el);
+        });
+      return lastInView;
+    }
   }
 
   function setLastRead() {
-    const channelObject = $channelsList.getChannel(channel);
     const lastInView = getLastVisibleMessage();
-    if (!channelObject || !lastInView) {
-      return;
-    }
-    const at = DateTime.fromISO(lastInView.dataset.at);
-    // Do it this way, rather than with Math.max tricks, to avoid assignment
-    // when we don't need it, to minimize reactive changes:
-    if (at > channelObject.lastReadAt) {
-      channelObject.lastReadAt = at;
+    if (lastInView) {
+      const at = DateTime.fromISO(lastInView.dataset.at);
+      $channelsMetaList.updateLastReadAt(channel, at);
     }
   }
 
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 750f1f8..6c19a95 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -1,9 +1,9 @@
 <script>
   import { setContext } from 'svelte';
   import { onNavigate } from '$app/navigation';
+  import { page } from '$app/stores';
   import '../app.css';
   import logo from '$lib/assets/logo.png';
-
   import { currentUser } from '$lib/store';
 
   let pageContext = $state({