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

feat: polish notes glass ui

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-09 16:23:10 +02:00
parent d6538356a1
commit 1c28d6b782
3 changed files with 60 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/notes/NotesPageClient.tsx
View File

@@ -6,6 +6,7 @@ import { notesClient } from '@/clients/notes';
import { NotesList } from '@/components/notes/NotesList';
import { MarkdownEditor } from '@/components/notes/MarkdownEditor';
import { Header } from '@/components/ui/Header';
import { Card } from '@/components/ui';
import { TasksProvider, useTasksContext } from '@/contexts/TasksContext';
import { Tag } from '@/lib/types';
import { FileText, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
@@ -22,6 +23,9 @@ function NotesPageContent({ initialNotes }: { initialNotes: Note[] }) {
const [error, setError] = useState<string | null>(null);
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const glassSurface =
'bg-[var(--card)]/40 backdrop-blur-md relative before:absolute before:inset-0 before:bg-gradient-to-r before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-transparent before:opacity-80 before:pointer-events-none';
const glassDivider = `${glassSurface} border-b border-[var(--border)]/60`;
// Select first note if none selected
useEffect(() => {
@@ -152,11 +156,14 @@ function NotesPageContent({ initialNotes }: { initialNotes: Note[] }) {
}, [selectedNote, hasUnsavedChanges, handleSave]);
return (
<div className="h-screen bg-[var(--background)] flex flex-col">
<div className="min-h-screen bg-[var(--background)] flex flex-col">
<Header title="Notes" subtitle="Gestionnaire de notes markdown" />
<div className="flex-1 container mx-auto px-4 py-4">
<div className="flex h-full bg-[var(--card)]/40 border border-[var(--border)]/60 backdrop-blur-md shadow-xl shadow-[var(--card-shadow-medium)] rounded-lg overflow-hidden relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_12%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:to-transparent before:opacity-90 before:pointer-events-none">
<div className="flex-1 container mx-auto px-4 py-6">
<Card
variant="glass"
className="flex h-full rounded-2xl overflow-hidden"
>
{/* Notes List Sidebar */}
<div
className={`${sidebarCollapsed ? 'w-12' : 'w-80'} flex-shrink-0 border-r border-[var(--border)] transition-all duration-300 ease-in-out`}
@@ -175,7 +182,9 @@ function NotesPageContent({ initialNotes }: { initialNotes: Note[] }) {
</div>
) : (
<>
<div className="flex items-center justify-between p-3 border-b border-[var(--border)]/60 bg-[var(--card)]/40 backdrop-blur-md">
<div
className={`${glassDivider} flex items-center justify-between p-3`}
>
<h2 className="text-sm font-mono font-semibold text-[var(--foreground)] uppercase tracking-wider">
Notes
</h2>
@@ -217,7 +226,7 @@ function NotesPageContent({ initialNotes }: { initialNotes: Note[] }) {
{selectedNote ? (
<>
{/* Note Header */}
<div className="flex items-center gap-4 p-4 border-b border-[var(--border)]/60 bg-[var(--card)]/40 backdrop-blur-md relative before:absolute before:inset-0 before:bg-gradient-to-r before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-transparent before:opacity-80 before:pointer-events-none">
<div className={`${glassDivider} flex items-center gap-4 p-4`}>
<FileText className="w-5 h-5 text-[var(--muted-foreground)]" />
<div className="flex-1">
<h2 className="text-lg font-semibold text-[var(--foreground)] truncate">
@@ -271,7 +280,7 @@ function NotesPageContent({ initialNotes }: { initialNotes: Note[] }) {
</div>
)}
</div>
</div>
</Card>
</div>
</div>
);