[MLC-8] Major UI changes, allow for spotlight like view

app/main/main.ts

@@ -4,7 +4,11 @@ import {
   app,
   BrowserWindow,
   dialog,
+  globalShortcut,
   ipcMain,
+  Menu,
+  nativeImage,
+  Tray,
 } from 'electron';
 
 import * as net from 'net';
@@ -104,6 +108,8 @@ const createSplashScreen = () => {
       focusable: false,
       /// remove the window frame, so it will become a frameless window
       frame: false,
+      skipTaskbar: true,
+      autoHideMenuBar: true,
     },
   );
   splash.setResizable(false);
@@ -124,24 +130,35 @@ if (isProd) {
   app.setPath('userData', `${app.getPath('userData')} (development)`);
 }
 
+let directoryOpen = false;
+
 const createWindow = () => {
+  const icon = nativeImage.createFromPath('path/to/asset.png');
+  let tray = new Tray(icon);
+  tray.setTitle('M');
+
   const win = new BrowserWindow({
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       devTools: !isProd,
     },
     show: false,
-    width: 1000,
-    height: 800,
-    minHeight: 800,
-    minWidth: 1000,
-    titleBarStyle: 'hidden',
-    titleBarOverlay: {
-      height: 20,
-    },
+    width: 600,
+    height: 99,
+    resizable: false,
+    type: 'panel',
+    frame: false,
+    skipTaskbar: true,
+    autoHideMenuBar: true,
+    vibrancy: 'under-window', // on MacOS
+    backgroundMaterial: 'acrylic',
   });
+  app.dock.hide();
+  win.setWindowButtonVisibility(false);
+  win.setAlwaysOnTop(true, 'floating');
+  win.setVisibleOnAllWorkspaces(true);
 
-  win.webContents.openDevTools();
+  // win.webContents.openDevTools();
 
   // Expose URL
   if (isProd) {
@@ -151,19 +168,68 @@ const createWindow = () => {
     win.loadURL('http://localhost:3000/');
   }
 
+  tray.addListener('click', () => {
+    if (win.isFocused()) {
+      return;
+    }
+    win.show();
+  });
+
   win.webContents.on('did-finish-load', () => {
     /// then close the loading screen window and show the main window
     if (splash) {
       splash.close();
     }
     win.show();
+    globalShortcut.register('Cmd+O', () => {
+      if (win.isFocused()) {
+        win.blur();
+        return;
+      }
+      win.show();
+    });
+  });
+
+  // @ts-expect-error -- We don't have types for electron
+  win.on('blur', (event) => {
+    if (directoryOpen) {
+      win.setAlwaysOnTop(false);
+      return;
+    }
+
+    globalShortcut.unregister('Escape');
+    win.hide();
+    Menu.sendActionToFirstResponder('hide:');
+  });
+
+  win.on('focus', () => {
+    globalShortcut.register('Escape', () => {
+      if (!win.isFocused()) {
+        return;
+      }
+      win.blur();
+    });
+  });
+
+  win.on('close', (event) => {
+    event.preventDefault();
+    win.hide();
   });
 };
 
 app.whenReady().then(() => {
+  if (process.platform == 'darwin') {
+    app.dock.hide();
+  }
   ipcMain.on('set-title', handleSetTitle);
   ipcMain.on('select-directory', (event: any) => {
+    directoryOpen = true;
     dialog.showOpenDialog({ properties: ['openDirectory'] }).then((result: any) => {
+      const win = BrowserWindow.fromWebContents(event.sender);
+      // Weird hack to bring the window to the front after allowing windows in front of it
+      win?.setAlwaysOnTop(true, 'floating');
+
+      directoryOpen = false;
       event.sender.send('selected-directory', result.filePaths);
     });
   });
@@ -176,9 +242,18 @@ app.whenReady().then(() => {
       .catch(error => console.error('Error starting server:', error));
   });
 
+  ipcMain.on('resize-window', (event, arg) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (!win) {
+      return;
+    }
+    win.setBounds({
+      height: arg.height,
+    });
+  });
+
   createSplashScreen();
 
-  // createWindow();
   setTimeout(() => {
     createWindow();
   }, 2000);
@@ -188,6 +263,7 @@ app.whenReady().then(() => {
   });
 });
 
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') { app.quit(); }
+// @ts-expect-error -- We don't have types for electron
+app.on('window-all-closed', (event) => {
+  event.preventDefault();
 });

app/main/preload.ts

@@ -15,6 +15,7 @@ export const electronAPI = {
     });
   },
   startServer: (model: string) => ipcRenderer.send('start-server', model),
+  resizeWindow: (height: number) => ipcRenderer.send('resize-window', { height }),
 };
 
 contextBridge.exposeInMainWorld('electronAPI', electronAPI);

app/src/app/globals.css

@@ -56,7 +56,7 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
     /* font-feature-settings: "rlig" 1, "calt" 1; */
     font-synthesis-weight: none;
     text-rendering: optimizeLegibility;
@@ -80,3 +80,38 @@
     @apply px-4;
   }
 }
+
+/* Update scrollbar when in dark mode */
+@media screen and (prefers-color-scheme: dark) {
+  ::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted));
+    border-radius: 5px;
+    transition: all;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(255, 4%, 20%);
+  }
+}
+
+/* Update scrollbar when in light mode */
+@media screen and (prefers-color-scheme: light) {
+  ::-webkit-scrollbar-thumb {
+    background-color: rgb(38 38 38);
+    border-radius: 5px;
+    transition: all;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(255, 4%, 20%);
+  }
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+}
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+html {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont;
+}

app/src/app/layout.tsx

@@ -1,12 +1,6 @@
 'use client';
 
 import './globals.css';
-import {
-  Inter,
-} from 'next/font/google';
-
-// eslint-disable-next-line new-cap
-const inter = Inter({ subsets: ['latin'] });
 
 export default function RootLayout({
   children,
@@ -15,15 +9,12 @@ export default function RootLayout({
 }) {
   return (
     <html lang='en'>
-      <body className={`${inter.className} bg-background min-h-screen overflow-y-hidden`}>
-        <div
-          className='h-10 w-full'
-          style={{
-            // @ts-expect-error -- WebkitAppRegion is a valid property
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            WebkitAppRegion: 'drag',
-          }}
-        />
+      <body
+        className={'min-h-screen overflow-y-hidden'}
+        style={{
+          userSelect: 'none',
+        }}
+      >
         {children}
       </body>
     </html>