Updated 10 files and added 2 files (automated)

12 files changed, 207 insertions, 12 deletions

diff --git a/.idea/deployment.xml b/.idea/deployment.xml
index 0c7e597..a4c7ce5 100644
--- a/.idea/deployment.xml
+++ b/.idea/deployment.xml
@@ -9,6 +9,13 @@
           </mappings>
         </serverdata>
       </paths>
+      <paths name="kirinOS on zephyrheights">
+        <serverdata>
+          <mappings>
+            <mapping deploy="/kirin" local="$PROJECT_DIR$" web="/" />
+          </mappings>
+        </serverdata>
+      </paths>
     </serverData>
     <option name="myAutoUpload" value="ALWAYS" />
   </component>
diff --git a/.idea/webServers.xml b/.idea/webServers.xml
index 6086af8..49c44a8 100644
--- a/.idea/webServers.xml
+++ b/.idea/webServers.xml
@@ -2,13 +2,20 @@
 <project version="4">
   <component name="WebServers">
     <option name="servers">
-      <webServer id="b424e548-86a6-4d13-ab1d-67987f94e89e" name="kirinOS">
+      <webServer id="b424e548-86a6-4d13-ab1d-67987f94e89e" name="kirinOS on zephyrheights">
         <fileTransfer accessType="SFTP" host="192.168.1.43" port="22" sshConfigId="a8c399df-606b-48fd-a030-6b9d040f6c38" sshConfig="root@192.168.1.43:22 password">
           <advancedOptions>
             <advancedOptions dataProtectionLevel="Private" keepAliveTimeout="0" passiveMode="true" shareSSLContext="true" />
           </advancedOptions>
         </fileTransfer>
       </webServer>
+      <webServer id="5232ea68-3596-4a19-baa5-f4af516c8322" name="kirinOS">
+        <fileTransfer accessType="SFTP" host="192.168.64.20" port="22" sshConfigId="00ea11a4-2857-4e9b-8ddf-b05be90acbf2" sshConfig="root@192.168.64.20:22 password">
+          <advancedOptions>
+            <advancedOptions dataProtectionLevel="Private" keepAliveTimeout="0" passiveMode="true" shareSSLContext="true" />
+          </advancedOptions>
+        </fileTransfer>
+      </webServer>
     </option>
   </component>
 </project>
\ No newline at end of file
diff --git a/ROADMAP.md b/ROADMAP.md
index a95b060..af624cf 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -6,8 +6,8 @@
   * [x] <s>Window manager **- Raindrops**</s>
   * [x] <s>Application menu **- Raindrops**</s>
   * [x] <s>Task bar **- Raindrops**</s>
-  * [ ] Media keys
-  * [ ] Application switcher **- Raindrops**
+  * [ ] Media keys **- Raindrops**
+  * [x] <s>Application switcher **- Raindrops**</s>
   * [ ] Screenshots **- Raindrops**
   * [ ] Notifications
   * [x] <s>Status bar **- Raindrops**</s>
diff --git a/core/about/index.html b/core/about/index.html
index f06390d..e44e9c9 100644
--- a/core/about/index.html
+++ b/core/about/index.html
@@ -67,7 +67,8 @@
         <div>
             <div>
                 <img alt="" src="../../logo.svg" style="width: 96px; display: block; margin-left: auto; margin-right: auto;">
-                <span style="font-size: 24px; font-weight: bold; margin-top: 20px; margin-bottom: 20px; display: block; text-align: center;">kirinOS</span>
+                <span style="font-size: 24px; font-weight: bold; margin-top: 20px; margin-bottom: 0; display: block; text-align: center;">kirinOS</span>
+                <span id="architecture" style="font-size: 12px; font-weight: normal; opacity: .3; margin-top: 0; margin-bottom: 20px; display: block; text-align: center;">-</span>
             </div>
             <table style="font-size: 12px;">
                 <tr>
@@ -135,6 +136,28 @@
             function changeVersion() {
                 document.getElementById("about-kirinos").innerHTML = release['shortVersion'] + " (<code>" + release['build'] + "</code>)";
             }
