feat: implement personalized background image feature

- Added functionality for users to select and customize background images in settings, including predefined options and URL uploads.
- Updated `ViewPreferences` to store background image settings and modified `userPreferencesService` to handle updates.
- Enhanced global styles for improved readability with background images, including blur and transparency effects.
- Integrated `BackgroundImageSelector` component into settings for intuitive user experience.
- Refactored `Card` components across the app to use a new 'glass' variant for better aesthetics.

src/components/ui/Card.tsx

@@ -2,7 +2,7 @@ import { HTMLAttributes, forwardRef } from 'react';
 import { cn } from '@/lib/utils';
 
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  variant?: 'default' | 'elevated' | 'bordered' | 'column';
+  variant?: 'default' | 'elevated' | 'bordered' | 'column' | 'glass';
   shadow?: 'none' | 'sm' | 'md' | 'lg';
   border?: 'none' | 'default' | 'primary' | 'accent';
   background?: 'default' | 'column' | 'muted';
@@ -35,7 +35,8 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
       default: '',
       elevated: 'shadow-lg',
       bordered: 'border-[var(--primary)]/30 shadow-lg',
-      column: 'bg-[var(--card-column)] shadow-lg'
+      column: 'bg-[var(--card-column)] shadow-lg',
+      glass: 'bg-[var(--card)]/30 border border-[var(--border)]/50 backdrop-blur-sm'
     };
 
     // Appliquer le variant si spécifié, sinon utiliser les props individuelles