package-lock.json

@@ -3541,9 +3541,9 @@
          }
       },
       "idb": {
-         "version": "4.0.3",
+         "version": "3.0.2",
-         "resolved": "https://registry.npmjs.org/idb/-/idb-4.0.3.tgz",
+         "resolved": "https://registry.npmjs.org/idb/-/idb-3.0.2.tgz",
-         "integrity": "sha512-moRlNNe0Gsvp4jAwz5cJ7scjyNTVA/cESKGCobULaljfaKZ970y8NDNCseHdMY+YxNXH58Z1V+7tTyf0GZyKqw=="
+         "integrity": "sha512-+FLa/0sTXqyux0o6C+i2lOR0VoS60LU/jzUo5xjfY6+7sEEgy4Gz1O7yFBXvjd7N0NyIGWIRg8DcQSLEG+VSPw=="
       },
       "ieee754": {
          "version": "1.1.13",

package.json

@@ -18,7 +18,7 @@
       "@hibas123/utils": "^2.1.0",
       "aes-js": "^3.1.2",
       "feather-icons": "^4.22.1",
-      "idb": "^4.0.3",
+      "idb": "3.0.2",
       "js-sha256": "^0.9.0",
       "lodash.clonedeep": "^4.5.0",
       "secure-file-wrapper": "git+https://git.stamm.me/OpenServer/OSSecureFileWrapper.git",

src/components/routes/settings/Settings.tsx

@@ -1,6 +1,6 @@
 import { h } from "preact";
 import { Page } from "../../../page";
-import Theme, { ThemeStates } from "../../../theme";
+import Theme from "../../../theme";
 import Navigation from "../../../navigation";
 import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg";
 
@@ -10,7 +10,6 @@ export default class SettingsPage extends Page<{ state: any }, { vault: string }
     }
 
     render() {
-        let active = Theme.active();
         return <div>
             <header class="header">
                 <a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
@@ -18,18 +17,7 @@ export default class SettingsPage extends Page<{ state: any }, { vault: string }
                 <span></span>
             </header>
             <div class="container">
-                <div className="input-group">
+                <button class="btn" onClick={() => Theme.toggle()}>Toggle Dark Mode</button>
-                    <label>Select Theme: </label>
-                    <select class="inp" onChange={(ev) => Theme.change(Number((ev.target as HTMLSelectElement).value))}>
-                        {Object.keys(ThemeStates)
-                            .filter(e => Number.isNaN(Number(e)))
-                            .map(e => <option selected={ThemeStates[e] === active} value={ThemeStates[e]}>{e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()}</option>)}
-                        {/* <option value={ThemeStates.AUTO}>Auto</option>
-                        <option value={ThemeStates.LIGHT}>Light</option>
-                        <option value={ThemeStates.DARK}>Dark</option> */}
-                    </select>
-                </div>
-                {/* <button class="btn" onClick={() => Theme.toggle()}>Toggle Dark Mode</button> */}
                 <button class="btn" onClick={() => window.navigator.serviceWorker.controller.postMessage("clear_cache")}>Clear cache</button>
             </div>
         </div >;

src/components/routes/vaults/vaults.scss

@@ -3,7 +3,7 @@
    padding: 0.5rem;
    margin-top: 0 !important;
    align-items: flex-end;
-   justify-content: start;
+   justify-content: end;
 
    >span {
       font-size: 1.5rem;

src/helper/indexeddb.ts

@@ -1,12 +1,14 @@
 import { Lock } from "@hibas123/utils";
 
-import { openDB, IDBPDatabase, IDBPTransaction, } from "idb";
+import { DB, openDb, Transaction } from "idb";
 
 export default class IDB {
    initLock = new Lock();
-   db: IDBPDatabase;
+   db: DB;
    constructor(database: string, private stores: string[]) {
-      this.initLock.getLock().then(async l => {
+      let lock = this.initLock.getLock();
+      lock.then(async l => {
+
          let v = localStorage.getItem(database + "_version");
          let version = 0;
          if (v) version = Number(v)
@@ -19,15 +21,12 @@ export default class IDB {
          localStorage.setItem(database + "_version", version.toString());
          localStorage.setItem(database + "_stores", stores.join(","));
 
-         this.db = await openDB(database, version, {
+         this.db = await openDb(database, version, db => {
-            upgrade: (db) => {
             console.log("IndexedDB need update")
-               const check = name => (<any>db.objectStoreNames as DOMStringList).contains ? (<any>db.objectStoreNames as DOMStringList).contains(name) : db.objectStoreNames.find(e => e === name);
             stores.forEach(store => {
-                  if (!check(store))
+               if (!db.objectStoreNames.contains(store))
                   db.createObjectStore(store);
             })
-            },
          })
          console.log("Got DATABASE", this.db)
          l.release();
@@ -49,42 +48,42 @@ export default class IDB {
       return {
          name: name,
          transaction: () => {
-            return <any>this.db.transaction(name, "readwrite") as IDBPTransaction<unknown, string[]>;
+            return this.db.transaction(name, "readwrite")
          },
-         get: async (key: string, transaction?: IDBPTransaction<unknown, string[]>): Promise<T> => {
+         get: async (key: string, transaction?: Transaction): Promise<T> => {
             (await this.initLock.getLock()).release()
             return (transaction || this.db.transaction(name))
                .objectStore(name).get(key);
          },
 
-         getAll: async (transaction?: IDBPTransaction<unknown, string[]>): Promise<T[]> => {
+         getAll: async (transaction?: Transaction): Promise<T[]> => {
             (await this.initLock.getLock()).release()
             return (transaction || this.db.transaction(name))
                .objectStore(name).getAll();
          },
 
-         set: async (key: string, val: T, transaction?: IDBPTransaction<unknown, string[]>) => {
+         set: async (key: string, val: T, transaction?: Transaction) => {
             (await this.initLock.getLock()).release()
             const tx = (transaction || this.db.transaction(name, "readwrite"));
             tx.objectStore(name).put(val, key);
-            return tx.done;
+            return tx.complete;
          },
 
-         delete: async (key: string, transaction?: IDBPTransaction<unknown, string[]>) => {
+         delete: async (key: string, transaction?: Transaction) => {
             (await this.initLock.getLock()).release()
             const tx = (transaction || this.db.transaction(name, "readwrite"));
             tx.objectStore(name).delete(key);
-            return tx.done;
+            return tx.complete;
          },
 
-         clear: async (transaction?: IDBPTransaction<unknown, string[]>) => {
+         clear: async (transaction?: Transaction) => {
             (await this.initLock.getLock()).release()
             const tx = (transaction || this.db.transaction(name, "readwrite"));
             tx.objectStore(name).clear();
-            return tx.done;
+            return tx.complete;
          },
 
-         keys: async (transaction?: IDBPTransaction<unknown, string[]>): Promise<string[]> => {
+         keys: async (transaction?: Transaction): Promise<string[]> => {
             (await this.initLock.getLock()).release()
             const tx = (transaction || this.db.transaction(name));
             const keys: string[] = [];
@@ -92,15 +91,13 @@ export default class IDB {
 
             // This would be store.getAllKeys(), but it isn't supported by Edge or Safari.
             // openKeyCursor isn't supported by Safari, so we fall back
-            store.getAllKeys()
+            (store.iterateKeyCursor || store.iterateCursor).call(store, (cursor: any) => {
+               if (!cursor) return;
+               keys.push(cursor.key);
+               cursor.continue();
+            });
 
-            // (store.iterateKeyCursor || store.iterateCursor).call(store, (cursor: any) => {
+            return tx.complete.then(() => keys);
-            //    if (!cursor) return;
-            //    keys.push(cursor.key);
-            //    cursor.continue();
-            // });
-
-            return tx.done.then(() => keys);
          }
       }
    }

src/index.tsx

@@ -99,25 +99,17 @@ console.log("Dark mode:", Theme.active);
          let err = await Notes.getToken(code)
          if (err) {
             Notifications.sendError("Login failed: " + err)
-            return Notes.login()
+            Notes.login()
          } else {
             window.history.replaceState(null, document.title, "/" + window.location.hash);
          }
       } else {
-         return Notes.login()
+         Notes.login()
       }
    }
 
    await Notes.start();
 
-   if (window.navigator.storage && navigator.storage.persist) {
-      navigator.storage.persisted()
-         .then(has => has ? true : navigator.storage.persist())
-         .then(is => {
-            console.log("Persistant Storage:", is);
-         })
-   }
-
    Navigation.default = VaultsPage as typeof Page;
    Navigation.addPage("/vault", VaultPage as typeof Page)
    Navigation.addPage("/demo", DemoPage as typeof Page)

src/notes.ts

@@ -1,7 +1,7 @@
 import SecureFile, { IFile } from "@hibas123/secure-file-wrapper";
 import { Lock, Observable } from "@hibas123/utils";
 import * as aesjs from "aes-js";
-import { IDBPTransaction } from "idb";
+import { Transaction } from "idb";
 import { sha256 } from "js-sha256";
 import * as uuidv4 from "uuid/v4";
 import * as config from "../config.json";
@@ -480,7 +480,7 @@ class NotesProvider {
       return Decoder.decode(this._decrypt(msg, this.generalEncryption))
    }
 
-   async addop(note_id: string, type: OpLogType, values: { value: Uint8Array, preview: Uint8Array }, date: Date, transaction?: IDBPTransaction<unknown, string[]>) {
+   async addop(note_id: string, type: OpLogType, values: { value: Uint8Array, preview: Uint8Array }, date: Date, transaction?: Transaction) {
       let tx = transaction || this.oplogDB.transaction();
       let oplog = await this.oplogDB.get(note_id, tx);
       if (!oplog) oplog = { logs: [], id: note_id };

src/theme.ts

@@ -1,52 +1,27 @@
 const light = require("!!raw-loader!@hibas123/theme/out/light.css").default;
 const dark = require("!!raw-loader!@hibas123/theme/out/dark.css").default;
 
-export enum ThemeStates {
+let isDark = localStorage.getItem("theme") === "dark";
-    AUTO,
-    LIGHT,
-    DARK
-}
-
-let themeConfig: ThemeStates = Number(localStorage.getItem("theme"));
-if (Number.isNaN(themeConfig))
-    themeConfig = ThemeStates.AUTO;
-
-let isDark = false;
-let mediaIsDark = false;
-
-if (window.matchMedia) {
-    const mediaq = matchMedia("(prefers-color-scheme: dark)");
-    mediaIsDark = mediaq.matches;
-    mediaq.onchange = ev => {
-        mediaIsDark = ev.matches;
-        apply();
-    }
-    console.log(mediaq);
-}
 
 
 let styleElm: HTMLStyleElement;
-function apply(force?: boolean) {
+
-    let shouldDark = themeConfig === ThemeStates.AUTO ? mediaIsDark : themeConfig === ThemeStates.DARK;
+function apply() {
-    if (force || shouldDark !== isDark) {
     if (styleElm) styleElm.remove();
     styleElm = document.createElement("style");
     document.head.appendChild(styleElm);
-        styleElm.innerHTML = shouldDark ? dark : light;
+    styleElm.innerHTML = isDark ? dark : light;
-        isDark = shouldDark;
 }
-}
+apply();
-apply(true);
 
-
+function toggle() {
-function change(state: ThemeStates) {
+    isDark = !isDark;
-    themeConfig = state;
+    localStorage.setItem("theme", isDark ? "dark" : "light");
-    localStorage.setItem("theme", String(themeConfig));
     apply();
 }
 
 export default {
-    active: () => themeConfig,
+    active: () => isDark,
-    change: (state: ThemeStates) => change(state)
+    toggle: () => toggle()
 }