fix issue with cross tab sync

when attempting to sync event.moderated cross tab, first the request store would be updated, thus changing the last store timestamp, then the events store would be updated, and the change would appear old. To facilitate, add a `lastStoreTimestamp` for each store

src/components/StorageRequest.vue

@@ -14,7 +14,8 @@ import SkeletonLoading from './SkeletonLoading.vue'
 
 const router = useRouter()
 const request = defineModel()
-defineProps({
+const emit = defineEmits(['updateModerated'])
+const props = defineProps({
   requestId: {
     type: String,
     required: true
@@ -52,6 +53,9 @@ const timestamps = computed(() => {
   }
 })
 const requestDetails = computed(() => request.value.request)
+function updateEventModerated() {
+  emit('updateModerated', props.requestId, request.value.moderated)
+}
 </script>
 
 <template>
@@ -75,6 +79,7 @@ const requestDetails = computed(() => request.value.request)
               id="moderation"
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               v-model="request.moderated"
+              @change="updateEventModerated"
             >
               <option v-for="(value, key) in moderatedState" :value="key" :key="key">
                 {{ value.text }}

src/plugins/pinia/crosstabsync.js

@@ -103,14 +103,14 @@ function hydrateStore(store, { storage, serializer, key, debug }) {
   }
 }
 const localStorageMetaKey = (key) => `${key}_storeEventMeta`
-let lastStoreTimestamp = 0
+let lastStoreTimestamp = {}
 function persistState(state, { storage, serializer, key, paths, debug }) {
   try {
     // const localStorageMetaKey = `${key}_storeEventMeta`
-    lastStoreTimestamp = Date.now()
+    lastStoreTimestamp[key] = Date.now()
     const storeEventMeta = {
       source: window.name,
-      timestamp: lastStoreTimestamp
+      timestamp: lastStoreTimestamp[key]
     }
     storage.setItem(localStorageMetaKey(key), serializer.serialize(storeEventMeta))
     const toStore = Array.isArray(paths) ? pick(state, paths) : state
@@ -126,7 +126,8 @@ function handleStorageEvent(event, store, key, serializer) {
       let { source, timestamp } = serializer.deserialize(serialized)
       // prevent our own window local storage updates from hydrating (infinite
       // loop) and prevent stale updates from hydrating
-      if (source !== window.name && timestamp > lastStoreTimestamp) {
+      const lateTimeStoreUpdated = lastStoreTimestamp[key] || 0
+      if (source !== window.name && timestamp > lateTimeStoreUpdated) {
         store.$hydrate()
       }
     }
@@ -184,7 +185,6 @@ function crossTabSync(factoryOptions = {}) {
         window.addEventListener('storage', (event) =>
           handleStorageEvent(event, store, key, serializer)
         )
-        store.$dispose
       }
     })
   }