feat: add macOS-style traffic light buttons for Linux (#1988)

* feat: add macOS-style traffic light buttons for Linux

On Linux, window decorations are removed, leaving no way to close/minimize/maximize windows. This adds macOS-style traffic light buttons to the settings window header for Linux users.

Changes:
- Add usePlatform hook for platform detection using @tauri-apps/plugin-os
- Add TrafficLights component with close/minimize/maximize buttons
- Integrate TrafficLights into settings layout for Linux only

Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>

* fix: enable minimize/maximize for Settings window and add traffic lights to main window

Co-Authored-By: yujonglee <yujonglee.dev@gmail.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: yujonglee

apps/desktop/src/components/main/body/index.tsx

@@ -13,12 +13,14 @@ import { Button } from "@hypr/ui/components/ui/button";
 import { cn } from "@hypr/utils";
 
 import { useShell } from "../../../contexts/shell";
+import { useIsLinux } from "../../../hooks/usePlatform";
 import {
   type Tab,
   uniqueIdfromTab,
   useTabs,
 } from "../../../store/zustand/tabs";
 import { ChatFloatingButton } from "../../chat";
+import { TrafficLights } from "../../window/traffic-lights";
 import { useNewNote } from "../shared";
 import { TabContentContact, TabItemContact } from "./contacts";
 import { TabContentEmpty, TabItemEmpty } from "./empty";
@@ -58,6 +60,7 @@ export function Body() {
 
 function Header({ tabs }: { tabs: Tab[] }) {
   const { leftsidebar } = useShell();
+  const isLinux = useIsLinux();
   const {
     select,
     close,
@@ -93,8 +96,10 @@ function Header({ tabs }: { tabs: Tab[] }) {
       className={cn([
         "w-full h-9 flex items-center",
         !leftsidebar.expanded && "pl-[72px]",
+        isLinux && "pl-3",
       ])}
     >
+      {isLinux && <TrafficLights className="mr-2" />}
       {!leftsidebar.expanded && (
         <Button
           size="icon"

apps/desktop/src/components/window/traffic-lights.tsx

@@ -0,0 +1,34 @@
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
+
+import { cn } from "@hypr/utils";
+
+export function TrafficLights({ className }: { className?: string }) {
+  const win = getCurrentWebviewWindow();
+
+  const onClose = () => win.close();
+  const onMinimize = () => win.minimize();
+  const onMaximize = () => win.toggleMaximize();
+
+  return (
+    <div className={cn(["flex gap-2 items-center", className])}>
+      <button
+        type="button"
+        data-tauri-drag-region="false"
+        onClick={onClose}
+        className="h-3 w-3 rounded-full bg-[#ff5f57] border border-black/10 hover:brightness-90 transition-all"
+      />
+      <button
+        type="button"
+        data-tauri-drag-region="false"
+        onClick={onMinimize}
+        className="h-3 w-3 rounded-full bg-[#ffbd2e] border border-black/10 hover:brightness-90 transition-all"
+      />
+      <button
+        type="button"
+        data-tauri-drag-region="false"
+        onClick={onMaximize}
+        className="h-3 w-3 rounded-full bg-[#28c840] border border-black/10 hover:brightness-90 transition-all"
+      />
+    </div>
+  );
+}

apps/desktop/src/hooks/usePlatform.ts

@@ -0,0 +1,19 @@
+import { platform, type Platform } from "@tauri-apps/plugin-os";
+
+export type { Platform };
+
+export function usePlatform(): Platform {
+  return platform();
+}
+
+export function useIsLinux(): boolean {
+  return usePlatform() === "linux";
+}
+
+export function useIsMacos(): boolean {
+  return usePlatform() === "macos";
+}
+
+export function useIsWindows(): boolean {
+  return usePlatform() === "windows";
+}

apps/desktop/src/routes/app/settings/_layout.tsx

@@ -23,6 +23,8 @@ import { Button } from "@hypr/ui/components/ui/button";
 import { cn } from "@hypr/utils";
 
 import { useTemplateNavigation } from "../../../components/settings/template/utils";
+import { TrafficLights } from "../../../components/window/traffic-lights";
+import { useIsLinux } from "../../../hooks/usePlatform";
 import * as main from "../../../store/tinybase/main";
 
 const TAB_KEYS = [
@@ -166,6 +168,7 @@ function Group({
   includeTrafficLight?: boolean;
 }) {
   const navigate = Route.useNavigate();
+  const isLinux = useIsLinux();
 
   const handleTabClick = async (tab: TabKey) => {
     if (tab === "feedback") {
@@ -184,7 +187,11 @@ function Group({
         expandHeight && "flex-1",
       ])}
     >
-      {includeTrafficLight && <div data-tauri-drag-region className="h-9" />}
+      {includeTrafficLight && (
+        <div data-tauri-drag-region className="h-9 flex items-center px-3">
+          {isLinux && <TrafficLights />}
+        </div>
+      )}
       {tabs.map((tab) => {
         const tabInfo = info(tab);
         const Icon = tabInfo.icon;

plugins/windows/src/window/v1.rs

@@ -132,6 +132,8 @@ impl WindowImpl for AppWindow {
                 let window = self
                     .window_builder(app, "/app/settings")
                     .resizable(true)
+                    .minimizable(true)
+                    .maximizable(true)
                     .min_inner_size(800.0, 600.0)
                     .build()?;