feat: add custom tauri title bar and window controls
This commit is contained in:
parent
608ed32eac
commit
7c99a6d986
3 changed files with 68 additions and 3 deletions
|
|
@ -14,7 +14,8 @@
|
|||
{
|
||||
"title": "Orchai",
|
||||
"width": 1200,
|
||||
"height": 800
|
||||
"height": 800,
|
||||
"decorations": false
|
||||
}
|
||||
],
|
||||
"security": {
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
56
src/components/layout/WindowControls.tsx
Normal file
56
src/components/layout/WindowControls.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue