julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-17 10:47:05 +02:00
parent c370b8372a
commit 2e183bb5d6
11 changed files with 398 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -20,6 +20,7 @@
"@radix-ui/react-dialog": "1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@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-slot": "1.2.3",
"@radix-ui/react-toast": "1.2.15",

34
pnpm-lock.yaml generated
View File

@@ -26,6 +26,9 @@ importers:
'@radix-ui/react-progress':
specifier: ^1.1.2
version: 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-radio-group':
specifier: ^1.3.8
version: 1.3.8(@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-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)
@@ -808,6 +811,19 @@ packages:
'@types/react-dom':
optional: true
'@radix-ui/react-radio-group@1.3.8':
resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
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-roving-focus@1.1.11':
resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
peerDependencies:
@@ -3557,6 +3573,24 @@ snapshots:
'@types/react': 19.2.2
'@types/react-dom': 19.2.2(@types/react@19.2.2)
'@radix-ui/react-radio-group@1.3.8(@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/primitive': 1.1.3
'@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-presence': 1.1.5(@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-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-roving-focus': 1.1.11(@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-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-roving-focus@1.1.11(@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/primitive': 1.1.3

1
prisma/schema.prisma
View File

@@ -67,6 +67,7 @@ model Preferences {
showOnlyUnread Boolean @default(false)
debug Boolean @default(false)
displayMode Json @default("{\"compact\": false, \"itemsPerPage\": 20}")
background Json @default("{\"type\": \"default\"}")
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt

28
src/components/layout/ClientLayout.tsx
View File

@@ -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

195
src/components/settings/BackgroundSettings.tsx Normal file
View File

@@ -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>
);
}

2
src/components/settings/ClientSettings.tsx
View File

@@ -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>

41
src/components/ui/radio-group.tsx Normal file
View File

@@ -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 };

18
src/i18n/messages/en/common.json
View File

@@ -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"

18
src/i18n/messages/fr/common.json
View File

@@ -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"

7
src/lib/services/preferences.service.ts
View File

@@ -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) {

56
src/types/preferences.ts
View File

@@ -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;