consolidate all views

src/background/index.js

@@ -2,7 +2,7 @@ import browser from 'webextension-polyfill'
 import dayjs from 'dayjs'
 
 import { dashboard } from '../shared/utils'
-import { insertLog, normalizeTimestamp, Limits, DB } from '../shared/db'
+import { insertLog, normalizeTimestamp, DB } from '../shared/db'
 import { getUsageForHost, percentagesToBool } from '../shared/lib'
 
 browser.browserAction.onClicked.addListener(() => browser.tabs.create({ url: dashboard, active: true }))

src/dashboard/App.svelte

@@ -4,17 +4,36 @@
   import Dev from './components/Dev.svelte'
   import Dashboard from './pages/Dashboard.svelte'
   import Limits from './pages/Limits.svelte'
-  import Footer from '../shared/footer.svelte'
+  import Footer from './components/Footer.svelte'
+  import Options from './components/Options.svelte'
 
   import { isDev } from '../shared/utils'
 
   const routes = {
     '/': Dashboard,
-
+    '/options': Options,
     '/limits': Limits,
   }
 </script>
 
+{#if isDev}
+  <Dev />
+{/if}
+<main>
+  <div class="mb-8">
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <a use:link={'/'}><button class="btn">Dashboard</button></a>
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <a use:link={'/limits'}><button class="btn">Limits</button></a>
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <a use:link={'/options'}><button class="btn">Options</button></a>
+  </div>
+
+  <Router {routes} />
+
+  <Footer />
+</main>
+
 <style>
   main {
     padding: 1em;
@@ -23,18 +42,3 @@
     max-width: 50em;
   }
 </style>
-
-{#if isDev}
-  <Dev />
-{/if}
-<main>
-  <div class="mb-8">
-    <a href="../options/index.html"><button class="btn">Options</button></a>
-    <a use:link={'/'}><button class="btn">Dashboard</button></a>
-    <a use:link={'/limits'}><button class="btn">Limits</button></a>
-  </div>
-
-  <Router {routes} />
-
-  <Footer />
-</main>

src/dashboard/components/Chart.svelte

@@ -89,6 +89,8 @@
   onMount(render)
 </script>
 
+<svg bind:this={wrapper} preserveAspectRatio="xMidYMid meet" />
+
 <style>
   svg {
     width: 100%;
@@ -98,5 +100,3 @@
     font-family: monospace;
   }
 </style>
-
-<svg bind:this={wrapper} preserveAspectRatio="xMidYMid meet" />

src/dashboard/components/Dev.svelte

@@ -1,5 +1,5 @@
 <script>
-  import faker from 'faker'
+  import faker from 'faker/dist/faker.js'
   import day from 'dayjs'
   import { range, random } from 'lodash'
 
@@ -21,6 +21,8 @@
           await insertLog({ host, timestamp, seconds })
         }
       }
+    } catch (e) {
+      console.error(e)
     } finally {
       loading = false
     }
@@ -36,6 +38,11 @@
   }
 </script>
 
+<div class="p-2">
+  <button class="btn btn-sm" class:loading disabled={loading} on:click={fill}>Add Random Data</button>
+  <button class="btn btn-sm btn-error" class:loading disabled={loading} on:click={clear}>Delete data</button>
+</div>
+
 <style>
   div {
     position: absolute;
@@ -43,8 +50,3 @@
     right: 0;
   }
 </style>
-
-<div class="p-2">
-  <button class="btn btn-sm" class:loading disabled={loading} on:click={fill}>Add Random Data</button>
-  <button class="btn btn-sm btn-error" class:loading disabled={loading} on:click={clear}>Delete data</button>
-</div>

src/dashboard/components/Footer.svelte

@@ -1,6 +1,10 @@
-<script>
+<footer>
-  // import manifest from '../../'
+  <a href="https://github.com/cupcakearmy/ora" target="_blank" rel="noreferrer">Source Code</a>
-</script>
+  - v0.7
+  <br />
+  Made with ❤️ by
+  <a href="https://nicco.io" target="_blank" rel="noreferrer">🐘</a>
+</footer>
 
 <style>
   footer {
@@ -9,14 +13,3 @@
     font-family: monospace;
   }
 </style>
-
-<footer>
-  <a
-    href="https://github.com/cupcakearmy/ora"
-    target="_blank"
-    rel="noreferrer">Source Code</a>
-  - v0.7
-  <br />
-  Made with ❤️ by
-  <a href="https://nicco.io" target="_blank" rel="noreferrer">🐘</a>
-</footer>

src/dashboard/components/Options.svelte

@@ -0,0 +1,93 @@
+<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/index.html

@@ -3,16 +3,26 @@
   <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" />
+    <link href="../../node_modules/tailwindcss/dist/tailwind.min.css" rel="stylesheet" />
     <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+          'Helvetica Neue', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-rendering: optimizeLegibility;
+        text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
+      }
+
       #root {
         width: 100vw;
         height: 100vh;
       }
     </style>
