keyboard commands for spawning window, better colors

app.js

@@ -6,24 +6,53 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = paths.dirname(__filename);
 
-function createWindow() {
+const WINDOW_SHORTCUTS = [
-  const win = new BrowserWindow({
+    process.platform === "darwin" ? "Command+R" : "Control+R",
-    width: 800,
+    "\\"
-    height: 600,
+];
-    frame: false,
+
-    titleBarStyle: "hidden",
+function createWindow({onTop = false}) {
-    webPreferences: {
+    const win = new BrowserWindow({
-		contextIsolation: true,
+        width: 1200,
-		nodeIntegration: false,
+        height: 800,
-		webviewTag: true,
+        frame: false,
+        show: false,
+        titleBarStyle: "customButtonsOnHover",
+        webPreferences: {
+            contextIsolation: true,
+            nodeIntegration: false,
+            webviewTag: true,
+        }
+    });
+
+    if(onTop) {
+        win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true }); // necessary for full screen
+        win.setAlwaysOnTop(true, 'screen-saver', 1); // necessary so it doesn't bring you back out of full screen when spawned
     }
-  });
 
-  win.loadFile('server/index.html');
+    win.loadFile('server/index.html');
 
-  win.webContents.on('did-fail-load', (e, code, desc) => {
+    win.on("focus", () => {
-  console.log('Webview failed:', desc);
+        win.setVibrancy("appearance-based"); // full colors
-});
+    });
+
+    win.on("blur", () => {
+        win.setVibrancy("selection"); // dims colors
+    });
+
+    win.webContents.on('did-finish-load', () => {
+        win.show();
+    });
+
+    win.webContents.on('did-fail-load', (e, code, desc) => {
+        console.log('Webview failed:', desc);
+    });
+
+    win.on('closed', () => {
+        for (const key of WINDOW_SHORTCUTS) {
+            globalShortcut.unregister(key);
+        }
+    });
 }
 
 let devToolsOpened = false;
@@ -39,27 +68,38 @@ function toggleDevTools(win) {
 
 app.on("ready", async () => {
     // await Forms.init();
-    createWindow();
+    createWindow({onTop: false});
+
+    globalShortcut.register('CommandOrControl+Shift+Space', () => {
+        createWindow({onTop: true});
+    });
 
     // Register global shortcuts
     app.on("browser-window-focus", () => {
-        const reloadShortcut = process.platform === "darwin" ? "Command+R" : "Control+R";
+        const focused = BrowserWindow.getFocusedWindow();
-        globalShortcut.register(reloadShortcut, () => {
+        if (!focused) return;
-            BrowserWindow.getFocusedWindow().reload();
+
+        // Reload
+        globalShortcut.register(WINDOW_SHORTCUTS[0], () => {
+            focused.reload();
         });
-        globalShortcut.register("\\", () => {
+
-            toggleDevTools(BrowserWindow.getFocusedWindow());
+        // Devtools
+        globalShortcut.register(WINDOW_SHORTCUTS[1], () => {
+            toggleDevTools(focused);
         });
     });
 
     app.on("browser-window-blur", () => {
-        globalShortcut.unregisterAll();
+        for (const key of WINDOW_SHORTCUTS) {
+            globalShortcut.unregister(key);
+        }    
     });
 });
 
 app.on("activate", () => {
     if (BrowserWindow.getAllWindows().length === 0) {
-        createWindow();
+        createWindow({onTop: false});
     }
 });
 

server/index.html

@@ -8,11 +8,12 @@
         body {
             margin: 0;
             overflow: hidden;
+            background-color: #6A2C1C;
         }
 
         .draggable {
             -webkit-app-region: drag;
-            height: 20px;
+            height: 40px;
             position: fixed;
             top: 0;
             left: 0;

ui/_/code/shared.css

@@ -17,8 +17,9 @@
 
 @media (prefers-color-scheme: dark) {
 :root {
-    --main: #BD410D;
+    --main: #6A2C1C;
     --accent: var(--tan);
     --accent2: var(--green);
+    --accent3: #c74109
 }
 }

ui/components/Home.js

@@ -4,8 +4,8 @@ class Home extends Shadow {
 
     render() {
         ZStack(() => {
-            input("", "20vw")
+            input("", "60vw")
-                .backgroundColor("var(--darkred)")
+                .backgroundColor("var(--accent3)")
                 .color("var(--accent)")
                 .border("none")
                 .borderTop("1px solid var(--accent)")
@@ -31,11 +31,14 @@ class Home extends Shadow {
                 })
             
             VStack(() => {
-
                 let json = this.getJSONData()
+                p(json.length + " Entries")
+                .marginBottom(2, em)
+
                 for(let i=0; i<100; i++) {
                     p(json[i].name)
                     .marginLeft(0, em)
+                    .marginBottom(0.1, em)
                 }
             })
             .paddingLeft(5, em)