feat: enable window-controls-overlay and make header draggable

src/components/Header.vue

@@ -74,6 +74,11 @@ onMounted(() => {
   border-right: none;
   border-top: none;
   border-radius: 0;
+  -webkit-app-region: drag; /* Allow dragging the window by the header */
+  /* Account for window controls overlay */
+  padding-left: max(1rem, env(titlebar-area-x));
+  padding-right: max(1rem, calc(100% - env(titlebar-area-x) - env(titlebar-area-width)));
+  padding-top: max(1rem, env(titlebar-area-height, 0px));
 }
 
 .header-content {
@@ -92,7 +97,12 @@ onMounted(() => {
   gap: 1rem;
 }
 
+.nav-btn {
+  -webkit-app-region: no-drag; /* Buttons must be clickable */
+}
+
 .menu-btn {
+  -webkit-app-region: no-drag; /* Buttons must be clickable */
   background: none;
   border: none;
   color: var(--text-color);

vite.config.js

@@ -17,6 +17,7 @@ export default defineConfig({
         theme_color: '#4facfe',
         background_color: '#242424',
         display: 'standalone',
+        display_override: ['window-controls-overlay'],
         orientation: 'portrait',
         icons: [
           {