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/main.tsx

@@ -10,6 +10,7 @@ import { BrowserRouter } from "react-router-dom";
 import { MihomoWebSocket } from "tauri-plugin-mihomo-api";
 
 import { BaseErrorBoundary } from "./components/base";
+import { WindowProvider } from "./hooks/use-window";
 import Layout from "./pages/_layout";
 import { AppDataProvider } from "./providers/app-data-provider";
 import { initializeLanguage } from "./services/i18n";
@@ -61,11 +62,13 @@ const initializeApp = async () => {
       <React.StrictMode>
         <ComposeContextProvider contexts={contexts}>
           <BaseErrorBoundary>
-            <AppDataProvider>
-              <BrowserRouter>
-                <Layout />
-              </BrowserRouter>
-            </AppDataProvider>
+            <WindowProvider>
+              <AppDataProvider>
+                <BrowserRouter>
+                  <Layout />
+                </BrowserRouter>
+              </AppDataProvider>
+            </WindowProvider>
           </BaseErrorBoundary>
         </ComposeContextProvider>
       </React.StrictMode>,