ADD: Exit button

Not functional 😈
Seriously. Couldn't get it to work :/

src/components/Navbar.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="flex">
+  <div class="flex app-titlebar">
     <Menubar class="w-full h-20 rounded-none bg-zinc-950 border-l-0">
-      <div class="p-2 min-w-48" @click="$refs.zerooneSubtitle.scramble(1,100,0); $refs.zerooneTitle.scramble(1,100,0)">
+      <div
+        class="p-2 min-w-48 app-titlebar-button"
+        @click="$refs.zerooneSubtitle.scramble(1,100,0); $refs.zerooneTitle.scramble(1,100,0)">
         <h1 class="text-3xl">
           <ScrambleText
             ref="zerooneTitle"
@@ -17,7 +19,7 @@
         </p>
       </div>
       <MenubarMenu>
-        <MenubarTrigger v-t="'navbar.device.title'" />
+        <MenubarTrigger v-t="'navbar.device.title'" class="app-titlebar-button" />
         <MenubarContent>
           <!-- TODO: Switch keyboard shortcut icons based on platform -->
           <MenubarItem>
@@ -43,6 +45,11 @@
       <span class="pl-14 inline-block">STATUS: <b class="font-heading text-lg">CONNECTED</b></span>
       <span class="text-muted-foreground px-5 inline-block">///</span>
       <p>SYNCING...</p>
+      <button
+        class="absolute top-0 right-0 py-2 px-3 app-titlebar-button  text-muted-foreground hover:bg-orange-600 hover:text-black"
+        @click="oi('Not implemented ¯\\_(ツ)_/¯')">
+        <X class="h-5 w-5 mr-0.5" />
+      </button>
     </Menubar>
   </div>
 </template>
@@ -57,4 +64,18 @@ import {
   MenubarContent,
 } from '@/components/ui/menubar/index.js'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
-</script>
+import { X } from 'lucide-vue-next'
+
+const oi = (msg) => alert(msg)
+
+</script>
+<style scoped>
+.app-titlebar {
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+}
+
+.app-titlebar-button {
+  -webkit-app-region: no-drag;
+}
+</style>

src/components/config/pages/ProfileConfig.vue

@@ -1,39 +1,6 @@
 <template>
   <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
     <WIP />
-    <div class="hidden">
-      <div class="flex flex-col p-8 py-4">
-                      <span
-                        class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_name')
-                        }}</span>
-        <Input
-          type="text" :placeholder="$t('config_options.profile_settings.profile_properties.profile_name')"
-          class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase"
-          default-value="Oscillator 1" maxlength="20" />
-
-        <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
-      </div>
-      <Separator />
-      <div class="flex flex-col p-8 py-4">
-                      <span
-                        class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_description')
-                        }}</span>
-        <Textarea
-          class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase"
-          :placeholder="$t('config_options.profile_settings.profile_properties.profile_description')"
-          default-value="Adjust Korg Oscillator Waveform " rows="2"
-          maxlength="50" />
-        <Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
-        <div class="flex items-center space-x-4 space-y-1">
-          <Switch id="airplane-mode" :default-checked="true" />
-          <Label
-            for="airplane-mode"
-            class="text-xs text-muted-foreground">{{
-              $t('config_options.profile_settings.profile_properties.show_description')
-            }}</Label>
-        </div>
-      </div>
-    </div>
   </ConfigSection>
   <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
     <div class="flex font-heading">

src/main.js

@@ -16,6 +16,8 @@ const createWindow = () => {
   const mainWindow = new BrowserWindow({
     width: 1024,
     height: 768,
+    autoHideMenuBar: true,
+    frame: false,
     icon: path.join(__dirname, `/assets/favicon.png`),
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),