Migrating popup to svelte

7 files changed, 348 insertions, 0 deletions

diff --git a/src/pages/popup_src/App.svelte b/src/pages/popup_src/App.svelte
new file mode 100644
index 00000000..cf88234d
--- /dev/null
+++ b/src/pages/popup_src/App.svelte
@@ -0,0 +1,114 @@
+<script>
+  let browser = window.browser || window.chrome
+
+  import utils from "../../assets/javascripts/utils.js"
+  import { onDestroy } from "svelte"
+  import servicesHelper from "../../assets/javascripts/services.js"
+  import { onMount } from "svelte"
+  import Buttons from "./Buttons.svelte"
+
+  import { options, config, page } from "./stores"
+
+  let _options
+  const unsubscribeOptions = options.subscribe(val => {
+    if (val) {
+      _options = val
+      browser.storage.local.set({ options: val })
+    }
+  })
+
+  let _config
+  const unsubscribeConfig = config.subscribe(val => (_config = val))
+
+  onDestroy(() => {
+    unsubscribeOptions()
+    unsubscribeConfig()
+  })
+
+  onMount(async () => {
+    let opts = await utils.getOptions()
+    if (!opts) {
+      await servicesHelper.initDefaults()
+      opts = await utils.getOptions()
+    }
+    options.set(opts)
+    config.set(await utils.getConfig())
+  })
+
+  let _page
+  page.subscribe(val => (_page = val))
+
+  const dark = {
+    text: "#fff",
+    bgMain: "#121212",
+    bgSecondary: "#202020",
+    active: "#fbc117",
+    danger: "#f04141",
+    lightGrey: "#c3c3c3",
+  }
+  const light = {
+    text: "black",
+    bgMain: "white",
+    bgSecondary: "#e4e4e4",
+    active: "#fb9817",
+    danger: "#f04141",
+    lightGrey: "#c3c3c3",
+  }
+  let cssVariables
+  $: if (_options) {
+    if (_options.theme == "dark") {
+      cssVariables = dark
+    } else if (_options.theme == "light") {
+      cssVariables = light
+    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      cssVariables = dark
+    } else {
+      cssVariables = light
+    }
+  }
+</script>
+
+{#if _options && _config}
+  <div
+    class="main"
+    dir="auto"
+    style="
+    --text: {cssVariables.text};
+    --bg-main: {cssVariables.bgMain};
+    --bg-secondary: {cssVariables.bgSecondary};
+    --active: {cssVariables.active};
+    --danger: {cssVariables.danger};
+    --light-grey: {cssVariables.lightGrey};"
+  >
+    <Buttons />
+  </div>
+{:else}
+  <p>Loading...</p>
+{/if}
+
+<style>
+  :global(html, body) {
+    width: 250px;
+    height: min-content;
+    min-height: auto;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  :global(body) {
+    margin-top: -20px;
+  }
+
+  div {
+    font-weight: bold;
+    height: 100%;
+    margin: 0;
+    padding: 10px;
+    padding-top: 20px;
+    font-family: "Inter";
+    font-size: 16px;
+    background-color: var(--bg-main);
+    color: var(--text);
+  }
+</style>
diff --git a/src/pages/popup_src/Buttons.svelte b/src/pages/popup_src/Buttons.svelte
new file mode 100644
index 00000000..39208c37
--- /dev/null
+++ b/src/pages/popup_src/Buttons.svelte
@@ -0,0 +1,158 @@
+<script>
+  let browser = window.browser || window.chrome
+
+  import Row from "./components/Row.svelte"
+  import Label from "../components/Label.svelte"
+  import CopyIcon from "../icons/CopyIcon.svelte"
+  import RedirectToOriginalIcon from "../icons/RedirectToOriginalIcon.svelte"
+  import RedirectIcon from "../icons/RedirectIcon.svelte"
+  import SwitchInstanceIcon from "../icons/SwitchInstanceIcon.svelte"
+  import SettingsIcon from "../icons/SettingsIcon.svelte"
+  import { options, config } from "./stores"
+  import ServiceIcon from "./components/ServiceIcon.svelte"
+  import { onDestroy } from "svelte"
+  import servicesHelper from "../../assets/javascripts/services"
+  import Checkbox from "../components/Checkbox.svelte"
+
+  let _options
+  let _config
+
+  const unsubscribeOptions = options.subscribe(val => (_options = val))
+  const unsubscribeConfig = config.subscribe(val => (_config = val))
+  onDestroy(() => {
+    unsubscribeOptions()
+    unsubscribeConfig()
+  })
+
+  let url
+  let switchInstance
+  let redirectToOriginal
+  let redirect
+  let currentService
+  browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
+    if (tabs[0].url) {
+      url = new URL(tabs[0].url)
+      servicesHelper.switchInstance(url).then(r => (switchInstance = r))
+      servicesHelper.reverse(url).then(r => (redirectToOriginal = r))
+      servicesHelper.redirectAsync(url, "main_frame", null, true).then(r => (redirect = r))
+      currentService = await servicesHelper.computeService(url)
+    }
+  })
+</script>
+
+{#if redirect}
+  <Row class="row" on:click={() => browser.runtime.sendMessage("redirectTab")}>
+    <Label>Redirect</Label>
+    <RedirectIcon />
+  </Row>
+{/if}
+
+{#if switchInstance}
+  <Row class="row" on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })}>
+    <Label>Switch Instance</Label>
+    <SwitchInstanceIcon />
+  </Row>
+{/if}
+
+{#if redirectToOriginal}
+  <Row class="row" on:click={() => servicesHelper.copyRaw(url)}>
+    <Label>Copy Original</Label>
+    <CopyIcon />
+  </Row>
+  <Row class="row" on:click={() => browser.runtime.sendMessage("reverseTab")}>
+    <Label>Redirect To Original</Label>
+    <RedirectToOriginalIcon />
+  </Row>
+{/if}
+
+<hr />
+
+{#if currentService}
+  <Row>
+    <div
+      style="display: flex;justify-content: space-between;align-items: center;"
+      class="row"
+      on:keydown={null}
+      on:click={() => window.open(browser.runtime.getURL(_config.services[currentService].url), "_blank")}
+    >
+      <ServiceIcon details={{ value: currentService, label: _config.services[currentService].name }} />
+      <Label>{_config.services[currentService].name}</Label>
+    </div>
+    <div style="display: flex;align-items: center;">
+      <Checkbox
+        style="margin-right:5px"
+        label="Enable"
+        checked={_options[currentService].enabled}
+        onChange={e => {
+          _options[currentService].enabled = e.target.checked
+          options.set(_options)
+        }}
+      />
+      <SwitchInstanceIcon
+        class="row"
+        on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url, currentService) })}
+      />
+    </div>
+  </Row>
+{/if}
+
+<hr />
+
+{#each _options.popupServices as serviceKey}
+  {#if currentService !== serviceKey}
+    <Row>
+      <div
+        style="display: flex;align-items: center;"
+        class="row"
+        on:keydown={null}
+        on:click={() => window.open(browser.runtime.getURL(_config.services[serviceKey].url), "_blank")}
+      >
+        <ServiceIcon details={{ value: serviceKey, label: _config.services[serviceKey].name }} />
+        <Label>{_config.services[serviceKey].name}</Label>
+      </div>
+      <div style="display: flex;align-items: center;">
+        <Checkbox
+          style="margin-right:5px"
+          label="Enable"
+          checked={_options[serviceKey].enabled}
+          onChange={e => {
+            console.log(e.target.checked)
+            _options[serviceKey].enabled = e.target.checked
+            options.set(_options)
+          }}
+        />
+        <SwitchInstanceIcon
+          class="row"
+          on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url, serviceKey) })}
+        />
+      </div>
+    </Row>
+  {/if}
+{/each}
+
+<hr />
+
+<Row class="row" on:click={() => window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}>
+  <Label>Settings</Label>
+  <SettingsIcon />
+</Row>
+
+<style>
+  :global(.row) {
+    transition: 0.1s;
+  }
+  :global(.row:hover) {
+    color: var(--active);
+    cursor: pointer;
+  }
+  :global(.row:active) {
+    transform: translateY(1px);
+  }
+
+  :global(img, svg) {
+    margin-right: 10px;
+    height: 26px;
+    width: 26px;
+    color: var(--text);
+  }
+</style>
diff --git a/src/pages/popup_src/components/PopupButton.svelte b/src/pages/popup_src/components/PopupButton.svelte
new file mode 100644
index 00000000..9c4953c4
--- /dev/null
+++ b/src/pages/popup_src/components/PopupButton.svelte
@@ -0,0 +1,11 @@
+<script>
+  import Row from "../components/Row.svelte"
+  import Label from "../components/Label.svelte"
+  import CopyIcon from "../icons/CopyIcon.svelte"
+  export let label
+</script>
+
+<Row on:click>
+  <Label>{label}</Label>
+  <CopyIcon />
+</Row>
diff --git a/src/pages/popup_src/components/Row.svelte b/src/pages/popup_src/components/Row.svelte
new file mode 100644
index 00000000..a4d78f07
--- /dev/null
+++ b/src/pages/popup_src/components/Row.svelte
@@ -0,0 +1,13 @@
+<div {...$$props} on:click>
+    <slot></slot>
+  </div>
+  
+  <style>
+    div {
+      justify-content: space-between;
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/src/pages/popup_src/components/ServiceIcon.svelte b/src/pages/popup_src/components/ServiceIcon.svelte
new file mode 100644
index 00000000..89393cf6
--- /dev/null
+++ b/src/pages/popup_src/components/ServiceIcon.svelte
@@ -0,0 +1,40 @@
+<script>
+  import { onDestroy } from "svelte"
+  export let details
+  import { config, options } from "../stores"
+  let _options
+  let _config
+
+  const unsubscribeOptions = options.subscribe(val => (_options = val))
+  const unsubscribeConfig = config.subscribe(val => (_config = val))
+  onDestroy(() => {
+    unsubscribeOptions()
+    unsubscribeConfig()
+  })
+
+  let theme
+  $: if (_options) {
+    if (_options.theme == "dark") {
+      theme = "dark"
+    } else if (_options.theme == "light") {
+      theme = "light"
+    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      theme = "dark"
+    } else {
+      theme = "light"
+    }
+  }
+  $: imageType = _config.services[details.value].imageType
+</script>
+
+{#if imageType}
+  {#if imageType == "svgMono"}
+    {#if theme == "dark"}
+      <img src={`/assets/images/${details.value}-icon-light.svg`} alt={details.label} />
+    {:else}
+      <img src={`/assets/images/${details.value}-icon.svg`} alt={details.label} />
+    {/if}
+  {:else}
+    <img src={`/assets/images/${details.value}-icon.${imageType}`} alt={details.label} />
+  {/if}
+{/if}
diff --git a/src/pages/popup_src/main.js b/src/pages/popup_src/main.js
new file mode 100644
index 00000000..c4012f4a
--- /dev/null
+++ b/src/pages/popup_src/main.js
@@ -0,0 +1,7 @@
+import App from "./App.svelte"
+
+const app = new App({
+  target: document.body,
+})
+
+export default app
diff --git a/src/pages/popup_src/stores.js b/src/pages/popup_src/stores.js
new file mode 100644
index 00000000..782f6064
--- /dev/null
+++ b/src/pages/popup_src/stores.js
@@ -0,0 +1,5 @@
+import { writable } from "svelte/store"
+
+export const options = writable(null)
+export const config = writable(null)
+export const page = writable("general")