Updated 6 files, added 17 files and renamed client/fragments/experiments.html (automated)

24 files changed, 459 insertions, 70 deletions

diff --git a/client/assets/icons2/appearance.svg b/client/assets/icons2/appearance.svg
new file mode 100644
index 0000000..315fc5c
--- /dev/null
+++ b/client/assets/icons2/appearance.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 32.5-156t88-127Q256-817 330-848.5T488-880q80 0 151 27.5t124.5 76q53.5 48.5 85 115T880-518q0 115-70 176.5T640-280h-74q-9 0-12.5 5t-3.5 11q0 12 15 34.5t15 51.5q0 50-27.5 74T480-80Zm0-400Zm-220 40q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120-160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm200 0q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120 160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17ZM480-160q9 0 14.5-5t5.5-13q0-14-15-33t-15-57q0-42 29-67t71-25h70q66 0 113-38.5T800-518q0-121-92.5-201.5T488-800q-136 0-232 93t-96 227q0 133 93.5 226.5T480-160Z"/></svg>
\ No newline at end of file
diff --git a/client/assets/icons2/blocker.svg b/client/assets/icons2/blocker.svg
new file mode 100644
index 0000000..20e9889
--- /dev/null
+++ b/client/assets/icons2/blocker.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/></svg>
\ No newline at end of file
diff --git a/client/assets/icons2/experiments.svg b/client/assets/icons2/experiments.svg
index 5b9bb79..8ef5c55 100644
--- a/client/assets/icons2/experiments.svg
+++ b/client/assets/icons2/experiments.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-51 0-72.5-45.5T138-250l222-270v-240h-40q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760h-40v240l222 270q32 39 10.5 84.5T760-120H200Zm80-120h400L544-400H416L280-240Zm-80 40h560L520-492v-268h-80v268L200-200Zm280-280Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"/></svg>
\ No newline at end of file
diff --git a/client/assets/icons2/platform.svg b/client/assets/icons2/platform.svg
new file mode 100644
index 0000000..14e3462
--- /dev/null
+++ b/client/assets/icons2/platform.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120 200-272v-240L40-600l440-240 440 240v320h-80v-276l-80 44v240L480-120Zm0-332 274-148-274-148-274 148 274 148Zm0 241 200-108v-151L480-360 280-470v151l200 108Zm0-241Zm0 90Zm0 0Z"/></svg>
\ No newline at end of file
diff --git a/client/assets/icons2/search.svg b/client/assets/icons2/search.svg
new file mode 100644
index 0000000..ef0d052
--- /dev/null
+++ b/client/assets/icons2/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
\ No newline at end of file
diff --git a/client/assets/icons2/security.svg b/client/assets/icons2/security.svg
new file mode 100644
index 0000000..20b9e39
--- /dev/null
+++ b/client/assets/icons2/security.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z"/></svg>
\ No newline at end of file
diff --git a/client/assets/icons2/settings.svg b/client/assets/icons2/settings.svg
new file mode 100644
index 0000000..817c782
--- /dev/null
+++ b/client/assets/icons2/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
\ No newline at end of file
diff --git a/client/assets/icons2/spyglass.svg b/client/assets/icons2/spyglass.svg
new file mode 100644
index 0000000..5f40f96
--- /dev/null
+++ b/client/assets/icons2/spyglass.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880h40v331q18 11 29 28.5t11 40.5q0 33-23.5 56.5T480-400q-33 0-56.5-23.5T400-480q0-23 11-41t29-28v-86q-52 14-86 56.5T320-480q0 66 47 113t113 47q66 0 113-47t47-113q0-36-14.5-66.5T586-600l57-57q35 33 56 78.5t21 98.5q0 100-70 170t-170 70q-100 0-170-70t-70-170q0-90 57-156.5T440-717v-81q-119 15-199.5 105T160-480q0 134 93 227t227 93q134 0 227-93t93-227q0-69-27-129t-74-104l57-57q57 55 90.5 129.5T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
\ No newline at end of file
diff --git a/client/assets/icons2/system.svg b/client/assets/icons2/system.svg
new file mode 100644
index 0000000..b21bc6f
--- /dev/null
+++ b/client/assets/icons2/system.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M686-132 444-376q-20 8-40.5 12t-43.5 4q-100 0-170-70t-70-170q0-36 10-68.5t28-61.5l146 146 72-72-146-146q29-18 61.5-28t68.5-10q100 0 170 70t70 170q0 23-4 43.5T584-516l244 242q12 12 12 29t-12 29l-84 84q-12 12-29 12t-29-12Zm29-85 27-27-256-256q18-20 26-46.5t8-53.5q0-60-38.5-104.5T386-758l74 74q12 12 12 28t-12 28L332-500q-12 12-28 12t-28-12l-74-74q9 57 53.5 95.5T360-440q26 0 52-8t47-25l256 256ZM472-488Z"/></svg>
\ No newline at end of file
diff --git a/client/dom/index.html b/client/dom/index.html
index a5d6045..e0a9f5a 100644
--- a/client/dom/index.html
+++ b/client/dom/index.html
@@ -332,6 +332,7 @@
             webview.id = "wv-item-" + tab.id + "-inner";
             container.id = "wv-item-" + tab.id;
             container.classList.add("wv-container");
