Fix tests and add changelog
This commit is contained in:
229
keep-notes/components/label-manager.tsx
Normal file
229
keep-notes/components/label-manager.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Button } from './ui/button'
|
||||
import { Input } from './ui/input'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from './ui/dialog'
|
||||
import { Badge } from './ui/badge'
|
||||
import { Tag, X, Plus, Palette } from 'lucide-react'
|
||||
import { LABEL_COLORS, LabelColorName } from '@/lib/types'
|
||||
import { getLabelColor, setLabelColor, deleteLabelColor, getAllLabelColors } from '@/lib/label-storage'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface LabelManagerProps {
|
||||
existingLabels: string[]
|
||||
onUpdate: (labels: string[]) => void
|
||||
}
|
||||
|
||||
export function LabelManager({ existingLabels, onUpdate }: LabelManagerProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [newLabel, setNewLabel] = useState('')
|
||||
const [selectedLabels, setSelectedLabels] = useState<string[]>(existingLabels)
|
||||
const [allLabelsInStorage, setAllLabelsInStorage] = useState<string[]>([])
|
||||
const [editingColor, setEditingColor] = useState<string | null>(null)
|
||||
|
||||
// Load all labels from localStorage
|
||||
useEffect(() => {
|
||||
const allColors = getAllLabelColors()
|
||||
setAllLabelsInStorage(Object.keys(allColors))
|
||||
}, [open])
|
||||
|
||||
const handleAddLabel = () => {
|
||||
const trimmed = newLabel.trim()
|
||||
if (trimmed && !selectedLabels.includes(trimmed)) {
|
||||
const updated = [...selectedLabels, trimmed]
|
||||
setSelectedLabels(updated)
|
||||
setNewLabel('')
|
||||
|
||||
// Set default color if doesn't exist
|
||||
if (getLabelColor(trimmed) === 'gray') {
|
||||
const colors = Object.keys(LABEL_COLORS) as LabelColorName[]
|
||||
const randomColor = colors[Math.floor(Math.random() * colors.length)]
|
||||
setLabelColor(trimmed, randomColor)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveLabel = (label: string) => {
|
||||
setSelectedLabels(selectedLabels.filter(l => l !== label))
|
||||
}
|
||||
|
||||
const handleSelectExisting = (label: string) => {
|
||||
if (!selectedLabels.includes(label)) {
|
||||
setSelectedLabels([...selectedLabels, label])
|
||||
} else {
|
||||
setSelectedLabels(selectedLabels.filter(l => l !== label))
|
||||
}
|
||||
}
|
||||
|
||||
const handleChangeColor = (label: string, color: LabelColorName) => {
|
||||
setLabelColor(label, color)
|
||||
setEditingColor(null)
|
||||
// Force re-render
|
||||
const allColors = getAllLabelColors()
|
||||
setAllLabelsInStorage(Object.keys(allColors))
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
onUpdate(selectedLabels)
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
setSelectedLabels(existingLabels)
|
||||
setEditingColor(null)
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(isOpen) => {
|
||||
if (!isOpen) {
|
||||
handleCancel()
|
||||
} else {
|
||||
setOpen(true)
|
||||
}
|
||||
}}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="ghost" size="sm">
|
||||
<Tag className="h-4 w-4 mr-2" />
|
||||
Labels
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Manage Labels</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add or remove labels for this note. Click on a label to change its color.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Add new label */}
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
placeholder="New label name"
|
||||
value={newLabel}
|
||||
onChange={(e) => setNewLabel(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
handleAddLabel()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button onClick={handleAddLabel} size="sm">
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Selected labels */}
|
||||
{selectedLabels.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-2">Selected Labels</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedLabels.map((label) => {
|
||||
const colorName = getLabelColor(label)
|
||||
const colorClasses = LABEL_COLORS[colorName]
|
||||
const isEditing = editingColor === label
|
||||
|
||||
return (
|
||||
<div key={label} className="relative">
|
||||
{isEditing ? (
|
||||
<div className="absolute z-10 top-8 left-0 bg-white dark:bg-zinc-900 border rounded-lg shadow-lg p-2">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{(Object.keys(LABEL_COLORS) as LabelColorName[]).map((color) => {
|
||||
const classes = LABEL_COLORS[color]
|
||||
return (
|
||||
<button
|
||||
key={color}
|
||||
className={cn(
|
||||
'h-8 w-8 rounded-full border-2 transition-transform hover:scale-110',
|
||||
classes.bg,
|
||||
colorName === color ? 'border-gray-900 dark:border-gray-100' : 'border-gray-300 dark:border-gray-600'
|
||||
)}
|
||||
onClick={() => handleChangeColor(label, color)}
|
||||
title={color}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<Badge
|
||||
className={cn(
|
||||
'text-xs border cursor-pointer pr-1 flex items-center gap-1',
|
||||
colorClasses.bg,
|
||||
colorClasses.text,
|
||||
colorClasses.border
|
||||
)}
|
||||
onClick={() => setEditingColor(isEditing ? null : label)}
|
||||
>
|
||||
<Palette className="h-3 w-3" />
|
||||
{label}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleRemoveLabel(label)
|
||||
}}
|
||||
className="ml-1 hover:bg-black/10 dark:hover:bg-white/10 rounded-full p-0.5"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</Badge>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Available labels from storage */}
|
||||
{allLabelsInStorage.length > 0 && (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-2">All Labels</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{allLabelsInStorage
|
||||
.filter(label => !selectedLabels.includes(label))
|
||||
.map((label) => {
|
||||
const colorName = getLabelColor(label)
|
||||
const colorClasses = LABEL_COLORS[colorName]
|
||||
|
||||
return (
|
||||
<Badge
|
||||
key={label}
|
||||
className={cn(
|
||||
'text-xs border cursor-pointer',
|
||||
colorClasses.bg,
|
||||
colorClasses.text,
|
||||
colorClasses.border,
|
||||
'hover:opacity-80'
|
||||
)}
|
||||
onClick={() => handleSelectExisting(label)}
|
||||
>
|
||||
{label}
|
||||
</Badge>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={handleCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave}>Save</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user