From 0f97d0302ec4b74f64e4096b9a6ca4f877829daa Mon Sep 17 00:00:00 2001
From: George Zhao <38124587+CreatorZZY@users.noreply.github.com>
Date: Sat, 17 May 2025 19:48:40 +0800
Subject: [PATCH] feat: implement useFullscreen hook and integrate with
 NavbarRight for dynamic padding (#6000)

* feat: implement useFullscreen hook and integrate with NavbarRight for dynamic padding

* feat: integrate useFullscreen hook to adjust sidebar layout based on fullscreen state

* fix: adjust sidebar height based on fullscreen state for better layout

---------

Co-authored-by: George Zhao <georgezhao@SKJLAB>
---
 src/renderer/src/components/app/Navbar.tsx     | 12 +++++++++---
 src/renderer/src/components/app/Sidebar.tsx    | 14 ++++++++++----
 src/renderer/src/hooks/useFullscreen.ts        | 18 ++++++++++++++++++
 .../settings/MCPSettings/McpSettingsNavbar.tsx |  3 ++-
 4 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 src/renderer/src/hooks/useFullscreen.ts

diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx
index 7e74464612..85a5265560 100644
--- a/src/renderer/src/components/app/Navbar.tsx
+++ b/src/renderer/src/components/app/Navbar.tsx
@@ -1,5 +1,6 @@
 import { isLinux, isMac, isWindows } from '@renderer/config/constant'
 import useNavBackgroundColor from '@renderer/hooks/useNavBackgroundColor'
+import { useFullscreen } from '@renderer/hooks/useFullscreen'
 import type { FC, PropsWithChildren } from 'react'
 import type { HTMLAttributes } from 'react'
 import styled from 'styled-components'
@@ -25,7 +26,12 @@ export const NavbarCenter: FC<Props> = ({ children, ...props }) => {
 }
 
 export const NavbarRight: FC<Props> = ({ children, ...props }) => {
-  return <NavbarRightContainer {...props}>{children}</NavbarRightContainer>
+  const isFullscreen = useFullscreen()
+  return (
+    <NavbarRightContainer {...props} $isFullscreen={isFullscreen}>
+      {children}
+    </NavbarRightContainer>
+  )
 }
 
 const NavbarContainer = styled.div`
@@ -58,11 +64,11 @@ const NavbarCenterContainer = styled.div`
   color: var(--color-text-1);
 `
 
-const NavbarRightContainer = styled.div`
+const NavbarRightContainer = styled.div<{ $isFullscreen: boolean }>`
   min-width: var(--topic-list-width);
   display: flex;
   align-items: center;
   padding: 0 12px;
-  padding-right: ${isWindows ? '140px' : isLinux ? '120px' : '12px'};
+  padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : isWindows ? '140px' : isLinux ? '120px' : '12px')};
   justify-content: flex-end;
 `
diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index c319123d29..08f4c1fa22 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -3,6 +3,7 @@ import { isMac } from '@renderer/config/constant'
 import { AppLogo, UserAvatar } from '@renderer/config/env'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import useAvatar from '@renderer/hooks/useAvatar'
+import { useFullscreen } from '@renderer/hooks/useFullscreen'
 import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
 import { useMinapps } from '@renderer/hooks/useMinapps'
 import useNavBackgroundColor from '@renderer/hooks/useNavBackgroundColor'
@@ -68,8 +69,13 @@ const Sidebar: FC = () => {
     })
   }
 
+  const isFullscreen = useFullscreen()
+
   return (
-    <Container id="app-sidebar" style={{ backgroundColor, zIndex: minappShow ? 10000 : 'initial' }}>
+    <Container
+      $isFullscreen={isFullscreen}
+      id="app-sidebar"
+      style={{ backgroundColor, zIndex: minappShow ? 10000 : 'initial' }}>
       {isEmoji(avatar) ? (
         <EmojiAvatar onClick={onEditUser} className="sidebar-avatar" size={31} fontSize={18}>
           {avatar}
@@ -311,7 +317,7 @@ const PinnedApps: FC = () => {
   )
 }
 
-const Container = styled.div`
+const Container = styled.div<{ $isFullscreen: boolean }>`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -319,9 +325,9 @@ const Container = styled.div`
   padding-bottom: 12px;
   width: var(--sidebar-width);
   min-width: var(--sidebar-width);
-  height: ${isMac ? 'calc(100vh - var(--navbar-height))' : '100vh'};
+  height: ${({ $isFullscreen }) => (isMac && !$isFullscreen ? 'calc(100vh - var(--navbar-height))' : '100vh')};
   -webkit-app-region: drag !important;
-  margin-top: ${isMac ? 'var(--navbar-height)' : 0};
+  margin-top: ${({ $isFullscreen }) => (isMac && !$isFullscreen ? 'var(--navbar-height)' : 0)};
 
   .sidebar-avatar {
     margin-bottom: ${isMac ? '12px' : '12px'};
diff --git a/src/renderer/src/hooks/useFullscreen.ts b/src/renderer/src/hooks/useFullscreen.ts
new file mode 100644
index 0000000000..4a5820ed8e
--- /dev/null
+++ b/src/renderer/src/hooks/useFullscreen.ts
@@ -0,0 +1,18 @@
+import { IpcChannel } from '@shared/IpcChannel'
+import { useEffect, useState } from 'react'
+
+export function useFullscreen() {
+  const [isFullscreen, setIsFullscreen] = useState(false)
+
+  useEffect(() => {
+    const cleanup = window.electron.ipcRenderer.on(IpcChannel.FullscreenStatusChanged, (_, fullscreen) => {
+      setIsFullscreen(fullscreen)
+    })
+
+    return () => {
+      cleanup()
+    }
+  }, [])
+
+  return isFullscreen
+}
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx b/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx
index 3cfdf8af63..7986ea5766 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx
@@ -1,6 +1,7 @@
 import { NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
 import { isLinux, isWindows } from '@renderer/config/constant'
+import { useFullscreen } from '@renderer/hooks/useFullscreen'
 import { Button, Dropdown, Menu, type MenuProps } from 'antd'
 import { ChevronDown, Search } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
@@ -73,7 +74,7 @@ export const McpSettingsNavbar = () => {
   }))
 
   return (
-    <NavbarRight style={{ paddingRight: isWindows ? 150 : isLinux ? 120 : 12 }}>
+    <NavbarRight style={{ paddingRight: useFullscreen() ? '12px' : isWindows ? 150 : isLinux ? 120 : 12 }}>
       <HStack alignItems="center" gap={5}>
         <Button
           size="small"