Restructuring

package.json

@@ -4,48 +4,34 @@
    "description": "",
    "main": "index.js",
    "scripts": {
-      "build": "webpack --mode=production",
-      "watch": "webpack --mode=development --watch",
-      "start": "webpack-dev-server --mode=production",
-      "start:prod": "webpack-dev-server --mode=production",
-      "start:dev": "webpack-dev-server --mode=development"
+      "build": "parcel build src/index.html",
+      "dev": "parcel src/index.html"
    },
    "author": "Fabian Stamm <dev@fabianstamm.de>",
    "license": "MIT",
+   "browserslist": [
+      "last 2 Chrome versions"
+   ],
    "dependencies": {
-      "@hibas123/secure-file-wrapper": "^2.5.0",
-      "@hibas123/theme": "^1.0.5",
-      "@hibas123/utils": "^2.1.0",
+      "@hibas123/secure-file-wrapper": "^2.5.1",
+      "@hibas123/theme": "^1.2.14",
+      "@hibas123/utils": "^2.2.3",
       "aes-js": "^3.1.2",
-      "feather-icons": "^4.22.1",
-      "idb": "3.0.2",
+      "feather-icons": "^4.26.0",
+      "idb": "^4.0.3",
       "js-sha256": "^0.9.0",
       "lodash.clonedeep": "^4.5.0",
-      "secure-file-wrapper": "git+https://git.stamm.me/OpenServer/OSSecureFileWrapper.git",
-      "uuid": "^3.3.2"
+      "parcel": "^1.12.4",
+      "uuid": "^3.4.0"
    },
    "devDependencies": {
       "@types/lodash.clonedeep": "^4.5.6",
       "@types/uikit": "^2.27.7",
-      "@types/uuid": "^3.4.5",
-      "copy-webpack-plugin": "^5.0.3",
-      "css-loader": "^3.0.0",
-      "file-loader": "^4.0.0",
-      "html-webpack-plugin": "^3.2.0",
-      "mini-css-extract-plugin": "^0.7.0",
-      "node-sass": "^4.12.0",
-      "preact": "^8.3.1",
-      "preact-svg-loader": "^0.2.1",
-      "raw-loader": "^3.0.0",
-      "sass-loader": "^7.1.0",
-      "style-loader": "^0.23.1",
-      "ts-loader": "^6.0.4",
-      "typescript": "^3.5.2",
-      "webpack": "^4.35.2",
-      "webpack-bundle-analyzer": "^3.3.2",
-      "webpack-cli": "^3.3.5",
-      "webpack-dev-server": "^3.7.2",
-      "webpack-visualizer-plugin": "^0.1.11",
-      "worker-loader": "^2.0.0"
+      "@types/uuid": "^3.4.7",
+      "node-sass": "^4.13.1",
+      "parcel-bundler": "^1.12.4",
+      "preact": "^10.3.1",
+      "ts-loader": "^6.2.1",
+      "typescript": "^3.7.5"
    }
 }

src/Views/Settings/Settings.tsx

@@ -0,0 +1,37 @@
+import { h } from "preact";
+import { Page } from "../../page";
+import Theme, { ThemeStates } from "../../theme";
+import Navigation from "../../navigation";
+import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg";
+
+export default class SettingsPage extends Page<{ state: any }, { vault: string }> {
+    componentWillMount() {
+
+    }
+
+    render() {
+        let active = Theme.active();
+        return <div>
+            <header class="header">
+                <a class="header-icon-button" onClick={() => history.back()}><img src={ArrowLeft} height={undefined} width={undefined} /></a>
+                <h3 style="display:inline" class="header-title" onClick={() => Navigation.setPage("/")}>Settings</h3>
+                <span></span>
+            </header>
+            <div class="container">
+                <div className="input-group">
+                    <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("message")}>Clear cache</button>
+            </div>
+        </div >;
+    }
+}

src/Views/Share/Share.tsx

@@ -1,7 +1,7 @@
 import { h } from "preact";
