Improved design of sidebar and customize popup https://github.com/libredirect/libredirect/issues/369

4 files changed, 332 insertions, 219 deletions

diff --git a/src/config/config.json b/src/config/config.json
index b1c4c8a4..cff06b6c 100644
--- a/src/config/config.json
+++ b/src/config/config.json
@@ -22,8 +22,12 @@
 			"frontends": {
 				"invidious": {
 					"preferences": {
-						"cookies": ["PREFS"],
-						"localstorage": ["dark_mode"]
+						"cookies": [
+							"PREFS"
+						],
+						"localstorage": [
+							"dark_mode"
+						]
 					},
 					"name": "Invidious",
 					"embeddable": true,
@@ -59,7 +63,9 @@
 				},
 				"pipedMaterial": {
 					"preferences": {
-						"localstorage": ["PREFERENCES"]
+						"localstorage": [
+							"PREFERENCES"
+						]
 					},
 					"name": "Piped-Material",
 					"embeddable": false,
@@ -109,7 +115,9 @@
 			"frontends": {
 				"beatbump": {
 					"preferences": {
-						"localstorage": ["settings"],
+						"localstorage": [
+							"settings"
+						],
 						"indexeddb": "beatbump"
 					},
 					"name": "Beatbump",
@@ -117,14 +125,26 @@
 				},
 				"hyperpipe": {
 					"preferences": {
-						"localstorage": ["api", "authapi", "codec", "locale", "next", "pipedapi", "quality", "theme", "vol"],
+						"localstorage": [
+							"api",
+							"authapi",
+							"codec",
+							"locale",
+							"next",
+							"pipedapi",
+							"quality",
+							"theme",
+							"vol"
+						],
 						"indexeddb": "hyperpipedb"
 					},
 					"name": "Hyperpipe",
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}music\\.youtube\\.com(\\/|$)"],
+			"targets": [
+				"^https?:\\/{2}music\\.youtube\\.com(\\/|$)"
+			],
 			"name": "YT Music",
 			"options": {
 				"enabled": true,
@@ -190,7 +210,9 @@
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}(www\\.)?instagram\\.com\\/?(p\\/|$)"],
+			"targets": [
+				"^https?:\\/{2}(www\\.)?instagram\\.com\\/?(p\\/|$)"
+			],
 			"name": "Instagram",
 			"options": {
 				"enabled": true
@@ -203,13 +225,18 @@
 			"frontends": {
 				"proxiTok": {
 					"preferences": {
-						"cookies": ["api-test_endpoints", "theme"]
+						"cookies": [
+							"api-test_endpoints",
+							"theme"
+						]
 					},
 					"name": "ProxiTok",
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}(www\\.|)tiktok\\.com(\\/|$)"],
+			"targets": [
+				"^https?:\\/{2}(www\\.|)tiktok\\.com(\\/|$)"
+			],
 			"name": "TikTok",
 			"options": {
 				"enabled": true
@@ -222,7 +249,20 @@
 			"frontends": {
 				"libreddit": {
 					"preferences": {
-						"cookies": ["theme", "front_page", "layout", "wide", "post_sort", "comment_sort", "show_nsfw", "autoplay_videos", "use_hls", "hide_hls_notification", "subscriptions", "filters"]
+						"cookies": [
+							"theme",
+							"front_page",
+							"layout",
+							"wide",
+							"post_sort",
+							"comment_sort",
+							"show_nsfw",
+							"autoplay_videos",
+							"use_hls",
+							"hide_hls_notification",
+							"subscriptions",
+							"filters"
+						]
 					},
 					"name": "Libreddit",
 					"instanceList": true
@@ -253,13 +293,29 @@
 				},
 				"ferrit": {
 					"preferences": {
-						"cookies": ["theme", "front_page", "layout", "wide", "post_sort", "comment_sort", "show_nsfw", "autoplay_videos", "use_hls", "hide_hls_notification", "subscriptions", "filters"]
+						"cookies": [
+							"theme",
+							"front_page",
+							"layout",
+							"wide",
+							"post_sort",
+							"comment_sort",
+							"show_nsfw",
+							"autoplay_videos",
+							"use_hls",
+							"hide_hls_notification",
+							"subscriptions",
+							"filters"
+						]
 					},
 					"name": "Ferrit",
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com(?=\\/u(ser)?\\/|\\/r\\/|\\/?$)", "^https?:\\/{2}(i|(external-)?preview)\\.redd\\.it"],
+			"targets": [
+				"^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com(?=\\/u(ser)?\\/|\\/r\\/|\\/?$)",
+				"^https?:\\/{2}(i|(external-)?preview)\\.redd\\.it"
+			],
 			"name": "Reddit",
 			"options": {
 				"enabled": true,
@@ -277,7 +333,9 @@
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)"],
+			"targets": [
+				"^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)"
+			],
 			"name": "Imgur",
 			"options": {
 				"enabled": true,
@@ -291,13 +349,18 @@
 			"frontends": {
 				"wikiless": {
 					"preferences": {
-						"cookies": ["theme", "default_lang"]
+						"cookies": [
+							"theme",
+							"default_lang"
+						]
 					},
 					"name": "Wikiless",
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org(\\/|$)"],
+			"targets": [
+				"^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org(\\/|$)"
+			],
 			"name": "Wikipedia",
 			"options": {
 				"enabled": false
@@ -345,13 +408,17 @@
 			"frontends": {
 				"quetre": {
 					"preferences": {
-						"localstorage": ["theme"]
+						"localstorage": [
+							"theme"
+						]
 					},
 					"name": "Quetre",
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}([a-zA-Z0-9-]+\\.)*quora\\.com(\\/|$)"],
+			"targets": [
+				"^https?:\\/{2}([a-zA-Z0-9-]+\\.)*quora\\.com(\\/|$)"
+			],
 			"name": "Quora",
 			"options": {
 				"enabled": true
@@ -364,13 +431,17 @@
 			"frontends": {
 				"libremdb": {
 					"preferences": {
-						"localstorage": ["theme"]
+						"localstorage": [
+							"theme"
+						]
 					},
 					"name": "libremdb",
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}(?:www\\.|m\\.|)imdb\\.com\\/title"],
+			"targets": [
+				"^https?:\\/{2}(?:www\\.|m\\.|)imdb\\.com\\/title"
+			],
 			"name": "IMDb",
 			"options": {
 				"enabled": true
@@ -386,7 +457,9 @@
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}(www\\.|)reuters\\.com(\\/|$)"],
+			"targets": [
+				"^https?:\\/{2}(www\\.|)reuters\\.com(\\/|$)"
+			],
 			"name": "Reuters",
 			"options": {
 				"enabled": false
@@ -402,7 +475,9 @@
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}(?:[a-zA-Z0-9-]+\\.)?(?:fandom|wikia)\\.com(?=\\/wiki|\\/?$)"],
+			"targets": [
+				"^https?:\\/{2}(?:[a-zA-Z0-9-]+\\.)?(?:fandom|wikia)\\.com(?=\\/wiki|\\/?$)"
+			],
 			"name": "Fandom",
 			"options": {
 				"enabled": true
@@ -431,8 +506,18 @@
 			"frontends": {
 				"librarian": {
 					"preferences": {
-						"cookies": ["nsfw", "theme"],
-						"localstorage": ["autoplay", "autoplayNextVid", "collapseComments", "plyr", "sb_categories", "showRelated"]
+						"cookies": [
+							"nsfw",
+							"theme"
+						],
+						"localstorage": [
+							"autoplay",
+							"autoplayNextVid",
+							"collapseComments",
+							"plyr",
+							"sb_categories",
+							"showRelated"
+						]
 					},
 					"name": "Librarian",
 					"embeddable": true,
@@ -444,7 +529,10 @@
 					"instanceList": false
 				}
 			},
-			"targets": ["^https?:\\/{2}odysee\\.com(\\/|$)", "^https?:\\/{2}lbry\\.tv(\\/|$)"],
+			"targets": [
+				"^https?:\\/{2}odysee\\.com(\\/|$)",
+				"^https?:\\/{2}lbry\\.tv(\\/|$)"
+			],
 			"name": "LBRY",
 			"options": {
 				"enabled": true,
@@ -517,13 +605,26 @@
 				},
 				"librex": {
 					"preferences": {
-						"cookies": ["bibliogram", "disable_frontends", " disable_special", "invidious", "libreddit", "nitter", "proxitok", "save", "theme", "wikiless"]
+						"cookies": [
+							"bibliogram",
+							"disable_frontends",
+							" disable_special",
+							"invidious",
+							"libreddit",
+							"nitter",
+							"proxitok",
+							"save",
+							"theme",
+							"wikiless"
+						]
 					},
 					"name": "LibreX",
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}search\\.libredirect\\.invalid"],
+			"targets": [
+				"^https?:\\/{2}search\\.libredirect\\.invalid"
+			],
 			"name": "Search",
 			"options": {
 				"enabled": true,
@@ -537,14 +638,24 @@
 			"frontends": {
 				"simplyTranslate": {
 					"preferences": {
-						"cookies": ["from_lang", "to_lang", "tts_enabled", "use_text_fields"]
+						"cookies": [
+							"from_lang",
+							"to_lang",
+							"tts_enabled",
+							"use_text_fields"
+						]
 					},
 					"name": "SimplyTranslate",
 					"instanceList": true
 				},
 				"lingva": {
 					"preferences": {
-						"localstorage": ["isauto", "source", "target", "chakra-ui-color-mode"]
+						"localstorage": [
+							"isauto",
+							"source",
+							"target",
+							"chakra-ui-color-mode"
+						]
 					},
 					"name": "Lingva Translate",
 					"instanceList": true
@@ -554,7 +665,10 @@
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/", "^https?:\\/{2}translate\\.libredirect\\.invalid"],
+			"targets": [
+				"^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/",
+				"^https?:\\/{2}translate\\.libredirect\\.invalid"
+			],
 			"name": "Translate",
 			"options": {
 				"enabled": true,
@@ -576,7 +690,10 @@
 					"singleInstance": "https://www.openstreetmap.org"
 				}
 			},
-			"targets": ["^https?:\\/{2}maps\\.libredirect\\.invalid", "^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)"],
+			"targets": [
+				"^https?:\\/{2}maps\\.libredirect\\.invalid",
+				"^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)"
+			],
 			"name": "Maps",
 			"options": {
 				"enabled": false,
@@ -593,7 +710,11 @@
 					"instanceList": "true"
 				}
 			},
-			"targets": ["^https?:\\/{2}send\\.libredirect\\.invalid", "^https?:\\/{2}send\\.firefox\\.com\\/?$", "^https?:\\/{2}sendfiles\\.online\\/?$"],
+			"targets": [
+				"^https?:\\/{2}send\\.libredirect\\.invalid",
+				"^https?:\\/{2}send\\.firefox\\.com\\/?$",
+				"^https?:\\/{2}sendfiles\\.online\\/?$"
+			],
 			"name": "Send Files",
 			"options": {
 				"enabled": true
@@ -609,7 +730,9 @@
 					"instanceList": true
 				}
 			},
-			"targets": ["^https?:\\/{2}paste\\.libredirect\\.invalid"],
+			"targets": [
+				"^https?:\\/{2}paste\\.libredirect\\.invalid"
+			],
 			"name": "Paste Text",
 			"options": {
 				"enabled": true
@@ -630,4 +753,4 @@
 			"color": "grey"
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/src/pages/options/widgets/general.ejs b/src/pages/options/widgets/general.ejs
index e24046db..ca96f1c8 100644
--- a/src/pages/options/widgets/general.ejs
+++ b/src/pages/options/widgets/general.ejs
@@ -1,102 +1,87 @@
 <section class="option-block" id="general_page">
-  <div class="some-block option-block">
-    <h1 data-localise="__MSG_general__">General</h1>
-  </div>
-  <hr>
-  <div class="some-block option-block">
-    <h4 data-localise="__MSG_theme__">Theme</h4>
-    <select id="theme">
-      <option value="detect" data-localise="__MSG_detect__">Detect</option>
-      <option value="light" data-localise="__MSG_light__">Light</option>
-      <option value="dark" data-localise="__MSG_dark__">Dark</option>
-    </select>
-  </div>
-  <div class="some-block option-block">
-    <h4 data-localise="__MSG_network__">Network</h4>
-    <select id="network">
-      <% for (const network in config.networks) { -%>
-<option value="<%= network %>"><%= config.networks[network].name %></option>
-      <% }; %>
-</select>
-  </div>
-  <div id="network-fallback">
-    <div class="some-block option-block">
-      <h4 data-localise="__MSG_networkFallback__">Fallback to clearnet if no instances are available for the current network</h4>
-      <input id="network-fallback-checkbox" type="checkbox">
-    </div>
-  </div>
-  <div class="some-block option-block">
-    <h4 data-localise="__MSG_autoRedirect__"></h4>
-    <input id="auto-redirect" type="checkbox">
-  </div>
-  <form>
-    <div class="some-block option-block">
-      <h4 data-localise="__MSG_latencyThreshold">Latency Threshold</h4>
-      <output id="latency-output" for="latencyInput" name="latencyOutput"></output>
-      <input id="latency-input" type="range" min="50" max="5000" value="1000" name="latencyInput" step="50">
-    </div>
-  </form>
-  <div class="some-block option-block">
-    <h4 data-localise="__MSG_exceptions__"></h4>
-  </div>
-  <form id="custom-exceptions-instance-form">
-    <div class="some-block option-block">
-      <div class="some-block" style="padding:0;">
-        <input id="exceptions-custom-instance" placeholder="https://www.google.com" type="url">&nbsp;
-        <select id="exceptions-custom-instance-type">
-          <option value="url">URL</option>
-          <option value="regex">Regex</option>
-        </select>&nbsp;
-      </div>
-      <button class="add" id="exceptions-add-instance" type="submit">
-        <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"></path>
-        </svg>
-      </button>
-    </div>
-  </form>
-  <div class="checklist" id="exceptions-custom-checklist"></div>
-  <div class="buttons buttons-inline"><a class="button button-inline" id="update-instances">
-      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-        <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>
-      </svg>
-      <x data-localise="__MSG_updateInstances__">Update Instances</x></a>&nbsp; &nbsp;</div>
-  <div class="buttons buttons-inline">  
-    <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"></path>
-      </svg>&nbsp;
-      <x data-localise="__MSG_importSettings__">Import Settings</x>
-    </label>
-    <input class="button button-inline" id="import-settings" type="file" 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"></path>
-      </svg>&nbsp;
-      <x data-localise="__MSG_exportSettings__">Export Settings</x></a>&nbsp; &nbsp;<a 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>
-        <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"></path>
-      </svg>
-      <x data-localise="__MSG_resetSettings__">Reset Settings</x></a>
-  </div>
-  <hr>
-  <div class="some-block option-block">
-    <h4 data-localise="__MSG_customPopup__">Customize Popup</h4>
-  </div>
-  <div class="checklist-popup" id="popup-frontends-checklist">
-    <% for (const service in config.services) { -%>
-<div>
-  <div>
-  <% if (config.services[service].imageType != "svgMono") { _%>
-  <img src="../../../assets/images/<%= service %>-icon.<%= config.services[service].imageType %>">
-  <% } else { _%>
-  <%- include ('src/assets/images/' + service + '-icon.svg') %>
-  <% } _%>
-  <label data-localise="__MSG_<%= service %>__" for="<%= service %>"><%= config.services[service].name %></label>
-      </div>
-      <input id="<%= service %>" type="checkbox">
-    </div>
-    <% }; %>
-</div>
-  <script type="module" src="./widgets/general.js"></script>
+	<div class="some-block option-block">
+		<h1 data-localise="__MSG_general__">General</h1>
+	</div>
+	<hr />
+	<div class="some-block option-block">
+		<h4 data-localise="__MSG_theme__">Theme</h4>
+		<select id="theme">
+			<option value="detect" data-localise="__MSG_detect__">Detect</option>
+			<option value="light" data-localise="__MSG_light__">Light</option>
+			<option value="dark" data-localise="__MSG_dark__">Dark</option>
+		</select>
+	</div>
+	<div class="some-block option-block">
+		<h4 data-localise="__MSG_network__">Network</h4>
+		<select id="network">
+			<% for (const network in config.networks) { -%>
+			<option value="<%= network %>"><%= config.networks[network].name %></option>
+			<% }; %>
+		</select>
+	</div>
+	<div id="network-fallback">
+		<div class="some-block option-block">
+			<h4 data-localise="__MSG_networkFallback__">Fallback to clearnet if no instances are available for the current network</h4>
+			<input id="network-fallback-checkbox" type="checkbox" />
+		</div>
+	</div>
+	<div class="some-block option-block">
+		<h4 data-localise="__MSG_autoRedirect__"></h4>
+		<input id="auto-redirect" type="checkbox" />
+	</div>
+	<form>
+		<div class="some-block option-block">
+			<h4 data-localise="__MSG_latencyThreshold">Latency Threshold</h4>
+			<output id="latency-output" for="latencyInput" name="latencyOutput"></output>
+			<input id="latency-input" type="range" min="50" max="5000" value="1000" name="latencyInput" step="50" />
+		</div>
+	</form>
+	<div class="some-block option-block">
+		<h4 data-localise="__MSG_exceptions__"></h4>
+	</div>
+	<form id="custom-exceptions-instance-form">
+		<div class="some-block option-block">
+			<div class="some-block" style="padding: 0">
+				<input id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" />&nbsp;
+				<select id="exceptions-custom-instance-type">
+					<option value="url">URL</option>
+					<option value="regex">Regex</option></select
+				>&nbsp;
+			</div>
+			<button class="add" id="exceptions-add-instance" type="submit">
+				<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"></path>
+				</svg>
+			</button>
+		</div>
+	</form>
+	<div class="checklist" id="exceptions-custom-checklist"></div>
+	<div class="buttons buttons-inline">
+		<a class="button button-inline" id="update-instances">
+			<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+				<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>
+			</svg>
+			<x data-localise="__MSG_updateInstances__">Update Instances</x></a
+		>&nbsp; &nbsp;
+	</div>
+	<div class="buttons buttons-inline">
+		<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"></path></svg
+			>&nbsp;
+			<x data-localise="__MSG_importSettings__">Import Settings</x>
+		</label>
+		<input class="button button-inline" id="import-settings" type="file" 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"></path></svg
+			>&nbsp; <x data-localise="__MSG_exportSettings__">Export Settings</x></a
+		>&nbsp; &nbsp;<a 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>
+				<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"></path>
+			</svg>
+			<x data-localise="__MSG_resetSettings__">Reset Settings</x></a
+		>
+	</div>
+	<script type="module" src="./widgets/general.js"></script>
 </section>
diff --git a/src/pages/options/widgets/services.ejs b/src/pages/options/widgets/services.ejs
index 44c6a9f3..c3019074 100644
--- a/src/pages/options/widgets/services.ejs
+++ b/src/pages/options/widgets/services.ejs
@@ -1,86 +1,84 @@
 <% for (const service in config.services) { -%>
 <section class="option-block" id="<%= service %>_page">
-  <div class="some-block option-block">
-    <h1 data-localise="__MSG_<%= service %>__"><%= config.services[service].name %></h1>
-  </div>
-  <hr>
-  <div class="some-block option-block">
-    <h4 data-localise="__MSG_enable__">Enable</h4>
-    <input id="<%= service %>-enabled" type="checkbox">
-  </div>
-  <% if (Object.keys(config.services[service].frontends).length > 1) { %>
-  <div class="some-block option-block">
-    <h4 data-localise="__MSG_frontend__">Frontend</h4>
-    <select id="<%= service %>-frontend">
-      <% for (const frontend in config.services[service].frontends) { -%>
-      <option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option>
-      <% } %>
-    </select>
-  </div>
-  <% if (config.services[service].embeddable) { _%>
-  <div class="some-block option-block">
-    <h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
-    <select id="<%= service %>-embedFrontend">
-      <% for (const frontend in config.services[service].frontends) { -%>
-      <% if (config.services[service].frontends[frontend].embeddable) { _%>
-      <option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option>
-      <% } _%>
-      <% } %>
-    </select>
-  </div>
-  <% } _%>
-  <% } _%>
-  <% if (config.services[service].embeddable) { _%>
-  <div class="some-block option-block">
-    <h4 data-localise="__MSG_redirectType__">Redirect Type</h4>
-    <select id="<%= service %>-redirectType">
-      <option value="both" data-localise="__MSG_both__">both</option>
-      <option value="sub_frame" data-localise="__MSG_onlyEmbedded__">Only Embedded</option>
-      <option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>
-    </select>
-  </div>
-  <% } _%>
-  <hr>
-  <% for (const frontend in config.services[service].frontends) { -%>
-  <% if (config.services[service].frontends[frontend].instanceList) { _%>
-  <div id="<%= frontend %>">
-    <% for (const network in config.networks) { -%>
-    <div class="<%= network %>">
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-      </div>
-      <div class="checklist"></div>
-      <hr>
-      <div class="some-block option-block">
-        <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
-      </div>
-      <form class="custom-instance-form">
-        <div class="some-block option-block">
-          <input class="custom-instance" placeholder="http://<%= frontend %>.<%= config.networks[network].tld %>" type="url">
-          <button class="add add-instance" type="submit">
-            <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"></path>
-            </svg>
-          </button>
-        </div>
-      </form>
-      <div class="checklist custom-checklist"></div>
-      <% if (network == "clearnet") { _%>
-      <div class="buttons buttons-inline">
-        <label class="button button-inline" id="latency-<%= frontend %>-label" for="latency-<%= frontend %>"> 
-          <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"></path>
-          </svg>&nbsp;
-          <x data-localise="__MSG_testInstancesLatency__">Test Instances Latency</x>
-        </label>
-        <input class="button button-inline" id="latency-<%= frontend %>" style="display:none;">
-      </div>
-      <% } _%>
-    </div>
-    <% } %>
-  </div>
-  <% } _%>
-  <% } %>
+	<div class="some-block option-block">
+		<h1 data-localise="__MSG_<%= service %>__"><%= config.services[service].name %></h1>
+	</div>
+	<hr />
+	<div class="some-block option-block">
+		<h4 data-localise="__MSG_enable__">Enable</h4>
+		<input id="<%= service %>-enabled" type="checkbox" />
+	</div>
+	<div class="some-block option-block">
+		<h4 data-localise="__MSG_show_in_popup__">Show in Popup</h4>
+		<input id="<%= service %>" type="checkbox" />
+	</div>
+	<% if (Object.keys(config.services[service].frontends).length> 1) { %>
+	<div class="some-block option-block">
+		<h4 data-localise="__MSG_frontend__">Frontend</h4>
+		<select id="<%= service %>-frontend">
+			<% for (const frontend in config.services[service].frontends) { -%>
+			<option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option>
+			<% } %>
+		</select>
+	</div>
+	<% if (config.services[service].embeddable) { _%>
+	<div class="some-block option-block">
+		<h4 data-localise="__MSG_embed_frontend__">Embed Frontend</h4>
+		<select id="<%= service %>-embedFrontend">
+			<% for (const frontend in config.services[service].frontends) { -%> <% if (config.services[service].frontends[frontend].embeddable) { _%>
+			<option value="<%= frontend %>"><%= config.services[service].frontends[frontend].name %></option>
+			<% } _%> <% } %>
+		</select>
+	</div>
+	<% } _%> <% } _%> <% if (config.services[service].embeddable) { _%>
+	<div class="some-block option-block">
+		<h4 data-localise="__MSG_redirectType__">Redirect Type</h4>
+		<select id="<%= service %>-redirectType">
+			<option value="both" data-localise="__MSG_both__">both</option>
+			<option value="sub_frame" data-localise="__MSG_onlyEmbedded__">Only Embedded</option>
+			<option value="main_frame" data-localise="__MSG_onlyNotEmbedded__">Only Not Embedded</option>
+		</select>
+	</div>
+	<% } _%>
+	<hr />
+	<% for (const frontend in config.services[service].frontends) { -%> <% if (config.services[service].frontends[frontend].instanceList) { _%>
+	<div id="<%= frontend %>">
+		<% for (const network in config.networks) { -%>
+		<div class="<%= network %>">
+			<div class="some-block option-block">
+				<h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+			</div>
+			<div class="checklist"></div>
+			<hr />
+			<div class="some-block option-block">
+				<h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+			</div>
+			<form class="custom-instance-form">
+				<div class="some-block option-block">
+					<input class="custom-instance" placeholder="http://<%= frontend %>.<%= config.networks[network].tld %>" type="url" />
+					<button class="add add-instance" type="submit">
+						<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"></path>
+						</svg>
+					</button>
+				</div>
+			</form>
+			<div class="checklist custom-checklist"></div>
+			<% if (network=="clearnet" ) { _%>
+			<div class="buttons buttons-inline">
+				<label class="button button-inline" id="latency-<%= frontend %>-label" for="latency-<%= frontend %>">
+					<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"></path></svg
+					>&nbsp;
+					<x data-localise="__MSG_testInstancesLatency__">Test Instances Latency</x>
+				</label>
+				<input class="button button-inline" id="latency-<%= frontend %>" style="display: none" />
+			</div>
+			<% } _%>
+		</div>
+		<% } %>
+	</div>
+	<% } _%> <% } %>
 </section>
 <% } %>
 <script type="module" src="./widgets/services.js"></script>
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index 0df2f9fa..5f2871e4 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -79,7 +79,6 @@ select {
 	margin: 0;
 	max-width: 500px;
 	border-radius: 3px;
-	cursor: pointer;
 }
 
 input[type="url"],
@@ -110,11 +109,19 @@ section.option-block h2 {
 body.option {
 	display: flex;
 	padding: 40px;
-	width: 900px;
+	width: 1100px;
+}
+
+section.links {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: column;
+	width: 300px;
+	max-height: 720px;
 }
 
 section.links div {
-	margin: 20px 0;
+	margin: 10px;
 	width: max-content;
 }
 
@@ -458,7 +465,7 @@ body div section {
 	display: none;
 }
 
-div.about > div {
+div.about>div {
 	justify-content: start;
 	width: 520px;
 }
@@ -480,4 +487,4 @@ input:disabled {
 div.about a {
 	width: 500px;
 	display: inline-block;
-}
+}
\ No newline at end of file