feat(DisplaySettings, MainSidebar, useSettings): implement transparent window feature and update styles

- Added functionality to manage transparent window settings in DisplaySettings and MainSidebar components.
- Updated useSettings hook to include transparent window state management.
- Modified MainSidebar and its styles to support transparency based on user settings.
- Removed obsolete opaque window translations from localization files across multiple languages for consistency.

src/renderer/src/hooks/useSettings.ts

@@ -14,6 +14,7 @@ import {
   setTheme,
   SettingsState,
   setTopicPosition,
+  setTransparentWindow,
   setTray as _setTray,
   setTrayOnClose
 } from '@renderer/store/settings'
@@ -86,6 +87,9 @@ export function useSettings() {
     },
     setAssistantIconType(assistantIconType: AssistantIconType) {
       dispatch(setAssistantIconType(assistantIconType))
+    },
+    setTransparentWindow(transparentWindow: boolean) {
+      dispatch(setTransparentWindow(transparentWindow))
     }
   }
 }

src/renderer/src/i18n/locales/en-us.json

@@ -1730,7 +1730,6 @@
       "theme.light": "Light",
       "theme.title": "Theme",
       "theme.color_primary": "Primary Color",
-      "theme.window.style.opaque": "Opaque Window",
       "theme.window.style.title": "Window Style",
       "theme.window.style.transparent": "Transparent Window",
       "title": "Settings",

src/renderer/src/i18n/locales/ja-jp.json

@@ -1718,7 +1718,6 @@
       "theme.light": "ライト",
       "theme.title": "テーマ",
       "theme.color_primary": "テーマ色",
-      "theme.window.style.opaque": "不透明ウィンドウ",
       "theme.window.style.title": "ウィンドウスタイル",
       "theme.window.style.transparent": "透明ウィンドウ",
       "title": "設定",

src/renderer/src/i18n/locales/ru-ru.json

@@ -1718,7 +1718,6 @@
       "theme.light": "Светлая",
       "theme.title": "Тема",
       "theme.color_primary": "Цвет темы",
-      "theme.window.style.opaque": "Непрозрачное окно",
       "theme.window.style.title": "Стиль окна",
       "theme.window.style.transparent": "Прозрачное окно",
       "title": "Настройки",

src/renderer/src/i18n/locales/zh-cn.json

@@ -1730,7 +1730,6 @@
       "theme.light": "浅色",
       "theme.title": "主题",
       "theme.color_primary": "主题颜色",
-      "theme.window.style.opaque": "不透明窗口",
       "theme.window.style.title": "窗口样式",
       "theme.window.style.transparent": "透明窗口",
       "title": "设置",

src/renderer/src/i18n/locales/zh-tw.json

@@ -1721,7 +1721,6 @@
       "theme.light": "淺色",
       "theme.title": "主題",
       "theme.color_primary": "主題顏色",
-      "theme.window.style.opaque": "不透明視窗",
       "theme.window.style.title": "視窗樣式",
       "theme.window.style.transparent": "透明視窗",
       "title": "設定",

src/renderer/src/i18n/translate/el-gr.json

@@ -1483,7 +1483,6 @@
       "theme.dark": "Σκοτεινό",
       "theme.light": "Φωτεινό",
       "theme.title": "Θέμα",
-      "theme.window.style.opaque": "Μη διαφανή παράθυρα",
       "theme.window.style.title": "Στυλ παραθύρων",
       "theme.window.style.transparent": "Διαφανή παράθυρα",
       "title": "Ρυθμίσεις",

src/renderer/src/i18n/translate/es-es.json

@@ -1482,7 +1482,6 @@
       "theme.dark": "Oscuro",
       "theme.light": "Claro",
       "theme.title": "Tema",
-      "theme.window.style.opaque": "Ventana opaca",
       "theme.window.style.title": "Estilo de ventana",
       "theme.window.style.transparent": "Ventana transparente",
       "title": "Configuración",

src/renderer/src/i18n/translate/fr-fr.json

@@ -1483,7 +1483,6 @@
       "theme.dark": "Sombre",
       "theme.light": "Clair",
       "theme.title": "Thème",
-      "theme.window.style.opaque": "Fenêtre opaque",
       "theme.window.style.title": "Style de fenêtre",
       "theme.window.style.transparent": "Fenêtre transparente",
       "title": "Paramètres",

src/renderer/src/i18n/translate/pt-pt.json

@@ -1484,7 +1484,6 @@
       "theme.dark": "Escuro",
       "theme.light": "Claro",
       "theme.title": "Tema",