+            webview.setAttribute("allowpopups", ""); // # M3 backport #
             webview.addEventListener('devtools-open-url', (e) => {
                 openTab(e.url);
             });
@@ -505,12 +506,6 @@
             if (!sgc()) return;
             openTab("https://school.equestria.dev");
 
-            if (localStorage.getItem("cr3-trial-experiments") === "true") {
-                openTab("../fragments/experiments.html", false, true);
-            } else {
-                openTab("../fragments/soon.html", false, true);
-            }
-
             openHome();
             tabs[0].fixed = false;
 
diff --git a/client/dom/new.html b/client/dom/new.html
index 7af29da..22a9988 100644
--- a/client/dom/new.html
+++ b/client/dom/new.html
@@ -162,10 +162,10 @@
             secureTabHeight();
         }
 
-        let lastTabHeightUpdateCount = tabs.length;
-
         function openAbout() {
-            ipcRenderer.send("about");
+            let tab = tabs.find(i => i.fixed && i.url.endsWith("/settings.html"));
+            switchToTab(window.tabs.indexOf(tab));
+            tab.webview.children[1].executeJavaScript("location.hash = '#about';");
         }
 
         function secureTabHeight(force) {}
@@ -201,7 +201,7 @@
             }
         }
 
-        function openTab(url, focusSearchBar, pinned, ignoreRefresh) {
+        function openTab(url, focusSearchBar, pinned, ignoreRefresh, unisolated) {
             let container = document.createElement("div");
             let webview = document.createElement("webview");
 
@@ -225,18 +225,19 @@
             bar.style.borderBottom = "1px solid rgba(0, 0, 0, .1)";
             bar.style.paddingLeft = bar.style.paddingRight = "3vw";
             bar.style.display = "grid";
+            bar.style.webkitAppRegion = "drag";
             bar.style.gridTemplateColumns = "1fr max-content 1fr";
             bar.classList.add("bar");
             bar.innerHTML = `
             <div style="${process.platform === 'darwin' ? 'margin-left: 86px;' : ''}">
-                <a><img id="wv-item-${tab.id}-bar-back" src="../assets/icons2/back.svg" alt="Back" title="Back" style="width: 24px; height: 24px; margin: 12px; cursor: pointer;" onclick="goBack('${tab.id}');"></a>
-                <a><img id="wv-item-${tab.id}-bar-forward" src="../assets/icons2/forward.svg" alt="Forward" title="Forward" style="width: 24px; height: 24px; margin: 12px; cursor: pointer;" onclick="goForward('${tab.id}');"></a>
-                <a><img id="wv-item-${tab.id}-bar-reload" src="../assets/icons2/reload.svg" alt="Refresh" title="Refresh" style="width: 24px; height: 24px; margin: 12px; cursor: pointer;" onclick="reloadTab('${tab.id}');"></a>
+                <a style="-webkit-app-region: no-drag;"><img id="wv-item-${tab.id}-bar-back" src="../assets/icons2/back.svg" alt="Back" title="Back" style="-webkit-app-region: no-drag; width: 24px; height: 24px; margin: 12px; cursor: pointer;" onclick="goBack('${tab.id}');"></a>
+                <a style="-webkit-app-region: no-drag;"><img id="wv-item-${tab.id}-bar-forward" src="../assets/icons2/forward.svg" alt="Forward" title="Forward" style="-webkit-app-region: no-drag; width: 24px; height: 24px; margin: 12px; cursor: pointer;" onclick="goForward('${tab.id}');"></a>
+                <a style="-webkit-app-region: no-drag;"><img id="wv-item-${tab.id}-bar-reload" src="../assets/icons2/reload.svg" alt="Refresh" title="Refresh" style="-webkit-app-region: no-drag; width: 24px; height: 24px; margin: 12px; cursor: pointer;" onclick="reloadTab('${tab.id}');"></a>
             </div>
             <div>
-                <div onclick="focusBar('${tab.id}');" id="wv-item-${tab.id}-bar-outer" class="address-bar-outer" style="margin-top: 10px; width: 100vw; max-width: 500px; background-color: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 5px; padding: 2px 5px;">
+                <div onclick="focusBar('${tab.id}');" id="wv-item-${tab.id}-bar-outer" class="address-bar-outer" style="-webkit-app-region: no-drag; margin-top: 10px; width: 100vw; max-width: 500px; background-color: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 5px; padding: 2px 5px;">
                     <input onblur="unfocusBar('${tab.id}');" class="address-bar-text" onchange="resetURL('${tab.id}');" id="wv-item-${tab.id}-bar-address" type="text" class="form-control" style="position: relative; top: -1px; font-size: 14px; padding: 0; height: 18px; display: none; background: none; border: none; width: 100%; outline: none;" placeholder="Search with DuckDuckGo or enter address">
-                    <div style="height: 18px; text-align: center; cursor: text;font-size: 14px;" class="address-bar-display" id="wv-item-${tab.id}-bar-display"><span style="opacity: .5;">Search with DuckDuckGo or enter address</span></div>
+                    <div style="white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; height: 18px; text-align: center; cursor: text;font-size: 14px;" class="address-bar-display" id="wv-item-${tab.id}-bar-display"><span style="opacity: .5;">Search with DuckDuckGo or enter address</span></div>
                 </div>
             </div>
             <div style="text-align: right;${process.platform === 'win32' ? 'margin-right: 140px;' : ''}"></div>
@@ -248,6 +249,10 @@
             webview.id = "wv-item-" + tab.id + "-inner";
             container.id = "wv-item-" + tab.id;
             container.classList.add("wv-container");
+            webview.setAttribute("allowpopups", "");
+            if (unisolated) webview.setAttribute("nodeintegration", "");
+            if (unisolated) webview.setAttribute("nodeintegrationinsubframes", "");
+            if (unisolated) webview.setAttribute("webpreferences", "contextIsolation=false");
             webview.addEventListener('devtools-open-url', (e) => {
                 openTab(e.url);
             });
@@ -317,6 +322,10 @@
         }
 
         function switchToTab(id) {
+            try {
+                tabs.find(i => i.fixed && i.url.endsWith("/settings.html")).webview.children[1].executeJavaScript("location.hash = '#search';");
+            } catch (e) {}
+
             window.activeTab = id;
             refreshTabBar();
 
@@ -414,12 +423,7 @@
 
         window.addEventListener('load', () => {
             openTab("https://school.equestria.dev");
-
-            if (localStorage.getItem("cr3-trial-experiments") === "true") {
-                openTab("../fragments/experiments.html", false, true);
-            } else {
-                openTab("../fragments/soon.html", false, true);
-            }
+            openTab("../fragments/settings.html", false, true, false, true);
 
             openHome();
             tabs[0].fixed = false;
@@ -467,7 +471,7 @@
             } else if (new URL(url).protocol === "http:") {
                 return `<span style="color: rgba(155,58,58,0.75);">Not secure</span> — ${new URL(url).host}`;
             } else if (new URL(url).protocol === "file:") {
-                return `<span style="color: rgba(74,162,74,0.75);">Local</span> — ${new URL(url).pathname}`;
+                return `<span style="color: rgba(74,162,74,0.75);">Local</span> — ${decodeURI(new URL(url).pathname)}`;
             } else if (new URL(url).hostname === "equestria.dev"
                 || new URL(url).hostname.endsWith(".equestria.dev")
                 || new URL(url).hostname === "pone.eu.org"
diff --git a/client/fragments/home.html b/client/fragments/home.html
index d1bab78..af1a98f 100644
--- a/client/fragments/home.html
+++ b/client/fragments/home.html
@@ -44,7 +44,13 @@
             <h3>What's new in Chatroom?</h3>
 
             <div id="m3-changelog" style="display: none;">
-                <h5>Chatroom 3.0.0 (Developer Preview 1)</h5>
+                <h5>Chatroom Codename "Heeler" (Developer Preview 2)</h5>
+                <p>Welcome to the second Developer Preview release of Chatroom 3. We are slowly bringing new features as we initially planned.</p>
+                <ul>
+                    <li>The new UI gets a few bug fixes, along with a new settings page. Clicking the "About Chatroom" icon now opens the corresponding page in the settings.</li>
+                </ul>
+
+                <h5>Chatroom Codename "Heeler" (Developer Preview 1)</h5>
                 <p>Thank you for trying out Chatroom 3.0 early! We hope you enjoy it and that you have a great experience trying out new features as we experiment and try to make the best version of Chatroom yet. Make sure to tell us about any issues you might have.</p>
                 <ul>
                     <li>An experimental new UI has been introduced. As with a lot of M3 features, it can be optionally enabled using the <code>m3uiredesign</code> experiment.</li>
@@ -57,17 +63,13 @@
                 }
             </script>
 
-            <h5>Chatroom 2.8.0 (Long Term Support)</h5>
+            <h5>Chatroom 2.8.1 (Long Term Support)</h5>
+            <p>Chatroom 3 (Codename "Heeler") is now under development (it can be enabled with a few secret options)! While regular Chatroom features will continue to function normally, select people will be able to test new features. Contact your administrator for details. This does mean that Chatroom 2.8 is the last version of Chatroom 2 before the release of Chatroom 3. This old version of Chatroom will only contain bug fixes and no new features will be added.</p>
             <ul>
+                <li><b>2.8.1 Fix:</b> Links can now open in new tabs if indicated by the website or if you hold down Cmd/Ctrl while clicking it.</li>
+                <li><b>2.8.0 Fix:</b> Clicking on the search bar on the home page now focuses the search bar on top.</li>
                 <li>
-                    Chatroom 3 (M3, or Milestone 3) is now under development (it can be enabled with a few secret options)! While regular Chatroom features will continue to function normally, select people will be able to test new features. Contact your administrator for details.
-                    <ul>
-                        <li>This does mean that Chatroom 2.8 is the last version of Chatroom 2 before the release of Chatroom 3. This old version of Chatroom will only contain bug fixes and no new features will be added.</li>
-                    </ul>
-                </li>
-                <li><b>Fix:</b> Clicking on the search bar on the home page now focuses the search bar on top.</li>
-                <li>
-                    <b>Feature:</b> Introducing Chatroom Spyglass: a completely transparent utility to collect system information and help improve Chatroom.
+                    <b>2.8.0 Feature:</b> Introducing Chatroom Spyglass: a completely transparent utility to collect system information and help improve Chatroom.
                     <ul>
                         <li>Chatroom automatically detects if your device is eligible to Spyglass. If it is making a mistake, please contact your administrator.</li>
                         <li>Users with the "forcespyglass" experiment set to "Enabled" will always have Spyglass enabled.</li>
@@ -75,7 +77,7 @@
                     </ul>
                 </li>
                 <li>
-                    <b>Fix:</b> The <code>Chatroom3PID</code> API is now deprecated and will be removed in Chatroom 3.
+                    <b>2.8.0 Fix:</b> The <code>Chatroom3PID</code> API is now deprecated and will be removed in Chatroom 3.
                 </li>
             </ul>
 
diff --git a/client/fragments/settings.html b/client/fragments/settings.html
new file mode 100644
index 0000000..897e0f7
--- /dev/null
+++ b/client/fragments/settings.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Settings</title>
+    <link rel="icon" href="../assets/icons2/settings.svg">
+    <style>
+        .settings-item {
+            display: grid;
+            grid-template-columns: 32px 1fr;
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+            padding: 5px 10px;
+        }
+
+        .settings-item:hover {
+            background-color: rgba(0, 0, 0, .05);
+        }
+
+        .settings-item:active, .settings-item.active {
+            background-color: rgba(0, 0, 0, .1);
+        }
+
+        .settings-item.active {
+            pointer-events: none;
+        }
+
+        * {
+            font-family: system-ui, -apple-system, sans-serif;
+            user-select: none;
+            -webkit-user-drag: none;
+        }
+
+        .settings-item-text-inner {
+            white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis;
+        }
+
+        .settings-item-text {
+            align-items: center; display: flex;
+        }
+
+        .settings-item-icon {
+            width: 24px; height: 24px;
+        }
+
+        .settings-item-inner {
+            width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
+        }
+    </style>
+</head>
+<body style="background-color: #fff;">
+    <main style="background-color: #fff; position: fixed; inset: 20px; overflow: hidden;">
+        <div style="width: 100%; height: 100%; overflow: hidden; display: grid; grid-template-columns: 1fr 3fr;">
+            <div style="border-right: 1px solid rgba(0, 0, 0, .25); overflow: auto;">
+                <div class="settings-item active" id="settings-item-search" onclick="openPage('search');">
+                    <div class="settings-item-inner">
+                        <img class="settings-item-icon" alt="" src="../assets/icons2/search.svg">
+                    </div>
+                    <div class="settings-item-text">
+                        <span class="settings-item-text-inner">Search and predictions</span>
+                    </div>
+                </div>
+                <div class="settings-item" id="settings-item-security" onclick="openPage('security');">
+                    <div class="settings-item-inner">
+                        <img class="settings-item-icon" alt="" src="../assets/icons2/security.svg">
+                    </div>
+                    <div class="settings-item-text">
+                        <span class="settings-item-text-inner">Security</span>
+                    </div>
+                </div>
+                <div class="settings-item" id="settings-item-blocking" onclick="openPage('blocking');">
+                    <div class="settings-item-inner">
+                        <img class="settings-item-icon" alt="" src="../assets/icons2/blocker.svg">
+                    </div>
+                    <div class="settings-item-text">
+                        <span class="settings-item-text-inner">Content blocking</span>
+                    </div>
+                </div>
+                <div class="settings-item" id="settings-item-appearance" onclick="openPage('appearance');">
+                    <div class="settings-item-inner">
+                        <img class="settings-item-icon" alt="" src="../assets/icons2/appearance.svg">
+                    </div>
+                    <div class="settings-item-text">
+                        <span class="settings-item-text-inner">Appearance</span>
+                    </div>
+                </div>
+                <div class="settings-item" id="settings-item-platform" onclick="openPage('platform');">
+                    <div class="settings-item-inner">
+                        <img class="settings-item-icon" alt="" src="../assets/icons2/platform.svg">
+                    </div>
+                    <div class="settings-item-text">
+                        <span class="settings-item-text-inner">Chatroom Platform</span>
+                    </div>
+                </div>
+                <div class="settings-item" id="settings-item-spyglass" onclick="openPage('spyglass');">
+                    <div class="settings-item-inner">
+                        <img class="settings-item-icon" alt="" src="../assets/icons2/spyglass.svg">
+                    </div>
+                    <div class="settings-item-text">
+                        <span class="settings-item-text-inner">Spyglass</span>
+                    </div>
+                </div>
+                <div class="settings-item" id="settings-item-system" onclick="openPage('system');">
+                    <div class="settings-item-inner">
+                        <img class="settings-item-icon" alt="" src="../assets/icons2/system.svg">
+                    </div>
+                    <div class="settings-item-text">
+                        <span class="settings-item-text-inner">System</span>
+                    </div>
+                </div>
+                <div class="settings-item" id="settings-item-experiments" style="display: none;" onclick="openPage('experiments');">
+                    <div class="settings-item-inner">
+                        <img class="settings-item-icon" alt="" src="../assets/icons2/experiments.svg">
+                    </div>
+                    <div class="settings-item-text">
+                        <span class="settings-item-text-inner">Developer</span>
+                    </div>
+                </div>
+                <div class="settings-item" id="settings-item-about" onclick="openPage('about');">
+                    <div class="settings-item-inner">
+                        <img class="settings-item-icon" alt="" src="../assets/icons2/about.svg">
+                    </div>
+                    <div class="settings-item-text">
+                        <span class="settings-item-text-inner">About Chatroom</span>
+                    </div>
+                </div>
+            </div>
+            <iframe id="frame" style="border: none; width: 100%; height: 100%;"></iframe>
+        </div>
+    </main>
+
+    <script>
+        if (localStorage.getItem("cr3-trial-experiments") === "true") {
+            document.getElementById("settings-item-experiments").style.display = "";
+        }
+
+        function openPage(id) {
+            Array.from(document.getElementsByClassName('active')).map(i => i.classList.remove("active"));
+            document.getElementById("settings-item-" + id).classList.add("active");
+            document.getElementById("frame").src = "./settings/" + id + ".html";
+            location.hash = id;
+        }
+
+        window.onhashchange = () => {
+            openPage(location.hash.substring(1));
+        }
+
+        openPage("search");
+    </script>
+</body>
+</html>
diff --git a/client/fragments/settings/about.html b/client/fragments/settings/about.html
new file mode 100644
index 0000000..1e104a3
--- /dev/null
+++ b/client/fragments/settings/about.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        * {
+            font-family: system-ui, -apple-system, sans-serif;
+            user-select: none;
+            -webkit-user-drag: none;
+        }
+    </style>
+</head>
+<body style="background-color: #fff;">
+<main style="background-color: #fff; position: fixed; inset: 20px; overflow: auto;">
+    <h4 style="margin-top: 0; margin-bottom: 10px;">About Chatroom</h4>
+
+    <div style="display: grid; grid-template-columns: 38px 1fr; grid-gap: 10px;">
+        <img src="../../assets/icon.png" alt="" style="width: 38px; height: 38px;">
+        <div style="display: flex; align-items: center;">
+            <div>
+                <div><b>Chatroom 3</b> "Heeler"</div>
+                <div style="opacity: .5;">Version <span id="version"></span> (<span id="platform"></span>, <span id="arch"></span>)</div>
+            </div>
+        </div>
+    </div>
+
+    <hr style="border-top: 1px solid rgba(0, 0, 0, .25); border-bottom: none;">
+
+    <p>Based on Chromium <span id="chrome">-</span></p>
+    <p>Chatroom Web Browser<br>Copyright 2023-2024 Equestria.dev. Released under the MIT license.</p>
+    <p>Chatroom is made possible by the Chromium, Electron and Node.js open source projects.</p>
+
+    <code style="font-family: monospace; display: none;" id="advanced">
+        V8 <span style="font-family: monospace;" id="v8"></span><br>
+        Node.js <span style="font-family: monospace;" id="node"></span><br>
+        Electron <span style="font-family: monospace;" id="electron"></span><br>
+    </code>
+
+    <script>
+        if (localStorage.getItem("cr3-trial-experiments") === "true") {
+            document.getElementById("advanced").style.display = "";
+        }
+
+        (async () => {
+            document.getElementById("version").innerText = await window.parent.chatroom.getVersion();
+            document.getElementById("platform").innerText = process.platform;
+            document.getElementById("arch").innerText = process.arch;
+            document.getElementById("chrome").innerText = process.versions.chrome;
+            document.getElementById("v8").innerText = process.versions.v8;
+            document.getElementById("node").innerText = process.versions.node;
+            document.getElementById("electron").innerText = process.versions.electron;
+        })();
+    </script>
+</main>
+</body>
+</html>
diff --git a/client/fragments/settings/appearance.html b/client/fragments/settings/appearance.html
new file mode 100644
index 0000000..859e024
--- /dev/null
+++ b/client/fragments/settings/appearance.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        * {
+            font-family: system-ui, -apple-system, sans-serif;
+            user-select: none;
+            -webkit-user-drag: none;
+        }
+    </style>
+</head>
+<body style="background-color: #fff;">
+<main style="background-color: #fff; position: fixed; inset: 20px; overflow: auto;">
+    <h4 style="margin-top: 0; margin-bottom: 10px;">Appearance</h4>
+    <p>TODO</p>
+</main>
+</body>
+</html>
diff --git a/client/fragments/settings/blocking.html b/client/fragments/settings/blocking.html
new file mode 100644
index 0000000..b3e9301
--- /dev/null
+++ b/client/fragments/settings/blocking.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        * {
+            font-family: system-ui, -apple-system, sans-serif;
+            user-select: none;
+            -webkit-user-drag: none;
+        }
+    </style>
+</head>
+<body style="background-color: #fff;">
+<main style="background-color: #fff; position: fixed; inset: 20px; overflow: auto;">
+    <h4 style="margin-top: 0; margin-bottom: 10px;">Content blocking</h4>
+    <p>TODO</p>
+</main>
+</body>
+</html>
diff --git a/client/fragments/experiments.html b/client/fragments/settings/experiments.html
index 391ffc8..cb344ed 100644
--- a/client/fragments/experiments.html
+++ b/client/fragments/settings/experiments.html
@@ -3,11 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <title>Experiments</title>
-    <link rel="icon" href="../assets/icons2/experiments.svg">
+    <link rel="icon" href="../../assets/icons2/experiments.svg">
+    <style>
+        * {
+            font-family: system-ui, -apple-system, sans-serif;
+            user-select: none;
+            -webkit-user-drag: none;
+        }
+    </style>
 </head>
 <body style="background-color: #fff;">
     <main style="background-color: #fff; position: fixed; inset: 20px; overflow: auto;">
-        <h1>Experiments</h1>
+        <h4 style="margin-top: 0; margin-bottom: 10px;">Developer</h4>
 
         <p><b style="color: red;">WARNING: EXPERIMENTAL FEATURES AHEAD!</b> By enabling these features, you could lose browser data or compromise your security or privacy. If you are an enterprise admin you should not be using these flags in production.</p>
         <p>The browser will need to reload to apply the new features. This will destroy all children, meaning you might lose unsaved data. For your safety, close all the open tabs before continuing.</p>
@@ -88,7 +95,7 @@
             }
 
             localStorage.setItem("experiments-temp", "true");
-            chatroom.reloadHost();
+            window.parent.chatroom.reloadHost();
         }
     </script>
 </body>
diff --git a/client/fragments/settings/platform.html b/client/fragments/settings/platform.html
new file mode 100644
index 0000000..cfa8d70
--- /dev/null
+++ b/client/fragments/settings/platform.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        * {
+            font-family: system-ui, -apple-system, sans-serif;
+            user-select: none;
+            -webkit-user-drag: none;
+        }
+    </style>
+</head>
+<body style="background-color: #fff;">
+<main style="background-color: #fff; position: fixed; inset: 20px; overflow: auto;">
+    <h4 style="margin-top: 0; margin-bottom: 10px;">Chatroom Platform</h4>
+    <p>TODO</p>
+</main>
+</body>
+</html>
diff --git a/client/fragments/settings/search.html b/client/fragments/settings/search.html
new file mode 100644
index 0000000..81d60dc
--- /dev/null
+++ b/client/fragments/settings/search.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        * {
+            font-family: system-ui, -apple-system, sans-serif;
+            user-select: none;
+            -webkit-user-drag: none;
+        }
+    </style>
+</head>
+<body style="background-color: #fff;">
+<main style="background-color: #fff; position: fixed; inset: 20px; overflow: auto;">
+    <h4 style="margin-top: 0; margin-bottom: 10px;">Search and predictions</h4>
+    <p>TODO</p>
+</main>
+</body>
+</html>
diff --git a/client/fragments/settings/security.html b/client/fragments/settings/security.html
new file mode 100644
index 0000000..a411441
--- /dev/null
+++ b/client/fragments/settings/security.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        * {
+            font-family: system-ui, -apple-system, sans-serif;
+            user-select: none;
+            -webkit-user-drag: none;
+        }
+    </style>
+</head>
+<body style="background-color: #fff;">
+<main style="background-color: #fff; position: fixed; inset: 20px; overflow: auto;">
+    <h4 style="margin-top: 0; margin-bottom: 10px;">Security</h4>
+    <p>TODO</p>
+</main>
+</body>
+</html>
diff --git a/client/fragments/settings/spyglass.html b/client/fragments/settings/spyglass.html
new file mode 100644
index 0000000..60ae4ec
--- /dev/null
+++ b/client/fragments/settings/spyglass.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        * {
+            font-family: system-ui, -apple-system, sans-serif;
+            user-select: none;
+            -webkit-user-drag: none;
+        }
+    </style>
+</head>
+<body style="background-color: #fff;">
+<main style="background-color: #fff; position: fixed; inset: 20px; overflow: auto;">
+    <h4 style="margin-top: 0; margin-bottom: 10px;">Spyglass</h4>
+    <p>TODO</p>
+</main>
+</body>
+</html>
diff --git a/client/fragments/settings/system.html b/client/fragments/settings/system.html
new file mode 100644
index 0000000..4b49fdc
--- /dev/null
+++ b/client/fragments/settings/system.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <style>
+        * {
+            font-family: system-ui, -apple-system, sans-serif;
+            user-select: none;
+            -webkit-user-drag: none;
+        }
+    </style>
+</head>
+<body style="background-color: #fff;">
+<main style="background-color: #fff; position: fixed; inset: 20px; overflow: auto;">
+    <h4 style="margin-top: 0; margin-bottom: 10px;">System</h4>
+    <p>TODO</p>
+</main>
+</body>
+</html>
diff --git a/client/main.js b/client/main.js
index 339234d..b0592a8 100755
--- a/client/main.js
+++ b/client/main.js
@@ -2,8 +2,8 @@
 const buildNumber = "main";
 // --- >FINAL< @BUILDNUMBER@ >FINAL< --- //
 
-const version_stable = "2.8.0-LTS";
-const version_beta = "3.0.0-DP.1";
+const version_stable = "2.8.1-LTS";
+const version_beta = "3.0.0-DP.2";
 let version = version_stable;
 
 const { desktopCapturer, protocol, app, BrowserWindow, webContents, globalShortcut, nativeTheme, ipcMain, session, dialog, Menu } = require('electron');
@@ -34,6 +34,18 @@ try {
 const { ElectronBlocker } = require('@cliqz/adblocker-electron');
 const { fetch } = require('cross-fetch');
 
+app.on('web-contents-created', (e, contents) => {
+    console.log(contents, contents.getType());
+
+    if (contents.getType() === 'webview') {
+        contents.setWindowOpenHandler((details) => {
+            console.log(details);
+            if (mainWindow) mainWindow.webContents.executeJavaScript(`openTab(atob("${Buffer.from(details.url).toString("base64")}"));`);
+            mainWindow.webContents.focus();
+        });
+    }
+})
+
 ElectronBlocker.fromPrebuiltAdsAndTracking(fetch).then((blocker) => {
     global.blocker = blocker;
 });
@@ -49,6 +61,10 @@ ipcMain.handle('get-screenshots', async () => {
     return sources.map(i => i.thumbnail.toJPEG(85).toString("base64"));
 });
 
+ipcMain.handle('version', async () => {
+    return version;
+});
+
 ipcMain.on('enable-protection', () => {
     let waiter = setInterval(() => {
         if (global.blocker) {
@@ -74,7 +90,7 @@ ipcMain.on('disable-protection', () => {
 global.baseUserAgent = session.defaultSession.getUserAgent();
 
 function updateAppVersions() {
-    session.defaultSession.setUserAgent(baseUserAgent.replace(/(.*)( Electron\/(.*) )/gm, "$1 ").replace(/(.*)( Chatroom\/(.*) )/gm, "$1 ") + " Chatroom/" + version);
+    session.defaultSession.setUserAgent(baseUserAgent.replace(/(.*)( Electron\/(.*) )/gm, "$1 ").replace(/(.*)( Chatroom\/([^ ]*) )/gm, "$1 ") + " Chatroom/" + version);
     app.setName("Chatroom");
     app.setAboutPanelOptions({
         applicationName: "Chatroom",
@@ -135,6 +151,7 @@ const createWindow = () => {
         autoHideMenuBar: true,
         webPreferences: {
             nodeIntegration: true,
+            nodeIntegrationInSubFrames: true,
             contextIsolation: false,
             additionalArguments: "--user-data-dir=\"" + localchatDataRoot + "/client" + "\"",
             webviewTag: true,
diff --git a/client/src/plugin.js b/client/src/plugin.js
index 13e8fbe..7324672 100644
--- a/client/src/plugin.js
+++ b/client/src/plugin.js
@@ -1,39 +1,47 @@
 const { contextBridge, ipcRenderer } = require('electron');
+const crObj = {
+    thirdPartyAuth: {
+        getToken: async () => {
+            return await ipcRenderer.invoke("3pid", location.host);
+        },
+        isPossible: async () => {
+            return await ipcRenderer.invoke("3pid-possible");
+        }
+    },
+    focusAddressBar: async () => {
+        return await ipcRenderer.invoke("address-bar");
+    },
+    getVersion: async () => {
+        return await ipcRenderer.invoke("version");
+    },
+    reloadHost: async () => {
+        if (location.protocol !== "file:") throw new Error("reloadHost is only available from local pages.");
+        return await ipcRenderer.invoke("reload");
+    }
+};
+
+try {
+    contextBridge.exposeInMainWorld(
+        "chatroom",
+        crObj
+    );
 
-contextBridge.exposeInMainWorld(
-    "chatroom",
-    {
-        thirdPartyAuth: {
+    // TODO: Remove in M3
+    contextBridge.exposeInMainWorld(
+        "Chatroom3PID",
+        {
             getToken: async () => {
+                if (await ipcRenderer.invoke("deprecated")) throw new Error("The removelegacyapis experiment is enabled, which removes the Chatroom3PID API. Please update your code to use chatroom.thirdPartyAuth.");
+                console.warn("The old Chatroom3PID API is deprecated and will be removed in Chatroom 3.0. Please update your code to use chatroom.thirdPartyAuth instead.");
                 return await ipcRenderer.invoke("3pid", location.host);
             },
             isPossible: async () => {
+                if (await ipcRenderer.invoke("deprecated")) throw new Error("The removelegacyapis experiment is enabled, which removes the Chatroom3PID API. Please update your code to use chatroom.thirdPartyAuth.");
+                console.warn("The old Chatroom3PID API is deprecated and will be removed in Chatroom 3.0. Please update your code to use chatroom.thirdPartyAuth instead.");
                 return await ipcRenderer.invoke("3pid-possible");
             }
-        },
-        focusAddressBar: async () => {
-            return await ipcRenderer.invoke("address-bar");
-        },
-        reloadHost: async () => {
-            if (location.protocol !== "file:") throw new Error("reloadHost is only available from local pages.");
-            return await ipcRenderer.invoke("reload");
         }
-    }
-);
-
-// TODO: Remove in M3
-contextBridge.exposeInMainWorld(
-    "Chatroom3PID",
-    {
-        getToken: async () => {
-            if (await ipcRenderer.invoke("deprecated")) throw new Error("The removelegacyapis experiment is enabled, which removes the Chatroom3PID API. Please update your code to use chatroom.thirdPartyAuth.");
-            console.warn("The old Chatroom3PID API is deprecated and will be removed in Chatroom 3.0. Please update your code to use chatroom.thirdPartyAuth instead.");
-            return await ipcRenderer.invoke("3pid", location.host);
-        },
-        isPossible: async () => {
-            if (await ipcRenderer.invoke("deprecated")) throw new Error("The removelegacyapis experiment is enabled, which removes the Chatroom3PID API. Please update your code to use chatroom.thirdPartyAuth.");
-            console.warn("The old Chatroom3PID API is deprecated and will be removed in Chatroom 3.0. Please update your code to use chatroom.thirdPartyAuth instead.");
-            return await ipcRenderer.invoke("3pid-possible");
-        }
-    }
-);
+    );
+} catch (e) {
+    window.chatroom = crObj;
+}