e73e46893f
- 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.
114 lines
4.2 KiB
TypeScript
114 lines
4.2 KiB
TypeScript
'use client';
|
||
|
||
import { Tag } from '@/lib/types';
|
||
import { useTags } from '@/hooks/useTags';
|
||
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 {
|
||
initialTags: Tag[];
|
||
}
|
||
|
||
export function GeneralSettingsPageClient({ initialTags }: GeneralSettingsPageClientProps) {
|
||
const {
|
||
tags,
|
||
refreshTags,
|
||
deleteTag
|
||
} = useTags(initialTags as (Tag & { usage: number })[]);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[var(--background)]">
|
||
<Header
|
||
title="TowerControl"
|
||
subtitle="Paramètres généraux"
|
||
/>
|
||
|
||
<div className="container mx-auto px-4 py-4">
|
||
<div className="max-w-4xl mx-auto">
|
||
{/* Breadcrumb */}
|
||
<div className="mb-4 text-sm">
|
||
<Link href="/settings" className="text-[var(--muted-foreground)] hover:text-[var(--primary)]">
|
||
Paramètres
|
||
</Link>
|
||
<span className="mx-2 text-[var(--muted-foreground)]">/</span>
|
||
<span className="text-[var(--foreground)]">Général</span>
|
||
</div>
|
||
|
||
{/* Page Header */}
|
||
<div className="mb-6">
|
||
<h1 className="text-2xl font-mono font-bold text-[var(--foreground)] mb-2">
|
||
⚙️ Paramètres généraux
|
||
</h1>
|
||
<p className="text-[var(--muted-foreground)]">
|
||
Configuration des préférences de l'interface et du comportement général
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-8">
|
||
{/* Sélection de thème */}
|
||
<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 variant="glass">
|
||
<CardContent padding="lg">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h3 className="text-lg font-medium text-[var(--foreground)] mb-2">
|
||
🎨 UI Components Showcase
|
||
</h3>
|
||
<p className="text-sm text-[var(--muted-foreground)]">
|
||
Visualisez tous les composants UI disponibles avec différents thèmes
|
||
</p>
|
||
</div>
|
||
<Link
|
||
href="/ui-showcase"
|
||
className="inline-flex items-center px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-md hover:bg-[color-mix(in_srgb,var(--primary)_90%,transparent)] transition-colors font-medium"
|
||
>
|
||
Voir la démo
|
||
</Link>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Gestion des tags */}
|
||
<TagsManagement
|
||
tags={tags}
|
||
onRefreshTags={refreshTags}
|
||
onDeleteTag={deleteTag}
|
||
/>
|
||
|
||
{/* Note développement futur */}
|
||
<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">
|
||
🚧 Interface de configuration en développement
|
||
</p>
|
||
<p className="text-xs text-[var(--muted-foreground)]">
|
||
Les contrôles interactifs pour modifier les autres préférences seront disponibles dans une prochaine version.
|
||
Pour l'instant, les préférences sont modifiables via les boutons de l'interface principale.
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |