seen-fix

package.json

@@ -52,7 +52,7 @@
     "@solid-primitives/memo": "1.2.4",
     "@solid-primitives/pagination": "0.2.10",
     "@solid-primitives/share": "2.0.4",
-    "@solid-primitives/storage": "1.3.9",
+    "@solid-primitives/storage": "^3.5.0",
     "@solid-primitives/upload": "0.0.110",
     "@solidjs/meta": "0.29.1",
     "@thisbeyond/solid-select": "0.14.0",

src/components/Nav/HeaderAuth.tsx

@@ -234,7 +234,12 @@ export const HeaderAuth = (props: Props) => {
               }
             >
               <Show when={!isSaveButtonVisible()}>
-                <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
+                <div
+                  class={clsx(
+                    styles.userControlItem,
+                    // styles.userControlItemInbox
+                  )}
+                >
                   <a href={getPagePath(router, 'inbox')}>
                     <div classList={{ entered: page().path === '/inbox' }}>
                       <Icon name="inbox-white" class={styles.icon} />

src/components/_shared/Popup/Popup.module.scss

@@ -73,7 +73,7 @@
     border: none;
     white-space: nowrap;
 
-    &:before {
+    &::before {
       content: '';
       height: 100%;
       left: 0;

src/context/seen.tsx

@@ -1,5 +1,5 @@
-import { openDB } from 'idb'
-import { Accessor, JSX, createContext, createSignal, onMount, useContext } from 'solid-js'
+import { makePersisted } from '@solid-primitives/storage'
+import { Accessor, JSX, createContext, createSignal, useContext } from 'solid-js'
 
 type SeenContextType = {
   seen: Accessor<{ [slug: string]: number }>
@@ -11,56 +11,18 @@ export function useSeen() {
   return useContext(SeenContext)
 }
 
-const DB_NAME = 'discourseAppDB'
-const DB_VERSION = 1
-const STORE_NAME = 'seen'
-const setupIndexedDB = async () => {
-  return await openDB(DB_NAME, DB_VERSION, {
-    upgrade(db) {
-      if (!db.objectStoreNames.contains(STORE_NAME)) {
-        db.createObjectStore(STORE_NAME, { keyPath: 'slug' })
-      }
-    },
-  })
-}
-
-const getSeenFromIndexedDB = async (db) => {
-  const tx = db.transaction(STORE_NAME, 'readonly')
-  const store = tx.objectStore(STORE_NAME)
-  const seen = await store.getAll()
-  return seen.reduce((acc, { slug, date }) => {
-    acc[slug] = date
-    return acc
-  }, {})
-}
-
-const saveSeenToIndexedDB = async (db, seen) => {
-  const tx = db.transaction(STORE_NAME, 'readwrite')
-  const store = tx.objectStore(STORE_NAME)
-  for (const [slug, date] of Object.entries(seen)) {
-    await store.put({ slug, date })
-  }
-  await tx.done
-}
-
 export const SeenProvider = (props: { children: JSX.Element }) => {
-  const [seen, setSeen] = createSignal<{ [slug: string]: number }>({})
-  const [db, setDb] = createSignal()
+  const [seen, setSeen] = makePersisted(createSignal<{ [slug: string]: number }>({}), {
+    name: 'discoursio-seen',
+  })
+
   const addSeen = async (slug: string) => {
     setSeen((prev) => {
       const newSeen = { ...prev, [slug]: Date.now() }
-      saveSeenToIndexedDB(db(), newSeen)
       return newSeen
     })
   }
 
-  onMount(async () => {
-    const ndb = await setupIndexedDB()
-    setDb(ndb)
-    const seenFromDB = await getSeenFromIndexedDB(ndb)
-    setSeen(seenFromDB)
-  })
-
   const value: SeenContextType = { seen, addSeen }
 
   return <SeenContext.Provider value={value}>{props.children}</SeenContext.Provider>