From 7d4ab33fcae61d3289c5eaa0bc18ccabe6c11ea0 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Thu, 9 Oct 2025 16:33:56 +0200
Subject: [PATCH] feat(Notes): review style of action part of Notes

---
 src/components/notes/NotesList.tsx | 64 ++++++++++++++++--------------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/components/notes/NotesList.tsx b/src/components/notes/NotesList.tsx
index a25455f..baf5bf5 100644
--- a/src/components/notes/NotesList.tsx
+++ b/src/components/notes/NotesList.tsx
@@ -101,43 +101,47 @@ export function NotesList({
     <div className="flex flex-col h-full bg-[var(--card)]/40 backdrop-blur-md border-r border-[var(--border)]/60 relative before:absolute before:inset-0 before:bg-gradient-to-br 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">
       {/* Header */}
       <div className="p-4 border-b border-[var(--border)]">
-        <div className="mb-4 space-y-2">
-          <div className="flex justify-end">
-            <button
-              onClick={() => setGroupByTags(!groupByTags)}
-              className={`p-2 rounded-md transition-all duration-200 ${
-                groupByTags
-                  ? 'bg-[var(--primary)]/20 text-[var(--primary)]'
-                  : 'bg-[var(--card)]/60 hover:bg-[var(--card)]/80 text-[var(--muted-foreground)]'
-              }`}
-              title={groupByTags ? 'Vue par liste' : 'Vue par tags'}
-            >
-              {groupByTags ? (
-                <Tags className="w-4 h-4" />
-              ) : (
-                <List className="w-4 h-4" />
-              )}
-            </button>
-          </div>
+        <div className="space-y-3">
           <button
             onClick={onCreateNote}
-            className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-[var(--primary)]/80 hover:bg-[var(--primary)]/90 backdrop-blur-sm text-[var(--primary-foreground)] rounded-md text-sm font-medium transition-all duration-200 shadow-lg shadow-[var(--primary)]/20 hover:shadow-xl hover:shadow-[var(--primary)]/30"
+            className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-[var(--primary)]/85 hover:bg-[var(--primary)] text-[var(--primary-foreground)] rounded-md text-sm font-medium transition-all duration-200 shadow-lg shadow-[var(--primary)]/20 hover:shadow-xl hover:shadow-[var(--primary)]/30"
           >
             <Plus className="w-4 h-4" />
             Nouvelle note
           </button>
-        </div>
 
-        {/* Search */}
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-[var(--muted-foreground)]" />
-          <input
-            type="text"
-            placeholder="Rechercher"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 border border-[var(--border)]/60 rounded-md bg-[var(--card)]/40 backdrop-blur-sm text-[var(--foreground)] placeholder-[var(--muted-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]/50 focus:border-[var(--primary)]/50 focus:bg-[var(--card)]/60 transition-all duration-200"
-          />
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
+            {/* Search */}
+            <div className="relative flex-1">
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]" />
+              <input
+                type="text"
+                placeholder="Rechercher une note ou un tag"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-[var(--border)]/60 rounded-md bg-[var(--card)]/40 backdrop-blur-sm text-[var(--foreground)] placeholder-[var(--muted-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]/50 focus:border-[var(--primary)]/50 focus:bg-[var(--card)]/60 transition-all duration-200"
+              />
+            </div>
+
+            <button
+              onClick={() => setGroupByTags(!groupByTags)}
+              className={`flex items-center gap-1 px-3 py-1.5 rounded-md text-xs font-medium transition-all duration-200 border border-[var(--border)]/50 bg-[var(--card)]/40 backdrop-blur-sm sm:w-auto ${
+                groupByTags
+                  ? 'ring-1 ring-[var(--primary)]/30 bg-[var(--primary)]/15 text-[var(--primary)]'
+                  : 'text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--card)]/60'
+              }`}
+              title={groupByTags ? 'Vue par liste' : 'Vue par tags'}
+            >
+              {groupByTags ? (
+                <Tags className="w-3 h-3" />
+              ) : (
+                <List className="w-3 h-3" />
+              )}
+              <span className="tracking-wide uppercase">
+                {groupByTags ? 'Tags' : 'Liste'}
+              </span>
+            </button>
+          </div>
         </div>
       </div>