Implement custom titlebar with dropdown menu

package.json

@@ -18,11 +18,14 @@
     "@tauri-apps/plugin-dialog": "~2.0.1",
     "@tauri-apps/plugin-fs": "~2.0.1",
     "@tauri-apps/plugin-shell": "^2",
+    "url": "^0.11.4",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^2",
+    "@types/node": "^22.8.1",
     "@vitejs/plugin-vue": "^5.0.5",
+    "sass": "^1.80.4",
     "typescript": "^5.2.2",
     "vite": "^5.3.1",
     "vue-tsc": "^2.0.22"

src/App.vue

@@ -2,6 +2,7 @@
 import { Ref, ref } from "vue";
 import { invoke } from "@tauri-apps/api/core";
 import { open } from '@tauri-apps/plugin-dialog';
+import Titlebar from "@/ui/system/Titlebar.vue";
 
 const path: Ref<string> = ref("");
 const content: Ref<string> = ref("");
@@ -36,6 +37,7 @@ async function writeFile() {
 </script>
 
 <template>
+  <Titlebar />
   <main class="container">
     <h1>Luna Editor</h1>
 
@@ -55,20 +57,24 @@ async function writeFile() {
 </template>
 
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Montserrat", Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-optical-sizing: auto;
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
 
-  color: #0f0f0f;
-  background-color: #f6f6f6;
+  color: #f6f6f6;
+  background-color: #2f2f2f;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
+
 }
 
 .container {
@@ -108,8 +114,8 @@ textarea {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
+  color: #ffffff;
+  background-color: #0f0f0f98;
   transition: border-color 0.25s;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
 }
@@ -128,33 +134,11 @@ button:hover {
 }
 button:active {
   border-color: #396cd8;
-  background-color: #e8e8e8;
+  background-color: #0f0f0f69;
 }
 
 input,
 button {
   outline: none;
 }
-
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
-  }
-
-  a:hover {
-    color: #24c8db;
-  }
-
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-  button:active {
-    background-color: #0f0f0f69;
-  }
-}
-
 </style>

src/backend/capabilities/default.json

@@ -9,6 +9,12 @@
     "core:default",
     "shell:allow-open",
     "fs:default",
-    "dialog:default"
+    "dialog:default",
+    "core:window:default",
+    "core:window:allow-start-dragging",
+    "core:window:allow-close",
+    "core:window:allow-minimize",
+    "core:window:allow-toggle-maximize",
+    "core:window:allow-internal-toggle-maximize"
   ]
 }

src/model/DropdownMenuChildren.ts

@@ -0,0 +1,5 @@
+export interface DropdownMenuChildren {
+    span: string;
+    shortcut: string[];
+    func: () => void;
+}

src/model/DropdownMenuParent.ts

@@ -0,0 +1,6 @@
+import { DropdownMenuChildren } from "@/model/DropdownMenuChildren.ts";
+
+export interface DropdownMenuParent {
+    span: string;
+    children: DropdownMenuChildren[];
+}

src/model/TitlebarAction.ts

@@ -0,0 +1,6 @@
+export interface TitlebarAction {
+    name: string;
+    imageUrl: string;
+    description: string;
+    func: () => void;
+}