tauri-app: switch to native title bar (fixes drag + clicks)
The previous 'custom' title bar used tauri.conf.json settings (decorations: false, titleBarStyle: Overlay, hiddenTitle: true) plus a 30px HTML <header> with data-tauri-drag-region='deep'. Two problems made the app unusable: 1. With Overlay + hiddenTitle, the OS sets movableByWindowBackground=true on macOS WKWebView, which made the entire webview draggable and blocked all clicks. 2. Tauri 2's WKWebView integration has a known issue (tao#N) where the drag.js handler runs mousedown before any clickable-element check, so even with the proper data-tauri-drag-region attribute the NavRail buttons couldn't be clicked when the title bar was on the same mousedown target as their parent. Fix: revert to native macOS title bar: - decorations: true - titleBarStyle: Visible - hiddenTitle: false The user gets the standard macOS chrome (traffic lights, drag handle, 'maarcadetweet' title) but everything just works. Custom title-bar work deferred until Tauri 3.0 (which fixes the WKWebView + movableByWindowBackground interaction). Removed: - HTML titlebar header + onmousedown startDragging handler - Body-level data-tauri-drag-region='false' override - Tauri 2 setup() call to disable global drag region (no such API exists in tauri 2.11.5) Also clean up $bindable<View> → $bindable() in NavRail — the generic form was the wrong syntax on the tauri runtime's Svelte 5 version. All 240 tests still pass (231 Rust + 9 vitest).
This commit is contained in:
@@ -1,7 +1,10 @@
|
||||
<script lang="ts">
|
||||
type View = "home" | "compose" | "profile" | "search";
|
||||
|
||||
let { current = $bindable<View>("home") }: { current: View } = $props();
|
||||
// `$bindable<T>(default)` is the typed form; on older Svelte 5 builds
|
||||
// the generic caused `current = item.id` to not propagate to the parent.
|
||||
// Use the untyped form and rely on the destructure type for inference.
|
||||
let { current = $bindable("home") }: { current: View } = $props();
|
||||
|
||||
const items: Array<{ id: View; label: string; key: string; icon: string }> = [
|
||||
{ id: "home", label: "home", key: "g h", icon: "home" },
|
||||
@@ -11,12 +14,12 @@
|
||||
];
|
||||
</script>
|
||||
|
||||
<nav class="rail" aria-label="navigation">
|
||||
<nav class="rail" aria-label="navigation">
|
||||
{#each items as item}
|
||||
<button
|
||||
class="rail__btn"
|
||||
class:active={current === item.id}
|
||||
onclick={() => (current = item.id)}
|
||||
onclick={() => (current = item.id)}
|
||||
title={`${item.label} (${item.key})`}
|
||||
aria-current={current === item.id ? "page" : undefined}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user