feat: implement label management with color filtering

2026-01-04 22:47:54 +01:00
parent a154192410
commit dfa88c5b63
20 changed files with 674 additions and 177 deletions
--- a/keep-notes/components/label-selector.tsx
+++ b/keep-notes/components/label-selector.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Tag } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useLabels } from '@/context/LabelContext'
+import { LabelBadge } from './label-badge'
+
+interface LabelSelectorProps {
+  selectedLabels: string[]
+  onLabelsChange: (labels: string[]) => void
+  variant?: 'default' | 'compact'
+  triggerLabel?: string
+  align?: 'start' | 'center' | 'end'
+}
+
+export function LabelSelector({
+  selectedLabels,
+  onLabelsChange,
+  variant = 'default',
+  triggerLabel = 'Tags',
+  align = 'start',
+}: LabelSelectorProps) {
+  const { labels, loading } = useLabels()
+
+  const handleToggleLabel = (labelName: string) => {
+    if (selectedLabels.includes(labelName)) {
+      onLabelsChange(selectedLabels.filter((l) => l !== labelName))
+    } else {
+      onLabelsChange([...selectedLabels, labelName])
+    }
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-8">
+          <Tag className="h-4 w-4 mr-2" />
+          {triggerLabel}
+          {selectedLabels.length > 0 && (
+            <Badge variant="secondary" className="ml-2 h-5 min-w-5 px-1.5">
+              {selectedLabels.length}
+            </Badge>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align={align} className="w-64">
+        <div className="max-h-64 overflow-y-auto">
+          {loading ? (
+            <div className="p-4 text-sm text-gray-500">Loading...</div>
+          ) : labels.length === 0 ? (
+            <div className="p-4 text-sm text-gray-500">No labels yet</div>
+          ) : (
+            labels.map((label) => {
+              const isSelected = selectedLabels.includes(label.name)
+
+              return (
+                <DropdownMenuItem
+                  key={label.id}
+                  onClick={() => handleToggleLabel(label.name)}
+                  className="flex items-center justify-between gap-2"
+                >
+                  <LabelBadge label={label.name} isSelected={isSelected} />
+                </DropdownMenuItem>
+              )
+            })
+          )}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}