feat: remove window frame, compact chrome layout (#303)

adidahiya · Jan 7, 2025 · 927d200 · 927d200
1 parent 73e7dc2
commit 927d200
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 9 deletions.
diff --git a/packages/raga-app/src/client/app.module.scss b/packages/raga-app/src/client/app.module.scss
@@ -4,7 +4,6 @@
   left: 0;
   right: 0;
   bottom: 0;
-  padding: 10px;
 }
 
 .fontWeightLight {

diff --git a/packages/raga-app/src/client/components/chrome/appChrome.module.scss b/packages/raga-app/src/client/components/chrome/appChrome.module.scss
@@ -0,0 +1,13 @@
+.appChrome {
+  --mantine-line-height-sm: 1;
+}
+
+.appChromeDraggable {
+  -webkit-app-region: drag;
+  user-select: none;
+}
+
+.appChromeGroup {
+  height: 100%;
+  -webkit-app-region: no-drag;
+}
diff --git a/packages/raga-app/src/client/components/chrome/appChrome.tsx b/packages/raga-app/src/client/components/chrome/appChrome.tsx
@@ -1,19 +1,42 @@
 import { Divider, Group, Title } from "@mantine/core";
+import classNames from "classnames";
 
 import { appStore } from "../../store/appStore";
 import UserSettingsDropdown from "../settings/userSettingsDropdown";
+import styles from "./appChrome.module.scss";
 import AudioAnalyzerStatus from "./audioAnalyzerStatus";
 import AudioFilesServerControls from "./audioFilesServerControls";
 import LibraryControls from "./libraryControls";
 
 export default function AppChrome() {
   const audioFilesServerStatus = appStore.use.audioFilesServerStatus();
   const isLibraryLoaded = appStore.use.libraryLoadingState() === "loaded";
+  const isMacOS = window.api.platform === "darwin";
+  const isWindows = window.api.platform === "win32";
+  // use left padding on macOS to account for window traffic light buttons
+  const leftPadding = isMacOS ? 75 : undefined;
+  // use right padding on Windows to account for window buttons
+  const rightPadding = isWindows ? 100 : undefined;
 
   return (
-    <Group mb={5} justify="space-between" wrap="nowrap">
-      <Group h={30} wrap="nowrap" preventGrowOverflow={true} gap="sm">
-        <Title order={4}>Raga</Title>
+    <Group
+      pl={leftPadding}
+      pr={rightPadding}
+      justify="space-between"
+      wrap="nowrap"
+      className={classNames(styles.appChromeDraggable, styles.appChrome)}
+    >
+      <Group
+        h={30}
+        p={5}
+        wrap="nowrap"
+        preventGrowOverflow={true}
+        gap="sm"
+        className={styles.appChromeGroup}
+      >
+        <Title order={4} className={styles.appChromeDraggable}>
+          Raga
+        </Title>
         {isLibraryLoaded && (
           <>
             <Divider orientation="vertical" />
@@ -29,7 +52,7 @@ export default function AppChrome() {
         <Divider orientation="vertical" />
         <UserSettingsDropdown />
       </Group>
-      <Group>
+      <Group className={styles.appChromeGroup} p={5}>
         <LibraryControls />
       </Group>
     </Group>

diff --git a/packages/raga-app/src/client/views/libraryView.module.scss b/packages/raga-app/src/client/views/libraryView.module.scss
@@ -1,6 +1,5 @@
 .container {
-  height: calc(100vh - 50px);
-  padding: 0;
+  height: calc(100vh - 40px);
 }
 
 .emptyState {
@@ -43,3 +42,8 @@
     right: 0;
   }
 }
+
+.library {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
diff --git a/packages/raga-app/src/client/views/libraryView.tsx b/packages/raga-app/src/client/views/libraryView.tsx
@@ -30,7 +30,7 @@ export default function LibraryView() {
   );
 
   return (
-    <Stack className={styles.container} gap={0}>
+    <Stack className={styles.container} gap={0} px={5}>
       {libraryState === "none" ? (
         <EmptyState
           className={styles.emptyState}
@@ -69,7 +69,7 @@ function Library() {
   const selectedTrack = getSelectedTrackDef();
 
   return (
-    <Paper w="100%" h="100%" shadow="sm" withBorder={true} radius="sm">
+    <Paper w="100%" h="100%" shadow="sm" withBorder={true} radius="sm" className={styles.library}>
       <Stack gap={0} w="100%" h="100%">
         {selectedTrack === undefined || waveSurfer === undefined ? null : (
           <>

diff --git a/packages/raga-app/src/contextBridgeApi.ts b/packages/raga-app/src/contextBridgeApi.ts
@@ -7,6 +7,10 @@ import type { ClientEventChannel, ServerEventChannel } from "./common/events";
  * Promises for async operations.
  */
 export interface ContextBridgeApi {
+  /** OS platform */
+  platform: NodeJS.Platform;
+
+  /** Node.js process version info */
   versions: Record<string, string | undefined>;
 
   /**

diff --git a/packages/raga-app/src/main.ts b/packages/raga-app/src/main.ts
@@ -51,6 +51,8 @@ const createWindow = async () => {
       preload: join(__dirname, "preload.js"),
       webSecurity: false,
     },
+    titleBarStyle: "hiddenInset",
+    titleBarOverlay: true,
   });
 
   // and load the index.html of the app.

diff --git a/packages/raga-app/src/preload.ts b/packages/raga-app/src/preload.ts
@@ -3,13 +3,16 @@
 
 import { blueBright } from "ansis";
 import { contextBridge, ipcRenderer, type IpcRendererEvent } from "electron";
+import { platform } from "os";
 
 import { ClientEventChannel, ServerEventChannel } from "./common/events";
 import { createScopedLogger } from "./common/logUtils";
 import { type ContextBridgeApi } from "./contextBridgeApi";
 
 const log = createScopedLogger("contextBridge", blueBright);
 const contextBridgeApi: ContextBridgeApi = {
+  platform: platform(),
+
   versions: process.versions,
 
   isReady: false,