ui: style title bar

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 />