feat: add custom tauri title bar and window controls

This commit is contained in:
thibaud-leclere 2026-04-14 10:45:13 +02:00
parent 608ed32eac
commit 7c99a6d986
3 changed files with 68 additions and 3 deletions

View file

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

View file

@ -1,15 +1,23 @@
import { Outlet } from "react-router-dom";
import NotificationCenter from "./NotificationCenter";
import Sidebar from "./Sidebar";
import WindowControls from "./WindowControls";
export default function AppLayout() {
return (
<div className="flex h-screen">
<Sidebar />
<main className="flex-1 overflow-y-auto bg-gray-50">
<header className="sticky top-0 z-10 border-b border-gray-200 bg-gray-50/95 px-6 py-3 backdrop-blur">
<div className="flex justify-end">
<header className="sticky top-0 z-10 border-b border-gray-200 bg-gray-50/95 px-3 py-2 backdrop-blur">
<div className="flex items-center gap-3">
<div
data-tauri-drag-region
className="min-w-0 flex-1 select-none text-sm font-semibold text-gray-700"
>
Orchai
</div>
<NotificationCenter />
<WindowControls />
</div>
</header>
<Outlet />

View file

@ -0,0 +1,56 @@
import { getCurrentWindow } from "@tauri-apps/api/window";
async function minimizeWindow() {
try {
await getCurrentWindow().minimize();
} catch {
// No-op outside Tauri runtime
}
}
async function toggleMaximizeWindow() {
try {
await getCurrentWindow().toggleMaximize();
} catch {
// No-op outside Tauri runtime
}
}
async function closeWindow() {
try {
await getCurrentWindow().close();
} catch {
// No-op outside Tauri runtime
}
}
export default function WindowControls() {
return (
<div className="flex items-center gap-1">
<button
type="button"
onClick={() => void minimizeWindow()}
title="Minimize"
className="h-7 w-7 rounded border border-gray-300 bg-white text-xs text-gray-700 hover:bg-gray-100"
>
_
</button>
<button
type="button"
onClick={() => void toggleMaximizeWindow()}
title="Maximize / Restore"
className="h-7 w-7 rounded border border-gray-300 bg-white text-xs text-gray-700 hover:bg-gray-100"
>
[]
</button>
<button
type="button"
onClick={() => void closeWindow()}
title="Close"
className="h-7 w-7 rounded border border-red-300 bg-red-50 text-xs text-red-700 hover:bg-red-100"
>
X
</button>
</div>
);
}