+
+            if (process.arch === "arm64") {
+                document.getElementById("architecture").innerText = "ARM processor";
+            } else if (process.arch === "x64") {
+                document.getElementById("architecture").innerText = "x86 processor";
+            } else if (process.arch === "ia32") {
+                document.getElementById("architecture").innerText = "32bit x86 processor (unsupported)";
+            } else if (process.arch === "arm") {
+                document.getElementById("architecture").innerText = "32bit ARM processor (unsupported)";
+            } else if (process.arch === "mips") {
+                document.getElementById("architecture").innerText = "MIPS processor (unsupported)";
+            } else if (process.arch === "mipsel") {
+                document.getElementById("architecture").innerText = "MIPS LE processor (unsupported)";
+            } else if (process.arch === "ppc") {
+                document.getElementById("architecture").innerText = "32bit POWER processor (unsupported)";
+            } else if (process.arch === "ppc64") {
+                document.getElementById("architecture").innerText = "POWER processor (unsupported)";
+            } else if (process.arch === "s390") {
+                document.getElementById("architecture").innerText = "S/390 processor (unsupported)";
+            } else if (process.arch === "s390x") {
+                document.getElementById("architecture").innerText = "System Z processor (unsupported)";
+            }
         </script>
     </div>
 </body>
diff --git a/core/desktop/index.html b/core/desktop/index.html
index ef9269e..eb8213c 100644
--- a/core/desktop/index.html
+++ b/core/desktop/index.html
@@ -40,6 +40,19 @@
             z-index: 999999;
         }
 
+        #switcher-outer {
+            left: calc(50vw - 192px);
+            top: calc(50vh - 80px);
+            height: 160px;
+            width: 384px;
+            border: 1px solid rgba(0, 0, 0, .05);
+            box-shadow: 0 0 20px 7px rgba(0, 0, 0, .3);
+            backdrop-filter: blur(50px);
+            border-radius: 7px;
+            position: fixed;
+            z-index: 999999;
+        }
+
         #launcher-outer {
             margin-left: 18px;
             margin-top: 32px;
@@ -150,7 +163,7 @@
 
         .window-anchors {
             width: 100%;
-            height: calc(100% - 32px);
+            height: 0;
             box-sizing: border-box;
         }
 
@@ -255,6 +268,14 @@
 
         ipcRenderer.on('switch', (event) => {
             console.log("switch");
+
+            if (document.getElementById("switcher-outer").style.display === "none") {
+                document.getElementById("switcher").contentWindow.refreshItems();
+                document.getElementById("switcher-outer").style.display = "";
+                document.getElementById("switcher").focus();
+            } else {
+                document.getElementById("switcher").contentWindow.tabPress();
+            }
         });
 
         ipcRenderer.on('emergency', (event) => {
@@ -344,6 +365,10 @@
         <iframe style="display: flex; height: 100%; width: 100%;" id="status" src="../status/index.html"></iframe>
     </div>
 
+    <div id="switcher-outer" style="display: none;">
+        <iframe style="display: flex; height: 100%; width: 100%;" id="switcher" src="../switcher/index.html"></iframe>
+    </div>
+
     <div id="launcher-close-space" style="display: none;" onclick="closeMenu();">
         <div id="launcher-outer">
             <iframe style="display: flex; height: 100%; width: 100%;" id="launcher" src="../launcher/index.html"></iframe>
@@ -368,14 +393,14 @@
     <script src="./wm.js"></script>
     <script>
         const wm = window.wm = new WindowManager();
-        /*wm.createWindow({
+        wm.createWindow({
             title: "Test Window",
             sandbox: true,
             frameless: false,
             debuggable: true,
             isolatedPath: "/kirin/demo",
             url: "file:///kirin/demo/test.html"
-        });*/
+        });
     </script>
 
     <script>
