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/settings/GeneralSettingsPageClient.tsx

@@ -6,6 +6,7 @@ import { Header } from '@/components/ui/Header';
 import { Card, CardContent } from '@/components/ui/Card';
 import { TagsManagement } from './tags/TagsManagement';
 import { ThemeSelector } from '@/components/ThemeSelector';
+import { BackgroundImageSelector } from './BackgroundImageSelector';
 import Link from 'next/link';
 
 interface GeneralSettingsPageClientProps {
@@ -49,13 +50,22 @@ export function GeneralSettingsPageClient({ initialTags }: GeneralSettingsPageCl
 
           <div className="space-y-8">
             {/* Sélection de thème */}
-            <div className="bg-[var(--card)]/30 border border-[var(--border)]/50 rounded-lg p-6 backdrop-blur-sm">
-              <ThemeSelector />
-            </div>
+            <Card variant="glass">
+              <CardContent padding="lg">
+                <ThemeSelector />
+              </CardContent>
+            </Card>
+
+            {/* Sélection d'image de fond */}
+            <Card variant="glass">
+              <CardContent padding="lg">
+                <BackgroundImageSelector />
+              </CardContent>
+            </Card>
 
             {/* UI Showcase */}
-            <Card>
-              <CardContent className="p-6">
+            <Card variant="glass">
+              <CardContent padding="lg">
                 <div className="flex items-center justify-between">
                   <div>
                     <h3 className="text-lg font-medium text-[var(--foreground)] mb-2">
@@ -83,7 +93,7 @@ export function GeneralSettingsPageClient({ initialTags }: GeneralSettingsPageCl
             />
 
             {/* Note développement futur */}
-            <Card>
+            <Card variant="glass">
               <CardContent className="p-4">
                 <div className="p-4 bg-[var(--warning)]/10 border border-[var(--warning)]/20 rounded">
                   <p className="text-sm text-[var(--warning)] font-medium mb-2">