From c7d89a598d227dbcfb6cb90c640bf6f6e3e70b82 Mon Sep 17 00:00:00 2001
From: cupcakearmy <hi@nicco.io>
Date: Sat, 19 Sep 2020 01:58:28 +0200
Subject: [PATCH] options now on svelte too

---
 src/options/App.svelte | 54 ++++++++++++++++++++++++++++++++++++++++++
 src/options/main.css   |  7 ------
 src/shared/index.html  | 18 ++++++++++++++
 src/shared/main.js     |  3 +++
 4 files changed, 75 insertions(+), 7 deletions(-)
 create mode 100644 src/options/App.svelte
 delete mode 100644 src/options/main.css
 create mode 100644 src/shared/index.html
 create mode 100644 src/shared/main.js
diff --git a/src/options/App.svelte b/src/options/App.svelte
new file mode 100644
index 0000000..eec6179
--- /dev/null
+++ 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>
diff --git a/src/options/main.css b/src/options/main.css
deleted file mode 100644
index 6383a63..0000000
--- a/src/options/main.css
+++ /dev/null
@@ -1,7 +0,0 @@
-main {
-  padding: 2em 1em;
-}
-
-form {
-  max-width: 25em;
-}
diff --git a/src/shared/index.html b/src/shared/index.html
new file mode 100644
index 0000000..5db7542
--- /dev/null
+++ 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>
diff --git a/src/shared/main.js b/src/shared/main.js
new file mode 100644
index 0000000..ab54b46
--- /dev/null
+++ b/src/shared/main.js
@@ -0,0 +1,3 @@
+import App from './App.svelte'
+
+new App({ target: window.document.getElementById('root') })
