1 files changed, 72 insertions, 13 deletions

diff --git a/extension/src/features/util.ts b/extension/src/features/util.ts
index 6ec8f15..53f6ffd 100644
--- a/extension/src/features/util.ts
+++ b/extension/src/features/util.ts
@@ -14,24 +14,25 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 
-import { defer } from "lodash";
-import { RemovableRef, SerializerAsync, StorageLikeAsync, useStorageAsync, watchOnce } from "@vueuse/core";
-import { type MaybeRefOrGetter, type WatchSource, isProxy, toRaw } from "vue";
+import { defer, filter, isEqual } from "lodash";
+import { RemovableRef, SerializerAsync, StorageLikeAsync, useStorageAsync, watchOnce, get, set } from "@vueuse/core";
+import { type MaybeRefOrGetter, type WatchSource, isProxy, toRaw, MaybeRef, shallowRef } from "vue";
 import type { Watchable } from "./types";
 
 export const waitForChange = <T extends Readonly<WatchSource<unknown>[]>>(source: [...T]):Promise<void> => {
-    return new Promise((resolve) => watchOnce<any>(source, () => resolve(), { deep: true }))
+    return new Promise((resolve) => watchOnce<any>(source, () => defer(() => resolve()), { deep: true }))
 }
 
 export const waitForChangeFn = <T extends Readonly<WatchSource<unknown>[]>>(source: [...T]) => {
-    return (): Promise<void> => {
-        return new Promise((resolve) => watchOnce<any>(source, () => resolve(), {deep: true}))
-    }
+    return (): Promise<void> => waitForChange(source)
 }
 
-export const waitOne = <T extends Readonly<WatchSource<unknown>[]>>(source: [...T]): Promise<void> => {
-    return new Promise((resolve) => watchOnce<any>(source, () => resolve(), { deep: true }))
-}
+/**
+ * Waits for a change to occur on the given watch source
+ * once.
+ * @returns A promise that resolves when the change occurs.
+ */
+export const waitOne = waitForChange;
 
 export const useStorage = <T>(storage: any & chrome.storage.StorageArea, key: string, initialValue: MaybeRefOrGetter<T>): RemovableRef<T> => {
 
@@ -69,10 +70,10 @@ export const useStorage = <T>(storage: any & chrome.storage.StorageArea, key: st
         }
     }
 
-    return useStorageAsync<T>(key, initialValue, wrapper, { serializer, deep: true, shallow: true });
+    return useStorageAsync<T>(key, initialValue, wrapper, { serializer, shallow: true });
 }
 
-export const onWatchableChange = (watchable: Watchable, onChangeCallback: () => Promise<any>, controls?: { immediate: boolean }) => {
+export const onWatchableChange = ({ waitForChange }: Watchable, onChangeCallback: () => Promise<any>, controls?: { immediate: boolean }) => {
 
     defer(async () => {
         if (controls?.immediate) {
@@ -80,8 +81,66 @@ export const onWatchableChange = (watchable: Watchable, onChangeCallback: () =>
         }
 
         while (true) {
-            await watchable.waitForChange();
+            await waitForChange();
             await onChangeCallback();
         }
     })
+}
+
+export const push = <T>(arr: MaybeRef<T[]>, item: T | T[]) => {
+    //get the reactuve value first
+    const current = get(arr)
+    if (Array.isArray(item)) {
+        //push the items
+        current.push(...item)
+    } else {
+        //push the item
+        current.push(item)
+    }
+    //set the value
+    set(arr, current)
+}
+
+export const remove = <T>(arr: MaybeRef<T[]>, item: T) => {
+    //get the reactuve value first
+    const current = get(arr)
+    //Get all items that are not the item
+    const wo = filter(current, (i) => !isEqual(i, item))
+    //set the value
+    set(arr, wo)
+}
+
+export const useQuery = (query: string) => {
+
+    const get = () => {
+        const args = new URLSearchParams(window.location.search)
+        return args.get(query)
+    }
+
+    const set = (value: string) => {
+        const args = new URLSearchParams(window.location.search);
+        args.set(query, value);
+        (window as any).customHistory.replaceState({}, '', `${window.location.pathname}?${args.toString()}`)
+    }
+
+    const mutable = shallowRef<string | null>(get())
+
+    //Setup custom historu
+    if (!('customHistory' in window)) {
+        (window as any).customHistory = {
+            replaceState: (...args: any[]) => {
+                window.history.replaceState(...args)
+                window.dispatchEvent(new Event('replaceState'))
+            }
+        }
+    }
+
+    //Listen for custom history events and update the mutable state
+    window.addEventListener('replaceState', () => mutable.value = get())
+
+    return{
+        get,
+        set,
+        asRef: mutable
+    }
 }
\ No newline at end of file