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/app/globals.css

@@ -424,10 +424,45 @@
 }
 
 body {
-  background: var(--background);
+  background-color: var(--background);
   color: var(--foreground);
   font-family: var(--font-geist-mono), 'Courier New', monospace;
   overflow-x: hidden;
+  transition: background-image 0.3s ease-in-out;
+}
+
+/* Styles pour les images de fond */
+body.has-background-image {
+  /* Assurer que le contenu reste lisible avec une image de fond */
+  position: relative;
+}
+
+body.has-background-image::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.1);
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* Améliorer la lisibilité des cartes avec image de fond */
+body.has-background-image .bg-\[var\(--card\)\] {
+  background-color: color-mix(in srgb, var(--card) 90%, transparent) !important;
+  backdrop-filter: blur(8px);
+}
+
+body.has-background-image .bg-\[var\(--card\)\]\/30 {
+  background-color: color-mix(in srgb, var(--card) 20%, transparent) !important;
+  backdrop-filter: blur(12px);
+}
+
+/* Rendre les conteneurs principaux transparents avec image de fond */
+body.has-background-image .min-h-screen.bg-\[var\(--background\)\] {
+  background-color: transparent !important;
 }
 
 /* Scrollbar tech style */
@@ -552,3 +587,35 @@ body {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+
+/* Styles pour les sliders */
+.slider::-webkit-slider-thumb {
+  appearance: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: var(--primary);
+  cursor: pointer;
+  border: 2px solid var(--background);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.slider::-webkit-slider-thumb:hover {
+  background: color-mix(in srgb, var(--primary) 80%, var(--accent) 20%);
+  transform: scale(1.1);
+}
+
+.slider::-moz-range-thumb {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: var(--primary);
+  cursor: pointer;
+  border: 2px solid var(--background);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.slider::-moz-range-thumb:hover {
+  background: color-mix(in srgb, var(--primary) 80%, var(--accent) 20%);
+  transform: scale(1.1);
+}