Migrating UI to Svelte

5 files changed, 0 insertions, 796 deletions

diff --git a/src/pages/options/index.js b/src/pages/options/index.js
deleted file mode 100644
index 8d5676e0..00000000
--- a/src/pages/options/index.js
+++ /dev/null
@@ -1,399 +0,0 @@
-import utils from "../../assets/javascripts/utils.js"
-
-let config,
-  options,
-  blacklist,
-  redirects,
-  divs = {}
-
-for (const a of document.getElementById("links").getElementsByTagName("a")) {
-  if (!a.href.includes("https://")) {
-    a.addEventListener("click", e => {
-      const path = a.getAttribute("href").replace("#", "")
-      loadPage(path)
-      e.preventDefault()
-    })
-  }
-}
-
-config = await utils.getConfig()
-options = await utils.getOptions()
-
-/**
- * @param {string} service
- */
-async function changeFrontendsSettings(service) {
-  options = await utils.getOptions()
-  const opacityDiv = document.getElementById(`${service}-opacity`)
-  if (document.getElementById(`${service}-enabled`).checked) {
-    opacityDiv.style.pointerEvents = "auto"
-    opacityDiv.style.opacity = 1
-    opacityDiv.style.userSelect = "auto"
-  } else {
-    opacityDiv.style.pointerEvents = "none"
-    opacityDiv.style.opacity = 0.4
-    opacityDiv.style.userSelect = "none"
-  }
-  for (const frontend in config.services[service].frontends) {
-    if (config.services[service].frontends[frontend].instanceList) {
-      const frontendDiv = document.getElementById(frontend)
-      if (typeof divs[service].frontend !== "undefined") {
-        if (
-          frontend == divs[service].frontend.value ||
-          (config.services[service].frontends[divs[service].frontend.value].desktopApp &&
-            divs[service].embedFrontend &&
-            frontend == divs[service].embedFrontend.value)
-        ) {
-          frontendDiv.style.display = ""
-          if (config.services[service].frontends[frontend].localhost === true) {
-            document.getElementById(`${service}-instance-div`).style.display = ""
-
-            if (options[service].instance == "localhost") {
-              frontendDiv.style.display = "none"
-            }
-          } else {
-            document.getElementById(`${service}-instance-div`).style.display = "none"
-          }
-        } else {
-          frontendDiv.style.display = "none"
-        }
-      }
-    }
-  }
-  if (document.getElementById(`${service}-redirectType`)) {
-    const frontend = options[service].frontend
-    if (config.services[service].frontends[frontend].embeddable) {
-      document.getElementById(`${service}-redirectType`).innerHTML = `
-			<option value="both" data-localise="__MSG_both__">both</options>
-			<option value="sub_frame" data-localise="__MSG_onlyEmbedded__">Only Embedded</option>
-			<option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>
-			`
-    } else if (
-      config.services[service].frontends[frontend].desktopApp &&
-      Object.values(config.services[service].frontends).some(frontend => frontend.embeddable)
-    ) {
-      document.getElementById(`${service}-redirectType`).innerHTML = `
-			<option value="both" data-localise="__MSG_both__">both</options>
-			<option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>
-			`
-      if (options[service].redirectType == "sub_frame") {
-        options[service].redirectType = "main_frame"
-        browser.storage.local.set({ options })
-      }
-    } else {
-      document.getElementById(`${service}-redirectType`).innerHTML =
-        '<option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>'
-      options[service].redirectType = "main_frame"
-
-      browser.storage.local.set({ options })
-    }
-    document.getElementById(`${service}-redirectType`).value = options[service].redirectType
-    if (config.services[service].frontends[frontend].desktopApp && options[service].redirectType != "main_frame") {
-      document.getElementById(`${service}-embedFrontend-div`).style.display = ""
-      document.getElementById(divs[service].embedFrontend.value).style.display = ""
-    } else if (
-      config.services[service].frontends[frontend].desktopApp &&
-      options[service].redirectType == "main_frame"
-    ) {
-      document.getElementById(`${service}-embedFrontend-div`).style.display = "none"
-      document.getElementById(divs[service].embedFrontend.value).style.display = "none"
-    } else {
-      document.getElementById(`${service}-embedFrontend-div`).style.display = "none"
-    }
-  }
-  const frontend_name_element = document.getElementById(`${service}_page`).getElementsByClassName("frontend_name")[0]
-  frontend_name_element.href = config.services[service].frontends[divs[service].frontend.value].url
-}
-
-/**
- * @param {string} path
- */
-async function loadPage(path) {
-  options = await utils.getOptions()
-  for (const section of document.getElementById("pages").getElementsByTagName("section")) section.style.display = "none"
-  document.getElementById(`${path}_page`).style.display = "block"
-
-  for (const element of document.getElementsByClassName("title")) {
-    const a = element.getElementsByTagName("a")[0]
-    if (a.getAttribute("href") == `#${path}`) {
-      element.classList.add("selected")
-    } else {
-      element.classList.remove("selected")
-    }
-  }
-
-  for (const service in config.services) {
-    if (options[service].enabled) {
-      document.getElementById(`${service}-link`).style.opacity = 1
-    } else {
-      document.getElementById(`${service}-link`).style.opacity = 0.4
-    }
-  }
-
-  window.history.pushState({ id: "100" }, "Page 2", `/pages/options/index.html#${path}`)
-
-  if (path != "general") {
-    const service = path
-    divs[service] = {}
-    for (const option in config.services[service].options) {
-      divs[service][option] = document.getElementById(`${service}-${option}`)
-      if (typeof config.services[service].options[option] == "boolean")
-        divs[service][option].checked = options[service][option]
-      else divs[service][option].value = options[service][option]
-      divs[service][option].addEventListener("change", async () => {
-        let options = await utils.getOptions()
-        if (typeof config.services[service].options[option] == "boolean")
-          options[service][option] = divs[service][option].checked
-        else options[service][option] = divs[service][option].value
-        browser.storage.local.set({ options })
-        changeFrontendsSettings(service)
-      })
-    }
-    changeFrontendsSettings(service)
-
-    blacklist = await utils.getBlacklist(options)
-    redirects = await utils.getList(options)
-    for (const frontend in config.services[service].frontends) {
-      if (config.services[service].frontends[frontend].instanceList) {
-        if (redirects == "disabled" || blacklist == "disabled") {
-          document.getElementById(frontend).getElementsByClassName("clearnet")[0].style.display = "none"
-          document.getElementById(frontend).getElementsByClassName("ping")[0].style.display = "none"
-        } else if (!redirects || !blacklist) {
-          document
-            .getElementById(frontend)
-            .getElementsByClassName("clearnet")[0]
-            .getElementsByClassName("checklist")[0]
-            .getElementsByClassName("loading")[0].innerHTML = "Could not fetch instances."
-        } else {
-          createList(frontend)
-        }
-      }
-    }
-
-    for (const frontend in config.services[service].frontends) {
-      if (config.services[service].frontends[frontend].instanceList) {
-        processCustomInstances(frontend)
-        document.getElementById(`ping-${frontend}`).addEventListener("click", async () => {
-          document.getElementById(`ping-${frontend}`).getElementsByTagName("x")[0].innerHTML = "Pinging..."
-          await ping(frontend)
-          document.getElementById(`ping-${frontend}`).getElementsByTagName("x")[0].innerHTML = "Ping instances"
-        })
-      }
-    }
-  }
-}
-
-async function calcCustomInstances(frontend) {
-  let options = await utils.getOptions()
-  let customInstances = options[frontend]
-  const pingCache = await utils.getPingCache()
-
-  document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].innerHTML = customInstances
-    .map(x => {
-      const time = pingCache[x]
-      if (time) {
-        var { color, text } = processTime(time)
-      }
-      const timeText = time ? `<span class="ping" style="color:${color};">${text}</span>` : ""
-      const custom = isCustomInstance(frontend, x) ? "" : `<span>custom</span>`
-      return `<div>
-							<x>
-								<a href="${x}" target="_blank">${x}</a>
-								${timeText}
-								${custom}
-							</x>
-							<button class="add clear-${x}">
-								<svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-									<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-								</svg>
-							</button>
-						</div>
-						<hr>`
-    })
-    .join("\n")
-  for (const item of customInstances) {
-    document
-      .getElementById(frontend)
-      .getElementsByClassName(`clear-${item}`)[0]
-      .addEventListener("click", async () => {
-        const index = customInstances.indexOf(item)
-        if (index > -1) customInstances.splice(index, 1)
-        options = await utils.getOptions()
-        options[frontend] = customInstances
-        browser.storage.local.set({ options }, async () => {
-          calcCustomInstances(frontend)
-          createList(frontend)
-        })
-      })
-  }
-}
-
-async function processCustomInstances(frontend) {
-  calcCustomInstances(frontend)
-  document
-    .getElementById(frontend)
-    .getElementsByClassName("custom-instance-form")[0]
-    .addEventListener("submit", async event => {
-      event.preventDefault()
-      let options = await utils.getOptions()
-      let customInstances = options[frontend]
-      let frontendCustomInstanceInput = document.getElementById(frontend).getElementsByClassName("custom-instance")[0]
-      try {
-        var url = new URL(frontendCustomInstanceInput.value)
-      } catch (error) {
-        return
-      }
-      let protocolHostVar = utils.protocolHost(url)
-      if (frontendCustomInstanceInput.validity.valid) {
-        if (!customInstances.includes(protocolHostVar)) {
-          customInstances.push(protocolHostVar)
-          options = await utils.getOptions()
-          options[frontend] = customInstances
-          browser.storage.local.set({ options }, () => {
-            frontendCustomInstanceInput.value = ""
-            calcCustomInstances(frontend)
-          })
-        }
-      }
-    })
-}
-
-/**
- * @param {string} frontend
- */
-async function createList(frontend) {
-  const pingCache = await utils.getPingCache()
-  const options = await utils.getOptions()
-  for (const network in config.networks) {
-    const checklist = document
-      .getElementById(frontend)
-      .getElementsByClassName(network)[0]
-      .getElementsByClassName("checklist")[0]
-
-    if (!redirects[frontend]) {
-      checklist.innerHTML = '<div class="block block-option">No instances found.</div>'
-      break
-    }
-
-    const instances = redirects[frontend][network]
-    if (!instances || instances.length === 0) continue
-
-    document.getElementById(frontend).getElementsByClassName("custom-instance")[0].placeholder =
-      redirects[frontend].clearnet[0]
-
-    instances.sort((a, b) => blacklist.cloudflare.includes(a) && !blacklist.cloudflare.includes(b))
-    const content = instances.map(x => {
-      const cloudflare = blacklist.cloudflare.includes(x)
-        ? `<a target="_blank" href="https://libredirect.github.io/docs.html#instances">
-                        <span style="color:red;">cloudflare</span>
-                    </a>`
-        : ""
-
-      let time = pingCache[x]
-      let timeText = ""
-      if (time) {
-        const { color, text } = processTime(time)
-        timeText = `<span class="ping" style="color:${color};">${text}</span>`
-      }
-
-      const chosen = options[frontend].includes(x) ? `<span style="color:grey;">chosen</span>` : ""
-
-      const warnings = [cloudflare, timeText, chosen].join(" ")
-      return `<div class="frontend">
-                            <x>
-                                <a href="${x}" target="_blank">${x}</a>
-								${warnings}
-                            </x>
-                            <button class="add add-${x}">
-                                <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
-                                    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                                </svg>
-                            </button>
-                        </div>`
-    })
-
-    checklist.innerHTML = [
-      `<div class="block block-option">
-                <label>${utils.camelCase(network)}</label>
-            </div>`,
-      ...content,
-      "<br>",
-    ].join("\n<hr>\n")
-
-    for (const instance of instances) {
-      checklist.getElementsByClassName(`add-${instance}`)[0].addEventListener("click", async () => {
-        let options = await utils.getOptions()
-        if (!options[frontend].includes(instance)) {
-          options[frontend].push(instance)
-          browser.storage.local.set({ options }, () => {
-            calcCustomInstances(frontend)
-            createList(frontend)
-          })
-        }
-      })
-    }
-  }
-}
-
-const r = window.location.href.match(/#(.*)/)
-if (r) loadPage(r[1])
-else loadPage("general")
-
-/**
- * @param {string} frontend
- */
-async function ping(frontend) {
-  const instanceElements = [
-    ...document.getElementById(frontend).getElementsByClassName("custom-checklist")[0].getElementsByTagName("x"),
-    ...document.getElementById(frontend).getElementsByClassName("clearnet")[0].getElementsByTagName("x"),
-  ]
-
-  let pingCache = await utils.getPingCache()
-  let redundancyList = {}
-  for (const element of instanceElements) {
-    let span = element.getElementsByClassName("ping")[0]
-    if (!span) span = document.createElement("span")
-    span.classList = ["ping"]
-    span.innerHTML = '<span style="color:lightblue">pinging...</span>'
-    element.appendChild(span)
-    const href = element.getElementsByTagName("a")[0].href
-    const innerHTML = element.getElementsByTagName("a")[0].innerHTML
-    const time = redundancyList[innerHTML] ?? (await utils.ping(href))
-    const { color, text } = processTime(time)
-    span.innerHTML = `<span style="color:${color};">${text}</span>`
-    pingCache[innerHTML] = time
-    redundancyList[innerHTML] = time
-
-    browser.storage.local.set({ pingCache })
-  }
-}
-
-/**
- * @param {number} time
- */
-function processTime(time) {
-  let text
-  let color
-  if (time < 5000) {
-    text = `${time}ms`
-    if (time <= 1000) color = "green"
-    else if (time <= 2000) color = "orange"
-  } else if (time >= 5000) {
-    color = "red"
-    if (time == 5000) text = "5000ms+"
-    if (time > 5000) text = `Error: ${time - 5000}`
-  } else {
-    color = "red"
-    text = "Server not found"
-  }
-  return { color, text }
-}
-
-function isCustomInstance(frontend, instance) {
-  for (const network in config.networks) {
-    if (!redirects[frontend]) return false
-    const instances = redirects[frontend][network]
-    if (instances.includes(instance)) return true
-  }
-  return false
-}
diff --git a/src/pages/options/index.pug b/src/pages/options/index.pug
deleted file mode 100644
index 4e19b087..00000000
--- a/src/pages/options/index.pug
+++ /dev/null
@@ -1,10 +0,0 @@
-doctype html
-html(id="elementToShowWithJavaScript" lang="en")
-    include /src/pages/widgets/head
-    body(class="option" dir="auto")
-        include /src/pages/widgets/links
-        div#pages
-            include /src/pages/options/widgets/general
-            include /src/pages/options/widgets/services
-    script(type="module" src="./index.js")
-    
\ No newline at end of file
diff --git a/src/pages/options/widgets/general.js b/src/pages/options/widgets/general.js
deleted file mode 100644
index b9ddfd08..00000000
--- a/src/pages/options/widgets/general.js
+++ /dev/null
@@ -1,216 +0,0 @@
-"use strict"
-window.browser = window.browser || window.chrome
-
-import utils from "../../../assets/javascripts/utils.js"
-import servicesHelper from "../../../assets/javascripts/services.js"
-
-const isChrome = browser.runtime.getBrowserInfo === undefined
-
-async function setOption(option, type, event) {
-  let options = await utils.getOptions()
-  switch (type) {
-    case "select":
-      options[option] = event.target.options[event.target.options.selectedIndex].value
-      break
-    case "checkbox":
-      options[option] = event.target.checked
-      break
-    case "range":
-      options[option] = event.target.value
-      break
-  }
-  browser.storage.local.set({ options })
-}
-
-const exportSettingsElement = document.getElementById("export-settings")
-async function exportSettings() {
-  const options = await utils.getOptions()
-  options.version = browser.runtime.getManifest().version
-  let resultString = JSON.stringify(options, null, "  ")
-  exportSettingsElement.href = "data:application/json;base64," + btoa(resultString)
-  exportSettingsElement.download = `libredirect-settings-v${options.version}.json`
-  return
-}
-exportSettings()
-document.getElementById("general_page").onclick = exportSettings
-
-const importSettingsElement = document.getElementById("import-settings")
-const importSettingsElementText = document.getElementById("import_settings_text")
-importSettingsElement.addEventListener("change", () => {
-  function importError() {
-    const oldHTML = importSettingsElementText.innerHTML
-    importSettingsElementText.innerHTML = '<span style="color:red;">Error!</span>'
-    setTimeout(() => (importSettingsElementText.innerHTML = oldHTML), 1000)
-  }
-  importSettingsElementText.innerHTML = "..."
-  let file = importSettingsElement.files[0]
-  const reader = new FileReader()
-  reader.readAsText(file)
-  reader.onload = async () => {
-    const data = JSON.parse(reader.result)
-    if ("theme" in data && data.version == browser.runtime.getManifest().version) {
-      browser.storage.local.clear(async () => {
-        browser.storage.local.set({ options: data }, () => {
-          location.reload()
-        })
-      })
-    } else {
-      console.log("incompatible settings")
-      importError()
-    }
-  }
-  reader.onerror = error => {
-    console.log("error", error)
-    importError()
-  }
-})
-
-const exportSettingsSync = document.getElementById("export-settings-sync")
-const importSettingsSync = document.getElementById("import-settings-sync")
-const importSettingsSyncText = document.getElementById("import_settings_sync_text")
-
-exportSettingsSync.addEventListener("click", async () => {
-  let options = await utils.getOptions()
-  options.version = browser.runtime.getManifest().version
-  browser.storage.sync.set({ options }, () => location.reload())
-})
-
-importSettingsSync.addEventListener("click", () => {
-  function importError() {
-    importSettingsSyncText.innerHTML = '<span style="color:red;">Error!</span>'
-    setTimeout(() => (importSettingsSyncText.innerHTML = oldHTML), 1000)
-  }
-  const oldHTML = importSettingsSyncText.innerHTML
-  importSettingsSyncText.innerHTML = "..."
-  browser.storage.sync.get({ options }, r => {
-    const options = r.options
-    if (options.version == browser.runtime.getManifest().version) {
-      browser.storage.local.set({ options }, () => location.reload())
-    } else {
-      importError()
-    }
-  })
-})
-
-const resetSettings = document.getElementById("reset-settings")
-resetSettings.addEventListener("click", async () => {
-  resetSettings.innerHTML = "..."
-  await servicesHelper.initDefaults()
-  location.reload()
-})
-
-const fetchInstancesElement = document.getElementById("fetch-instances")
-fetchInstancesElement.addEventListener("change", event => {
-  setOption("fetchInstances", "select", event)
-  location.reload()
-})
-
-const redirectOnlyInIncognitoElement = document.getElementById("redirectOnlyInIncognito")
-redirectOnlyInIncognitoElement.addEventListener("change", event => {
-  setOption("redirectOnlyInIncognito", "checkbox", event)
-})
-
-const bookmarksMenuElement = document.getElementById("bookmarksMenu")
-bookmarksMenuElement.addEventListener("change", async event => {
-  if (event.target.checked)
-    browser.permissions.request({ permissions: ["bookmarks"] }, r => (bookmarksMenuElement.checked = r))
-  else browser.permissions.remove({ permissions: ["bookmarks"] }, r => (bookmarksMenuElement.checked = !r))
-})
-
-let themeElement = document.getElementById("theme")
-themeElement.addEventListener("change", event => {
-  setOption("theme", "select", event)
-  location.reload()
-})
-
-let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance")
-let instanceTypeElement = document.getElementById("exceptions-custom-instance-type")
-let instanceType = "url"
-
-let config = await utils.getConfig()
-
-for (const service in config.services) {
-  document.getElementById(service).addEventListener("change", async event => {
-    let options = await utils.getOptions()
-    if (event.target.checked && !options.popupServices.includes(service)) options.popupServices.push(service)
-    else if (options.popupServices.includes(service)) {
-      var index = options.popupServices.indexOf(service)
-      if (index !== -1) options.popupServices.splice(index, 1)
-    }
-    browser.storage.local.set({ options })
-  })
-}
-
-let options = await utils.getOptions()
-themeElement.value = options.theme
-fetchInstancesElement.value = options.fetchInstances
-redirectOnlyInIncognitoElement.checked = options.redirectOnlyInIncognito
-browser.permissions.contains({ permissions: ["bookmarks"] }, r => (bookmarksMenuElement.checked = r))
-for (const service in config.services)
-  document.getElementById(service).checked = options.popupServices.includes(service)
-
-instanceTypeElement.addEventListener("change", event => {
-  instanceType = event.target.options[instanceTypeElement.selectedIndex].value
-  if (instanceType == "url") {
-    nameCustomInstanceInput.setAttribute("type", "url")
-    nameCustomInstanceInput.setAttribute("placeholder", "https://www.google.com")
-  } else if (instanceType == "regex") {
-    nameCustomInstanceInput.setAttribute("type", "text")
-    nameCustomInstanceInput.setAttribute("placeholder", "https?://(www.|)youtube.com/")
-  }
-})
-
-let exceptionsCustomInstances = options.exceptions
-function calcExceptionsCustomInstances() {
-  document.getElementById("exceptions-custom-checklist").innerHTML = [
-    ...exceptionsCustomInstances.url,
-    ...exceptionsCustomInstances.regex,
-  ]
-    .map(
-      x => `<div>
-                      ${x}
-                      <button class="add" id="clear-${x}">
-                        <svg xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                        fill="currentColor">
-                          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-                        </svg>
-                      </button>
-                    </div>
-                    <hr>`
-    )
-    .join("\n")
-
-  for (const x of [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]) {
-    document.getElementById(`clear-${x}`).addEventListener("click", async () => {
-      let index
-      index = exceptionsCustomInstances.url.indexOf(x)
-      if (index > -1) exceptionsCustomInstances.url.splice(index, 1)
-      else {
-        index = exceptionsCustomInstances.regex.indexOf(x)
-        if (index > -1) exceptionsCustomInstances.regex.splice(index, 1)
-      }
-      options = await utils.getOptions()
-      options.exceptions = exceptionsCustomInstances
-      browser.storage.local.set({ options })
-      calcExceptionsCustomInstances()
-    })
-  }
-}
-calcExceptionsCustomInstances()
-document.getElementById("custom-exceptions-instance-form").addEventListener("submit", async event => {
-  event.preventDefault()
-  let val
-  if (instanceType == "url" && nameCustomInstanceInput.validity.valid) {
-    val = nameCustomInstanceInput.value
-    if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val)
-  } else if (instanceType == "regex") {
-    val = nameCustomInstanceInput.value
-    if (val.trim() != "" && !exceptionsCustomInstances.regex.includes(val)) exceptionsCustomInstances.regex.push(val)
-  }
-  if (val) {
-    options = await utils.getOptions()
-    options.exceptions = exceptionsCustomInstances
-    browser.storage.local.set({ options }, () => (nameCustomInstanceInput.value = ""))
-  }
-  calcExceptionsCustomInstances()
-})
diff --git a/src/pages/options/widgets/general.pug b/src/pages/options/widgets/general.pug
deleted file mode 100644
index 1388584a..00000000
--- a/src/pages/options/widgets/general.pug
+++ /dev/null
@@ -1,88 +0,0 @@
-section(class="block-option" id="general_page")
-    div(class="block block-option")
-        h1(data-localise="__MSG_general__") General
-    hr
-
-    div(class="block block-option")
-        label(data-localise="__MSG_theme__") Theme
-        select(id="theme" aria-label="select theme")
-            option(value="detect" data-localise="__MSG_auto__") Auto
-            option(value="light" data-localise="__MSG_light__") Light
-            option(value="dark" data-localise="__MSG_dark__") Dark
-
-    div(class="block block-option")
-        label(data-localise="__MSG_fetchPublicInstances__") Fetch public instances
-        select(id="fetch-instances" aria-label="Select fetch public instances")
-            option(value="github") GitHub
-            option(value="codeberg") Codeberg
-            option(value="disable" data-localise="__MSG_disable__") Disable
-
-    div(class="block block-option")
-        label(for='redirectOnlyInIncognito' data-localise="__MSG_redirectOnlyInIncognito__") Redirect Only in Incognito
-        input(id='redirectOnlyInIncognito' type="checkbox")
-
-    div(class="block block-option")
-        label(for='bookmarksMenu' data-localise="__MSG_bookmarksMenu__") Bookmarks menu
-        input(id='bookmarksMenu' type="checkbox")
-
-    div(class="block block-option")
-        label(data-localise="__MSG_excludeFromRedirecting__") Excluded from redirecting
-
-    form(id="custom-exceptions-instance-form")
-        div(class="block block-option")
-            div(class="block" style="padding: 0")
-                input(id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" aria-label="Add url exception input")
-                |&nbsp;
-                select(id="exceptions-custom-instance-type")
-                    option(value="url") URL
-                    option(value="regex") Regex
-                |&nbsp;
-            button(class="add" id="exceptions-add-instance" type="submit" aria-label="Add the url exception")
-                svg(xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
-                    path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z")
-
-    hr
-
-    div(class="checklist" id="exceptions-custom-checklist")
-
-    div(class="buttons")
-        label(class="button button-inline" id="import_settings_text" for="import-settings")
-            svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
-                path(d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z")
-            |&nbsp;
-            x(data-localise="__MSG_importSettings__") Import Settings
-        input(id="import-settings" type="file" accept=".json" style="display: none")
-
-        |&nbsp;&nbsp;
-
-        a(class="button button-inline" id="export-settings")
-            svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
-                path(d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z")
-            |&nbsp;
-            x(data-localise="__MSG_exportSettings__") Export Settings
-
-        |&nbsp;&nbsp;
-
-        button(class="button button-inline" id="export-settings-sync")
-            svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
-                path(d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z")
-            |&nbsp;
-            x() Export Settings to Sync
-
-        |&nbsp;&nbsp;
-
-        button(class="button button-inline" id="import-settings-sync")
-            svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
-                path(d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z")
-            |&nbsp;
-            x(id="import_settings_sync_text") Import Settings from Sync
-
-        |&nbsp;&nbsp;
-
-        button(class="button button-inline" id="reset-settings")
-            svg(xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
-                path(d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z")
-                path(d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z")
-            x(data-localise="__MSG_resetSettings__") Reset Settings
-
-    script(type="module" src="./widgets/general.js")
\ No newline at end of file
diff --git a/src/pages/options/widgets/services.pug b/src/pages/options/widgets/services.pug
deleted file mode 100644
index e08bb001..00000000
--- a/src/pages/options/widgets/services.pug
+++ /dev/null
@@ -1,83 +0,0 @@
-each val, service in services
-    section(class="block-option" id=service+"_page")
-        div(class="block block-option")
-            h1
-                a(target="_blank" href=services[service].url)=services[service].name
-
-        hr
-
-        div(class="block block-option")
-            label(for=`${service}-enabled` data-localise="__MSG_enable__") Enable
-            input(id=`${service}-enabled` type="checkbox")
-
-        div(class="block block-option")
-            label(for=service data-localise="__MSG_showInPopup__") Show in popup
-            input(id=service type="checkbox")
-
-        div(id=service+"-opacity")
-
-            div(class="block block-option")
-                label(for=`${service}-frontend`)
-                    a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend
-                select(id=`${service}-frontend`)
-                    each val, frontend in services[service].frontends
-                        option(value=frontend)=services[service].frontends[frontend].name
-
-            div(class="block block-option" id=service+"-instance-div")
-                label(for=`${service}-instance`) Instance Type
-                select(id=`${service}-instance`)
-                    option(value="localhost") localhost
-                    option(value="public") public instances
-
-            div(class="block block-option")
-                label(for=`${service}-redirectType` data-localise="__MSG_redirectType__") Redirect Type
-                select(id=`${service}-redirectType`)
-
-
-            div(id=`${service}-embedFrontend-div` class="block block-option")
-                label(for=`${service}-embedFrontend` data-localise="__MSG_embedFrontend__") Embed Frontend
-                select(id=`${service}-embedFrontend`)
-                    each val, frontend in services[service].frontends
-                        if services[service].frontends[frontend].embeddable && services[service].frontends[frontend].instanceList
-                            option(value=frontend)=services[service].frontends[frontend].name
-
-
-            div(class="block block-option")
-                label(for=`${service}-unsupportedUrls` data-localise="__MSG_unsupportedIframesHandling__") Unsupported iframes handling
-                select(id=`${service}-unsupportedUrls`)
-                    option(value="bypass") bypass
-                    option(value="block") block
-
-            if (service == 'search')
-                div(class="block block-option")
-                    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>.
-
-
-            each val, frontend in services[service].frontends
-                if services[service].frontends[frontend].instanceList
-                    div(id=frontend dir="ltr")
-                        hr        
-                        div(dir="auto" class="block block-option")
-                            label(data-localise="__MSG_addYourFavoriteInstances__") Add your favorite instances
-
-                        form(class="custom-instance-form")
-                            div(class="block block-option")
-                                input(class="custom-instance" type="url" placeholder="https://instance.com" aria-label="Add instance input")
-                                button(class="add add-instance" type="submit" aria-label="Add the instance")
-                                    svg(xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
-                                        path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z")
-
-                        div(class="checklist custom-checklist")  
-
-                        div(class="ping block")
-                            button(class="button button-inline" id=`ping-${frontend}`)
-                                svg(xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
-                                    path(d="M10.45 15.5q.6.6 1.55.587.95-.012 1.4-.687L19 7l-8.4 5.6q-.675.45-.712 1.375-.038.925.562 1.525ZM12 4q1.475 0 2.838.412Q16.2 4.825 17.4 5.65l-1.9 1.2q-.825-.425-1.712-.637Q12.9 6 12 6 8.675 6 6.338 8.337 4 10.675 4 14q0 1.05.287 2.075Q4.575 17.1 5.1 18h13.8q.575-.95.838-1.975Q20 15 20 13.9q0-.9-.212-1.75-.213-.85-.638-1.65l1.2-1.9q.75 1.175 1.188 2.5.437 1.325.462 2.75.025 1.425-.325 2.725-.35 1.3-1.025 2.475-.275.45-.75.7-.475.25-1 .25H5.1q-.525 0-1-.25t-.75-.7q-.65-1.125-1-2.387Q2 15.4 2 14q0-2.075.788-3.888.787-1.812 2.15-3.175Q6.3 5.575 8.125 4.787 9.95 4 12 4Zm.175 7.825Z")
-                                |&nbsp;
-                                x() Ping instances
-
-                        each val, network in networks
-                            div(class=network)
-                                div(class="checklist")
-                                    if (network == 'clearnet')
-                                        div(class="block block-option loading") Loading...
\ No newline at end of file