Fix tests and add changelog

2026-01-04 21:33:10 +01:00
parent f0b41572bc
commit a154192410
56 changed files with 4464 additions and 236 deletions
--- a/keep-notes/components/label-filter.tsx
+++ b/keep-notes/components/label-filter.tsx
@@ -0,0 +1,130 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from '@/components/ui/dropdown-menu'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Filter, X } from 'lucide-react'
+import { getAllLabelColors, getLabelColor } from '@/lib/label-storage'
+import { LABEL_COLORS } from '@/lib/types'
+import { cn } from '@/lib/utils'
+
+interface LabelFilterProps {
+  selectedLabels: string[]
+  onFilterChange: (labels: string[]) => void
+}
+
+export function LabelFilter({ selectedLabels, onFilterChange }: LabelFilterProps) {
+  const [allLabels, setAllLabels] = useState<string[]>([])
+
+  useEffect(() => {
+    // Load all labels from localStorage
+    const labelColors = getAllLabelColors()
+    setAllLabels(Object.keys(labelColors).sort())
+  }, [])
+
+  const handleToggleLabel = (label: string) => {
+    if (selectedLabels.includes(label)) {
+      onFilterChange(selectedLabels.filter(l => l !== label))
+    } else {
+      onFilterChange([...selectedLabels, label])
+    }
+  }
+
+  const handleClearAll = () => {
+    onFilterChange([])
+  }
+
+  if (allLabels.length === 0) return null
+
+  return (
+    <div className="flex items-center gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="h-9">
+            <Filter className="h-4 w-4 mr-2" />
+            Filter by Label
+            {selectedLabels.length > 0 && (
+              <Badge variant="secondary" className="ml-2 h-5 min-w-5 px-1.5">
+                {selectedLabels.length}
+              </Badge>
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-64">
+          <DropdownMenuLabel className="flex items-center justify-between">
+            Filter by Labels
+            {selectedLabels.length > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleClearAll}
+                className="h-6 text-xs"
+              >
+                Clear
+              </Button>
+            )}
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {allLabels.map((label) => {
+            const colorName = getLabelColor(label)
+            const colorClasses = LABEL_COLORS[colorName]
+            const isSelected = selectedLabels.includes(label)
+
+            return (
+              <DropdownMenuCheckboxItem
+                key={label}
+                checked={isSelected}
+                onCheckedChange={() => handleToggleLabel(label)}
+              >
+                <Badge
+                  className={cn(
+                    'text-xs border mr-2',
+                    colorClasses.bg,
+                    colorClasses.text,
+                    colorClasses.border
+                  )}
+                >
+                  {label}
+                </Badge>
+              </DropdownMenuCheckboxItem>
+            )
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Active filters display */}
+      {selectedLabels.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {selectedLabels.map((label) => {
+            const colorName = getLabelColor(label)
+            const colorClasses = LABEL_COLORS[colorName]
+
+            return (
+              <Badge
+                key={label}
+                className={cn(
+                  'text-xs border cursor-pointer pr-1',
+                  colorClasses.bg,
+                  colorClasses.text,
+                  colorClasses.border
+                )}
+                onClick={() => handleToggleLabel(label)}
+              >
+                {label}
+                <X className="h-3 w-3 ml-1" />
+              </Badge>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}