feat: implemented custom titlebar for windows and linux

src-tauri/capabilities/default.json

@@ -10,6 +10,10 @@
     "core:window:allow-hide",
     "core:window:allow-show",
     "core:window:allow-set-focus",
+    "core:window:allow-minimize",
+    "core:window:allow-maximize",
+    "core:window:allow-unmaximize",
+    "core:window:allow-start-dragging",
     "opener:default",
     "shell:default",
     "fs:default",

src-tauri/tauri.linux-aarch64.conf.json

@@ -10,8 +10,9 @@
         "windows": [
             {
                 "title": "NeoDLP",
-                "width": 1067,
-                "height": 605,
+                "width": 1080,
+                "height": 680,
+                "decorations": false,
                 "visible": false
             }
         ],

src-tauri/tauri.linux-x86_64.conf.json

@@ -10,8 +10,9 @@
         "windows": [
             {
                 "title": "NeoDLP",
-                "width": 1067,
-                "height": 605,
+                "width": 1080,
+                "height": 680,
+                "decorations": false,
                 "visible": false
             }
         ],

src-tauri/tauri.windows.conf.json

@@ -10,8 +10,9 @@
         "windows": [
             {
                 "title": "NeoDLP",
-                "width": 1067,
-                "height": 605,
+                "width": 1080,
+                "height": 680,
+                "decorations": false,
                 "visible": false
             }
         ],

src/components/icons/close.tsx

@@ -0,0 +1,12 @@
+export function CloseIcon({ className }: { className?: string }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" className={className}>
+            <path
+                fill="currentColor"
+                fillRule="evenodd"
+                d="m7.116 8l-4.558 4.558l.884.884L8 8.884l4.558 4.558l.884-.884L8.884 8l4.558-4.558l-.884-.884L8 7.116L3.442 2.558l-.884.884z"
+                clipRule="evenodd"
+            />
+        </svg>
+    );
+}

src/components/icons/maximize.tsx

@@ -0,0 +1,7 @@
+export function MaximizeIcon({ className }: { className?: string }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" className={className}>
+            <path fill="currentColor" d="M3 3v10h10V3zm9 9H4V4h8z" />
+        </svg>
+    );
+}

src/components/icons/minimize.tsx

@@ -0,0 +1,7 @@
+export function MinimizeIcon({ className }: { className?: string }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" className={className}>
+            <path fill="currentColor" d="M14 8v1H3V8z" />
+        </svg>
+    );
+}

src/components/icons/unmaximize.tsx

@@ -0,0 +1,10 @@
+export function UnmaximizeIcon({ className }: { className?: string }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" className={className}>
+            <g fill="currentColor">
+                <path d="M3 5v9h9V5zm8 8H4V6h7z" />
+                <path fillRule="evenodd" d="M5 5h1V4h7v7h-1v1h2V3H5z" clipRule="evenodd" />
+            </g>
+        </svg>
+    );
+}

src/components/navbar.tsx

@@ -8,10 +8,13 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { useLogger } from "@/helpers/use-logger";
 import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import TitleBar from "@/components/titlebar";
+import { platform } from "@tauri-apps/plugin-os";
 
 export default function Navbar() {
     const [copied, setCopied] = useState(false);
     const location = useLocation();
+    const currentPlatform = platform();
     const logger = useLogger();
     const logs = logger.getLogs();
     const logText = logs.map(log => `${new Date(log.timestamp).toLocaleTimeString()} [${log.level.toUpperCase()}] ${log.context}: ${log.message}`).join('\n');
@@ -23,7 +26,13 @@ export default function Navbar() {
     }
 
     return (
-        <nav className="flex justify-between items-center py-3 px-4 sticky top-0 backdrop-blur supports-backdrop-filter:bg-background/60 border-b z-50">
+        <div className="sticky top-0 z-50">
+            {currentPlatform === "windows" || currentPlatform === "linux" ? (
+                <TitleBar />
+            ) : (
+                null
+            )}
+            <nav className="flex justify-between items-center py-3 px-4 backdrop-blur supports-backdrop-filter:bg-background/60 border-b">
                 <div className="flex justify-center">
                     <SidebarTrigger />
                     <h1 className="text-lg font-semibold ml-4">{getRouteName(location.pathname)}</h1>
@@ -85,5 +94,6 @@ export default function Navbar() {
                     </Dialog>
                 </div>
             </nav>
+        </div>
     )
 }

src/components/sidebar.tsx

@@ -147,7 +147,7 @@ export function AppSidebar() {
                     <Tooltip>
                         <TooltipTrigger asChild>
                             <Button variant="ghost">
-                                <CircleArrowUp className="size-4" />
+                                <CircleArrowUp className="size-4 stroke-primary" />
                             </Button>
                         </TooltipTrigger>
                         <TooltipContent side="right">

src/components/titlebar.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { MaximizeIcon } from "@/components/icons/maximize";
+import { MinimizeIcon } from "@/components/icons/minimize";
+import { CloseIcon } from "@/components/icons/close";
+import { UnmaximizeIcon } from "@/components/icons/unmaximize";
+
+export default function TitleBar() {
+    const [maximized, setMaximized] = useState<boolean>(false);
+    const appWindow = getCurrentWebviewWindow();
+
+    return (
+        <div className="titlebar flex items-center justify-between border-b bg-background">
+            <div className="flex items-center justify-center grow px-4 py-2.5" data-tauri-drag-region>
+                <h1 className="text-sm text-primary font-semibold">NeoDLP</h1>
+            </div>
+            <div className="controls flex items-center justify-center">
+                <button
+                className="px-4 py-3 hover:bg-muted"
+                id="titlebar-minimize"
+                title="Minimize"
+                onClick={() => appWindow.minimize()}
+                >
+                    <MinimizeIcon />
+                </button>
+                <button
+                className="px-4 py-3 hover:bg-muted"
+                id="titlebar-maximize"
+                title={maximized ? "Unmaximize" : "Maximize"}
+                onClick={async () => {
+                    const isMaximized = await appWindow.isMaximized();
+                    if (isMaximized) {
+                        await appWindow.unmaximize();
+                        setMaximized(false);
+                    } else {
+                        await appWindow.maximize();
+                        setMaximized(true);
+                    }
+                }}
+                >
+                    {maximized ? (
+                        <UnmaximizeIcon />
+                    ) : (
+                        <MaximizeIcon />
+                    )}
+                </button>
+                <button
+                className="px-4 py-3 hover:bg-destructive"
+                id="titlebar-close"
+                title="Close"
+                onClick={() => appWindow.hide()}
+                >
+                    <CloseIcon />
+                </button>
+            </div>
+        </div>
+    );
+}

src/pages/layout/root.tsx

@@ -7,10 +7,10 @@ import Footer from "@/components/footer";
 export default function RootLayout() {
     return (
         <>
-        <div className="flex min-h-screen">
+        <div className="flex flex-col min-h-screen">
             <SidebarProvider>
                 <AppSidebar />
-            <div className="w-full h-screen overflow-y-scroll relative">
+                <div className="w-full h-screen overflow-y-scroll no-scrollbar relative">
                     <Navbar/>
                     <Outlet />
                     <Footer/>