feat: enhance theme customization and UI components

- Implemented a new color generation module to create CSS variables based on a single hue value, supporting both light and dark modes.
- Added unit tests for the color generation logic to ensure accuracy and robustness.
- Replaced dropdown location filter with tab navigation in RulesManagerPage and SkillsManagerPage for improved UX.
- Updated app store to manage custom theme hues and states, allowing for dynamic theme adjustments.
- Sanitized notification content before persisting to localStorage to prevent sensitive data exposure.
- Refactored memory retrieval logic to handle archived status more flexibly.
- Improved Tailwind CSS configuration with new gradient utilities and animations.
- Minor adjustments to SettingsPage layout for better visual consistency.

ccw/frontend/src/pages/SkillsManagerPage.tsx

@@ -18,10 +18,14 @@ import {
   EyeOff,
   List,
   Grid3x3,
+  Folder,
+  User,
 } from 'lucide-react';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { Badge } from '@/components/ui/Badge';
+import { TabsNavigation } from '@/components/ui/TabsNavigation';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
 import {
   AlertDialog,
@@ -34,7 +38,6 @@ import {
   AlertDialogCancel,
 } from '@/components/ui';
 import { SkillCard, SkillDetailPanel } from '@/components/shared';
-import { LocationSwitcher } from '@/components/commands/LocationSwitcher';
 import { useSkills, useSkillMutations } from '@/hooks';
 import { fetchSkillDetail } from '@/lib/api';
 import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
@@ -245,14 +248,26 @@ export function SkillsManagerPage() {
           </div>
         </div>
 
-        {/* Location Switcher */}
-        <LocationSwitcher
-          currentLocation={locationFilter}
-          onLocationChange={setLocationFilter}
-          projectCount={projectSkills.length}
-          userCount={userSkills.length}
-          disabled={isToggling}
-          translationPrefix="skills"
+        {/* Location Tabs - styled like LiteTasksPage */}
+        <TabsNavigation
+          value={locationFilter}
+          onValueChange={(v) => setLocationFilter(v as 'project' | 'user')}
+          tabs={[
+            {
+              value: 'project',
+              label: formatMessage({ id: 'skills.location.project' }),
+              icon: <Folder className="h-4 w-4" />,
+              badge: <Badge variant="secondary" className="ml-2">{projectSkills.length}</Badge>,
+              disabled: isToggling,
+            },
+            {
+              value: 'user',
+              label: formatMessage({ id: 'skills.location.user' }),
+              icon: <User className="h-4 w-4" />,
+              badge: <Badge variant="secondary" className="ml-2">{userSkills.length}</Badge>,
+              disabled: isToggling,
+            },
+          ]}
         />
       </div>