feat: polish notes glass ui
This commit is contained in:
Julien Froidefond
@@ -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>
|
||||
);
|
||||
|
||||
@@ -345,6 +345,7 @@ export function MarkdownEditor({
|
||||
onChange={onTagsChange}
|
||||
placeholder="Ajouter des tags..."
|
||||
maxTags={10}
|
||||
compactSuggestions={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -268,52 +268,57 @@ export function TagInput({
|
||||
createPortal(
|
||||
<div
|
||||
ref={suggestionsRef}
|
||||
className="fixed bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-xl z-[9999] max-h-64 overflow-y-auto"
|
||||
className="fixed z-[9999] max-h-64 overflow-y-auto rounded-xl border border-[var(--border)]/60 bg-[var(--card)]/80 backdrop-blur-xl shadow-2xl shadow-[var(--card-shadow-medium)] relative"
|
||||
style={{
|
||||
top: dropdownPosition.top,
|
||||
left: dropdownPosition.left,
|
||||
width: dropdownPosition.width,
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="p-3 text-center text-[var(--muted-foreground)] text-sm">
|
||||
Recherche...
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`gap-2 p-3 ${compactSuggestions ? 'grid grid-cols-1' : 'grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'}`}
|
||||
>
|
||||
{suggestions.map((tag, index) => (
|
||||
<button
|
||||
key={tag.id}
|
||||
type="button"
|
||||
onClick={() => handleSuggestionClick(tag)}
|
||||
className={`flex items-center gap-2 px-2 py-1.5 text-xs rounded-md transition-colors ${
|
||||
index === selectedIndex
|
||||
? 'bg-[var(--card-hover)] text-[var(--primary)] ring-1 ring-[var(--primary)]'
|
||||
: 'text-[var(--foreground)] hover:bg-[var(--card-hover)]'
|
||||
} ${tags.includes(tag.name) ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
disabled={tags.includes(tag.name)}
|
||||
title={
|
||||
tags.includes(tag.name)
|
||||
? 'Déjà ajouté'
|
||||
: `Ajouter ${tag.name}`
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="w-2 h-2 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: tag.color }}
|
||||
/>
|
||||
<span className="truncate">{tag.name}</span>
|
||||
{tags.includes(tag.name) && (
|
||||
<span className="text-[var(--muted-foreground)] ml-auto">
|
||||
✓
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-[color-mix(in_srgb,var(--primary)_12%,transparent)] via-[color-mix(in_srgb,var(--primary)_6%,transparent)] to-transparent opacity-90 pointer-events-none" />
|
||||
<div className="relative z-10">
|
||||
{loading ? (
|
||||
<div className="p-3 text-center text-[var(--muted-foreground)] text-sm">
|
||||
Recherche...
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={`gap-2 p-3 ${compactSuggestions ? 'grid grid-cols-1' : 'grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'}`}
|
||||
>
|
||||
{suggestions.map((tag, index) => (
|
||||
<button
|
||||
key={tag.id}
|
||||
type="button"
|
||||
onClick={() => handleSuggestionClick(tag)}
|
||||
className={`flex items-center gap-2 px-2 py-1.5 text-xs rounded-md transition-colors border ${
|
||||
index === selectedIndex
|
||||
? 'bg-[var(--primary)]/15 text-[var(--primary)] ring-1 ring-[var(--primary)]/40 border-[var(--primary)]/40 backdrop-blur-sm'
|
||||
: 'text-[var(--foreground)] border-transparent hover:bg-[var(--card)]/40 hover:border-[var(--border)]/40 backdrop-blur-sm'
|
||||
} ${tags.includes(tag.name) ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
disabled={tags.includes(tag.name)}
|
||||
title={
|
||||
tags.includes(tag.name)
|
||||
? 'Déjà ajouté'
|
||||
: `Ajouter ${tag.name}`
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="w-2 h-2 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: tag.color }}
|
||||
/>
|
||||
<span className="truncate text-[var(--foreground)]">
|
||||
{tag.name}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{tags.includes(tag.name) && (
|
||||
<span className="text-[var(--muted-foreground)] ml-auto">
|
||||
✓
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user