dismiss & use svelte in client

src/client/App.svelte

@@ -0,0 +1,85 @@
+<script>
+  import { blocked } from './blocked'
+  import { init } from './reporter'
+  import { buttons, dismiss } from './dismiss'
+
+  init()
+</script>
+
+<div class="wrapper" class:hidden={!$blocked}>
+  <div>
+    <h1>Overtime</h1>
+    <div>You have no time left on this website.</div>
+    <hr />
+    <div class="dismiss">
+      <div>
+        <i> dismiss for... </i>
+      </div>
+      <div class="links">
+        {#each buttons as button}
+          <!-- svelte-ignore a11y-missing-attribute -->
+          <a on:click={() => dismiss(button.duration)}>{button.label}</a>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    position: fixed;
+    color: #111;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #fefefe;
+    z-index: 999999999;
+    font-size: 1rem;
+    padding: 1rem;
+    user-select: none;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+      'Helvetica Neue', sans-serif;
+  }
+
+  .wrapper.hidden {
+    display: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .wrapper {
+      background-color: #111;
+      color: #eee;
+    }
+  }
+
+  .wrapper > div {
+    margin: 3rem auto;
+    max-width: 25rem;
+  }
+
+  .wrapper h1 {
+    margin-bottom: 2rem;
+  }
+
+  .dismiss {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .dismiss .links {
+    margin-left: 1rem;
+    margin-top: -0.1rem;
+  }
+
+  .dismiss .links a {
+    display: block;
+    cursor: pointer;
+    padding: 0.1em;
+    transition: all 100ms ease-in-out;
+  }
+
+  .dismiss .links a:hover {
+    transform: translateX(-0.5em);
+  }
+</style>

src/client/blocked.js

@@ -0,0 +1,17 @@
+import browser from 'webextension-polyfill'
+import { readable } from 'svelte/store'
+
+async function check(set) {
+  if (window.document.hidden) return
+  const isBlocked = await browser.runtime.sendMessage({
+    type: 'check',
+    host: window.location.host,
+  })
+  set(isBlocked)
+}
+
+export const blocked = new readable(false, (set) => {
+  check(set)
+  const interval = setInterval(() => check(set), 1000)
+  return () => clearInterval(interval)
+})

src/client/dismiss.js

@@ -0,0 +1,20 @@
+import dayjs from 'dayjs'
+import * as duration from 'dayjs/plugin/duration'
+dayjs.extend(duration)
+
+import browser from 'webextension-polyfill'
+
+export const buttons = [
+  { label: '1 minute', duration: dayjs.duration({ minutes: 1 }) },
+  { label: '5 minutes', duration: dayjs.duration({ minutes: 5 }) },
+  { label: '15 minutes', duration: dayjs.duration({ minutes: 15 }) },
+  { label: '1 hours', duration: dayjs.duration({ hours: 1 }) },
+]
+
+export function dismiss(duration) {
+  browser.runtime.sendMessage({
+    type: 'dismiss',
+    duration: duration.asMilliseconds(),
+    host: window.location.host,
+  })
+}

src/client/index.css

@@ -1,33 +0,0 @@
-.ora--wrapper {
-  display: none;
-  position: fixed;
-  color: #111;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: #eee;
-  z-index: 999999999;
-  font-size: 1rem;
-  padding: 1rem;
-  text-align: center;
-  user-select: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  .ora--wrapper {
-    background-color: #111;
-    color: #eee;
-  }
-}
-
-.ora--wrapper div {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-    'Helvetica Neue', sans-serif;
-  margin: 3rem auto;
-  width: 100%;
-}
-
-.ora--wrapper div h1 {
-  margin-bottom: 0.5rem;
-}

src/client/index.js

@@ -1,45 +1,5 @@
-import browser from 'webextension-polyfill'
+import App from './App.svelte'
 
-let wrapper
-let lastReported = 0
-
-function init() {
-  wrapper = window.document.createElement('div')
-  wrapper.classList.add('ora--wrapper')
-  wrapper.classList.add('hidden')
-
-  const inner = window.document.createElement('div')
-  inner.innerHTML = `
-    <h1>Overtime ⏱</h1>
-    <p>You have no time left on this website 🥺</p>
-  `
-  wrapper.appendChild(inner)
-  window.document.body.appendChild(wrapper)
-}
-
-async function check() {
-  if (window.document.hidden) return
-  const isBlocked = await browser.runtime.sendMessage({
-    type: 'check',
-    host: window.location.host,
-  })
-  wrapper.style.display = isBlocked ? 'initial' : 'none'
-}
-
-init()
-check()
-setInterval(check, 2000)
-
-function logActivity() {
-  const now = Date.now()
-  // Limit reports to once every second
-  if (now - lastReported < 1000) return
-  lastReported = now
-  browser.runtime.sendMessage({
-    type: 'report',
-  })
-}
-
-window.document.addEventListener('mousemove', logActivity, false)
-window.document.addEventListener('keydown', logActivity, false)
-window.document.addEventListener('scroll', logActivity, false)
+wrapper = window.document.createElement('div')
+window.document.body.appendChild(wrapper)
+new App({ target: wrapper })

src/client/reporter.js

@@ -0,0 +1,19 @@
+import browser from 'webextension-polyfill'
+
+let lastReported = 0
+
+function logActivity() {
+  const now = Date.now()
+  // Limit reports to once every second
+  if (now - lastReported < 1000) return
+  lastReported = now
+  browser.runtime.sendMessage({
+    type: 'report',
+  })
+}
+
+export function init() {
+  window.document.addEventListener('mousemove', logActivity, false)
+  window.document.addEventListener('keydown', logActivity, false)
+  window.document.addEventListener('scroll', logActivity, false)
+}