Basic application shell & layouting

package.json

@@ -14,6 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-os": "^2.0.0",
     "@tauri-apps/plugin-shell": "^2",
     "@tauri-apps/plugin-store": "^2.1.0"
   },

src-tauri/Cargo.toml

@@ -20,6 +20,7 @@ tauri-build = { version = "2", features = [] }
 [dependencies]
 tauri = { version = "2", features = [] }
 tauri-plugin-shell = "2"
+tauri-plugin-os = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 tauri-plugin-store = "2.0.0"

src-tauri/capabilities/default.json

@@ -2,6 +2,28 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "Capability for the main window",
-  "windows": ["main"],
-  "permissions": ["core:default", "shell:allow-open", "store:default"]
-}
+  "windows": [
+    "main"
+  ],
+  "permissions": [
+    "core:default",
+    "shell:allow-open",
+    "store:default",
+    "core:window:allow-close",
+    "core:window:allow-is-closable",
+    "core:window:allow-is-decorated",
+    "core:window:allow-is-fullscreen",
+    "core:window:allow-is-maximizable",
+    "core:window:allow-is-maximized",
+    "core:window:allow-is-minimizable",
+    "core:window:allow-is-minimized",
+    "core:window:allow-is-focused",
+    "core:window:allow-maximize",
+    "core:window:allow-minimize",
+    "core:window:allow-start-dragging",
+    "core:window:allow-toggle-maximize",
+    "core:window:allow-unmaximize",
+    "core:window:allow-unminimize",
+    "os:default"
+  ]
+}

src-tauri/src/lib.rs

@@ -1,3 +1,5 @@
+use tauri::WindowEvent;
+
 // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
 #[tauri::command]
 fn greet(name: &str) -> String {
@@ -7,8 +9,13 @@ fn greet(name: &str) -> String {
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
-        .plugin(tauri_plugin_shell::init())
-        .invoke_handler(tauri::generate_handler![greet])
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
-}
+      .on_window_event(|_, event| {
+          if let WindowEvent::Resized(_) = event {
+              std::thread::sleep(std::time::Duration::from_nanos(1));
+          }
+      })
+      .plugin(tauri_plugin_shell::init())
+      .invoke_handler(tauri::generate_handler![greet])
+      .run(tauri::generate_context!())
+      .expect("error while running tauri application");
+}

src-tauri/src/main.rs

@@ -3,6 +3,7 @@
 
 fn main() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_store::Builder::default().build())
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src-tauri/tauri.conf.json

@@ -14,9 +14,12 @@
       {
         "title": "scope",
         "width": 800,
-        "height": 600
+        "height": 600,
+        "decorations": false,
+        "transparent": true
       }
     ],
+    "macOSPrivateApi": true,
     "security": {
       "csp": null
     }

src/components/windows_titlebar.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import {
+    CURRENT_WINDOW,
+    dragRegion,
+    focused,
+    maximized,
+  } from "$lib/platform/index.svelte";
+  import { theme } from "$lib/theme";
+  import { version } from "@tauri-apps/plugin-os";
+  import type { Snippet } from "svelte";
+
+  const [VERSION_MAJOR, VERSION_MINOR, VERSION_PATCH] = version().split(".");
+  const IS_WINDOWS_11 = parseInt(VERSION_PATCH) > 22000; // They didn't bump version_major so 10.0.22000 was the first windows 11 version instead of 11.0.0
+  const FONT = IS_WINDOWS_11 ? "Segoe Fluent Icons" : "Segoe MDL2 Assets";
+
+  const CHARACTER_MAPPING = {
+    close: "\u{e8bb}",
+    minimize: "\u{e921}",
+    maximize: "\u{e922}",
+    restore: "\u{e923}",
+  };
+
+  interface Props {
+    contents: Snippet;
+  }
+
+  const { contents }: Props = $props();
+</script>
+
+{#snippet button(kind: "close" | "maximize" | "restore" | "minimize")}
+  <button
+    style="
+    font-family: {FONT};
+    --icon: {theme(`titlebar-windows-${kind}-icon`)};
+    --bg-hover: {theme(`titlebar-windows-${kind}-hover-background`)};
+    --icon-hover: {theme(`titlebar-windows-${kind}-hover-icon`)};
+    --bg-active: {theme(`titlebar-windows-${kind}-active-background`)};
+    --icon-active: {theme(`titlebar-windows-${kind}-active-icon`)};
+    --hover-transition-speed: {theme(
+      `titlebar-windows-${kind}-hover-transition-speed`
+    )}
+  "
+    onclick={() => {
+      switch (kind) {
+        case "close":
+          CURRENT_WINDOW.close();
+          break;
+        case "restore":
+          CURRENT_WINDOW.unmaximize();
+          break;
+        case "maximize":
+          CURRENT_WINDOW.maximize();
+          break;
+        case "minimize":
+          CURRENT_WINDOW.minimize();
+          break;
+      }
+    }}
+  >
+    <p>{CHARACTER_MAPPING[kind]}</p>
+  </button>
+{/snippet}
+
+<main use:dragRegion>
+  <div use:dragRegion class="contentsWrapper">
+    {@render contents()}
+  </div>
+  <div class="actionItems">
+    {@render button("minimize")}
+    {#if maximized.value}
+      {@render button("restore")}
+    {:else}
+      {@render button("maximize")}
+    {/if}
+    {@render button("close")}
+  </div>
+</main>
+
+<style>
+  .contentsWrapper {
+    flex-grow: 1;
+  }
+
+  button:hover {
+    background-color: var(--bg-hover);
+    color: var(--icon-hover);
+  }
+
+  button:active {
+    background-color: var(--bg-active);
+    color: var(--icon-active);
+    transition: unset;
+  }
+
+  button {
+    width: 46px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--bg);
+    color: var(--icon);
+    border: 0;
+    transition:
+      background-color var(--hover-transition-speed) ease-out,
+      color var(--hover-transition-speed) ease-out;
+  }
+
+  button > p {
+    font-size: 10px;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  main,
+  .actionItems {
+    display: flex;
+    flex-direction: row;
+  }
+
+  main {
+    justify-content: space-between;
+    min-height: 30px;
+
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+  }
+</style>

src/icons/arrow_left_into_bar_icon.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  interface Props {
+    size: string,
+    color: string,
+  }
+
+  const { size, color }: Props = $props();
+</script>
+
+<svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.00012 3C3.55241 3 4.00012 3.44771 4.00012 4L4.00012 16C4.00012 16.5523 3.55241 17 3.00012 17C2.44784 17 2.00012 16.5523 2.00012 16L2.00012 4C2.00012 3.44771 2.44784 3 3.00012 3ZM10.7072 6.29289C11.0978 6.68342 11.0978 7.31658 10.7072 7.70711L9.41434 9L17.0001 9C17.5524 9 18.0001 9.44771 18.0001 10C18.0001 10.5523 17.5524 11 17.0001 11L9.41433 11L10.7072 12.2929C11.0978 12.6834 11.0978 13.3166 10.7072 13.7071C10.3167 14.0976 9.68354 14.0976 9.29302 13.7071L6.29302 10.7071C6.10548 10.5196 6.00012 10.2652 6.00012 10C6.00012 9.73478 6.10548 9.48043 6.29302 9.29289L9.29302 6.29289C9.68354 5.90237 10.3167 5.90237 10.7072 6.29289Z" fill={color} />
+</svg>

src/icons/arrow_right_into_bar_icon.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  interface Props {
+    size: string,
+    color: string,
+  }
+
+  const { size, color }: Props = $props();
+</script>
+
+<svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 3C2.44772 3 2 3.44772 2 4V16C2 16.5523 2.44772 17 3 17C3.55229 17 4 16.5523 4 16V4C4 3.44772 3.55229 3 3 3Z" fill={color} />
+  <path d="M13.2929 12.2929C12.9024 12.6834 12.9024 13.3166 13.2929 13.7071C13.6834 14.0976 14.3166 14.0976 14.7071 13.7071L17.7071 10.7071C17.8947 10.5196 18 10.2652 18 10C18 9.73478 17.8947 9.48043 17.7071 9.29289L14.7071 6.29289C14.3166 5.90237 13.6834 5.90237 13.2929 6.29289C12.9024 6.68342 12.9024 7.31658 13.2929 7.70711L14.5858 9L7 9C6.44772 9 6 9.44772 6 10C6 10.5523 6.44772 11 7 11H14.5858L13.2929 12.2929Z" fill={color} />
+</svg>