feat: add gradient effects settings and enhance theme customization options

ccw/frontend/src/hooks/useTheme.ts

@@ -4,8 +4,17 @@
 // Convenient hook for theme management with multi-color scheme support
 
 import { useCallback } from 'react';
-import { useAppStore, selectTheme, selectResolvedTheme, selectCustomHue, selectIsCustomTheme } from '../stores/appStore';
-import type { Theme, ColorScheme } from '../types/store';
+import {
+  useAppStore,
+  selectTheme,
+  selectResolvedTheme,
+  selectCustomHue,
+  selectIsCustomTheme,
+  selectGradientLevel,
+  selectEnableHoverGlow,
+  selectEnableBackgroundAnimation,
+} from '../stores/appStore';
+import type { Theme, ColorScheme, GradientLevel } from '../types/store';
 
 export interface UseThemeReturn {
   /** Current theme preference ('light', 'dark', 'system') */
@@ -20,6 +29,12 @@ export interface UseThemeReturn {
   customHue: number | null;
   /** Whether the current theme is a custom theme */
   isCustomTheme: boolean;
+  /** Gradient level: 'off', 'standard', or 'enhanced' */
+  gradientLevel: GradientLevel;
+  /** Whether hover glow effects are enabled */
+  enableHoverGlow: boolean;
+  /** Whether background gradient animation is enabled */
+  enableBackgroundAnimation: boolean;
   /** Set theme preference */
   setTheme: (theme: Theme) => void;
   /** Set color scheme */
@@ -28,6 +43,12 @@ export interface UseThemeReturn {
   setCustomHue: (hue: number | null) => void;
   /** Toggle between light and dark (ignores system) */
   toggleTheme: () => void;
+  /** Set gradient level */
+  setGradientLevel: (level: GradientLevel) => void;
+  /** Set hover glow enabled */
+  setEnableHoverGlow: (enabled: boolean) => void;
+  /** Set background animation enabled */
+  setEnableBackgroundAnimation: (enabled: boolean) => void;
 }
 
 /**
@@ -54,10 +75,16 @@ export function useTheme(): UseThemeReturn {
   const colorScheme = useAppStore((state) => state.colorScheme);
   const customHue = useAppStore(selectCustomHue);
   const isCustomTheme = useAppStore(selectIsCustomTheme);
+  const gradientLevel = useAppStore(selectGradientLevel);
+  const enableHoverGlow = useAppStore(selectEnableHoverGlow);
+  const enableBackgroundAnimation = useAppStore(selectEnableBackgroundAnimation);
   const setThemeAction = useAppStore((state) => state.setTheme);
   const setColorSchemeAction = useAppStore((state) => state.setColorScheme);
   const setCustomHueAction = useAppStore((state) => state.setCustomHue);
   const toggleThemeAction = useAppStore((state) => state.toggleTheme);
+  const setGradientLevelAction = useAppStore((state) => state.setGradientLevel);
+  const setEnableHoverGlowAction = useAppStore((state) => state.setEnableHoverGlow);
+  const setEnableBackgroundAnimationAction = useAppStore((state) => state.setEnableBackgroundAnimation);
 
   const setTheme = useCallback(
     (newTheme: Theme) => {
@@ -84,6 +111,27 @@ export function useTheme(): UseThemeReturn {
     toggleThemeAction();
   }, [toggleThemeAction]);
 
+  const setGradientLevel = useCallback(
+    (level: GradientLevel) => {
+      setGradientLevelAction(level);
+    },
+    [setGradientLevelAction]
+  );
+
+  const setEnableHoverGlow = useCallback(
+    (enabled: boolean) => {
+      setEnableHoverGlowAction(enabled);
+    },
+    [setEnableHoverGlowAction]
+  );
+
+  const setEnableBackgroundAnimation = useCallback(
+    (enabled: boolean) => {
+      setEnableBackgroundAnimationAction(enabled);
+    },
+    [setEnableBackgroundAnimationAction]
+  );
+
   return {
     theme,
     resolvedTheme,
@@ -91,9 +139,15 @@ export function useTheme(): UseThemeReturn {
     colorScheme,
     customHue,
     isCustomTheme,
+    gradientLevel,
+    enableHoverGlow,
+    enableBackgroundAnimation,
     setTheme,
     setColorScheme,
     setCustomHue,
     toggleTheme,
+    setGradientLevel,
+    setEnableHoverGlow,
+    setEnableBackgroundAnimation,
   };
 }