feat: add background customization settings with gradient and image options, update preferences context and UI components for user preferences management

2025-10-17 10:47:05 +02:00
parent c370b8372a
commit 2e183bb5d6
11 changed files with 398 additions and 3 deletions
--- a/src/components/layout/ClientLayout.tsx
+++ b/src/components/layout/ClientLayout.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { ThemeProvider } from "next-themes";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { Header } from "@/components/layout/Header";
 import { Sidebar } from "@/components/layout/Sidebar";
 import { InstallPWA } from "../ui/InstallPWA";
@@ -11,6 +11,7 @@ import { registerServiceWorker } from "@/lib/registerSW";
 import { NetworkStatus } from "../ui/NetworkStatus";
 import { DebugWrapper } from "@/components/debug/DebugWrapper";
 import { DebugProvider } from "@/contexts/DebugContext";
+import { usePreferences } from "@/contexts/PreferencesContext";
 import type { KomgaLibrary, KomgaSeries } from "@/types/komga";

 // Routes qui ne nécessitent pas d'authentification
@@ -26,6 +27,29 @@ interface ClientLayoutProps {
 export default function ClientLayout({ children, initialLibraries = [], initialFavorites = [], userIsAdmin = false }: ClientLayoutProps) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const pathname = usePathname();
+  const { preferences } = usePreferences();
+
+  const backgroundStyle = useMemo(() => {
+    const bg = preferences.background;
+    
+    if (bg.type === "gradient" && bg.gradient) {
+      return {
+        background: bg.gradient,
+        backgroundAttachment: "fixed" as const,
+      };
+    }
+    
+    if (bg.type === "image" && bg.imageUrl) {
+      return {
+        backgroundImage: `url(${bg.imageUrl})`,
+        backgroundSize: "cover" as const,
+        backgroundPosition: "center" as const,
+        backgroundAttachment: "fixed" as const,
+      };
+    }
+    
+    return {};
+  }, [preferences.background]);

  const handleCloseSidebar = () => {
    setIsSidebarOpen(false);
@@ -71,7 +95,7 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <DebugProvider>
-        <div className="relative min-h-screen h-full">
+        <div className="relative min-h-screen h-full" style={backgroundStyle}>
          {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
          {!isPublicRoute && (
            <Sidebar 
--- a/src/components/settings/BackgroundSettings.tsx
+++ b/src/components/settings/BackgroundSettings.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslate } from "@/hooks/useTranslate";
+import { usePreferences } from "@/contexts/PreferencesContext";
+import { Label } from "@/components/ui/label";
+import { useToast } from "@/components/ui/use-toast";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { GRADIENT_PRESETS } from "@/types/preferences";
+import type { BackgroundType } from "@/types/preferences";
+import { Check } from "lucide-react";
+
+export function BackgroundSettings() {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const { preferences, updatePreferences } = usePreferences();
+  const [customImageUrl, setCustomImageUrl] = useState(preferences.background.imageUrl || "");
+
+  const handleBackgroundTypeChange = async (type: BackgroundType) => {
+    try {
+      await updatePreferences({
+        background: {
+          ...preferences.background,
+          type,
+        },
+      });
+      toast({
+        title: t("settings.title"),
+        description: t("settings.komga.messages.configSaved"),
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+      toast({
+        variant: "destructive",
+        title: t("settings.error.title"),
+        description: t("settings.error.message"),
+      });
+    }
+  };
+
+  const handleGradientSelect = async (gradient: string) => {
+    try {
+      await updatePreferences({
+        background: {
+          type: "gradient",
+          gradient,
+        },
+      });
+      toast({
+        title: t("settings.title"),
+        description: t("settings.komga.messages.configSaved"),
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+      toast({
+        variant: "destructive",
+        title: t("settings.error.title"),
+        description: t("settings.error.message"),
+      });
+    }
+  };
+
+  const handleCustomImageSave = async () => {
+    if (!customImageUrl.trim()) {
+      toast({
+        variant: "destructive",
+        title: t("settings.error.title"),
+        description: "Veuillez entrer une URL valide",
+      });
+      return;
+    }
+
+    try {
+      await updatePreferences({
+        background: {
+          type: "image",
+          imageUrl: customImageUrl,
+        },
+      });
+      toast({
+        title: t("settings.title"),
+        description: t("settings.komga.messages.configSaved"),
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+      toast({
+        variant: "destructive",
+        title: t("settings.error.title"),
+        description: t("settings.error.message"),
+      });
+    }
+  };
+
+  return (
+    <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
+      <div className="p-5 space-y-6">
+        <div>
+          <h2 className="text-xl font-semibold flex items-center gap-2">
+            {t("settings.background.title")}
+          </h2>
+          <p className="text-sm text-muted-foreground mt-1">
+            {t("settings.background.description")}
+          </p>
+        </div>
+
+        <div className="space-y-6">
+          {/* Type de background */}
+          <div className="space-y-3">
+            <Label>{t("settings.background.type.label")}</Label>
+            <RadioGroup
+              value={preferences.background.type}
+              onValueChange={(value) => handleBackgroundTypeChange(value as BackgroundType)}
+              className="space-y-2"
+            >
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="default" id="bg-default" />
+                <Label htmlFor="bg-default" className="cursor-pointer font-normal">
+                  {t("settings.background.type.default")}
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="gradient" id="bg-gradient" />
+                <Label htmlFor="bg-gradient" className="cursor-pointer font-normal">
+                  {t("settings.background.type.gradient")}
+                </Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="image" id="bg-image" />
+                <Label htmlFor="bg-image" className="cursor-pointer font-normal">
+                  {t("settings.background.type.image")}
+                </Label>
+              </div>
+            </RadioGroup>
+          </div>
+
+          {/* Sélection de dégradé */}
+          {preferences.background.type === "gradient" && (
+            <div className="space-y-3">
+              <Label>{t("settings.background.gradient.label")}</Label>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                {GRADIENT_PRESETS.map((preset) => (
+                  <button
+                    key={preset.id}
+                    onClick={() => handleGradientSelect(preset.gradient)}
+                    className="relative group rounded-lg overflow-hidden h-20 border-2 transition-all hover:scale-105"
+                    style={{
+                      background: preset.gradient,
+                      borderColor:
+                        preferences.background.gradient === preset.gradient
+                          ? "hsl(var(--primary))"
+                          : "transparent",
+                    }}
+                  >
+                    {preferences.background.gradient === preset.gradient && (
+                      <div className="absolute inset-0 flex items-center justify-center bg-black/20">
+                        <Check className="w-6 h-6 text-white" />
+                      </div>
+                    )}
+                    <div className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 text-center opacity-0 group-hover:opacity-100 transition-opacity">
+                      {preset.name}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* URL d'image personnalisée */}
+          {preferences.background.type === "image" && (
+            <div className="space-y-3">
+              <Label htmlFor="custom-bg-url">{t("settings.background.image.label")}</Label>
+              <div className="flex gap-2">
+                <Input
+                  id="custom-bg-url"
+                  type="url"
+                  placeholder="https://example.com/image.jpg"
+                  value={customImageUrl}
+                  onChange={(e) => setCustomImageUrl(e.target.value)}
+                  className="flex-1"
+                />
+                <Button onClick={handleCustomImageSave}>{t("settings.background.image.save")}</Button>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {t("settings.background.image.description")}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
--- a/src/components/settings/ClientSettings.tsx
+++ b/src/components/settings/ClientSettings.tsx
@@ -5,6 +5,7 @@ import { useTranslate } from "@/hooks/useTranslate";
 import { DisplaySettings } from "./DisplaySettings";
 import { KomgaSettings } from "./KomgaSettings";
 import { CacheSettings } from "./CacheSettings";
+import { BackgroundSettings } from "./BackgroundSettings";

 interface ClientSettingsProps {
  initialConfig: KomgaConfig | null;
@@ -19,6 +20,7 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
      <h1 className="text-3xl font-bold">{t("settings.title")}</h1>
      <div className="space-y-8">
        <DisplaySettings />
+        <BackgroundSettings />
        <KomgaSettings initialConfig={initialConfig} />
        <CacheSettings initialTTLConfig={initialTTLConfig} />
      </div>
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
+
--- a/src/i18n/messages/en/common.json
+++ b/src/i18n/messages/en/common.json
@@ -83,6 +83,24 @@
        "description": "Show debug information in the interface"
      }
    },
+    "background": {
+      "title": "Background",
+      "description": "Customize your application background.",
+      "type": {
+        "label": "Background type",
+        "default": "Default",
+        "gradient": "Gradient",
+        "image": "Custom image"
+      },
+      "gradient": {
+        "label": "Choose a gradient"
+      },
+      "image": {
+        "label": "Image URL",
+        "description": "Enter an image URL (HTTPS recommended)",
+        "save": "Save"
+      }
+    },
    "error": {
      "title": "Error",
      "message": "An error occurred while updating preferences"
--- a/src/i18n/messages/fr/common.json
+++ b/src/i18n/messages/fr/common.json
@@ -83,6 +83,24 @@
        "description": "Afficher les informations de debug dans l'interface"
      }
    },
+    "background": {
+      "title": "Arrière-plan",
+      "description": "Personnalisez l'arrière-plan de votre application.",
+      "type": {
+        "label": "Type d'arrière-plan",
+        "default": "Par défaut",
+        "gradient": "Dégradé",
+        "image": "Image personnalisée"
+      },
+      "gradient": {
+        "label": "Choisir un dégradé"
+      },
+      "image": {
+        "label": "URL de l'image",
+        "description": "Entrez l'URL d'une image (HTTPS recommandé)",
+        "save": "Enregistrer"
+      }
+    },
    "error": {
      "title": "Erreur",
      "message": "Une erreur est survenue lors de la mise à jour des préférences"
--- a/src/lib/services/preferences.service.ts
+++ b/src/lib/services/preferences.service.ts
@@ -2,9 +2,10 @@ import prisma from "@/lib/prisma";
 import { getCurrentUser } from "../auth-utils";
 import { ERROR_CODES } from "../../constants/errorCodes";
 import { AppError } from "../../utils/errors";
-import type { UserPreferences } from "@/types/preferences";
+import type { UserPreferences, BackgroundPreferences } from "@/types/preferences";
 import { defaultPreferences } from "@/types/preferences";
 import type { User } from "@/types/komga";
+import type { Prisma } from "@prisma/client";

 export class PreferencesService {
  static async getCurrentUser(): Promise<User> {
@@ -32,6 +33,7 @@ export class PreferencesService {
        showOnlyUnread: preferences.showOnlyUnread,
        debug: preferences.debug,
        displayMode: preferences.displayMode as UserPreferences["displayMode"],
+        background: (preferences.background as Prisma.JsonValue) as BackgroundPreferences,
      };
    } catch (error) {
      if (error instanceof AppError) {
@@ -51,6 +53,7 @@ export class PreferencesService {
      if (preferences.showOnlyUnread !== undefined) updateData.showOnlyUnread = preferences.showOnlyUnread;
      if (preferences.debug !== undefined) updateData.debug = preferences.debug;
      if (preferences.displayMode !== undefined) updateData.displayMode = preferences.displayMode;
+      if (preferences.background !== undefined) updateData.background = preferences.background;

      const updatedPreferences = await prisma.preferences.upsert({
        where: { userId: user.id },
@@ -62,6 +65,7 @@ export class PreferencesService {
          showOnlyUnread: preferences.showOnlyUnread ?? defaultPreferences.showOnlyUnread,
          debug: preferences.debug ?? defaultPreferences.debug,
          displayMode: preferences.displayMode ?? defaultPreferences.displayMode,
+          background: (preferences.background ?? defaultPreferences.background) as Prisma.InputJsonValue,
        },
      });

@@ -71,6 +75,7 @@ export class PreferencesService {
        showOnlyUnread: updatedPreferences.showOnlyUnread,
        debug: updatedPreferences.debug,
        displayMode: updatedPreferences.displayMode as UserPreferences["displayMode"],
+        background: (updatedPreferences.background as Prisma.JsonValue) as BackgroundPreferences,
      };
    } catch (error) {
      if (error instanceof AppError) {
--- a/src/types/preferences.ts
+++ b/src/types/preferences.ts
@@ -1,3 +1,11 @@
+export type BackgroundType = "default" | "gradient" | "image";
+
+export interface BackgroundPreferences {
+  type: BackgroundType;
+  gradient?: string;
+  imageUrl?: string;
+}
+
 export interface UserPreferences {
  showThumbnails: boolean;
  cacheMode: "memory" | "file";
@@ -7,6 +15,7 @@ export interface UserPreferences {
    compact: boolean;
    itemsPerPage: number;
  };
+  background: BackgroundPreferences;
 }

 export const defaultPreferences: UserPreferences = {
@@ -18,4 +27,51 @@ export const defaultPreferences: UserPreferences = {
    compact: false,
    itemsPerPage: 20,
  },
+  background: {
+    type: "default",
+  },
 };
+
+// Dégradés prédéfinis
+export const GRADIENT_PRESETS = [
+  {
+    id: "indigo-purple",
+    name: "Indigo Purple",
+    gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+  },
+  {
+    id: "blue-teal",
+    name: "Blue Teal",
+    gradient: "linear-gradient(135deg, #0093E9 0%, #80D0C7 100%)",
+  },
+  {
+    id: "pink-orange",
+    name: "Pink Orange",
+    gradient: "linear-gradient(135deg, #FF6B6B 0%, #FFE66D 100%)",
+  },
+  {
+    id: "purple-pink",
+    name: "Purple Pink",
+    gradient: "linear-gradient(135deg, #A8EDEA 0%, #FED6E3 100%)",
+  },
+  {
+    id: "dark-blue",
+    name: "Dark Blue",
+    gradient: "linear-gradient(135deg, #0F2027 0%, #203A43 50%, #2C5364 100%)",
+  },
+  {
+    id: "sunset",
+    name: "Sunset",
+    gradient: "linear-gradient(135deg, #FF512F 0%, #DD2476 100%)",
+  },
+  {
+    id: "ocean",
+    name: "Ocean",
+    gradient: "linear-gradient(135deg, #2E3192 0%, #1BFFFF 100%)",
+  },
+  {
+    id: "forest",
+    name: "Forest",
+    gradient: "linear-gradient(135deg, #134E5E 0%, #71B280 100%)",
+  },
+] as const;