7 files changed, 369 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..f6699312
--- /dev/null
+++ b/src/pages/popup_src/App.svelte
@@ -0,0 +1,78 @@
+<script>
+  const 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))
+
+  let style
+  $: if (_options) style = utils.style(_options, window)
+</script>
+
+{#if _options && _config}
+  <div class="main" dir="auto" {style}>
+    <Buttons />
+  </div>
+{:else}
+  <p>Loading...</p>
+{/if}
+
+<style>
+  :global(html, body) {
+    min-width: 260px;
+    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", sans-serif;
+    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..ab5682dc
--- /dev/null
+++ b/src/pages/popup_src/Buttons.svelte
@@ -0,0 +1,145 @@
+<script>
+  const 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 { onDestroy } from "svelte"
+  import servicesHelper from "../../assets/javascripts/services"
+  import Switch from "./components/Switch.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, null, false, true).then(r => (redirect = r))
+      servicesHelper.computeService(url).then(r => (currentService = r))
+    }
+  })
+</script>
+
+<div class={document.body.dir}>
+  {#if redirect}
+    <Row
+      class="interactive"
+      on:click={() => {
+        browser.tabs.query({ active: true, currentWindow: true }, tabs => {
+          browser.runtime.sendMessage({ message: "redirect", tabId: tabs[0].id }, () => {
+            browser.tabs.update({ url: redirect })
+          })
+        })
+      }}
+    >
+      <Label>{browser.i18n.getMessage("redirect") || "Redirect"}</Label>
+      <RedirectIcon />
+    </Row>
+  {/if}
+
+  {#if switchInstance}
+    <Row
+      class="interactive"
+      on:click={async () =>
+        browser.tabs.update({ url: switchInstance }, () => {
+          window.close()
+        })}
+    >
+      <Label>{browser.i18n.getMessage("switchInstance") || "Switch Instance"}</Label>
+      <SwitchInstanceIcon />
+    </Row>
+  {/if}
+
+  {#if redirectToOriginal}
+    <Row class="interactive" on:click={() => servicesHelper.copyRaw(url)}>
+      <Label>{browser.i18n.getMessage("copyOriginal") || "Copy Original"}</Label>
+      <CopyIcon />
+    </Row>
+    <Row
+      class="interactive"
+      on:click={() => {
+        browser.tabs.query({ active: true, currentWindow: true }, tabs => {
+          browser.runtime.sendMessage({ message: "reverse", tabId: tabs[0].id }, () => {
+            browser.tabs.update({ url: redirectToOriginal })
+          })
+        })
+      }}
+    >
+      <Label>{browser.i18n.getMessage("redirectToOriginal" || "Redirect to Original")}</Label>
+      <RedirectToOriginalIcon />
+    </Row>
+  {/if}
+
+  {#if redirect || switchInstance || redirectToOriginal}
+    <hr />
+  {/if}
+
+  {#if currentService}
+    <Switch serviceKey={currentService} {url} />
+    <hr />
+  {/if}
+
+  {#each _options.popupServices as serviceKey}
+    {#if currentService !== serviceKey}
+      <Switch {serviceKey} {url} />
+    {/if}
+  {/each}
+
+  <hr />
+
+  <Row
+    class="interactive"
+    on:click={() =>
+      browser.tabs.create({ url: browser.runtime.getURL("pages/options/index.html") }, () => {
+        window.close()
+      })}
+  >
+    <Label>{browser.i18n.getMessage("settings")}</Label>
+    <SettingsIcon />
+  </Row>
+</div>
+
+<style>
+  :global(.interactive) {
+    transition: 0.1s;
+  }
+  :global(.interactive:hover) {
+    color: var(--active);
+    cursor: pointer;
+  }
+  :global(.interactive:active) {
+    transform: translateY(1px);
+  }
+
+  :global(img, svg) {
+    margin-right: 5px;
+    margin-left: 0;
+    height: 26px;
+    width: 26px;
+    color: var(--text);
+  }
+
+  :global(.rtl img, .rtl svg) {
+    margin-right: 0;
+    margin-left: 5px;
+  }
+</style>
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/components/Switch.svelte b/src/pages/popup_src/components/Switch.svelte
new file mode 100644
index 00000000..98f765b7
--- /dev/null
+++ b/src/pages/popup_src/components/Switch.svelte
@@ -0,0 +1,81 @@
+<script>
+  const browser = window.browser || window.chrome
+
+  import Checkbox from "../../components/Checkbox.svelte"
+  import Label from "../../components/Label.svelte"
+  import SwitchInstanceIcon from "../../icons/SwitchInstanceIcon.svelte"
+  import Row from "./Row.svelte"
+  import ServiceIcon from "./ServiceIcon.svelte"
+  import { onDestroy } from "svelte"
+  import servicesHelper from "../../../assets/javascripts/services"
+  import { options, config } from "../stores"
+  import SettingsIcon from "../../icons/SettingsIcon.svelte"
+
+  let _options
+  let _config
+
+  const unsubscribeOptions = options.subscribe(val => (_options = val))
+  const unsubscribeConfig = config.subscribe(val => (_config = val))
+  onDestroy(() => {
+    unsubscribeOptions()
+    unsubscribeConfig()
+  })
+
+  export let serviceKey
+  export let url
+</script>
+
+<Row>
+  <div
+    class="interactive margin margin_{document.body.dir}"
+    on:keydown={null}
+    on:click={() =>
+      browser.tabs.create({ url: _config.services[serviceKey].url }, () => {
+        window.close()
+      })}
+  >
+    <ServiceIcon details={{ value: serviceKey, label: _config.services[serviceKey].name }} />
+    <Label>{_config.services[serviceKey].name}</Label>
+  </div>
+  <div>
+    <Checkbox
+      class="margin margin_{document.body.dir}"
+      label="Enable"
+      checked={_options[serviceKey].enabled}
+      onChange={e => {
+        _options[serviceKey].enabled = e.target.checked
+        options.set(_options)
+      }}
+    />
+    <SwitchInstanceIcon
+      class="interactive"
+      on:click={async () =>
+        browser.tabs.update({ url: await servicesHelper.switchInstance(url, serviceKey) }, () => {
+          window.close()
+        })}
+    />
+    <SettingsIcon
+      class="interactive"
+      on:click={() =>
+        browser.tabs.create({ url: browser.runtime.getURL(`pages/options/index.html#services:${serviceKey}`) }, () => {
+          window.close()
+        })}
+    />
+  </div>
+</Row>
+
+<style>
+  div {
+    display: flex;
+    align-items: center;
+  }
+
+  :global(.margin) {
+    margin-right: 5px;
+    margin-left: 0;
+  }
+  :global(.margin_rtl) {
+    margin-right: 0;
+    margin-left: 5px;
+  }
+</style>
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")