From 6bd542f858ceaa392e11a526c713359d8f667399 Mon Sep 17 00:00:00 2001
From: ManeraKai <manerakai@protonmail.com>
Date: Fri, 16 Aug 2024 15:53:53 +0300
Subject: Added arrow icon to dropdowns. Added settings button to each service
 in the popup https://github.com/libredirect/browser_extension/issues/961

---
 src/pages/options_src/App.svelte               | 10 +++----
 src/pages/options_src/Services/Services.svelte | 13 +++++++--
 src/pages/options_src/Sidebar.svelte           |  6 ++--
 src/pages/options_src/stores.js                |  1 -
 src/pages/options_src/url.js                   | 38 ++++++++++++++++++++++++++
 5 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 src/pages/options_src/url.js

(limited to 'src/pages/options_src')

diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte
index b5a44856..565aacef 100644
--- a/src/pages/options_src/App.svelte
+++ b/src/pages/options_src/App.svelte
@@ -2,12 +2,13 @@
   const browser = window.browser || window.chrome
 
   import General from "./General/General.svelte"
+  import url from './url'
   import utils from "../../assets/javascripts/utils.js"
   import { onDestroy } from "svelte"
   import servicesHelper from "../../assets/javascripts/services.js"
   import { onMount } from "svelte"
   import Sidebar from "./Sidebar.svelte"
-  import { options, config, page } from "./stores"
+  import { options, config } from "./stores"
   import Services from "./Services/Services.svelte"
 
   let _options
@@ -36,9 +37,6 @@
     config.set(await utils.getConfig())
   })
 
-  let _page
-  page.subscribe(val => (_page = val))
-
   const dark = {
     text: "#fff",
     bgMain: "#121212",
@@ -85,9 +83,9 @@
     --light-grey: {cssVariables.lightGrey};"
   >
     <Sidebar />
-    {#if _page == "general"}
+    {#if !$url.hash || $url.hash == "#general"}
       <General />
-    {:else if _page == "services"}
+    {:else if $url.hash.startsWith("#services")}
       <Services />
     {/if}
   </div>
diff --git a/src/pages/options_src/Services/Services.svelte b/src/pages/options_src/Services/Services.svelte
index 7c4a92b3..93afcded 100644
--- a/src/pages/options_src/Services/Services.svelte
+++ b/src/pages/options_src/Services/Services.svelte
@@ -1,6 +1,7 @@
 <script>
   const browser = window.browser || window.chrome
 
+  import url from "../url"
   import Row from "../../components/Row.svelte"
   import Label from "../../components/Label.svelte"
   import Select from "../../components/Select.svelte"
@@ -22,8 +23,7 @@
     unsubscribeOptions()
     unsubscribeConfig()
   })
-
-  let selectedService = "youtube"
+  let selectedService = $url.hash.startsWith("#services:") ? $url.hash.split(":")[1] : "youtube"
   $: serviceConf = _config.services[selectedService]
   $: serviceOptions = _options[selectedService]
   $: frontendWebsite = serviceConf.frontends[serviceOptions.frontend].url
@@ -43,7 +43,11 @@
         clearable={false}
         class="svelte_select"
         value={selectedService}
-        on:change={e => (selectedService = e.detail.value)}
+        showChevron
+        on:change={e => {
+          selectedService = e.detail.value
+          window.location.hash = `services:${e.detail.value}`
+        }}
         items={[
           ...servicesEntries.map(([serviceKey, service]) => {
             return { value: serviceKey, label: service.name }
@@ -58,6 +62,7 @@
           <ServiceIcon details={selection} />
           {selection.label}
         </div>
+        <div style="font-size: 10px;" slot="chevron-icon">🮦</div>
       </SvelteSelect>
     </div>
   </Row>
@@ -104,6 +109,7 @@
           dir="ltr"
           class="svelte_select"
           value={serviceOptions.frontend}
+          showChevron
           on:change={e => {
             serviceOptions.frontend = e.detail.value
             options.set(_options)
@@ -123,6 +129,7 @@
             <FrontendIcon details={selection} {selectedService} />
             {selection.label}
           </div>
+          <div style="font-size: 10px;" slot="chevron-icon">🮦</div>
         </SvelteSelect>
       </div>
     </Row>
diff --git a/src/pages/options_src/Sidebar.svelte b/src/pages/options_src/Sidebar.svelte
index 5e2f4931..6b67581a 100644
--- a/src/pages/options_src/Sidebar.svelte
+++ b/src/pages/options_src/Sidebar.svelte
@@ -1,18 +1,18 @@
 <script>
   const browser = window.browser || window.chrome
 
-  import { page } from "./stores"
+  import url from "./url"
   import GeneralIcon from "../icons/GeneralIcon.svelte"
   import ServicesIcon from "../icons/ServicesIcon.svelte"
   import AboutIcon from "../icons/AboutIcon.svelte"
 </script>
 
 <div>
-  <a href="#general" on:click={() => page.set("general")} style={$page == "general" && "color: var(--active);"}>
+  <a href="#general" style={$url.hash == "#general" && "color: var(--active);"}>
     <GeneralIcon class="margin margin_{document.body.dir}" />
     {browser.i18n.getMessage("general") || "General"}
   </a>
-  <a href="#services" on:click={() => page.set("services")} style={$page == "services" && "color: var(--active);"}>
+  <a href="#services" style={$url.hash == "#services" && "color: var(--active);"}>
     <ServicesIcon class="margin margin_{document.body.dir}" />
     {browser.i18n.getMessage("services") || "Services"}
   </a>
diff --git a/src/pages/options_src/stores.js b/src/pages/options_src/stores.js
index 782f6064..7ae0f8c7 100644
--- a/src/pages/options_src/stores.js
+++ b/src/pages/options_src/stores.js
@@ -2,4 +2,3 @@ import { writable } from "svelte/store"
 
 export const options = writable(null)
 export const config = writable(null)
-export const page = writable("general")
diff --git a/src/pages/options_src/url.js b/src/pages/options_src/url.js
new file mode 100644
index 00000000..010e5b21
--- /dev/null
+++ b/src/pages/options_src/url.js
@@ -0,0 +1,38 @@
+// https://svelte.dev/repl/5abaac000b164aa1aacc6051d5c4f584?version=3.59.2
+
+import { derived, writable } from 'svelte/store'
+
+export function createUrlStore(ssrUrl) {
+  // Ideally a bundler constant so that it's tree-shakable
+  if (typeof window === 'undefined') {
+    const { subscribe } = writable(ssrUrl)
+    return { subscribe }
+  }
+
+  const href = writable(window.location.href)
+
+  const originalPushState = history.pushState
+  const originalReplaceState = history.replaceState
+
+  const updateHref = () => href.set(window.location.href)
+
+  history.pushState = () => {
+    originalPushState.apply(this, arguments)
+    updateHref()
+  }
+
+  history.replaceState = () => {
+    originalReplaceState.apply(this, arguments)
+    updateHref()
+  }
+
+  window.addEventListener('popstate', updateHref)
+  window.addEventListener('hashchange', updateHref)
+
+  return {
+    subscribe: derived(href, ($href) => new URL($href)).subscribe
+  }
+}
+
+// If you're using in a pure SPA, you can return a store directly and share it everywhere
+export default createUrlStore()
-- 
cgit 1.4.1