-      "theme.window.style.opaque": "Janela opaca",
       "theme.window.style.title": "Estilo de janela",
       "theme.window.style.transparent": "Janela transparente",
       "title": "Configurações",

src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx

@@ -59,7 +59,7 @@ const MainSidebar: FC = () => {
   const navigate = useNavigate()
   const [tab, setTab] = useState<Tab>('assistants')
   const avatar = useAvatar()
-  const { userName, defaultPaintingProvider } = useSettings()
+  const { userName, defaultPaintingProvider, transparentWindow } = useSettings()
   const { t } = useTranslation()
   const { theme, settedTheme, toggleTheme } = useTheme()
   const [isAppMenuExpanded, setIsAppMenuExpanded] = useState(false)
@@ -167,6 +167,7 @@ const MainSidebar: FC = () => {
   return (
     <Container
       id="main-sidebar"
+      transparent={transparentWindow}
       style={{
         width: showAssistants ? 'var(--assistants-width)' : '0px',
         opacity: showAssistants ? 1 : 0,

src/renderer/src/pages/home/MainSidebar/MainSidebarStyles.tsx

@@ -45,7 +45,7 @@ export const MainMenuItemText = styled.div`
   font-weight: 500;
 `
 
-export const Container = styled.div`
+export const Container = styled.div<{ transparent?: boolean }>`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -53,6 +53,7 @@ export const Container = styled.div`
   max-width: var(--assistants-width);
   border-right: 0.5px solid var(--color-border);
   height: 100vh;
+  background-color: ${({ transparent }) => (transparent ? 'transparent' : 'var(--color-background)')};
 `
 
 export const MainMenu = styled.div`

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

@@ -55,8 +55,8 @@ const ColorCircle = styled.div<{ color: string; isActive?: boolean }>`
 
 const DisplaySettings: FC = () => {
   const {
-    windowStyle,
+    transparentWindow,
-    setWindowStyle,
+    setTransparentWindow,
     topicPosition,
     setTopicPosition,
     clickAssistantToShowTopic,
@@ -77,13 +77,6 @@ const DisplaySettings: FC = () => {
   const [visibleIcons, setVisibleIcons] = useState(sidebarIcons?.visible || DEFAULT_SIDEBAR_ICONS)
   const [disabledIcons, setDisabledIcons] = useState(sidebarIcons?.disabled || [])
 
-  const handleWindowStyleChange = useCallback(
-    (checked: boolean) => {
-      setWindowStyle(checked ? 'transparent' : 'opaque')
-    },
-    [setWindowStyle]
-  )
-
   const handleColorPrimaryChange = useCallback(
     (colorHex: string) => {
       setUserTheme({
@@ -211,7 +204,7 @@ const DisplaySettings: FC = () => {
             <SettingDivider />
             <SettingRow>
               <SettingRowTitle>{t('settings.theme.window.style.transparent')}</SettingRowTitle>
-              <Switch checked={windowStyle === 'transparent'} onChange={handleWindowStyleChange} />
+              <Switch checked={transparentWindow} onChange={setTransparentWindow} />
             </SettingRow>
           </>
         )}

src/renderer/src/store/settings.ts

@@ -178,6 +178,7 @@ export interface SettingsState {
     knowledgeEmbed: boolean
   }
   defaultPaintingProvider: PaintingProvider
+  transparentWindow: boolean
 }
 
 export type MultiModelMessageStyle = 'horizontal' | 'vertical' | 'fold' | 'grid'
@@ -316,7 +317,8 @@ export const initialState: SettingsState = {
     backup: false,
     knowledgeEmbed: false
   },
-  defaultPaintingProvider: 'aihubmix'
+  defaultPaintingProvider: 'aihubmix',
+  transparentWindow: true
 }
 
 const settingsSlice = createSlice({
@@ -665,6 +667,9 @@ const settingsSlice = createSlice({
     },
     setDefaultPaintingProvider: (state, action: PayloadAction<PaintingProvider>) => {
       state.defaultPaintingProvider = action.payload
+    },
+    setTransparentWindow: (state, action: PayloadAction<boolean>) => {
+      state.transparentWindow = action.payload
     }
   }
 })
@@ -768,7 +773,8 @@ export const {
   setOpenAISummaryText,
   setOpenAIServiceTier,
   setNotificationSettings,
-  setDefaultPaintingProvider
+  setDefaultPaintingProvider,
+  setTransparentWindow
 } = settingsSlice.actions
 
 export default settingsSlice.reducer