diff --git a/core/desktop/wm.js b/core/desktop/wm.js
index 8d29ea5..7d04e9e 100644
--- a/core/desktop/wm.js
+++ b/core/desktop/wm.js
@@ -4,17 +4,20 @@ const crypto = require("crypto");
 
 class WindowManager {
     #stack;
+    #switcherStack;
     #list;
     #properties;
 
     constructor() {
         this.#stack = [];
+        this.#switcherStack = [];
         this.#list = [];
         this.#properties = {};
     }
 
     #updateFocus() {
         this.#stack = [...new Set(this.#stack)].filter(i => i);
+        this.#switcherStack = [...new Set(this.#switcherStack)].filter(i => i);
         let index = 0;
 
         for (let window of this.#stack) {
@@ -576,6 +579,7 @@ class WindowManager {
                         }
 
                         i.#stack.unshift(id);
+                        i.#switcherStack.unshift(id);
                         i.#list.push(id);
 
                         i.#updateFocus();
@@ -639,6 +643,7 @@ class WindowManager {
     closeWindow(id) {
         document.getElementById("window-" + id).outerHTML = "";
         delete this.#stack[this.#stack.indexOf(id)];
+        delete this.#switcherStack[this.#switcherStack.indexOf(id)];
         delete this.#list[this.#list.indexOf(id)];
         delete this.#properties[id];
         this.#updateFocus();
@@ -672,6 +677,9 @@ class WindowManager {
         if (document.getElementById("window-" + id).classList.contains("window-minimised")) return;
         document.getElementById("window-" + id).classList.add("window-minimised");
         delete this.#stack[this.#stack.indexOf(id)];
+        delete this.#switcherStack[this.#switcherStack.indexOf(id)];
+        this.#switcherStack.splice(2, 0, id);
+
         this.#updateFocus();
         this.#properties[id].minimised = true;
 
@@ -690,7 +698,9 @@ class WindowManager {
         if (document.getElementById("window-" + id).classList.contains("window-minimised")) wm.unminimiseWindow(id);
         if (!document.getElementById("window-" + id).classList.contains("window-inactive")) return;
         delete this.#stack[this.#stack.indexOf(id)];
+        delete this.#switcherStack[this.#switcherStack.indexOf(id)];
         this.#stack.unshift(id);
+        this.#switcherStack.unshift(id);
         this.#updateFocus();
 
         // TODO: Broadcast a focus event to the client
@@ -736,6 +746,24 @@ class WindowManager {
         });
     }
 
+    getSwitcherItems() {
+        let list = [];
+
+        for (let id of this.#switcherStack) {
+            let win = this.#properties[id];
+
+            list.push({
+                id,
+                title: win.title,
+                minimised: win.minimised,
+                focused: !document.getElementById("window-" + id).classList.contains("window-inactive") && !document.getElementById("window-" + id).classList.contains("window-minimised"),
+                application: win.isolatedPath ?? null
+            });
+        }
+
+        return list;
+    }
+
     taskbarAction(id) {
         if (document.getElementById("window-" + id).classList.contains("window-minimised")) {
             this.unminimiseWindow(id);
diff --git a/core/status/index.html b/core/status/index.html
index 4a813b2..45daf24 100644
--- a/core/status/index.html
+++ b/core/status/index.html
@@ -198,7 +198,7 @@
             console.log(parent.wm.getTaskbarItems());
             document.getElementById("tasks-bar").innerHTML = parent.wm.getTaskbarItems().map(i => `
             <a onclick="parent.wm.taskbarAction('${i.id}');" id="item-${i.id}" class="status-bar-clickable" style="height: 30px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;${i.focused ? 'border-bottom: 1px solid rgba(0, 0, 0, .25);' : 'padding-bottom: 1px;'}">
-                <img alt="" id="item-${i.id}-icon" src="${fs.existsSync(i.application + "/icon-symbolic.svg") ? i.application + "/icon-symbolicsvng" : (fs.existsSync(i.application + "/icon.png") ? i.application + "/icon.png" : "./icons/window.svg")}" style="${i.minimised ? 'opacity: .5;' : ''}${fs.existsSync(i.application + "/icon-symbolic.svg") ? '' : 'border-radius: 999px;'} height: 24px; width: 24px; pointer-events: none; vertical-align: middle;">
+                <img alt="" id="item-${i.id}-icon" src="${fs.existsSync(i.application + "/icon-symbolic.svg") ? i.application + "/icon-symbolic.svg" : (fs.existsSync(i.application + "/icon.png") ? i.application + "/icon.png" : "./icons/window.svg")}" style="${i.minimised ? 'opacity: .5;' : ''}${fs.existsSync(i.application + "/icon-symbolic.svg") ? '' : 'border-radius: 999px;'} height: 24px; width: 24px; pointer-events: none; vertical-align: middle;">
             </a>
             `.trim()).join("");
         }
diff --git a/core/switcher/icons/window.svg b/core/switcher/icons/window.svg
new file mode 100644
index 0000000..e9c619c
--- /dev/null
+++ b/core/switcher/icons/window.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M180-120q-24.75 0-42.375-17.625T120-180v-600q0-24.75 17.625-42.375T180-840h600q24.75 0 42.375 17.625T840-780v600q0 24.75-17.625 42.375T780-120H180Zm0-60h600v-520H180v520Zm100-310v-60h390v60H280Zm0 160v-60h230v60H280Z"/></svg>
\ No newline at end of file
diff --git a/core/switcher/index.html b/core/switcher/index.html
new file mode 100644
index 0000000..b6b7f58
--- /dev/null
+++ b/core/switcher/index.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script>window.require = window.parent.require;</script>
+    <meta charset="UTF-8">
+    <title>kirinos-switcher</title>
+    <style>
+        * {
+            font-family: "Inter", sans-serif;
+            user-select: none;
+            user-focus: none;
+            outline: none;
+            overflow: hidden;
+        }
+
+        html, body {
+            background-color: transparent;
+            color: black;
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+    <script>
+        window.addEventListener('error', (event, source, lineno, colno, error) => {
+            parent.transferError([
+                event, source, lineno, colno, error
+            ]);
+
+            return false;
+        });
+
+        window.addEventListener('keyup', (event) => {
+            console.log(event);
+
+            if (event.key === "Alt" || !event.altKey) {
+                window.parent.document.getElementById("switcher-outer").style.display = "none";
+                window.parent.document.getElementById("switcher").blur();
+
+                window.parent.wm.focusWindow(window.items[window.focusedItem]['id']);
+            } else if (event.key === "Tab" && event.altKey) {
+                tabPress();
+            } else if (event.altKey) {
+                window.parent.document.getElementById("switcher-outer").style.display = "none";
+                window.parent.document.getElementById("switcher").blur();
+            }
+        });
+
+        function tabPress() {
+            window.focusedItem++;
+            if (window.focusedItem >= window.items.length) window.focusedItem = 0;
+            refreshItems(window.focusedItem);
+        }
+
+        window.focusedItem = 1;
+        window.items = [];
+        const fs = require('fs');
+
+        function refreshItems(index) {
+            if (typeof index !== "number") window.focusedItem = 1;
+            window.items = window.parent.wm.getSwitcherItems();
+            if (window.items.length < 2) window.focusedItem = 0;
+
+            let width = (items.length * 144) + 16;
+
+            if (width > screen.width - 176) {
+                document.getElementById("switcher").style.display = "";
+                document.getElementById("switcher").innerHTML = items.map((item, i) => `
+                <div class="switcher-item" id="switcher-item-${item.id}" style="${i === window.focusedItem ? 'background-color: rgba(0, 0, 0, .05);' : ''} ${item['minimised'] ? 'opacity: .5;' : ''} border-radius: 7px; padding: 5px;">
+                    <img alt="" src="${fs.existsSync(i.application + "/icon-symbolic.svg") ? item.application + "/icon-symbolic.svg" : (fs.existsSync(item.application + "/icon.png") ? item.application + "/icon.png" : "./icons/window.svg")}" style="${i.minimised ? 'opacity: .5;' : ''}${fs.existsSync(item.application + "/icon-symbolic.svg") ? '' : 'border-radius: 999px;'} height: 24px; width: 24px; pointer-events: none; vertical-align: middle;">
+                    <span style="vertical-align: middle;">${item['title']}</span>
+                </div>
+                `).join("");
+
+                window.parent.document.getElementById("switcher-outer").style.width = "256px";
+                window.parent.document.getElementById("switcher-outer").style.left = "calc(50vw - 128px)";
+                window.parent.document.getElementById("switcher-outer").style.top = "calc(50vh - " + (((items.length * 34) + 10) / 2) + "px)";
+                window.parent.document.getElementById("switcher-outer").style.height = (items.length * 34) + 10 + "px";
+                document.getElementById("switcher").style.padding = "5px";
+            } else {
+                document.getElementById("switcher").style.display = "flex";
+                document.getElementById("switcher").innerHTML = items.map((item, i) => `
+                <div class="switcher-item" id="switcher-item-${item.id}" style="${i === window.focusedItem ? 'background-color: rgba(0, 0, 0, .05);' : ''} ${item['minimised'] ? 'opacity: .5;' : ''} border-radius: 7px; padding: 8px; display: grid; grid-template-rows: 96px 32px; width: 128px;">
+                    <div style="display: flex; align-items: center; justify-content: center;">
+                        <img alt="" src="${fs.existsSync(item.application + "/icon.png") ? item.application + "/icon.png" : "./icons/window.svg"}" style="${i.minimised ? 'opacity: .5;' : ''} height: 96px; width: 96px; pointer-events: none; vertical-align: middle; border-radius: 999px;">
+                    </div>
+                    <span style="max-width: 140px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; display: inline-block; text-align: center; opacity: .75; font-size: 16px; padding: 8px;">${item['title']}</span>
+                </div>
+                `).join("");
+            }
+
+            window.parent.document.getElementById("switcher-outer").style.width = width + "px";
+            window.parent.document.getElementById("switcher-outer").style.left = "calc(50vw - " + (width / 2) + "px)";
+            window.parent.document.getElementById("switcher-outer").style.top = "calc(50vh - 80px)";
+            window.parent.document.getElementById("switcher-outer").style.height = "160px";
+            document.getElementById("switcher").style.padding = "8px";
+        }
+    </script>
+
+    <div id="bg"></div>
+    <div id="switcher" style="padding: 8px; display: flex;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/Debugging-kirinOS.md b/docs/Debugging-kirinOS.md
index 2b8a307..d7ec5f3 100644
--- a/docs/Debugging-kirinOS.md
+++ b/docs/Debugging-kirinOS.md
@@ -7,8 +7,9 @@ kirinOS runs on Electron, which is a framework to use Web technologies to build
 > **IMPORTANT SECURITY NOTICE:** These options are for debugging and debugging **ONLY**. If anyone, even a kirinOS developer, asks you to enter code in Chrome Dev Tools, make sure you **ABSOLUTELY** know what this code does before executing it.
 
 The following keyboard shortcuts are available to debug kirinOS:
-* `Ctrl+Alt+Tab`: cycle through the open Chrome Dev Tools windows
-  * Note: `Alt+Tab` alone is used to cycle through kirinOS windows
+* `Ctrl+Alt+N`: cycle through the open Chrome Dev Tools windows
+  * Warning: In revision 8a896f6bc2 and earlier, the shortcut is `Ctrl+Alt+Tab`
+  * Note: `Alt+Tab` alone is used to cycle through kirinOS windows after revision 8a896f6bc2
 * `Ctrl+Shift+I`: open Chrome Dev Tools for the main kirinOS window
 * `Ctrl+R`: reload the main kirinOS window
 * `Ctrl+Q`: exit kirinOS and open a `root` terminal
diff --git a/main.js b/main.js
index 1b519d8..8ea4496 100644
--- a/main.js
+++ b/main.js
@@ -42,7 +42,7 @@ const createWindow = () => {
         mainWindow.send("switch");
     });
 
-    globalShortcut.registerAll(['Alt+F4', 'Meta+F4', 'Ctrl+Q'], () => {
+    globalShortcut.registerAll(['Alt+F4', 'Meta+F4'/*, 'Ctrl+Q'*/], () => {
         mainWindow.send("close");
     });
 
diff --git a/setup/rc.xml b/setup/rc.xml
index 15d1a21..7ddf907 100644
--- a/setup/rc.xml
+++ b/setup/rc.xml
@@ -15,7 +15,7 @@
 
     <keyboard>
         <chainQuitKey />
-        <keybind key="C-A-Tab">
+        <keybind key="C-A-N">
             <action name="NextWindow">
                 <finalactions>
                     <action name="Focus"/>