Made Select Frontend searchable and with icons

src/config.json

@@ -917,14 +917,15 @@
         "simplyTranslate": {
           "name": "SimplyTranslate",
           "instanceList": true,
-          "url": "https://git.sr.ht/~metalune/simplytranslate_web",
+          "url": "https://codeberg.org/ManeraKai/simplytranslate",
           "localhost": true
         },
         "mozhi": {
           "name": "Mozhi",
           "instanceList": true,
           "url": "https://codeberg.org/aryak/mozhi",
-          "localhost": false
+          "localhost": false,
+          "imageType": "svg"
         },
         "libreTranslate": {
           "name": "LibreTranslate",

src/pages/src/App.svelte

@@ -103,7 +103,7 @@
   div {
     height: 100%;
     display: grid;
-    grid-template-columns: min-content 700px;
+    grid-template-columns: min-content 800px;
     margin: 0;
     padding-top: 50px;
     justify-content: center;

src/pages/src/Services/FrontendIcon.svelte

@@ -0,0 +1,43 @@
+<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"
+    }
+  }
+
+  export let selectedService
+
+  $: imageType = _config.services[selectedService].frontends[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}

src/pages/src/Services/RedirectType.svelte

@@ -2,7 +2,11 @@
   import { onDestroy } from "svelte"
 
   import RowSelect from "../components/RowSelect.svelte"
+  import SvelteSelect from "svelte-select"
   import { options, config } from "../stores"
+  import Row from "../components/Row.svelte"
+  import Label from "../components/Label.svelte"
+  import FrontendIcon from "./FrontendIcon.svelte"
 
   let _options
   let _config
@@ -52,7 +56,7 @@
       if (frontendConf.embeddable && frontendConf.instanceList) {
         embeddableFrontends.push({
           value: frontendId,
-          name: frontendConf.name,
+          label: frontendConf.name,
         })
       }
     }
@@ -70,13 +74,26 @@
 />
 
 {#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"}
-  <RowSelect
-    label="Embed Frontend"
-    value={_options.embedFrontend}
-    onChange={e => {
-      serviceOptions.embedFrontend = e.target.options[e.target.options.selectedIndex].value
-      options.set(_options)
-    }}
-    values={embeddableFrontends}
-  />
+  <Row>
+    <Label>Embed Frontend</Label>
+    <SvelteSelect
+      clearable={false}
+      class="svelte_select"
+      value={serviceOptions.embedFrontend}
+      on:change={e => {
+        serviceOptions.embedFrontend = e.detail.value
+        options.set(_options)
+      }}
+      items={embeddableFrontends}
+    >
+      <div class="slot" slot="item" let:item>
+        <FrontendIcon details={item} {selectedService} />
+        {item.label}
+      </div>
+      <div class="slot" slot="selection" let:selection>
+        <FrontendIcon details={selection} {selectedService} />
+        {selection.label}
+      </div>
+    </SvelteSelect>
+  </Row>
 {/if}

src/pages/src/Services/Services.svelte

@@ -10,6 +10,7 @@
   import Instances from "./Instances.svelte"
   import SvelteSelect from "svelte-select"
   import ServiceIcon from "./ServiceIcon.svelte"
+  import FrontendIcon from "./FrontendIcon.svelte"
 
   let _options
   let _config
@@ -88,19 +89,31 @@
           {frontendWebsite}
         </a>
       </Label>
-      <Select
+
+      <SvelteSelect
+        clearable={false}
+        class="svelte_select"
         value={serviceOptions.frontend}
-        values={[
-          ...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({
-            value: frontendId,
-            name: frontend.name,
-          })),
-        ]}
-        onChange={e => {
-          serviceOptions.frontend = e.target.options[e.target.options.selectedIndex].value
+        on:change={e => {
+          serviceOptions.frontend = e.detail.value
           options.set(_options)
         }}
-      />
+        items={[
+          ...Object.entries(serviceConf.frontends).map(([frontendId, frontend]) => ({
+            value: frontendId,
+            label: frontend.name,
+          })),
+        ]}
+      >
+        <div class="slot" slot="item" let:item>
+          <FrontendIcon details={item} {selectedService} />
+          {item.label}
+        </div>
+        <div class="slot" slot="selection" let:selection>
+          <FrontendIcon details={selection} {selectedService} />
+          {selection.label}
+        </div>
+      </SvelteSelect>
     </Row>
 
     <RedirectType {selectedService} />
@@ -156,7 +169,9 @@
     --item-active-background: red;
     --item-is-active-bg: grey;
     --item-hover-bg: grey;
-    --item-color: var(--text); /*text color*/
+    --item-is-active-color: var(--text);
+    --padding: 0 0 0 10px;
+    --item-color: var(--text);
   }
   :global(.svelte_select .slot) {
     display: flex;