chore: check support blur on FE

src-tauri/src/core/system/commands.rs

@@ -118,91 +118,3 @@ pub fn is_library_available(library: &str) -> bool {
     }
 }
 
-// Check if the system supports blur/acrylic effects
-// - Windows: Checks build version from OS info (17134+ for acrylic support)
-// - Linux: Checks for KWin (KDE) or compositor with blur support via environment variables
-// - macOS: Always supported
-#[tauri::command]
-pub fn supports_blur_effects() -> bool {
-    #[cfg(target_os = "windows")]
-    {
-        // Windows 10 build 17134 (1803) and later support acrylic effects
-        // Windows 11 (build 22000+) has better support
-        #[cfg(feature = "hardware")]
-        {
-            use tauri_plugin_hardware::get_system_info;
-
-            let system_info = get_system_info();
-            // os_name format: "Windows 10 Pro (build 22631)"
-            if let Some(build_str) = system_info.os_name.split("build ").nth(1) {
-                if let Some(build_num) = build_str.split(')').next() {
-                    if let Ok(build) = build_num.trim().parse::<u32>() {
-                        let supports_blur = build >= 17134;
-                        if supports_blur {
-                            log::info!("✅ Windows build {} detected - Blur/Acrylic effects SUPPORTED", build);
-                        } else {
-                            log::warn!("❌ Windows build {} detected - Blur/Acrylic effects NOT SUPPORTED (requires build 17134+)", build);
-                        }
-                        return supports_blur;
-                    }
-                }
-            }
-        }
-
-        // Fallback: If hardware feature is disabled or parsing fails, assume modern Windows
-        log::info!("✅ Windows detected - Assuming modern build with blur support");
-        true
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-        // Check desktop environment via environment variables
-        let desktop = std::env::var("XDG_CURRENT_DESKTOP").unwrap_or_default().to_lowercase();
-        let session = std::env::var("XDG_SESSION_DESKTOP").unwrap_or_default().to_lowercase();
-
-        // KDE Plasma with KWin (best blur support)
-        if desktop.contains("kde") || session.contains("kde") || session.contains("plasma") {
-            log::info!("✅ KDE/KWin detected - Blur effects SUPPORTED");
-            return true;
-        }
-
-        // GNOME with blur extensions (conditional support)
-        if desktop.contains("gnome") || session.contains("gnome") {
-            log::info!("🔍 GNOME detected - Blur support depends on extensions");
-            return true;
-        }
-
-        // Check for compositor via environment variable
-        if let Ok(compositor) = std::env::var("COMPOSITOR") {
-            let comp_lower = compositor.to_lowercase();
-            if comp_lower.contains("kwin") || comp_lower.contains("picom") || comp_lower.contains("compiz") {
-                log::info!("✅ Compositor detected: {} - Blur effects SUPPORTED", compositor);
-                return true;
-            }
-        }
-
-        // Check wayland/X11 session type (Wayland typically has better compositor support)
-        if let Ok(session_type) = std::env::var("XDG_SESSION_TYPE") {
-            if session_type == "wayland" {
-                log::info!("🔍 Wayland session detected - Likely blur support available");
-                return true;
-            }
-        }
-
-        log::warn!("❌ No known blur-capable compositor detected on Linux");
-        false
-    }
-
-    #[cfg(target_os = "macos")]
-    {
-        // macOS always supports blur/vibrancy effects
-        log::info!("✅ macOS detected - Blur/Vibrancy effects SUPPORTED");
-        true
-    }
-
-    #[cfg(not(any(target_os = "windows", target_os = "linux", target_os = "macos")))]
-    {
-        log::warn!("❌ Unknown platform - Assuming NO blur support");
-        false
-    }
-}

src-tauri/src/lib.rs

