1 files changed, 58 insertions, 2 deletions

diff --git a/ui/lib/store/channels.svelte.js b/ui/lib/store/channels.svelte.js
index c82f9aa..49cc31c 100644
--- a/ui/lib/store/channels.svelte.js
+++ b/ui/lib/store/channels.svelte.js
@@ -1,4 +1,5 @@
 import { DateTime } from 'luxon';
+import { STORE_KEY_CHANNELS_DATA } from '$lib/constants';
 const EPOCH_STRING = '1970-01-01T00:00:00Z';
 
 // For reasons unclear to me, a straight up class definition with a constructor
@@ -10,24 +11,79 @@ const EPOCH_STRING = '1970-01-01T00:00:00Z';
 // Emphasis on "simple object".
 // --Kit
 function makeChannelObject({ id, name, draft = '', lastReadAt = null, scrollPosition = null }) {
+  let lastReadAtParsed;
+  if (Boolean(lastReadAt)) {
+    if (typeof lastReadAt === "string") {
+      lastReadAtParsed = DateTime.fromISO(lastReadAt);
+    } else {
+      lastReadAtParsed = lastReadAt;
+    }
+  } else {
+    lastReadAtParsed = DateTime.fromISO(EPOCH_STRING);
+  }
   return {
     id,
     name,
-    lastReadAt: lastReadAt || DateTime.fromISO(EPOCH_STRING),
+    lastReadAt: lastReadAtParsed,
     draft,
     scrollPosition
   };
 }
 
+function mergeLocalData(remoteData, currentData) {
+  let currentDataObj = currentData.reduce(
+    (acc, cur) => {
+      acc[cur.id] = cur;
+      return acc;
+    },
+    {}
+  );
+  const ret = remoteData.map(
+    (ch) => {
+      const newCh = makeChannelObject(ch);
+      if (Boolean(currentDataObj[ch.id])) {
+        newCh.lastReadAt = currentDataObj[ch.id].lastReadAt;
+      }
+      return newCh;
+    }
+  );
+  return ret;
+}
+
 export class Channels {
   channels = $state([]);
 
+  constructor({ channelsData }) {
+    this.channels = channelsData.map(makeChannelObject);
+    // On channel edits (inc 'last read' ones), write out to localstorage?
+  }
+
+  writeOutToLocalStorage() {
+    localStorage.setItem(
+      STORE_KEY_CHANNELS_DATA,
+      JSON.stringify(this.channels)
+    );
+  }
+
+  updateLastReadAt(channelId, at) {
+    const channelObject = this.getChannel(channelId);
+    // 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;
+      this.writeOutToLocalStorage();
+    }
+  }
+
   getChannel(channelId) {
     return this.channels.filter((ch) => ch.id === channelId)[0] || null;
   }
 
   setChannels(channels) {
-    this.channels = channels.map(makeChannelObject);
+    // This gets called, among other times, when the page is first loaded, with
+    // server-sent data from the `boot` endpoint. That needs to be merged with
+    // locally stored data!
+    this.channels = mergeLocalData(channels, this.channels);
     this.sort();
     return this;
   }