refactor: simplify custom CSS functionality by store sync (#5596)

* feat: implement store synchronization across windows

- Added new IPC channels for store synchronization: StoreSync_Subscribe, StoreSync_Unsubscribe, StoreSync_OnUpdate, and StoreSync_BroadcastSync.
- Integrated store sync service in various components, including the main IPC handler and renderer store.
- Removed the MiniWindowReload IPC channel as it was no longer needed.
- Updated the store configuration to support synchronization of specific state slices.

* refactor: remove custom CSS functionality from IPC and related components

- Removed the App_SetCustomCss channel and associated handlers from the IPC and ConfigManager.
- Updated the renderer components to eliminate references to custom CSS settings.
- Refactored the MiniWindow component to manage custom CSS directly without IPC communication.

packages/shared/IpcChannel.ts

@@ -12,7 +12,6 @@ export enum IpcChannel {
   App_SetTrayOnClose = 'app:set-tray-on-close',
   App_RestartTray = 'app:restart-tray',
   App_SetTheme = 'app:set-theme',
-  App_SetCustomCss = 'app:set-custom-css',
   App_SetAutoUpdate = 'app:set-auto-update',
 
   App_IsBinaryExist = 'app:is-binary-exist',

src/main/ipc.ts

@@ -141,22 +141,6 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
     notifyThemeChange()
   })
 
