Begin work on account-specific store

1. Move boostsCarousel setting to account-specific, sadly no migration from previous setting
2. Cache last notification to prevent keep getting unread notification badge

src/app.jsx

@@ -214,7 +214,7 @@ function App() {
         {/* <Route path="/:anything" element={<NotFound />} /> */}
       </Routes>
       <Routes>
-        {isLoggedIn && <Route path="/s/:id" element={<Status />} />}
+        <Route path="/s/:id" element={<Status />} />
       </Routes>
       <nav id="tab-bar" hidden>
         <li>
@@ -409,6 +409,7 @@ async function startStream() {
 
   const handleNewStatus = debounce((status) => {
     console.log('UPDATE', status);
+    if (document.visibilityState === 'hidden') return;
 
     const inHomeNew = states.homeNew.find((s) => s.id === status.id);
     const inHome = status.id === states.homeLast?.id;
@@ -444,7 +445,7 @@ async function startStream() {
     const inNotificationsNew = states.notificationsNew.find(
       (n) => n.id === notification.id,
     );
-    const inNotifications = notification.id === states.notificationLast?.id;
+    const inNotifications = notification.id === states.notificationsLast?.id;
     if (!inNotificationsNew && !inNotifications) {
       states.notificationsNew.unshift(notification);
     }
@@ -483,6 +484,7 @@ function startVisibility() {
           try {
             const firstStatusID = states.homeLast?.id;
             const firstNotificationID = states.notificationsLast?.id;
+            console.log({ states, firstNotificationID, firstStatusID });
             const fetchHome = masto.v1.timelines.listHome({
               limit: 5,
               ...(firstStatusID && { sinceId: firstStatusID }),
@@ -518,7 +520,7 @@ function startVisibility() {
                 (n) => n.id === notification.id,
               );
               const inNotifications =
-                notification.id === states.notificationLast?.id;
+                notification.id === states.notificationsLast?.id;
               if (!inNotificationsNew && !inNotifications) {
                 states.notificationsNew.unshift(notification);
               }

src/main.jsx

@@ -18,10 +18,10 @@ render(
   document.getElementById('app'),
 );
 
-// Clean up iconify localStorage
+// Storage cleanup
-// TODO: Remove this after few weeks?
 setTimeout(() => {
   try {
+    // Clean up iconify localStorage
     Object.keys(localStorage).forEach((key) => {
       if (key.startsWith('iconify')) {
         localStorage.removeItem(key);
@@ -32,5 +32,8 @@ setTimeout(() => {
         sessionStorage.removeItem(key);
       }
     });
+
+    // Clean up old settings key
+    localStorage.removeItem('settings:boostsCarousel');
   } catch (e) {}
 }, 5000);

src/pages/notifications.jsx

@@ -81,7 +81,7 @@ function Notifications() {
       const groupedNotifications = groupNotifications(notificationsValues);
 
       if (firstLoad) {
-        states.notificationLast = notificationsValues[0];
+        states.notificationsLast = notificationsValues[0];
         states.notifications = groupedNotifications;
       } else {
         states.notifications.push(...groupedNotifications);

src/utils/states.js

@@ -1,4 +1,5 @@
-import { proxy, subscribe } from 'valtio';
+import { proxy } from 'valtio';
+import { subscribeKey } from 'valtio/utils';
 
 import store from './store';
 
@@ -14,7 +15,7 @@ const states = proxy({
   homeLast: null, // Last item in 'home' list
   homeLastFetchTime: null,
   notifications: [],
-  notificationLast: null, // Last item in 'notifications' list
+  notificationsLast: store.account.get('notificationsLast') || null, // Last item in 'notifications' list
   notificationsNew: [],
   notificationsLastFetchTime: null,
   accounts: {},
@@ -27,20 +28,20 @@ const states = proxy({
   showAccount: false,
   showDrafts: false,
   showMediaModal: false,
-  composeCharacterCount: 0,
+  // Settings
   settings: {
-    boostsCarousel: store.local.get('settings:boostsCarousel')
+    boostsCarousel: store.account.get('settings-boostCarousel') ?? true,
-      ? store.local.get('settings:boostsCarousel') === '1'
-      : true,
   },
 });
+
 export default states;
 
-subscribe(states.settings, () => {
+subscribeKey(states, 'notificationsLast', (v) => {
-  store.local.set(
+  console.log('CHANGE', v);
-    'settings:boostsCarousel',
+  store.account.set('notificationsLast', states.notificationsLast);
-    states.settings.boostsCarousel ? '1' : '0',
+});
-  );
+subscribeKey(states, 'settings-boostCarousel', (v) => {
+  store.account.set('settings-boostCarousel', !!v);
 });
 
 export function hideAllModals() {

src/utils/store.js

@@ -1,3 +1,5 @@
+import { getCurrentAccountNS } from './store-utils';
+
 const local = {
   get: (key) => {
     try {
@@ -84,4 +86,36 @@ const session = {
   },
 };
 
-export default { local, session };
+// Store with account namespace (id@domain.tld) <- uses id, not username
+const account = {
+  get: (key) => {
+    try {
+      return local.getJSON(key)[getCurrentAccountNS()];
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+  set: (key, value) => {
+    try {
+      const data = local.getJSON(key) || {};
+      data[getCurrentAccountNS()] = value;
+      return local.setJSON(key, data);
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+  del: (key) => {
+    try {
+      const data = local.getJSON(key) || {};
+      delete data[getCurrentAccountNS()];
+      return local.setJSON(key, data);
+    } catch (e) {
+      console.warn(e);
+      return null;
+    }
+  },
+};
+
+export default { local, session, account };