Made Select Services searchable and with iconsk

package.json

@@ -25,16 +25,16 @@
   },
   "homepage": "https://libredirect.github.io",
   "devDependencies": {
-    "prettier": "3.3.3",
-    "pug-cli": "^1.0.0-alpha6",
-    "web-ext": "^7.2.0",
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
+    "prettier": "3.3.3",
+    "pug-cli": "^1.0.0-alpha6",
     "rollup": "^3.15.0",
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-svelte": "^7.1.2",
-    "svelte": "^3.55.0"
+    "svelte": "^3.55.0",
+    "web-ext": "^7.2.0"
   },
   "webExt": {
     "sourceDir": "./src/",
@@ -44,5 +44,8 @@
     "build": {
       "overwriteDest": true
     }
+  },
+  "dependencies": {
+    "svelte-select": "^5.8.3"
   }
 }

src/pages/src/App.svelte

@@ -29,7 +29,6 @@
   onMount(async () => {
     let opts = await utils.getOptions()
     if (!opts) {
-      console.log("init defulats")
       await servicesHelper.initDefaults()
       opts = await utils.getOptions()
     }

src/pages/src/Services/Instances.svelte

@@ -13,6 +13,7 @@
   import utils from "../../../assets/javascripts/utils"
 
   export let selectedService
+  export let selectedFrontend
 
   let _options
   let _config
@@ -34,10 +35,10 @@
 
   $: {
     allInstances = []
-    if (_options[serviceOptions.frontend]) allInstances.push(..._options[serviceOptions.frontend])
-    if (redirects && redirects[serviceOptions.frontend]) {
-      for (const network in redirects[serviceOptions.frontend]) {
-        allInstances.push(...redirects[serviceOptions.frontend][network])
+    if (_options[selectedFrontend]) allInstances.push(..._options[selectedFrontend])
+    if (redirects && redirects[selectedFrontend]) {
+      for (const network in redirects[selectedFrontend]) {
+        allInstances.push(...redirects[selectedFrontend][network])
       }
     }
   }
@@ -48,12 +49,12 @@
   }
 
   function isCustomInstance(instance) {
-    if (redirects[serviceOptions.frontend]) {
-      for (const network in redirects[serviceOptions.frontend]) {
-        if (redirects[serviceOptions.frontend][network].includes(instance)) return true
+    if (redirects[selectedFrontend]) {
+      for (const network in redirects[selectedFrontend]) {
+        if (redirects[selectedFrontend][network].includes(instance)) return false
       }
     }
-    return false
+    return true
   }
 
   async function pingInstances() {
@@ -92,15 +93,15 @@
   let addInstanceValue
   function addInstance() {
     const instance = utils.protocolHost(new URL(addInstanceValue))
-    if (!_options[serviceOptions.frontend].includes(instance)) {
-      _options[serviceOptions.frontend].push(instance)
+    if (!_options[selectedFrontend].includes(instance)) {
+      _options[selectedFrontend].push(instance)
       addInstanceValue = ""
       options.set(_options)
     }
   }
 </script>
 
-{#if serviceConf.frontends[serviceOptions.frontend].instanceList && redirects && blacklist}
+{#if serviceConf.frontends[selectedFrontend].instanceList && redirects && blacklist}
   <hr />
   <div dir="ltr">
     <div class="ping">
@@ -120,16 +121,14 @@
         type="url"
         placeholder="https://instance.com"
         aria-label="Add instance input"
-        on:keydown={e => {
-          if (e.key === "Enter") addInstance()
-        }}
+        on:keydown={e => e.key === "Enter" && addInstance()}
       />
       <button on:click={addInstance} class="add" aria-label="Add the instance">
         <AddIcon />
       </button>
     </Row>
 
-    {#each _options[serviceOptions.frontend] as instance}
+    {#each _options[selectedFrontend] as instance}
       <Row>
         <span>
           <a href={instance} target="_blank" rel="noopener noreferrer">{instance}</a>
@@ -144,9 +143,9 @@
           class="add"
           aria-label="Remove Instance"
           on:click={() => {
-            const index = _options[serviceOptions.frontend].indexOf(instance)
+            const index = _options[selectedFrontend].indexOf(instance)
             if (index > -1) {
-              _options[serviceOptions.frontend].splice(index, 1)
+              _options[selectedFrontend].splice(index, 1)
               options.set(_options)
             }
           }}
@@ -156,15 +155,15 @@
       </Row>
       <hr />
     {/each}
-    <Row></Row>
 
     {#if redirects !== "disabled" && blacklist !== "disabled"}
-      {#if redirects[serviceOptions.frontend] && redirects[serviceOptions.frontend]["clearnet"]}
+      {#if redirects[selectedFrontend] && redirects[selectedFrontend]["clearnet"]}
         {#each Object.entries(_config.networks) as [networkName, network]}
-          {#if redirects[serviceOptions.frontend] && redirects[serviceOptions.frontend][networkName]}
+          {#if redirects[selectedFrontend] && redirects[selectedFrontend][networkName] && redirects[selectedFrontend][networkName].length > 0}
+            <Row></Row>
             <Row><Label>{network.name}</Label></Row>
             <hr />
-            {#each redirects[serviceOptions.frontend][networkName] as instance}
+            {#each redirects[selectedFrontend][networkName] as instance}
               <Row>
                 <span>
                   <a href={instance} target="_blank" rel="noopener noreferrer">{instance}</a>
@@ -178,7 +177,7 @@
                       cloudflare
                     </a>
                   {/if}
-                  {#if _options[serviceOptions.frontend].includes(instance)}
+                  {#if _options[selectedFrontend].includes(instance)}
                     <span style="color:grey">chosen</span>
                   {/if}
                   {#if pingCache && pingCache[instance]}
@@ -189,9 +188,9 @@
                   class="add"
                   aria-label="Add instance"
                   on:click={() => {
-                    if (_options[serviceOptions.frontend]) {
-                      if (!_options[serviceOptions.frontend].includes(instance)) {
-                        _options[serviceOptions.frontend].push(instance)
+                    if (_options[selectedFrontend]) {
+                      if (!_options[selectedFrontend].includes(instance)) {
+                        _options[selectedFrontend].push(instance)
                         options.set(_options)
                       }
                     }

src/pages/src/Services/RedirectType.svelte

@@ -46,8 +46,7 @@
   }
 
   let embeddableFrontends = []
-  $: (() => {
-    if (serviceConf) {
+  $: if (serviceConf) {
     embeddableFrontends = []
     for (const [frontendId, frontendConf] of Object.entries(serviceConf.frontends)) {
       if (frontendConf.embeddable && frontendConf.instanceList) {
@@ -58,7 +57,6 @@
       }
     }
   }
-  })()
 </script>
 
 <RowSelect

src/pages/src/Services/ServiceIcon.svelte

@@ -0,0 +1,37 @@
+<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"
+    }
+  }
+</script>
+
+{#if _config.services[details.value].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.${_config.services[details.value].imageType}`} alt={details.label} />
+{/if}

src/pages/src/Services/Services.svelte

@@ -1,6 +1,4 @@
 <script>
-  let browser = window.browser || window.chrome
-
   import Checkbox from "../components/RowCheckbox.svelte"
   import RowSelect from "../components/RowSelect.svelte"
   import Row from "../components/Row.svelte"
@@ -8,8 +6,10 @@
   import Select from "../components/Select.svelte"
   import { options, config } from "../stores"
   import RedirectType from "./RedirectType.svelte"
-  import { onDestroy, onMount } from "svelte"
+  import { onDestroy } from "svelte"
   import Instances from "./Instances.svelte"
+  import SvelteSelect from "svelte-select"
+  import ServiceIcon from "./ServiceIcon.svelte"
 
   let _options
   let _config
@@ -22,9 +22,9 @@
   })
 
   let selectedService = "youtube"
-
   $: serviceConf = _config.services[selectedService]
   $: serviceOptions = _options[selectedService]
+  $: frontendWebsite = serviceConf.frontends[serviceOptions.frontend].url
 </script>
 
 <div>
@@ -33,15 +33,26 @@
       Service:
       <a href={serviceConf.url} target="_blank" rel="noopener noreferrer">{serviceConf.url}</a>
     </Label>
-    <Select
+    <SvelteSelect
+      clearable={false}
+      class="svelte_select"
       value={selectedService}
-      values={[
-        ...Object.entries(_config.services).map(([serviceId, service]) => {
-          return { value: serviceId, name: service.name }
+      on:change={e => (selectedService = e.detail.value)}
+      items={[
+        ...Object.entries(_config.services).map(([serviceKey, service]) => {
+          return { value: serviceKey, label: service.name }
         }),
       ]}
-      onChange={e => (selectedService = e.target.options[e.target.options.selectedIndex].value)}
-    />
+    >
+      <div class="slot" slot="item" let:item>
+        <ServiceIcon details={item} />
+        {item.label}
+      </div>
+      <div class="slot" slot="selection" let:selection>
+        <ServiceIcon details={selection} />
+        {selection.label}
+      </div>
+    </SvelteSelect>
   </Row>
 
   <hr />
@@ -73,9 +84,9 @@
     <Row>
       <Label>
         Frontend:
-        <a href={serviceConf.frontends[serviceOptions.frontend].url} target="_blank" rel="noopener noreferrer"
-          >{serviceConf.frontends[serviceOptions.frontend].url}</a
-        >
+        <a href={frontendWebsite} target="_blank" rel="noopener noreferrer">
+          {frontendWebsite}
+        </a>
       </Label>
       <Select
         value={serviceOptions.frontend}
@@ -95,7 +106,7 @@
     <RedirectType {selectedService} />
 
     <RowSelect
-      label="Unsupported iframes handling"
+      label="Unsupported embeds handling"
       value={serviceOptions.unsupportedUrls}
       onChange={e => {
         serviceOptions.unsupportedUrls = e.target.options[e.target.options.selectedIndex].value
@@ -108,12 +119,55 @@
     />
 
     {#if selectedService == "search"}
-      <div>
+      <Row>
+        <Label>
           Set LibRedirect as Default Search Engine. For how to do in chromium browsers, click
-        <a href="https://libredirect.github.io/docs.html#search_engine_chromium">here</a>.
-      </div>
+          <a
+            href="https://libredirect.github.io/docs.html#search_engine_chromium"
+            target="_blank"
+            rel="noopener noreferrer"
+            >here
+          </a>.
+        </Label>
+      </Row>
     {/if}
 
-    <Instances {selectedService} />
+    <Instances
+      {selectedService}
+      selectedFrontend={!serviceConf.frontends[serviceOptions.frontend].desktopApp ||
+      serviceOptions.redirectType == "main_frame"
+        ? serviceOptions.frontend
+        : serviceOptions.embedFrontend}
+    />
+
+    <Row></Row>
   </div>
 </div>
+
+<style>
+  :global(.svelte_select) {
+    font-weight: bold;
+    --item-padding: 0 10px;
+    --border: none;
+    --border-hover: none;
+    --width: 210px;
+    --background: var(--bg-secondary);
+    --list-background: var(--bg-secondary);
+    --item-active-background: red;
+    --item-is-active-bg: grey;
+    --item-hover-bg: grey;
+    --item-color: var(--text); /*text color*/
+  }
+  :global(.svelte_select .slot) {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+  }
+
+  :global(.svelte_select img, .svelte_select svg) {
+    margin-right: 10px;
+    height: 26px;
+    width: 26px;
+    color: var(--text);
+  }
+</style>

src/pages/src/Sidebar.svelte

@@ -12,7 +12,7 @@
   </a>
   <a href="#services" on:click={() => page.set("services")} style={$page == "services" && "color: var(--active);"}>
     <ServicesIcon style="margin-right: 5px" />
-    <span data-localise="__MSG_general__">Services</span>
+    <span data-localise="__MSG_services__">Services</span>
   </a>
   <a href="https://libredirect.github.io" target="_blank" rel="noopener noreferrer">
     <AboutIcon style="margin-right: 5px" />

src/pages/src/components/Select.svelte

@@ -5,7 +5,7 @@
   export let ariaLabel
 </script>
 
-<select  bind:value={value} on:change={onChange} aria-label={ariaLabel} on:change on:contextmenu on:input>
+<select bind:value on:change={onChange} aria-label={ariaLabel} on:change on:contextmenu on:input>
   {#each values as option}
     <option value={option.value}>{option.name}</option>
   {/each}