options now on svelte too

2020-09-19 01:58:28 +02:00 · 2020-09-19 01:58:28 +02:00 · c7d89a598d
parent 1bd1913145
commit c7d89a598d
4 changed files with 75 additions and 7 deletions
--- a/src/options/App.svelte
+++ b/src/options/App.svelte
@ -0,0 +1,54 @@
+<script>
+  import { onMount } from 'svelte'
+  import browser from 'webextension-polyfill'
+
+  import { dashboard } from '../shared/utils'
+
+  const DEFAULT = {
+    retention: 90,
+  }
+
+  let settings = DEFAULT
+
+  onMount(async () => {
+    load()
+  })
+
+  async function load() {
+    settings = {
+      ...DEFAULT,
+      ...(await browser.storage.local.get()),
+    }
+  }
+
+  function save() {
+    return browser.storage.local.set(settings)
+  }
+
+  async function reset() {
+    await browser.storage.local.clear()
+    await load()
+  }
+</script>
+
+<main class="p-4">
+  <a href={dashboard} target="_blank"><button class="btn btn-primary btn-lg">Dashboard</button></a>
+
+  <form class="max-w-sm mt-5" on:submit|preventDefault={save}>
+    <div class="form-group">
+      <label class="form-label">
+        Retention <small>(Days)</small>
+        <input
+          id="retention"
+          class="form-input"
+          type="number"
+          min="3"
+          max="365"
+          step="1"
+          bind:value={settings.retention} />
+      </label>
+      <button type="reset" class="btn" on:click={reset}>Reset</button>
+      <button type="submit" class="btn btn-primary">Save</button>
+    </div>
+  </form>
+</main>
--- a/src/options/main.css
+++ b/src/options/main.css
@ -1,7 +0,0 @@
-main {
-  padding: 2em 1em;
-}
-
-form {
-  max-width: 25em;
-}
--- a/src/shared/index.html
+++ b/src/shared/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link href="../../node_modules/spectre.css/dist/spectre.min.css" rel="stylesheet" />
+    <link href="../../node_modules/tailwindcss/dist/tailwind.css" rel="stylesheet" />
+    <style>
+      #root {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root" />
+    <script src="./main.js"></script>
+  </body>
+</html>
--- a/src/shared/main.js
+++ b/src/shared/main.js
@ -0,0 +1,3 @@
+import App from './App.svelte'
+
+new App({ target: window.document.getElementById('root') })