From 17dced03c04787382a4a51e81d8bb90edb566bcf Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Mon, 6 Oct 2025 10:38:17 +0700 Subject: [PATCH] chore: check support blur on FE --- src-tauri/src/core/system/commands.rs | 88 --------------------------- src-tauri/src/lib.rs | 1 - web-app/src/hooks/useAppearance.ts | 30 ++++++--- web-app/src/services/app/default.ts | 5 -- web-app/src/services/app/tauri.ts | 4 -- web-app/src/services/app/types.ts | 1 - web-app/src/services/app/web.ts | 5 -- web-app/src/utils/blurSupport.ts | 65 ++++++++++++++++++++ 8 files changed, 88 insertions(+), 111 deletions(-) create mode 100644 web-app/src/utils/blurSupport.ts diff --git a/src-tauri/src/core/system/commands.rs b/src-tauri/src/core/system/commands.rs index 0d17f47bb..9c72fd4da 100644 --- a/src-tauri/src/core/system/commands.rs +++ b/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::() { - 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 - } -} diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index 85916f6cf..8ca44d9a9 100644 --- a/src-tauri/src/lib.rs +++ b/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, diff --git a/web-app/src/hooks/useAppearance.ts b/web-app/src/hooks/useAppearance.ts index 5a7cc2508..1ab7797fc 100644 --- a/web-app/src/hooks/useAppearance.ts +++ b/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()( } // 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 } } diff --git a/web-app/src/services/app/default.ts b/web-app/src/services/app/default.ts index 940a72172..68fe1f0ea 100644 --- a/web-app/src/services/app/default.ts +++ b/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 { - // On web/non-Windows platforms, always return false - return false - } } diff --git a/web-app/src/services/app/tauri.ts b/web-app/src/services/app/tauri.ts index 0d50f418d..af770e93d 100644 --- a/web-app/src/services/app/tauri.ts +++ b/web-app/src/services/app/tauri.ts @@ -75,8 +75,4 @@ export class TauriAppService extends DefaultAppService { async readYaml(path: string): Promise { return await invoke('read_yaml', { path }) } - - async supportsBlurEffects(): Promise { - return await invoke('supports_blur_effects') - } } diff --git a/web-app/src/services/app/types.ts b/web-app/src/services/app/types.ts index 7a1d41751..4be49c584 100644 --- a/web-app/src/services/app/types.ts +++ b/web-app/src/services/app/types.ts @@ -17,5 +17,4 @@ export interface AppService { relocateJanDataFolder(path: string): Promise getServerStatus(): Promise readYaml(path: string): Promise - supportsBlurEffects(): Promise } diff --git a/web-app/src/services/app/web.ts b/web-app/src/services/app/web.ts index c5b5c6e7b..5702079d1 100644 --- a/web-app/src/services/app/web.ts +++ b/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 { - // Web platforms don't support blur effects - return false - } } diff --git a/web-app/src/utils/blurSupport.ts b/web-app/src/utils/blurSupport.ts new file mode 100644 index 000000000..6a87be598 --- /dev/null +++ b/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 +}