-import { Page } from "../../../page";
-import VaultsPage from "../vaults/Vaults";
-import Navigation from "../../../navigation";
+import { Page } from "../../page";
+import VaultsPage from "../Vaults/Vaults";
+import Navigation from "../../navigation";
 
 export default class SharePage extends Page<{ state: any }, { vault: string }> {
     text: string;

src/Views/Vault/Entry.tsx

@@ -1,12 +1,12 @@
 import { h, Component } from "preact"
-import { IVault, ViewNote } from "../../../notes";
+import { IVault, ViewNote } from "../../notes";
 import Trash from "feather-icons/dist/icons/trash-2.svg"
 import X from "feather-icons/dist/icons/x.svg"
 import Save from "feather-icons/dist/icons/save.svg"
 
-import Navigation from "../../../navigation";
-import { YesNoModal } from "../../modals/YesNoModal";
-import Notifications, { MessageType } from "../../../notifications";
+import Navigation from "../../navigation";
+import { YesNoModal } from "../../components/modals/YesNoModal";
+import Notifications, { MessageType } from "../../notifications";
 
 const minRows = 3;
 export default class EntryComponent extends Component<{ vault: Promise<IVault>, id: string | undefined, note: string | undefined }, { title: string, changed: boolean }> {
@@ -166,10 +166,10 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
 
       return <div>
          <header class="header">
-            <a class="header-icon-button" onClick={() => this.exitHandler()}><X height={undefined} width={undefined} /></a>
-            {this.state.changed ? <a class="header-icon-button" style="margin-left: 0.5em;" onClick={() => save_handler()}><Save height={undefined} width={undefined} /></a> : undefined}
+            <a class="header-icon-button" onClick={() => this.exitHandler()}><img src={X} height={undefined} width={undefined} /></a>
+            {this.state.changed ? <a class="header-icon-button" style="margin-left: 0.5em;" onClick={() => save_handler()}><img src={Save} height={undefined} width={undefined} /></a> : undefined}
             <h3 style="display:inline" class="button header-title">{this.state.title}</h3>
-            <a class="header-icon-button" onClick={() => delete_handler()}><Trash height={undefined} width={undefined} /></a>
+            <a class="header-icon-button" onClick={() => delete_handler()}><img src={Trash} height={undefined} width={undefined} /></a>
          </header>
          <div class="container">
             <textarea

src/Views/Vault/EntryList.tsx

@@ -1,11 +1,11 @@
-import { h, Component } from "preact"
-import Notes, { IVault, BaseNote } from "../../../notes";
-import AddButton from "../../AddButton";
-import Navigation from "../../../navigation";
+import { h, Component, JSX } from "preact"
+import Notes, { IVault, BaseNote } from "../../notes";
+import AddButton from "../../components/AddButton";
+import Navigation from "../../navigation";
 import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg"
 import Search from "feather-icons/dist/icons/search.svg"
-import ContextMenu from "../../context";
-import Notifications from "../../../notifications";
+import ContextMenu from "../../components/context";
+import Notifications from "../../notifications";
 import { Observable, Lock } from "@hibas123/utils";
 
 
@@ -266,7 +266,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
       return <div>
          {this.state.context}
          <header class="header">
-            <a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
+            <a class="header-icon-button" onClick={() => history.back()}><img src={ArrowLeft} height={undefined} width={undefined} /></a>
             <h3 style="display:inline" class="header-title" onClick={() => Navigation.setPage("/")}>{this.vault ? this.vault.name : ""}</h3>
             <span></span>
             {/* <a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a> */}
@@ -276,7 +276,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
             <div style="display:flex;">
                <input class="inp" type="text" style="width: 100%; height: 40px;" onKeyUp={this.searchChanged} ref={elm => this.searchInput = elm} />
                <button class="btn btn-primary" style="padding: 5px 10px; margin: 0; height: 40px; width: 40px;">
-                  <Search />
+                  <img src={Search} />
                </button>
             </div>
 

src/Views/Vault/Vault.tsx

@@ -1,7 +1,7 @@
 import { h } from "preact"
-import { Page } from "../../../page";
-import Notes, { IVault, BaseNote } from "../../../notes";
-import Navigation from "../../../navigation";
+import { Page } from "../../page";
+import Notes, { IVault, BaseNote } from "../../notes";
+import Navigation from "../../navigation";
 import EntryComponent from "./Entry";
 import EntryList from "./EntryList";
 

src/Views/Vaults/Vaults.tsx

@@ -1,16 +1,16 @@
-import { h } from "preact"
-import { Page } from "../../../page";
-import Notes, { VaultList } from "../../../notes";
+import { h, JSX } from "preact"
+import { Page } from "../../page";
+import Notes, { VaultList } from "../../notes";
 import "./vaults.scss"
 import Lock from "feather-icons/dist/icons/lock.svg";
 import Unlock from "feather-icons/dist/icons/unlock.svg";
 import Settings from "feather-icons/dist/icons/settings.svg"
-import Navigation from "../../../navigation";
-import { InputModal } from "../../modals/InputModal";
-import { YesNoModal } from "../../modals/YesNoModal";
-import AddButton from "../../AddButton";
-import ContextMenu from "../../context";
-import Notifications from "../../../notifications";
+import Navigation from "../../navigation";
+import { InputModal } from "../../components/modals/InputModal";
+import { YesNoModal } from "../../components/modals/YesNoModal";
+import AddButton from "../../components/AddButton";
+import ContextMenu from "../../components/context";
+import Notifications from "../../notifications";
 
 export interface VaultsProps {
    state: any;
@@ -206,9 +206,13 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
    }
 
    render() {
+      // <Unlock height={undefined} width={undefined} />}
+      // <Lock height={undefined} width={undefined} />
       let elms = this.state.vaults.map(vault => {
          return <li class="vaults_vault" onClick={() => this.openVault(vault)} onContextMenu={(evt) => this.onContext(evt, vault)}>
-            {vault.encrypted ? <Lock height={undefined} width={undefined} /> : <Unlock height={undefined} width={undefined} />}
+            {vault.encrypted ? <img src={Lock} /> : <img src={Unlock} />}
+
+
             <span>
                {vault.name}
             </span>
@@ -221,7 +225,10 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
          <header class="header">
             <span></span>
             <h3 style="display:inline" onClick={() => Navigation.setPage("/")}>{this.props.selectVault ? "Select Vault for share" : "Your vaults:"}</h3>
-            <a class="header-icon-button" onClick={() => Navigation.setPage("/settings")}><Settings height={undefined} width={undefined} /></a>
+            <a class="header-icon-button" onClick={() => Navigation.setPage("/settings")}>
+               <img src={Settings} />
+               {/* <Settings height={undefined} width={undefined} /> */}
+            </a>
          </header>
          <AddButton onClick={() => this.addButtonClick()} />
          <div class="container">

src/Views/Vaults/vaults.scss

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

src/components/AddButton.tsx

@@ -7,6 +7,8 @@ export default function AddButton({ onClick }: { onClick: () => void }) {
       class="fab btn-primary"
       onClick={() => onClick()}
    >
-      <Plus width={undefined} height={undefined} />
+      <img src={Plus} />
    </button>
 }
+
+// <Plus width={undefined} height={undefined} />

src/components/Footer.tsx

@@ -58,7 +58,12 @@ export class Footer extends Component<{}, { synced: boolean, syncing: boolean }>
         }
         return <footer class="elv-8">
             <span>
-                <span class={extrac} ><a onClick={() => this.onSyncClick()} ><Refresh style="height: 1em; width: 1em;"></Refresh></a></span>
+                <span class={extrac} >
+                    <a onClick={() => this.onSyncClick()} >
+                        <img src={Refresh} style="height: 1em; width: 1em;" />
+                        {/* <Refresh style="height: 1em; width: 1em;"></Refresh> */}
+                    </a>
+                </span>
                 <span style={"margin-left: 8px; color:" + color}>{text}</span>
             </span>
             <span>

src/components/Routing.tsx

@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, JSX } from 'preact';
 import Navigation from '../navigation';
 import "./routing.scss"
 

src/components/context.tsx

@@ -1,4 +1,4 @@
-import { h } from "preact";
+import { h, JSX } from "preact";
 import "./context.scss";
 
 export default function ContextMenu({ children, event }: { children: JSX.Element | JSX.Element[], event: MouseEvent }) {

src/components/modals/Modal.tsx

@@ -1,5 +1,5 @@
 import { Observable } from "@hibas123/utils";
-import { h, Component } from "preact";
+import { h, Component, JSX } from "preact";
 import CloseIcon from "feather-icons/dist/icons/x.svg";
 
 export default abstract class Modal<T> {
@@ -70,7 +70,8 @@ export default abstract class Modal<T> {
                   <h3>{this.props.modal.title}</h3>
                   {/* <div> */}
                   {!this.props.modal.noClose ?
-                     <CloseIcon onClick={() => this.props.modal.result(null)} width={undefined} height={undefined} />
+                     <img src={CloseIcon} onClick={() => this.props.modal.result(null)} />
+                     // <CloseIcon onClick={() => this.props.modal.result(null)} width={undefined} height={undefined} />
                      : undefined
                   }
                   {/* </div> */}

src/components/routes/settings/Settings.tsx

@@ -1,25 +0,0 @@
-import { h } from "preact";
-import { Page } from "../../../page";
-import Theme from "../../../theme";
-import Navigation from "../../../navigation";
-import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg";
-
-export default class SettingsPage extends Page<{ state: any }, { vault: string }> {
-    componentWillMount() {
-
-    }
-
-    render() {
-        return <div>
-            <header class="header">
-                <a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
-                <h3 style="display:inline" class="header-title" onClick={() => Navigation.setPage("/")}>Settings</h3>
-                <span></span>
-            </header>
-            <div class="container">
-                <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/encoding.js

@@ -8,13 +8,6 @@
 (function (global) {
   'use strict';
 
-  // If we're in node require encoding-indexes and attach it to the global.
-  if (typeof module !== "undefined" && module.exports &&
-    !global["encoding-indexes"]) {
-    global["encoding-indexes"] =
-      require("./encoding-indexes.js")["encoding-indexes"];
-  }
-
   //
   // Utilities
   //
@@ -1093,7 +1086,8 @@
     // BOM seen flag.
     if (!this._do_not_flush) {
       this._decoder = decoders[this._encoding.name]({
-        fatal: this._error_mode === 'fatal'});
+        fatal: this._error_mode === 'fatal'
+      });
       this._BOMseen = false;
     }
 
@@ -1277,7 +1271,8 @@
     // the input is a USVString so streaming is not necessary.
     if (!this._do_not_flush)
       this._encoder = encoders[this._encoding.name]({
-        fatal: this._fatal === 'fatal'});
+        fatal: this._fatal === 'fatal'
+      });
     this._do_not_flush = Boolean(options['stream']);
 
     // 1. Convert input to a stream.

src/helper/indexeddb.ts

@@ -1,14 +1,12 @@
 import { Lock } from "@hibas123/utils";
 
-import { DB, openDb, Transaction } from "idb";
+import { openDB, IDBPDatabase, IDBPTransaction, } from "idb";
 
 export default class IDB {
    initLock = new Lock();
-   db: DB;
+   db: IDBPDatabase;
    constructor(database: string, private stores: string[]) {
-      let lock = this.initLock.getLock();
-      lock.then(async l => {
-
+      this.initLock.getLock().then(async l => {
          let v = localStorage.getItem(database + "_version");
          let version = 0;
          if (v) version = Number(v)
@@ -21,12 +19,15 @@ export default class IDB {
          localStorage.setItem(database + "_version", version.toString());
          localStorage.setItem(database + "_stores", stores.join(","));
 
-         this.db = await openDb(database, version, db => {
+         this.db = await openDB(database, version, {
+            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 (!db.objectStoreNames.contains(store))
+                  if (!check(store))
                      db.createObjectStore(store);
                })
+            },
          })
          console.log("Got DATABASE", this.db)
          l.release();
@@ -48,42 +49,42 @@ export default class IDB {
       return {
          name: name,
          transaction: () => {
-            return this.db.transaction(name, "readwrite")
+            return <any>this.db.transaction(name, "readwrite") as IDBPTransaction<unknown, string[]>;
          },
-         get: async (key: string, transaction?: Transaction): Promise<T> => {
+         get: async (key: string, transaction?: IDBPTransaction<unknown, string[]>): Promise<T> => {
             (await this.initLock.getLock()).release()
             return (transaction || this.db.transaction(name))
                .objectStore(name).get(key);
          },
 
-         getAll: async (transaction?: Transaction): Promise<T[]> => {
+         getAll: async (transaction?: IDBPTransaction<unknown, string[]>): Promise<T[]> => {
             (await this.initLock.getLock()).release()
             return (transaction || this.db.transaction(name))
                .objectStore(name).getAll();
          },
 
-         set: async (key: string, val: T, transaction?: Transaction) => {
+         set: async (key: string, val: T, transaction?: IDBPTransaction<unknown, string[]>) => {
             (await this.initLock.getLock()).release()
             const tx = (transaction || this.db.transaction(name, "readwrite"));
             tx.objectStore(name).put(val, key);
-            return tx.complete;
+            return tx.done;
          },
 
-         delete: async (key: string, transaction?: Transaction) => {
+         delete: async (key: string, transaction?: IDBPTransaction<unknown, string[]>) => {
             (await this.initLock.getLock()).release()
             const tx = (transaction || this.db.transaction(name, "readwrite"));
             tx.objectStore(name).delete(key);
-            return tx.complete;
+            return tx.done;
          },
 
-         clear: async (transaction?: Transaction) => {
+         clear: async (transaction?: IDBPTransaction<unknown, string[]>) => {
             (await this.initLock.getLock()).release()
             const tx = (transaction || this.db.transaction(name, "readwrite"));
             tx.objectStore(name).clear();
-            return tx.complete;
+            return tx.done;
          },
 
-         keys: async (transaction?: Transaction): Promise<string[]> => {
+         keys: async (transaction?: IDBPTransaction<unknown, string[]>): Promise<string[]> => {
             (await this.initLock.getLock()).release()
             const tx = (transaction || this.db.transaction(name));
             const keys: string[] = [];
@@ -91,13 +92,15 @@ 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.iterateKeyCursor || store.iterateCursor).call(store, (cursor: any) => {
-               if (!cursor) return;
-               keys.push(cursor.key);
-               cursor.continue();
-            });
+            store.getAllKeys()
 
-            return tx.complete.then(() => keys);
+            // (store.iterateKeyCursor || store.iterateCursor).call(store, (cursor: any) => {
+            //    if (!cursor) return;
+            //    keys.push(cursor.key);
+            //    cursor.continue();
+            // });
+
+            return tx.done.then(() => keys);
          }
       }
    }

src/index.html

@@ -6,7 +6,7 @@
    <meta charset="utf8" />
    <meta name="Description" content="Notes app">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
-   <link rel="manifest" href="/manifest.json">
+   <link rel="manifest" href="./manifest.json">
    <!-- <link rel="shortcut icon" href="/public/icon-72x72.png"> -->
 
    <!-- Add to home screen for Safari on iOS -->
@@ -15,9 +15,9 @@
    <meta name="apple-mobile-web-app-title" content="Secure Notes">
 
 
-   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1E88E5">
-   <script src="encoding.js"></script>
+   <!-- <link rel="apple-touch-icon" sizes="180x180" href="../public/apple-touch-icon.png"> -->
+   <!-- <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1E88E5"> -->
+   <script src="./encoding.js"></script>
    <meta name="msapplication-TileColor" content="#1E88E5">
    <meta name="theme-color" content="#1E88E5">
 </head>
@@ -45,7 +45,7 @@
             console.warn("Disabling Service Worker in debug mode!")
          } else {
             // Register the ServiceWorker
-            navigator.serviceWorker.register('/serviceworker.js', {
+            navigator.serviceWorker.register('./serviceworker.ts', {
                scope: '/'
             }).then(function (reg) {
                console.log('Service worker has been registered for scope:' + reg.scope);
@@ -56,6 +56,7 @@
          }
       }
    </script>
+   <script src="./index.tsx"></script>
 </body>
 
 </html>

src/index.scss

@@ -1,53 +1,61 @@
 @import "./vars.scss";
 
+body {
+   overscroll-behavior-y: contain;
+}
 
 // html {
 //    min-height: 100%;
 //    display: flex;
 // }
 
-// $header-margin: .5em;
+$header-margin: .5em;
 // $header-icon-size: calc(1.5rem * 1);
 // $header-icon-size: 100%;
 
-// header {
-//    display: flex;
-//    justify-content: space-between;
-//    margin-bottom: $header-margin;
-//    align-content: center;
-//    padding: 0.75em;
-//    border-bottom: solid var(--border-color) 1px;
-//    background-color: var(--primary);
+header {
+   display: flex;
+   justify-content: space-between;
+   margin-bottom: $header-margin;
+   align-content: center;
+   padding: 0.75em;
+   border-bottom: solid var(--border-color) 1px;
+   background-color: var(--primary);
 
-//    >* {
-//       margin: 0;
-//       color: white;
-//       background: var(--primary);
-//    }
+   >* {
+      margin: 0;
+      color: white;
+      background: var(--primary);
+   }
 
-//    >.header-title {
-//       overflow: hidden;
-//       text-overflow: ellipsis;
-//       text-overflow: ellipsis;
-//       white-space: nowrap;
-//       overflow: hidden;
-//       flex-grow: 1;
-//       margin: 0 1em;
-//    }
+   >.header-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      flex-grow: 1;
+      margin: 0 1em;
+   }
 
-//    .header-icon-button {
-//       display: block;
-//       margin-top: auto;
-//       margin-bottom: auto;
+   .header-icon-button {
+      display: block;
+      margin-top: auto;
+      margin-bottom: auto;
       // min-width: $header-icon-size;
 
       // >svg {
       //    height: $header-icon-size;
       //    width: $header-icon-size;
       // }
-//    }
+   }
 
-// }
+}
+
+
+body {
+  overscroll-behavior-y: contain;
+}
 
 .def-shadow {
    box-shadow: 0px 5px 8px 2px rgba(66, 66, 66, 0.53);

src/index.tsx

@@ -72,16 +72,16 @@ import "@hibas123/theme/out/base.css"
 
 import "./index.scss";
 import Navigation from './navigation';
-import VaultsPage from './components/routes/vaults/Vaults';
+import VaultsPage from './Views/Vaults/Vaults';
 import { Page } from './page';
 
 import Notes from "./notes"
 import DemoPage from './components/demo';
-import VaultPage from './components/routes/vault/Vault';
-import SharePage from './components/routes/share/Share';
+import VaultPage from './Views/Vault/Vault';
+import SharePage from './Views/Share/Share';
 import Notifications from './notifications';
-import Error404Page from './components/routes/404';
-import SettingsPage from './components/routes/settings/Settings';
+import Error404Page from './Views/404';
+import SettingsPage from './Views/Settings/Settings';
 window.debug.notes = Notes;
 
 
@@ -99,17 +99,25 @@ console.log("Dark mode:", Theme.active);
          let err = await Notes.getToken(code)
          if (err) {
             Notifications.sendError("Login failed: " + err)
-            Notes.login()
+            return Notes.login()
          } else {
             window.history.replaceState(null, document.title, "/" + window.location.hash);
          }
       } else {
-         Notes.login()
+         return 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/navigation.ts

@@ -1,6 +1,6 @@
 import { Observable } from "@hibas123/utils";
 import { Page, PageProps } from "./page";
-import { h, VNode } from "preact";
+import { h, VNode, JSX } from "preact";
 
 function serializQuery(obj: any) {
    var str = [];

src/notes.ts

@@ -1,9 +1,9 @@
 import SecureFile, { IFile } from "@hibas123/secure-file-wrapper";
 import { Lock, Observable } from "@hibas123/utils";
 import * as aesjs from "aes-js";
-import { Transaction } from "idb";
+import { IDBPTransaction } from "idb";
 import { sha256 } from "js-sha256";
-import * as uuidv4 from "uuid/v4";
+import uuidv4 from "uuid/v4";
 import * as config from "../config.json";
 import * as b64 from "./helper/base64";
 import IDB from "./helper/indexeddb";
@@ -39,6 +39,7 @@ export interface ViewNote extends BaseNote {
 }
 
 import clonedeep = require("lodash.clonedeep");
+import uuid = require("uuid");
 
 const Encoder = new TextEncoder();
 const Decoder = new TextDecoder();
@@ -81,6 +82,7 @@ export interface IVault {
    saveNote(note: ViewNote, date?: Date): Promise<void>;
    getNote(id: string): Promise<ViewNote>;
    deleteNote(id: string): Promise<void>;
+   // type: string; //Defines type of plugin, that is required to handle this vault
 }
 
 const awaitTimeout = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
@@ -420,6 +422,7 @@ class NotesProvider {
    }
 
    public async createVault(name: string, key?: Uint8Array) {
+      // console.log(uuidv4, uuid);
       let vault: DBNote = {
          __value: this.encrypt("__BASELINE__", key),
          _id: uuidv4(),
@@ -480,7 +483,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?: Transaction) {
+   async addop(note_id: string, type: OpLogType, values: { value: Uint8Array, preview: Uint8Array }, date: Date, transaction?: IDBPTransaction<unknown, string[]>) {
       let tx = transaction || this.oplogDB.transaction();
       let oplog = await this.oplogDB.get(note_id, tx);
       if (!oplog) oplog = { logs: [], id: note_id };

src/serviceworker.ts

@@ -27,20 +27,9 @@ self.addEventListener('activate', (event) => {
 });
 
 self.addEventListener('message', (event) => {
-    if (event.data === "clear_cache") {
     log("Clearing cache");
     caches.delete(CACHE);
     event.waitUntil(precache());
-    }
-
-    if (event.data === "update_index") {
-        log("Updating index");
-        event.waitUntil(caches.open(CACHE).then((cache) => {
-            return cache.addAll(["/", "/index.html"]).then(() => {
-                event.ports[0].postMessage("reload");
-            });
-        }))
-    }
 });
 
 var Types;

src/theme.ts

@@ -1,27 +1,54 @@
-const light = require("!!raw-loader!@hibas123/theme/out/light.css").default;
-const dark = require("!!raw-loader!@hibas123/theme/out/dark.css").default;
+import { readFileSync } from "fs";
 
-let isDark = localStorage.getItem("theme") === "dark";
+const light = readFileSync("./node_modules/@hibas123/theme/out/light.css", "utf8")
+const dark = readFileSync("./node_modules/@hibas123/theme/out/dark.css", "utf8")
+
+export enum ThemeStates {
+    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() {
+function apply(force?: boolean) {
+    let shouldDark = themeConfig === ThemeStates.AUTO ? mediaIsDark : themeConfig === ThemeStates.DARK;
+    if (force || shouldDark !== isDark) {
         if (styleElm) styleElm.remove();
         styleElm = document.createElement("style");
         document.head.appendChild(styleElm);
-    styleElm.innerHTML = isDark ? dark : light;
+        styleElm.innerHTML = shouldDark ? dark : light;
+        isDark = shouldDark;
     }
-apply();
+}
+apply(true);
 
-function toggle() {
-    isDark = !isDark;
-    localStorage.setItem("theme", isDark ? "dark" : "light");
+
+function change(state: ThemeStates) {
+    themeConfig = state;
+    localStorage.setItem("theme", String(themeConfig));
     apply();
 }
 
 export default {
-    active: () => isDark,
-    toggle: () => toggle()
+    active: () => themeConfig,
+    change: (state: ThemeStates) => change(state)
 }
 

src/types.d.ts

@@ -1,10 +1,15 @@
+// declare module "*.svg" {
+//     const SVG: (props: {
+//         width?: number | undefined
+//         height?: number | undefined
+//         onClick?: (evt: MouseEvent) => void;
+//         style?: string;
+//     }) => JSX.Element;
+//     export default SVG;
+// }
+
 declare module "*.svg" {
-    const SVG: (props: {
-        width?: number | undefined
-        height?: number | undefined
-        onClick?: (evt: MouseEvent) => void;
-        style?: string;
-    }) => JSX.Element;
+    const SVG: string;
     export default SVG;
 }
 

tsconfig.json

@@ -13,7 +13,8 @@
          "dom",
          "esnext"
       ],
-      "resolveJsonModule": true
+      "resolveJsonModule": true,
+      "esModuleInterop": true
    },
    "include": [
       "./src/types.d.ts",