Merge branch 'main' of https://git.hrz0.duckdns.org/getmoss/moss

src/main/index.ts

@@ -4,18 +4,21 @@ import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
 import fs from 'fs/promises'
 
+let mainWindow: BrowserWindow
+
 function createWindow(): void {
   // Create the browser window.
-  const mainWindow = new BrowserWindow({
+  mainWindow = new BrowserWindow({
     width: 900,
-    height: 670,
+    height: 702,
     show: false,
     autoHideMenuBar: true,
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
       preload: join(__dirname, '../preload/index.mjs'),
       sandbox: false
-    }
+    },
+    frame: false
   })
 
   mainWindow.on('ready-to-show', () => {
@@ -80,6 +83,22 @@ app.whenReady().then(() => {
   ipcMain.handle('error', (_, msg) => {
     dialog.showErrorBox("Error", msg)
   })
+
+  ipcMain.on('minimize', () => {
+    mainWindow.minimize()
+  })
+
+  ipcMain.on('toggleSize', () => {
+    if (mainWindow.isMaximized()) {
+      mainWindow.restore()
+    } else {
+      mainWindow.maximize()
+    }
+  })
+
+  ipcMain.on('close', () => {
+    app.exit()
+  })
 })
 
 // Quit when all windows are closed, except on macOS. There, it's common

src/renderer/src/App.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
   import PlayFile from '$lib/components/PlayFile.svelte'
+  import TaskBar from '$lib/components/TaskBar/TaskBar.svelte'
 </script>
 
+<header id="titlebar" class="h-[32px] w-full relative select-none bg-transparent/5">
+  <TaskBar></TaskBar>
+</header>
+
+<main class="bg-background">
   <PlayFile></PlayFile>
+</main>

src/renderer/src/app.css

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+html, body, #app {
+  margin: 0;
+  height: 100%;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;

src/renderer/src/lib/components/TaskBar/Control.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  let {
+    icon,
+    isClose = false,
+    onclick
+  }: { icon: string; isClose?: boolean; onclick?: () => void } = $props()
+</script>
+
+<div
+  class="h-8 w-12 flex justify-center items-center {isClose
+    ? 'hover:bg-red-500 hover:text-white'
+    : 'hover:bg-transparent/10 '}"
+  {onclick}>
+  <div class="h-3 w-3">
+    {@html icon}
+  </div>
+</div>

src/renderer/src/lib/components/TaskBar/TaskBar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  // SVGs for taskbar controls from https://github.com/AlexTorresDev/custom-electron-titlebar/blob/main/docs/Menu-Icons.md
+  import icons from '$lib/taskbar.json'
+  import Control from './Control.svelte'
+</script>
+
+<div style="-webkit-app-region: drag;" class="w-[calc(100%-144px)] h-full">
+  <p
+    class="absolute left-4 h-full w-fit leading-8"
+    style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
+    Moss
+  </p>
+</div>
+
+<div class="h-full w-[144px] absolute right-0 top-0 flex">
+  <Control icon={icons.minimize} onclick={() => window.electron.ipcRenderer.send("minimize")}></Control>
+  <Control icon={icons.maximize} onclick={() => window.electron.ipcRenderer.send("toggleSize")}></Control>
+  <Control icon={icons.close} onclick={() => window.electron.ipcRenderer.send("close")} isClose={true}></Control>
+</div>

src/renderer/src/lib/taskbar.json

@@ -0,0 +1,6 @@
+{
+  "minimize": "<svg fill=\"currentColor\" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M11,4.9v1.1H0V4.399h11z'/></svg>",
+  "maximize": "<svg fill=\"currentColor\" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M0,1.7v7.6C0,10.2,0.8,11,1.7,11h7.6c0.9,0,1.7-0.8,1.7-1.7V1.7C11,0.8,10.2,0,9.3,0H1.7C0.8,0,0,0.8,0,1.7z M8.8,9.9H2.2c-0.6,0-1.1-0.5-1.1-1.1V2.2c0-0.6,0.5-1.1,1.1-1.1h6.7c0.6,0,1.1,0.5,1.1,1.1v6.7C9.9,9.4,9.4,9.9,8.8,9.9z'/></svg>",
+  "restore": "<svg fill=\"currentColor\" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M7.9,2.2h-7C0.4,2.2,0,2.6,0,3.1v7C0,10.6,0.4,11,0.9,11h7c0.5,0,0.9-0.4,0.9-0.9v-7C8.8,2.6,8.4,2.2,7.9,2.2z M7.7,9.6 c0,0.2-0.1,0.3-0.3,0.3h-6c-0.2,0-0.3-0.1-0.3-0.3v-6c0-0.2,0.1-0.3,0.3-0.3h6c0.2,0,0.3,0.1,0.3,0.3V9.6z'/><path d='M10,0H3.5v1.1h6.1c0.2,0,0.3,0.1,0.3,0.3v6.1H11V1C11,0.4,10.6,0,10,0z'/></svg>",
+  "close": "<svg fill=\"currentColor\" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z'/></svg>"
+}