feat: Implement custom window controls and titlebar management (#4919)

- Added WindowControls component for managing window actions (minimize, maximize, close) based on the operating system.
- Integrated window decoration toggle functionality to allow users to prefer system titlebar.
- Updated layout styles to accommodate new titlebar and window controls.
- Refactored layout components to utilize new window management hooks.
- Enhanced layout viewer to include a switch for enabling/disabling window decorations.
- Improved overall window management by introducing useWindow and useWindowDecorations hooks for better state handling.

src/components/setting/mods/layout-viewer.tsx

@@ -1,12 +1,12 @@
 import {
-  List,
+  Box,
   Button,
-  Select,
-  MenuItem,
-  styled,
+  List,
   ListItem,
   ListItemText,
-  Box,
+  MenuItem,
+  Select,
+  styled,
 } from "@mui/material";
 import { convertFileSrc } from "@tauri-apps/api/core";
 import { join } from "@tauri-apps/api/path";
@@ -18,10 +18,10 @@ import { useTranslation } from "react-i18next";
 import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 import { useVerge } from "@/hooks/use-verge";
+import { useWindowDecorations } from "@/hooks/use-window";
 import { copyIconFile, getAppDir } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 import getSystem from "@/utils/get-system";
-
 import { GuardState } from "./guard-state";
 
 const OS = getSystem();
@@ -47,6 +47,8 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   const [sysproxyIcon, setSysproxyIcon] = useState("");
   const [tunIcon, setTunIcon] = useState("");
 
+  const { decorated, toggleDecorations } = useWindowDecorations();
+
   useEffect(() => {
     initIconPath();
   }, []);
@@ -108,6 +110,21 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
       onCancel={() => setOpen(false)}
     >
       <List>
+        <Item>
+          <ListItemText primary={t("Prefer System Titlebar")} />
+          <GuardState
+            value={decorated}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onChange={async (e) => {
+              await toggleDecorations();
+            }}
+          >
+            <Switch edge="end" />
+          </GuardState>
+        </Item>
+
         <Item>
           <ListItemText primary={t("Traffic Graph")} />
           <GuardState