feat: polish notes glass ui

src/app/notes/NotesPageClient.tsx

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

src/components/notes/MarkdownEditor.tsx

@@ -345,6 +345,7 @@ export function MarkdownEditor({
               onChange={onTagsChange}
               placeholder="Ajouter des tags..."
               maxTags={10}
+              compactSuggestions={true}
             />
           </div>
         </div>

src/components/ui/TagInput.tsx

@@ -268,13 +268,15 @@ 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,
             }}
           >
+            <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...
@@ -288,10 +290,10 @@ export function TagInput({
                       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 ${
+                      className={`flex items-center gap-2 px-2 py-1.5 text-xs rounded-md transition-colors border ${
                         index === selectedIndex
-                        ? 'bg-[var(--card-hover)] text-[var(--primary)] ring-1 ring-[var(--primary)]'
-                        : 'text-[var(--foreground)] hover:bg-[var(--card-hover)]'
+                          ? '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={
@@ -304,7 +306,9 @@ export function TagInput({
                         className="w-2 h-2 rounded-full flex-shrink-0"
                         style={{ backgroundColor: tag.color }}
                       />
-                    <span className="truncate">{tag.name}</span>
+                      <span className="truncate text-[var(--foreground)]">
+                        {tag.name}
+                      </span>
                       {tags.includes(tag.name) && (
                         <span className="text-[var(--muted-foreground)] ml-auto">
                           ✓
@@ -314,6 +318,7 @@ export function TagInput({
                   ))}
                 </div>
               )}
+            </div>
           </div>,
           document.body
         )}