From c9649ff3fc1c2e178fe7f879d7a36bae7ad97f77 Mon Sep 17 00:00:00 2001
From: perennial <mail@perennialte.ch>
Date: Mon, 30 Sep 2024 21:28:01 +1000
Subject: [PATCH] add proxy-toggle.js

---
 assets/js/proxy-toggle.js            | 27 +++++++++++++++++++++++++++
 assets/views/layout/default.jet.html |  3 ++-
 assets/views/settings.jet.html       | 11 +++++++++--
 3 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 assets/js/proxy-toggle.js

diff --git a/assets/js/proxy-toggle.js b/assets/js/proxy-toggle.js
new file mode 100644
index 0000000..b9c2972
--- /dev/null
+++ b/assets/js/proxy-toggle.js
@@ -0,0 +1,27 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const showAllProxiesToggle = document.getElementById("show-all-proxies");
+  const imageProxySelect = document.getElementById("image-proxy");
+
+  showAllProxiesToggle.addEventListener("change", function () {
+    const showAll = this.checked;
+    const options = imageProxySelect.options;
+    let firstVisibleOption = null;
+
+    for (let i = 0; i < options.length; i++) {
+      const option = options[i];
+      const proxyType = option.getAttribute("data-proxy-type");
+
+      if (proxyType === "working" || (proxyType === "all" && showAll)) {
+        option.style.display = "";
+        if (!firstVisibleOption) firstVisibleOption = option;
+      } else {
+        option.style.display = "none";
+      }
+    }
+
+    // If the currently selected option is now hidden, select the first visible option
+    if (imageProxySelect.selectedOptions[0].style.display === "none") {
+      firstVisibleOption.selected = true;
+    }
+  });
+});
diff --git a/assets/views/layout/default.jet.html b/assets/views/layout/default.jet.html
index ddafe71..ff0c89b 100644
--- a/assets/views/layout/default.jet.html
+++ b/assets/views/layout/default.jet.html
@@ -17,7 +17,6 @@
 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
-  <script src="/js/illust-preview.js" defer></script>
   <!-- TODO: figure out custom themes (e.g. charcoal theme) -->
   <!-- <link href="/css/bootstrap-style.css" rel="stylesheet" /> -->
 
@@ -26,10 +25,12 @@
   <script src="/js/htmx@1.9.10.min.js"
     integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"></script> -->
 
+  <!-- TODO: load these JS files only on pages that require them -->
   <script src="/js/illust-preview.js" defer></script>
   <!-- TODO: can be annoying when you accidentally scroll inside a horizontal scroll area instead of the main content -->
   <!-- <script src="/js/horizontal-scroll.js" defer></script> -->
   <script src="/js/comment-pagination.js" defer></script>
+  <script src="/js/proxy-toggle.js" defer></script>
 
   <meta content="summary_large_image" name="twitter:card" />
 
diff --git a/assets/views/settings.jet.html b/assets/views/settings.jet.html
index 2e60aa0..c37e0b8 100644
--- a/assets/views/settings.jet.html
+++ b/assets/views/settings.jet.html
@@ -82,12 +82,19 @@
                                     also specify a custom proxy server by entering its URL and clicking 'Save Changes'.
                                 </p>
                                 <form action="/settings/imageServer" method="post">
+                                    <div class="mb-3 form-check form-switch">
+                                        <input class="form-check-input" type="checkbox" role="switch" id="show-all-proxies">
+                                        <label class="form-check-label" for="show-all-proxies">Show all proxy servers</label>
+                                    </div>
                                     <div class="mb-3">
                                         <label for="image-proxy" class="form-label">Select image proxy server</label>
                                         <select class="form-select" id="image-proxy" name="image-proxy" required>
-                                            <option value="">/proxy/i.pximg.net (built-in proxy)</option>
+                                            <option value="" data-proxy-type="working">/proxy/i.pximg.net (built-in proxy)</option>
+                                            {{- range .WorkingProxyList }}
+                                            <option value="{{.}}" data-proxy-type="working">{{.}}</option>
+                                            {{- end }}
                                             {{- range .ProxyList }}
-                                            <option value="{{.}}">{{.}}</option>
+                                            <option value="{{.}}" data-proxy-type="all" style="display: none;">{{.}}</option>
                                             {{- end }}
                                         </select>
                                     </div>