ui: style title bar

src-tauri/capabilities/default.json

@@ -5,6 +5,11 @@
   "windows": ["main"],
   "permissions": [
     "core:default",
-    "opener:default"
+    "opener:default",
+    "core:window:default",
+    "core:window:allow-start-dragging",
+    "core:window:allow-minimize",
+    "core:window:allow-toggle-maximize",
+    "core:window:allow-close"
   ]
 }

src-tauri/tauri.conf.json

@@ -14,7 +14,8 @@
       {
         "title": "shark",
         "width": 800,
-        "height": 600
+        "height": 600,
+        "decorations": false
       }
     ],
     "security": {

src/lib/TitleBar.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { getCurrentWindow } from "@tauri-apps/api/window";
+
+  const appWindow = getCurrentWindow();
+
+  async function minimize() {
+    await appWindow.minimize();
+  }
+
+  async function toggleMaximize() {
+    await appWindow.toggleMaximize();
+  }
+
+  async function close() {
+    await appWindow.close();
+  }
+</script>
+
+<div class="title-bar" data-tauri-drag-region>
+  <div class="title-bar-text">shark</div>
+  <div class="title-bar-controls">
+    <button aria-label="Minimize" on:click={minimize}></button>
+    <button aria-label="Maximize" on:click={toggleMaximize}></button>
+    <button aria-label="Close" on:click={close}></button>
+  </div>
+</div>
+
+<style>
+  .title-bar {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+  }
+</style>

src/routes/+layout.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import TitleBar from "$lib/TitleBar.svelte";
+</script>
+
+<TitleBar />
+<slot />