-  // custom css
-  ipcMain.handle(IpcChannel.App_SetCustomCss, (event, css: string) => {
-    if (css === configManager.getCustomCss()) return
-    configManager.setCustomCss(css)
-
-    // Broadcast to all windows including the mini window
-    const senderWindowId = event.sender.id
-    const windows = BrowserWindow.getAllWindows()
-    // 向其他窗口广播主题变化
-    windows.forEach((win) => {
-      if (win.webContents.id !== senderWindowId) {
-        win.webContents.send('custom-css:update', css)
-      }
-    })
-  })
-
   // clear cache
   ipcMain.handle(IpcChannel.App_ClearCache, async () => {
     const sessions = [session.defaultSession, session.fromPartition('persist:webview')]

src/main/services/ConfigManager.ts

@@ -44,14 +44,6 @@ export class ConfigManager {
     this.set(ConfigKeys.Theme, theme)
   }
 
-  getCustomCss(): string {
-    return this.store.get('customCss', '') as string
-  }
-
-  setCustomCss(css: string) {
-    this.store.set('customCss', css)
-  }
-
   getLaunchToTray(): boolean {
     return !!this.get(ConfigKeys.LaunchToTray, false)
   }

src/preload/index.ts

@@ -19,7 +19,6 @@ const api = {
   setTrayOnClose: (isActive: boolean) => ipcRenderer.invoke(IpcChannel.App_SetTrayOnClose, isActive),
   restartTray: () => ipcRenderer.invoke(IpcChannel.App_RestartTray),
   setTheme: (theme: 'light' | 'dark' | 'auto') => ipcRenderer.invoke(IpcChannel.App_SetTheme, theme),
-  setCustomCss: (css: string) => ipcRenderer.invoke(IpcChannel.App_SetCustomCss, css),
   setAutoUpdate: (isActive: boolean) => ipcRenderer.invoke(IpcChannel.App_SetAutoUpdate, isActive),
   openWebsite: (url: string) => ipcRenderer.invoke(IpcChannel.Open_Website, url),
   clearCache: () => ipcRenderer.invoke(IpcChannel.App_ClearCache),

src/renderer/src/hooks/useAppInit.ts

@@ -91,16 +91,16 @@ export function useAppInit() {
   }, [])
 
   useEffect(() => {
-    const oldCustomCss = document.getElementById('user-defined-custom-css')
-    if (oldCustomCss) {
-      oldCustomCss.remove()
+    let customCssElement = document.getElementById('user-defined-custom-css') as HTMLStyleElement
+    if (customCssElement) {
+      customCssElement.remove()
     }
 
     if (customCss) {
-      const style = document.createElement('style')
-      style.id = 'user-defined-custom-css'
-      style.textContent = customCss
-      document.head.appendChild(style)
+      customCssElement = document.createElement('style')
+      customCssElement.id = 'user-defined-custom-css'
+      customCssElement.textContent = customCss
+      document.head.appendChild(customCssElement)
     }
   }, [customCss])
 

src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx

@@ -190,7 +190,6 @@ const DisplaySettings: FC = () => {
           value={customCss}
           onChange={(e) => {
             dispatch(setCustomCss(e.target.value))
-            window.api.setCustomCss(e.target.value)
           }}
           placeholder={t('settings.display.custom.css.placeholder')}
           style={{

src/renderer/src/services/StoreSyncService.ts

@@ -97,8 +97,6 @@ export class StoreSyncService {
       IpcChannel.StoreSync_BroadcastSync,
       (_, action: StoreSyncAction) => {
         try {
-          console.log('StoreSync_BroadcastSync action', action)
-
           // Dispatch to the store
           if (window.store) {
             window.store.dispatch(action)

src/renderer/src/windows/mini/MiniWindowApp.tsx

@@ -1,10 +1,9 @@
 import '@renderer/databases'
 
 import { useSettings } from '@renderer/hooks/useSettings'
-import store, { persistor, useAppDispatch } from '@renderer/store'
-import { setCustomCss } from '@renderer/store/settings'
+import store, { persistor } from '@renderer/store'
 import { message } from 'antd'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react'
 
@@ -13,58 +12,23 @@ import { SyntaxHighlighterProvider } from '../../context/SyntaxHighlighterProvid
 import { ThemeProvider } from '../../context/ThemeProvider'
 import HomeWindow from './home/HomeWindow'
 
-function useMiniWindowCustomCss() {
+// Inner component that uses the hook after Redux is initialized
+function MiniWindowContent(): React.ReactElement {
   const { customCss } = useSettings()
-  const dispatch = useAppDispatch()
-  const [isInitialized, setIsInitialized] = useState(false)
 
   useEffect(() => {
-    // 初始化时从主进程获取最新的CSS配置
-    window.api.config.get('customCss').then((css) => {
-      if (css !== undefined) {
-        dispatch(setCustomCss(css))
-      }
-      setIsInitialized(true)
-    })
-
-    // Listen for custom CSS updates from main window
-    const removeListener = window.electron.ipcRenderer.on('custom-css:update', (_event, css) => {
-      dispatch(setCustomCss(css))
-    })
-
-    return () => {
-      removeListener()
-    }
-  }, [dispatch])
-
-  useEffect(() => {
-    if (!isInitialized) return
-
-    // Apply custom CSS
-    const oldCustomCss = document.getElementById('user-defined-custom-css')
-    if (oldCustomCss) {
-      oldCustomCss.remove()
+    let customCssElement = document.getElementById('user-defined-custom-css') as HTMLStyleElement
+    if (customCssElement) {
+      customCssElement.remove()
     }
 
     if (customCss) {
-      const style = document.createElement('style')
-      style.id = 'user-defined-custom-css'
-      style.textContent = customCss
-      document.head.appendChild(style)
+      customCssElement = document.createElement('style')
+      customCssElement.id = 'user-defined-custom-css'
+      customCssElement.textContent = customCss
+      document.head.appendChild(customCssElement)
     }
-  }, [customCss, isInitialized])
-
-  return isInitialized
-}
-
-// Inner component that uses the hook after Redux is initialized
-function MiniWindowContent(): React.ReactElement {
-  const cssInitialized = useMiniWindowCustomCss()
-
-  // Show empty fragment until CSS is initialized
-  if (!cssInitialized) {
-    return <></>
-  }
+  }, [customCss])
 
   return <HomeWindow />
 }