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

feat(Notes): review style of action part of Notes

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-09 16:33:56 +02:00
parent 1c28d6b782
commit 7d4ab33fca
1 changed files with 34 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/notes/NotesList.tsx
View File

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