Added mobile support in Svelte

package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "start": "web-ext run",
     "nightly": "web-ext run --firefox=/home/esmail/software/firefox_nightly/firefox",
-    "android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix",
+    "android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix ",
     "build": "web-ext build",
     "test": "web-ext lint",
     "html": "rollup -c --config-popup && rollup -c --config-options"

src/assets/javascripts/utils.js

@@ -20,13 +20,6 @@ function getNextInstance(currentInstanceUrl, instances) {
   return instances[nextInstanceIndex]
 }
 
-/**
- * @param {string} str
- */
-function camelCase(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
 /**
  * @param {URL} url
  */
@@ -178,7 +171,6 @@ export default {
   protocolHost,
   getList,
   getBlacklist,
-  camelCase,
   getConfig,
   getOptions,
   getPingCache,

src/pages/components/Input.svelte

@@ -38,4 +38,9 @@
   input:focus {
     outline-color: var(--active);
   }
+  @media (max-width: 715px) {
+    input {
+      width: 200px;
+    }
+  }
 </style>

src/pages/fonts/styles.css

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: "Inter";
+  src: url("Inter-VariableFont_slnt,wght.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Vazirmatn";
+  src: url("Vazirmatn-VariableFont_wght.ttf");
+  font-weight: normal;
+  font-style: normal;
+}

src/pages/options/index.html

@@ -7,6 +7,7 @@
 	<link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg">
 	<title>Settings</title>
 	<link rel='stylesheet' href='build/bundle.css'>
+	<link rel='stylesheet' href='../fonts/styles.css'>
 	<script defer src='build/bundle.js'></script>
 </head>
 

src/pages/options_src/App.svelte

@@ -93,7 +93,6 @@
 {/if}
 
 <style>
- 
   :global(body) {
     width: 100vw;
     height: 100vh;
@@ -115,4 +114,23 @@
     color: var(--text);
     overflow: scroll;
   }
+
+  @media (max-width: 1250px) {
+    div {
+      grid-template-columns: auto;
+      grid-template-rows: min-content auto;
+      padding-left: 5vw;
+      padding-right: 5vw;
+    }
+  }
+
+  @media (max-width: 715px) {
+    div {
+      font-size: 14px;
+      grid-template-columns: auto;
+      grid-template-rows: min-content auto;
+      padding-left: 5vw;
+      padding-right: 5vw;
+    }
+  }
 </style>

src/pages/options_src/General/General.svelte

@@ -3,10 +3,12 @@
 
   import Exceptions from "./Exceptions.svelte"
   import SettingsButtons from "./SettingsButtons.svelte"
-  import RowSelect from "../../components/RowSelect.svelte"
-  import Checkbox from "../../components/RowCheckbox.svelte"
   import { options } from "../stores"
   import { onDestroy } from "svelte"
+  import Row from "../../components/Row.svelte"
+  import Label from "../../components/Label.svelte"
+  import Select from "../../components/Select.svelte"
+  import Checkbox from "../../components/Checkbox.svelte"
 
   let _options
   const unsubscribe = options.subscribe(val => (_options = val))
@@ -23,46 +25,55 @@
 </script>
 
 <div>
-  <RowSelect
-    label="Theme"
-    values={[
-      { value: "detect", name: "Auto" },
-      { value: "light", name: "Light" },
-      { value: "dark", name: "Dark" },
-    ]}
-    value={_options.theme}
-    onChange={e => {
-      _options["theme"] = e.target.options[e.target.options.selectedIndex].value
-      options.set(_options)
-    }}
-    ariaLabel="select theme"
-  />
+  <Row>
+    <Label>Theme</Label>
+    <Select
+      values={[
+        { value: "detect", name: "Auto" },
+        { value: "light", name: "Light" },
+        { value: "dark", name: "Dark" },
+      ]}
+      value={_options.theme}
+      onChange={e => {
+        _options.theme = e.target.options[e.target.options.selectedIndex].value
+        options.set(_options)
+      }}
+      ariaLabel="select theme"
+    />
+  </Row>
 
-  <RowSelect
-    label="Fetch public instances"
-    value={_options.fetchInstances}
-    onChange={e => {
-      _options["fetchInstances"] = e.target.options[e.target.options.selectedIndex].value
-      options.set(_options)
-    }}
-    ariaLabel="Select fetch public instances"
-    values={[
-      { value: "github", name: "GitHub" },
-      { value: "codeberg", name: "Codeberg" },
-      { value: "disable", name: "Disable" },
-    ]}
-  />
+  <Row>
+    <Label>Fetch public instances</Label>
+    <Select
+      value={_options.fetchInstances}
+      values={[
+        { value: "github", name: "GitHub" },
+        { value: "codeberg", name: "Codeberg" },
+        { value: "disable", name: "Disable" },
+      ]}
+      onChange={e => {
+        _options.fetchInstances = e.target.options[e.target.options.selectedIndex].value
+        options.set(_options)
+      }}
+      ariaLabel={"Select fetch public instances"}
+    />
+  </Row>
 
-  <Checkbox
-    label="Redirect Only in Incognito"
-    checked={_options.redirectOnlyInIncognito}
-    onChange={e => {
-      _options["redirectOnlyInIncognito"] = e.target.checked
-      options.set(_options)
-    }}
-  />
+  <Row>
+    <Label>Redirect Only in Incognito</Label>
+    <Checkbox
+      checked={_options.redirectOnlyInIncognito}
+      onChange={e => {
+        _options.redirectOnlyInIncognito = e.target.checked
+        options.set(_options)
+      }}
+    />
+  </Row>
 
-  <Checkbox label="Bookmarks menu" bind:checked={bookmarksPermission} />
+  <Row>
+    <Label>Bookmarks menu</Label>
+    <Checkbox bind:checked={bookmarksPermission} />
+  </Row>
 
   <Exceptions opts={_options} />
 

src/pages/options_src/Services/Instances.svelte

@@ -63,10 +63,10 @@
       console.log("pinging...", instance)
       pingCache[instance] = { color: "lightblue", value: "pinging..." }
       const time = await utils.ping(instance)
-      pingCache[instance] = processTime(time)
+      pingCache[instance] = colorTime(time)
     }
   }
-  function processTime(time) {
+  function colorTime(time) {
     let value
     let color
     if (time < 5000) {
@@ -225,6 +225,7 @@
   a {
     color: var(--text);
     text-decoration: none;
+    word-wrap: anywhere;
   }
 
   a:hover {

src/pages/options_src/Services/RedirectType.svelte

@@ -1,12 +1,11 @@
 <script>
   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"
+  import Select from "../../components/Select.svelte"
 
   let _options
   let _config
@@ -63,15 +62,17 @@
   }
 </script>
 
-<RowSelect
-  label="Redirect Type"
-  value={serviceOptions.redirectType}
-  onChange={e => {
-    serviceOptions.redirectType = e.target.options[e.target.options.selectedIndex].value
-    options.set(_options)
-  }}
-  {values}
-/>
+<Row>
+  <Label>Redirect Type</Label>
+  <Select
+    value={serviceOptions.redirectType}
+    onChange={e => {
+      serviceOptions.redirectType = e.target.options[e.target.options.selectedIndex].value
+      options.set(_options)
+    }}
+    {values}
+  />
+</Row>
 
 {#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"}
   <Row>