@@ -78,7 +78,6 @@ pub fn run() {
             core::system::commands::factory_reset,
             core::system::commands::read_logs,
             core::system::commands::is_library_available,
-            core::system::commands::supports_blur_effects,
             // Server commands
             core::server::commands::start_server,
             core::server::commands::stop_server,

web-app/src/hooks/useAppearance.ts

@@ -6,6 +6,7 @@ import { rgb, oklch, formatCss } from 'culori'
 import { useTheme } from './useTheme'
 import { useEffect, useState } from 'react'
 import { getServiceHub } from '@/hooks/useServiceHub'
+import { supportsBlurEffects } from '@/utils/blurSupport'
 
 export type FontSize = '14px' | '15px' | '16px' | '18px'
 export type ChatWidth = 'full' | 'compact'
@@ -114,7 +115,8 @@ export const isDefaultColor = (color: RgbaColor): boolean => {
   const isLightDefault = color.r === 255 && color.g === 255 && color.b === 255
 
   // Consider it default if RGB matches and alpha is either 0.4 or 1 (common values)
-  const hasDefaultAlpha = Math.abs(color.a - 0.4) < 0.01 || Math.abs(color.a - 1) < 0.01
+  const hasDefaultAlpha =
+    Math.abs(color.a - 0.4) < 0.01 || Math.abs(color.a - 1) < 0.01
 
   return (isDarkDefault || isLightDefault) && hasDefaultAlpha
 }
@@ -162,22 +164,36 @@ export const useBlurSupport = () => {
     const checkBlurSupport = async () => {
       if ((IS_WINDOWS || IS_LINUX) && IS_TAURI) {
         try {
-          const supported = await getServiceHub().app().supportsBlurEffects()
+          // Get hardware info to check OS version
+          const hardwareInfo = await getServiceHub()
+            .hardware()
+            .getHardwareInfo()
+          const supported = supportsBlurEffects(hardwareInfo)
+
           blurEffectsSupported = supported
           setSupportsBlur(supported)
 
           const platform = IS_WINDOWS ? 'Windows' : 'Linux'
           if (supported) {
-            console.log(`✅ ${platform} blur effects: SUPPORTED - Alpha slider will be shown`)
+            console.log(
+              `✅ ${platform} blur effects: SUPPORTED - Alpha slider will be shown`
+            )
           } else {
-            console.log(`❌ ${platform} blur effects: NOT SUPPORTED - Alpha slider will be hidden, alpha set to 1`)
+            console.log(
+              `❌ ${platform} blur effects: NOT SUPPORTED - Alpha slider will be hidden, alpha set to 1`
+            )
           }
         } catch (error) {
-          console.error(`❌ Failed to check ${IS_WINDOWS ? 'Windows' : 'Linux'} blur support:`, error)
+          console.error(
+            `❌ Failed to check ${IS_WINDOWS ? 'Windows' : 'Linux'} blur support:`,
+            error
+          )
           setSupportsBlur(false)
         }
       } else if (IS_MACOS && IS_TAURI) {
-        console.log('🍎 macOS platform: Blur effects supported, alpha slider shown')
+        console.log(
+          '🍎 macOS platform: Blur effects supported, alpha slider shown'
+        )
       } else if (!IS_TAURI) {
         console.log('🌐 Web platform: Alpha slider hidden, alpha set to 1')
       }
@@ -362,7 +378,7 @@ export const useAppearance = create<AppearanceState>()(
           }
 
           // Force alpha to 1 if blur effects are not supported
-          if (!blurEffectsSupported && ((IS_WINDOWS || IS_LINUX) || !IS_TAURI)) {
+          if (!blurEffectsSupported && (IS_WINDOWS || IS_LINUX || !IS_TAURI)) {
             finalColor = { ...finalColor, a: 1 }
           }
 

web-app/src/services/app/default.ts

@@ -39,9 +39,4 @@ export class DefaultAppService implements AppService {
     console.log('readYaml called with path:', path)
     throw new Error('readYaml not implemented in default app service')
   }
-
-  async supportsBlurEffects(): Promise<boolean> {
-    // On web/non-Windows platforms, always return false
-    return false
-  }
 }

web-app/src/services/app/tauri.ts

@@ -75,8 +75,4 @@ export class TauriAppService extends DefaultAppService {
   async readYaml<T = unknown>(path: string): Promise<T> {
     return await invoke<T>('read_yaml', { path })
   }
-
-  async supportsBlurEffects(): Promise<boolean> {
-    return await invoke<boolean>('supports_blur_effects')
-  }
 }

web-app/src/services/app/types.ts

@@ -17,5 +17,4 @@ export interface AppService {
   relocateJanDataFolder(path: string): Promise<void>
   getServerStatus(): Promise<boolean>
   readYaml<T = unknown>(path: string): Promise<T>
-  supportsBlurEffects(): Promise<boolean>
 }

web-app/src/services/app/web.ts

@@ -45,9 +45,4 @@ export class WebAppService implements AppService {
     console.log('YAML reading not available in web mode')
     throw new Error('readYaml not implemented in web app service')
   }
-
-  async supportsBlurEffects(): Promise<boolean> {
-    // Web platforms don't support blur effects
-    return false
-  }
 }

web-app/src/utils/blurSupport.ts

@@ -0,0 +1,65 @@
+/**
+ * Utility to check if the system supports blur/acrylic effects
+ * based on OS information from hardware data
+ */
+
+import type { HardwareData } from '@/hooks/useHardware'
+
+/**
+ * Check if Windows supports blur effects based on build number
+ * Windows 10 build 17134 (version 1803) and later support acrylic effects
+ */
+function checkWindowsBlurSupport(osName: string): boolean {
+  // os_name format: "Windows 10 Pro (build 22631)" or similar
+  const buildMatch = osName.match(/build\s+(\d+)/i)
+
+  if (buildMatch && buildMatch[1]) {
+    const build = parseInt(buildMatch[1], 10)
+    return build >= 17134
+  }
+
+  // If we can't detect build number, assume modern Windows supports blur
+  return true
+}
+
+/**
+ * Check if Linux supports blur effects based on desktop environment
+ */
+function checkLinuxBlurSupport(): boolean {
+  // Check environment variables (only available in Tauri)
+  if (typeof window === 'undefined') return false
+
+  // These checks would need to be done on the backend
+  // For now, we'll assume Linux with common DEs supports blur
+  return true
+}
+
+/**
+ * Check if the system supports blur/acrylic effects
+ *
+ * @param hardwareData - Hardware data from the hardware plugin
+ * @returns true if blur effects are supported
+ */
+export function supportsBlurEffects(hardwareData: HardwareData | null): boolean {
+  if (!hardwareData) return false
+
+  const { os_type, os_name } = hardwareData
+
+  // macOS always supports blur/vibrancy effects
+  if (os_type === 'macos') {
+    return true
+  }
+
+  // Windows: Check build number
+  if (os_type === 'windows') {
+    return checkWindowsBlurSupport(os_name)
+  }
+
+  // Linux: Check desktop environment (simplified for now)
+  if (os_type === 'linux') {
+    return checkLinuxBlurSupport()
+  }
+
+  // Unknown platforms: assume no blur support
+  return false
+}