cleanup

src/dashboard/components/DateInput.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { onMount } from 'svelte'
   import dayjs from 'dayjs'
 
   const format = 'YYYY-MM-DD'
@@ -16,10 +15,10 @@
   $: output(internal)
 </script>
 
+<input class="form-input input-sm" type="date" bind:value={internal} {name} />
+
 <style>
   input {
     width: 7rem !important;
   }
 </style>
-
-<input class="form-input input-sm" type="date" bind:value={internal} {name} />

src/dashboard/components/Dev.svelte

@@ -3,7 +3,7 @@
   import day from 'dayjs'
   import { range, random } from 'lodash'
 
-  import { insertLog, normalizeTimestamp, DB, clear as clearDB } from '../../shared/db'
+  import { insertLog, normalizeTimestamp, clear as clearDB } from '../../shared/db'
 
   let loading = false
 

src/dashboard/components/FileUpload.svelte

@@ -1,6 +1,4 @@
 <script>
-  import { isEqual } from 'lodash'
-
   let text = 'Select File'
 
   export let value = undefined
@@ -30,6 +28,11 @@
   }
 </script>
 
+<label class="btn">
+  {#if error}Invalid file{:else}{text}{/if}
+  <input bind:this={input} on:change={validate} class="input" accept="application/json" type="file" />
+</label>
+
 <style>
   label {
     width: 18em;
@@ -40,8 +43,3 @@
     display: none;
   }
 </style>
-
-<label class="btn">
-  {#if error}Invalid file{:else}{text}{/if}
-  <input bind:this={input} on:change={validate} class="input" accept="application/json" type="file" />
-</label>

src/dashboard/components/Options.svelte

@@ -1,93 +0,0 @@
-<script>
-  import { onMount } from 'svelte'
-  import browser from 'webextension-polyfill'
-  import { saveAs } from 'file-saver'
-  import dj from 'dayjs'
-
-  import FileUpload from './FileUpload.svelte'
-
-  import { dump as dumpDB, load as loadDB, clear as clearDB, validate } from '../../shared/db'
-  import { longPress } from '../../shared/lib'
-
-  const DEFAULT = {
-    retention: 90,
-  }
-
-  let settings = DEFAULT
-  let uploaded
-  let disabled = true
-
-  async function read() {
-    settings = {
-      ...DEFAULT,
-      ...(await browser.storage.local.get()),
-    }
-  }
-
-  function write() {
-    return browser.storage.local.set(settings)
-  }
-
-  async function reset() {
-    await browser.storage.local.clear()
-    await read()
-  }
-
-  async function dump() {
-    const data = await dumpDB()
-    const blob = new Blob([JSON.stringify(data)], { type: 'application/json;charset=utf-8' })
-    const filename = `Ora [${dj().format('YYYY-MM-DD HH-mm-ss')}].json`
-    saveAs(blob, filename)
-  }
-
-  async function clear() {
-    await clearDB()
-    alert('Done')
-  }
-
-  async function load() {
-    try {
-      await loadDB(uploaded)
-      alert('Imported')
-    } catch {
-      alert('Error importing')
-    }
-  }
-
-  $: {
-    disabled = !validate(uploaded)
-  }
-
-  onMount(read)
-</script>
-
-<h2 class="mt-8 text-2xl">Settings</h2>
-<form class="mt-2" on:submit|preventDefault={write}>
-  <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>
-
-    <div class="mt-2">
-      <button type="reset" class="btn" on:click={reset}>Reset</button>
-      <button type="submit" class="btn btn-primary">Save</button>
-    </div>
-  </div>
-</form>
-<h2 class="mt-8 text-2xl">Your Data</h2>
-<div class="mt-2">
-  <FileUpload bind:value={uploaded} />
-  <button class="btn btn-primary" on:click={load} {disabled}>Import</button>
-  <button class="btn btn-primary" on:click={dump}>Export</button>
-  <button class="btn btn-error tooltip" data-tooltip="Hold to delete" use:longPress={clear}>Delete all data</button>
-</div>

src/dashboard/components/RangeChooser.svelte

@@ -23,12 +23,6 @@
   onMount(() => set('day', 0)())
 </script>
 
-<style>
-  .spacer {
-    width: 0.5em;
-  }
-</style>
-
 <div class="flex items-center">
   <div class="btn-group">
     <button class="btn btn-sm" on:click={all}>All</button>
@@ -43,3 +37,9 @@
     <DateInput bind:date={end} />
   </div>
 </div>
+
+<style>
+  .spacer {
+    width: 0.5em;
+  }
+</style>

src/dashboard/components/Rules.svelte

@@ -21,7 +21,8 @@
         style={`width:${percentage}%;`}
         aria-valuenow={percentage}
         aria-valuemin="0"
-        aria-valuemax="100" />
+        aria-valuemax="100"
+      />
     </div>
   {/await}
 {/each}