Fix/win10 appbar

src/main/presenter/devicePresenter/index.ts

@@ -25,12 +25,37 @@ export class DevicePresenter implements IDevicePresenter {
   }
 
   async getDeviceInfo(): Promise<DeviceInfo> {
+    const platform = process.platform
+    const osVersion = os.release()
+
+    // Build version metadata based on current platform
+    let osVersionMetadata: Array<{ name: string; build: number }> = []
+
+    if (platform === 'win32') {
+      osVersionMetadata = [
+        { name: 'Windows 11', build: 22000 },
+        { name: 'Windows 10', build: 10240 },
+        { name: 'Windows 8.1', build: 9600 },
+        { name: 'Windows 8', build: 9200 }
+      ]
+    } else if (platform === 'darwin') {
+      osVersionMetadata = [
+        { name: 'macOS Tahoe', build: 25 },
+        { name: 'macOS Sequoia', build: 24 },
+        { name: 'macOS Sonoma', build: 23 },
+        { name: 'macOS Ventura', build: 22 },
+        { name: 'macOS Monterey', build: 21 },
+        { name: 'macOS Big Sur', build: 20 }
+      ]
+    }
+
     return {
-      platform: process.platform,
+      platform,
       arch: process.arch,
       cpuModel: os.cpus()[0].model,
       totalMemory: os.totalmem(),
-      osVersion: os.release()
+      osVersion,
+      osVersionMetadata
     }
   }
 

src/renderer/settings/App.vue

@@ -61,6 +61,7 @@ import { useLanguageStore } from '../src/stores/language'
 import { useModelCheckStore } from '../src/stores/modelCheck'
 import { Button } from '@shadcn/components/ui/button'
 import ModelCheckDialog from '@/components/settings/ModelCheckDialog.vue'
+import { useDeviceVersion } from '../src/composables/useDeviceVersion'
 
 const devicePresenter = usePresenter('devicePresenter')
 const windowPresenter = usePresenter('windowPresenter')
@@ -71,8 +72,8 @@ const settingsStore = useSettingsStore()
 const languageStore = useLanguageStore()
 const modelCheckStore = useModelCheckStore()
 
-const isMacOS = ref(false)
-const isWinMacOS = ref(false)
+// Detect platform to apply proper styling
+const { isMacOS, isWinMacOS } = useDeviceVersion()
 const { t, locale } = useI18n()
 const router = useRouter()
 const route = useRoute()
@@ -89,9 +90,6 @@ const settings: Ref<
 // Get all routes and build settings navigation
 const routes = router.getRoutes()
 onMounted(() => {
-  devicePresenter.getDeviceInfo().then((deviceInfo) => {
-    isWinMacOS.value = deviceInfo.platform === 'darwin' || deviceInfo.platform === 'win32'
-  })
   const tempArray: {
     title: string
     name: string

src/renderer/shell/App.vue

@@ -9,16 +9,10 @@
 
 <script setup lang="ts">
 import AppBar from './components/AppBar.vue'
-import { ref, onMounted } from 'vue'
-import { usePresenter } from '@/composables/usePresenter'
-const isWinMacOS = ref(false)
-const devicePresenter = usePresenter('devicePresenter')
-// Shell component setup
-onMounted(() => {
-  devicePresenter.getDeviceInfo().then((deviceInfo) => {
-    isWinMacOS.value = deviceInfo.platform === 'darwin' || deviceInfo.platform === 'win32'
-  })
-})
+import { useDeviceVersion } from '@/composables/useDeviceVersion'
+
+// Detect platform to apply proper styling
+const { isWinMacOS } = useDeviceVersion()
 </script>
 
 <style>

src/renderer/src/composables/useDeviceVersion.ts

@@ -0,0 +1,63 @@
+// === Vue Core ===
+import { ref, onMounted } from 'vue'
+
+// === Composables ===
+import { usePresenter } from '@/composables/usePresenter'
+
+/**
+ * Composable for detecting device platform and OS version
+ *
+ * Features:
+ * - Detects if the current OS is macOS or Windows 11+
+ * - Automatically loads device info on component mount
+ * - Centralizes platform-specific UI logic
+ *
+ * Platform Detection Rules:
+ * - macOS: All versions return true
+ * - Windows: Only Windows 11+ returns true
+ * - Linux: Returns false
+ *
+ * Technical Notes:
+ * - Windows osVersion format: "10.0.22621" (Major.Minor.BuildNumber)
+ *   - Windows 11 starts at build 22000
+ *   - We extract the 3rd part (index [2]) for build number comparison
+ * - macOS osVersion format: "25.1.0" (Darwin kernel version)
+ *   - macOS Tahoe (26) = Darwin 25.x
+ *   - macOS Sequoia (15) = Darwin 24.x
+ *   - macOS Sonoma (14) = Darwin 23.x
+ *   - No version check needed, all macOS versions are treated equally
+ */
+export function useDeviceVersion() {
+  // === Local State ===
+  const isWinMacOS = ref(false)
+  const isMacOS = ref(false)
+  const devicePresenter = usePresenter('devicePresenter')
+
+  // === Lifecycle Hooks ===
+  onMounted(() => {
+    devicePresenter.getDeviceInfo().then((deviceInfo) => {
+      // Detect macOS (all versions)
+      const isMacOSPlatform = deviceInfo.platform === 'darwin'
+      isMacOS.value = isMacOSPlatform
+
+      // Check if it's Windows 11+
+      // Note: Windows osVersion format is "10.0.22621", we need the 3rd part (build number)
+      let isWin11Plus = false
+      if (deviceInfo.platform === 'win32') {
+        const buildNumber = parseInt(deviceInfo.osVersion.split('.')[2] || '0', 10)
+        const win11Metadata = deviceInfo.osVersionMetadata.find((v) => v.name === 'Windows 11')
+        isWin11Plus = win11Metadata ? buildNumber >= win11Metadata.build : false
+      }
+
+      // isWinMacOS is true for: macOS (all versions) OR Windows 11+
+      isWinMacOS.value = isMacOSPlatform || isWin11Plus
+    })
+  })
+
+  // === Return API ===
+  return {
+    // State
+    isWinMacOS,
+    isMacOS
+  }
+}

src/shared/types/presenters/legacy.presenters.d.ts

@@ -941,6 +941,10 @@ export type DeviceInfo = {
   cpuModel: string
   totalMemory: number
   osVersion: string
+  osVersionMetadata: Array<{
+    name: string
+    build: number
+  }>
 }
 
 export type MemoryInfo = {