+    <title>Ora</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" />
-    <script src="./main.js"></script>
+    <script type="module" src="./main.js"></script>
   </body>
 </html>

src/dashboard/pages/Dashboard.svelte

@@ -53,21 +53,6 @@
   onMount(calculate)
 </script>
 
-<style>
-  table td,
-  table th {
-    padding: 0.25rem 0.06rem;
-  }
-
-  table td.same {
-    opacity: 0.25;
-  }
-
-  table td :global(a:visited) {
-    color: inherit;
-  }
-</style>
-
 <div class="flex justify-between items-center mb-8">
   <h2 class="text-2xl">Dashboard</h2>
   <RangeChooser bind:start bind:end />
@@ -91,3 +76,18 @@
     {/each}
   </table>
 {/if}
+
+<style>
+  table td,
+  table th {
+    padding: 0.25rem 0.06rem;
+  }
+
+  table td.same {
+    opacity: 0.25;
+  }
+
+  table td :global(a:visited) {
+    color: inherit;
+  }
+</style>

src/dashboard/pages/Limits.svelte

@@ -30,12 +30,6 @@
   onMount(load)
 </script>
 
-<style>
-  td {
-    vertical-align: top;
-  }
-</style>
-
 <RulesEditor bind:limit on:update={load} />
 
 <div class="flex justify-between items-center mb-4">
@@ -70,3 +64,9 @@
 {:else}
   <div class="loading loading-lg" />
 {/if}
+
+<style>
+  td {
+    vertical-align: top;
+  }
+</style>

src/options/App.svelte

@@ -1,109 +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 Footer from '../shared/footer.svelte'
-
-  import { dashboard, isDev } from '../shared/utils'
-  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>
-
-<style>
-  main {
-    padding: 1em;
-    margin: auto;
-    width: 100%;
-    max-width: 50em;
-  }
-</style>
-
-<main>
-  <a href={dashboard} target={isDev ? '' : '_blank'}><button class="btn">Dashboard</button></a>
-
-  <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>
-
-  <Footer />
-</main>

src/options/index.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-
-    <link href="../../node_modules/spectre.css/dist/spectre.min.css" rel="stylesheet" />
-    <link href="./main.css" rel="stylesheet" />
-  </head>
-  <body>
-    <main>
-      <h1>Ora</h1>
-      <p>Ora helps you track down time consuming websites</p>
-      <a href="../dashboard/index.html" target="_blank"><button class="btn btn-primary btn-lg">Go to the Dashboard</button></a>
-
-      <br />
-      <br />
-      <br />
-
-      <form id="form">
-        <h4>Settings</h4>
-        <div class="form-group">
-          <label class="form-label">
-            Frequency <small>(Minutes)</small>
-            <input id="frequency" class="form-input" type="number" min="3" step="1" />
-          </label>
-          <label class="form-label">
-            Retention <small>(Days)</small>
-            <input id="retention" class="form-input" type="number" min="3" max="365" step="1" />
-          </label>
-          <button id="reset" type="submit" class="btn">Reset</button>
-          <button type="submit" class="btn btn-primary">Save</button>
-        </div>
-      </form>
-    </main>
-    <div id="root"></div>
-    <script src="./main.js"></script>
-  </body>
-</html>

src/options/main.js

@@ -1,42 +0,0 @@
-import browser from 'webextension-polyfill'
-
-const DEFAULT = {
-  frequency: 3,
-  retention: 90,
-}
-
-async function load() {
-  try {
-    return await browser.storage.local.get()
-  } catch {
-    return DEFAULT
-  }
-}
-
-async function save(settings) {
-  return browser.storage.local.set(settings)
-}
-
-function init() {
-  const frequency = window.document.getElementById('frequency')
-  const retention = window.document.getElementById('retention')
-  const reset = window.document.getElementById('reset')
-  const form = window.document.getElementById('form')
-
-  form.addEventListener('submit', (e) => {
-    e.preventDefault()
-    save({ frequency: frequency.value, retention: retention.value })
-  })
-
-  reset.addEventListener('click', async () => {
-    await browser.storage.local.clear()
-    window.location.reload()
-  })
-
-  load().then((saved) => {
-    frequency.value = saved.frequency
-    retention.value = saved.retention
-  })
-}
-
-window.document.addEventListener('DOMContentLoaded', init)

src/shared/index.html

@@ -1,28 +0,0 @@
-<!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.min.css" rel="stylesheet" />
-    <style>
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-          'Helvetica Neue', sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-rendering: optimizeLegibility;
-        text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
-      }
-
-      #root {
-        width: 100vw;
-        height: 100vh;
-      }
-    </style>
-    <title>Ora</title>
-  </head>
-  <body>
-    <div id="root" />
-    <script src="./main.js"></script>
-  </body>
-</html>

src/shared/main.js

@@ -1,3 +0,0 @@
-import App from './App.svelte'
-
-new App({ target: window.document.getElementById('root') })