feat: add opacity and blur controls for background settings, enhancing customization options in the UI

2025-10-18 14:48:07 +02:00
parent e32921377f
commit 13626d56c2
8 changed files with 148 additions and 2 deletions
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
    "@radix-ui/react-progress": "^1.1.2",
    "@radix-ui/react-radio-group": "^1.3.8",
    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slider": "^1.3.6",
    "@radix-ui/react-slot": "1.2.3",
    "@radix-ui/react-toast": "1.2.15",
    "@types/bcryptjs": "^3.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
      '@radix-ui/react-select':
        specifier: ^2.1.6
        version: 2.2.6(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-slider':
+        specifier: ^1.3.6
+        version: 1.3.6(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
      '@radix-ui/react-slot':
        specifier: 1.2.3
        version: 1.2.3(@types/react@19.2.2)(react@19.2.0)
@@ -850,6 +853,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-slider@1.3.6':
+    resolution: {integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-slot@1.2.3':
    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
    peerDependencies:
@@ -3634,6 +3650,25 @@ snapshots:
      '@types/react': 19.2.2
      '@types/react-dom': 19.2.2(@types/react@19.2.2)

+  '@radix-ui/react-slider@1.3.6(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.2)(react@19.2.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.2)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.2
+      '@types/react-dom': 19.2.2(@types/react@19.2.2)
+
  '@radix-ui/react-slot@1.2.3(@types/react@19.2.2)(react@19.2.0)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0)
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -66,7 +66,7 @@ model Preferences {
  cacheMode      String   @default("memory") // "memory" | "file"
  showOnlyUnread Boolean  @default(false)
  displayMode    Json     @default("{\"compact\": false, \"itemsPerPage\": 20}")
-  background     Json     @default("{\"type\": \"default\"}")
+  background     Json     @default("{\"type\": \"default\", \"opacity\": 100, \"blur\": 0}")
  createdAt      DateTime @default(now())
  updatedAt      DateTime @updatedAt

--- a/src/components/layout/ClientLayout.tsx
+++ b/src/components/layout/ClientLayout.tsx
@@ -29,10 +29,12 @@ export default function ClientLayout({ children, initialLibraries = [], initialF

  const backgroundStyle = useMemo(() => {
    const bg = preferences.background;
+    const blur = bg.blur || 0;
    
    if (bg.type === "gradient" && bg.gradient) {
      return {
        backgroundImage: bg.gradient,
+        filter: blur > 0 ? `blur(${blur}px)` : undefined,
      };
    }
    
@@ -42,6 +44,7 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
        backgroundSize: "cover" as const,
        backgroundPosition: "center" as const,
        backgroundRepeat: "no-repeat" as const,
+        filter: blur > 0 ? `blur(${blur}px)` : undefined,
      };
    }
    
@@ -90,6 +93,7 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
  const isPublicRoute = publicRoutes.includes(pathname) || pathname.startsWith('/books/');

  const hasCustomBackground = preferences.background.type === "gradient" || preferences.background.type === "image";
+  const contentOpacity = (preferences.background.opacity || 100) / 100;

  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
@@ -100,7 +104,10 @@ export default function ClientLayout({ children, initialLibraries = [], initialF
          style={backgroundStyle}
        />
      )}
-      <div className={`relative min-h-screen ${hasCustomBackground ? "bg-background/95" : "bg-background"}`}>
+      <div 
+        className={`relative min-h-screen ${hasCustomBackground ? "" : "bg-background"}`}
+        style={hasCustomBackground ? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` } : undefined}
+      >
        {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
        {!isPublicRoute && (
          <Sidebar 
--- a/src/components/settings/BackgroundSettings.tsx
+++ b/src/components/settings/BackgroundSettings.tsx
@@ -12,6 +12,7 @@ import { GRADIENT_PRESETS } from "@/types/preferences";
 import type { BackgroundType } from "@/types/preferences";
 import { Check } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Slider } from "@/components/ui/slider";

 export function BackgroundSettings() {
  const { t } = useTranslate();
@@ -94,6 +95,32 @@ export function BackgroundSettings() {
    }
  };

+  const handleOpacityChange = async (value: number[]) => {
+    try {
+      await updatePreferences({
+        background: {
+          ...preferences.background,
+          opacity: value[0],
+        },
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+    }
+  };
+
+  const handleBlurChange = async (value: number[]) => {
+    try {
+      await updatePreferences({
+        background: {
+          ...preferences.background,
+          blur: value[0],
+        },
+      });
+    } catch (error) {
+      console.error("Erreur:", error);
+    }
+  };
+
  return (
    <Card>
      <CardHeader>
@@ -184,6 +211,47 @@ export function BackgroundSettings() {
              </p>
            </div>
          )}
+
+          {/* Contrôles d'opacité et de flou */}
+          {(preferences.background.type === "gradient" || preferences.background.type === "image") && (
+            <>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <Label>Opacité du contenu</Label>
+                  <span className="text-sm text-muted-foreground">{preferences.background.opacity || 100}%</span>
+                </div>
+                <Slider
+                  value={[preferences.background.opacity || 100]}
+                  onValueChange={handleOpacityChange}
+                  min={0}
+                  max={100}
+                  step={5}
+                  className="w-full"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Contrôle la transparence du contenu par rapport au background
+                </p>
+              </div>
+
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <Label>Flou du background</Label>
+                  <span className="text-sm text-muted-foreground">{preferences.background.blur || 0}px</span>
+                </div>
+                <Slider
+                  value={[preferences.background.blur || 0]}
+                  onValueChange={handleBlurChange}
+                  min={0}
+                  max={20}
+                  step={1}
+                  className="w-full"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Applique un effet de flou au background
+                </p>
+              </div>
+            </>
+          )}
        </div>
      </CardContent>
    </Card>
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
+
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -22,6 +22,7 @@ body {
@layer base {
  :root {
    --background: 0 0% 100%;
+    --background-rgb: 255, 255, 255;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
@@ -54,6 +55,7 @@ body {

  .dark {
    --background: 222.2 84% 4.9%;
+    --background-rgb: 12, 17, 29;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
--- a/src/types/preferences.ts
+++ b/src/types/preferences.ts
@@ -4,6 +4,8 @@ export interface BackgroundPreferences {
  type: BackgroundType;
  gradient?: string;
  imageUrl?: string;
+  opacity?: number; // 0-100
+  blur?: number; // 0-20 (px)
 }

 export interface UserPreferences {
@@ -27,6 +29,8 @@ export const defaultPreferences: UserPreferences = {
  },
  background: {
    type: "default",
+    opacity: 100,
+    blur: 0,
  },
 };