Merge branch 'prop/preserve-state'

1 files changed, 37 insertions, 6 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);
   }