sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: standardize UI theme, fix dark mode consistency, and implement editorial tags
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 1m24s
Details

Browse Source
This commit is contained in:
Antigravity
2026-05-10 18:43:13 +00:00
parent f6880bd0e1
commit 330c0c61b6
25 changed files with 640 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
memento-note/components/label-manager.tsx
View File

@@ -12,8 +12,7 @@ import {
DialogTitle,
DialogTrigger,
} from './ui/dialog'
import { Badge } from './ui/badge'
import { Tag, X, Plus, Palette, AlertCircle } from 'lucide-react'
import { Tag, X, Plus, Palette, AlertCircle, Sparkles } from 'lucide-react'
import { LABEL_COLORS, LabelColorName } from '@/lib/types'
import { cn } from '@/lib/utils'
import { useNotebooks } from '@/context/notebooks-context'
@@ -34,18 +33,16 @@ export function LabelManager({ existingLabels, notebookId, onUpdate }: LabelMana
const [editingColor, setEditingColor] = useState<string | null>(null)
const [errorMessage, setErrorMessage] = useState<string | null>(null)
// Sync selected labels with existingLabels prop
useEffect(() => {
setSelectedLabels(existingLabels)
}, [existingLabels])
const handleAddLabel = async () => {
const trimmed = newLabel.trim()
setErrorMessage(null) // Clear previous error
setErrorMessage(null)
if (trimmed && !selectedLabels.includes(trimmed)) {
try {
// Get existing label color or use random
const existingLabel = labels.find(l => l.name === trimmed)
const color = existingLabel?.color || (Object.keys(LABEL_COLORS) as LabelColorName[])[Math.floor(Math.random() * Object.keys(LABEL_COLORS).length)]
@@ -113,9 +110,7 @@ export function LabelManager({ existingLabels, notebookId, onUpdate }: LabelMana
<DialogContent
className="max-w-md"
onInteractOutside={(event) => {
// Prevent dialog from closing when interacting with Sonner toasts
const target = event.target as HTMLElement;
const isSonnerElement =
target.closest('[data-sonner-toast]') ||
target.closest('[data-sonner-toaster]') ||
@@ -124,12 +119,10 @@ export function LabelManager({ existingLabels, notebookId, onUpdate }: LabelMana
target.closest('[data-description]') ||
target.closest('[data-title]') ||
target.closest('[data-button]');
if (isSonnerElement) {
event.preventDefault();
return;
}
if (target.getAttribute('data-sonner-toaster') !== null) {
event.preventDefault();
return;
@@ -144,7 +137,6 @@ export function LabelManager({ existingLabels, notebookId, onUpdate }: LabelMana
</DialogHeader>
<div className="space-y-4 py-4">
{/* Error message */}
{errorMessage && (
<div className="flex items-start gap-2 p-3 bg-amber-50 dark:bg-amber-950/20 rounded-lg border border-amber-200 dark:border-amber-900">
<AlertCircle className="h-4 w-4 text-amber-600 dark:text-amber-500 mt-0.5 flex-shrink-0" />
@@ -152,14 +144,13 @@ export function LabelManager({ existingLabels, notebookId, onUpdate }: LabelMana
</div>
)}
{/* Add new label */}
<div className="flex gap-2">
<Input
placeholder={t('labels.newLabelPlaceholder')}
value={newLabel}
onChange={(e) => {
setNewLabel(e.target.value)
setErrorMessage(null) // Clear error when typing
setErrorMessage(null)
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
@@ -173,20 +164,20 @@ export function LabelManager({ existingLabels, notebookId, onUpdate }: LabelMana
</Button>
</div>
{/* Selected labels */}
{selectedLabels.length > 0 && (
<div>
<h4 className="text-sm font-medium mb-2">{t('labels.selectedLabels')}</h4>
<h4 className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-2">{t('labels.selectedLabels')}</h4>
<div className="flex flex-wrap gap-2">
{selectedLabels.map((label) => {
const labelObj = labels.find(l => l.name === label)
const colorClasses = labelObj ? LABEL_COLORS[labelObj.color] : LABEL_COLORS.gray
const isEditing = editingColor === label
const isAI = labelObj?.type === 'ai'
return (
<div key={label} className="relative">
{isEditing && labelObj ? (
<div className="absolute z-10 top-8 left-0 bg-white dark:bg-zinc-900 border rounded-lg shadow-lg p-2">
<div className="absolute z-10 top-8 left-0 bg-popover 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]
@@ -196,7 +187,7 @@ export function LabelManager({ existingLabels, notebookId, onUpdate }: LabelMana
className={cn(
'h-8 w-8 rounded-full border-2 transition-transform hover:scale-110',
classes.bg,
labelObj.color === color ? 'border-gray-900 dark:border-gray-100' : 'border-gray-300 dark:border-gray-600'
labelObj.color === color ? 'border-foreground dark:border-foreground' : 'border-border'
)}
onClick={() => handleChangeColor(label, color)}
title={color}
@@ -206,27 +197,30 @@ export function LabelManager({ existingLabels, notebookId, onUpdate }: LabelMana
</div>
</div>
) : null}
<Badge
<span
className={cn(
'text-xs border cursor-pointer pr-1 flex items-center gap-1',
colorClasses.bg,
colorClasses.text,
colorClasses.border
'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[9px] font-bold uppercase tracking-wider cursor-pointer',
isAI
? 'bg-memento-blue/5 border-memento-blue/20 text-memento-blue'
: `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border}`
)}
onClick={() => setEditingColor(isEditing ? null : label)}
>
{isAI && <Sparkles className="h-3 w-3" />}
<Palette className="h-3 w-3" />
{label}
<button
<span
role="button"
tabIndex={0}
onClick={(e) => {
e.stopPropagation()
handleRemoveLabel(label)
}}
className="ml-1 hover:bg-black/10 dark:hover:bg-white/10 rounded-full p-0.5"
className="ml-1 hover:text-red-500 transition-colors cursor-pointer"
>
<X className="h-3 w-3" />
</button>
</Badge>
</span>
</span>
</div>
)
})}
@@ -234,30 +228,30 @@ export function LabelManager({ existingLabels, notebookId, onUpdate }: LabelMana
</div>
)}
{/* Available labels from context */}
{!loading && labels.length > 0 && (
<div>
<h4 className="text-sm font-medium mb-2">{t('labels.allLabels')}</h4>
<h4 className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-2">{t('labels.allLabels')}</h4>
<div className="flex flex-wrap gap-2">
{labels
.filter(label => !selectedLabels.includes(label.name))
.map((label) => {
const colorClasses = LABEL_COLORS[label.color]
const isAI = label.type === 'ai'
return (
<Badge
<button
key={label.id}
className={cn(
'text-xs border cursor-pointer',
colorClasses.bg,
colorClasses.text,
colorClasses.border,
'hover:opacity-80'
'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[9px] font-bold uppercase tracking-wider cursor-pointer transition-all hover:opacity-80',
isAI
? 'bg-memento-blue/5 border-memento-blue/20 text-memento-blue'
: `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border}`
)}
onClick={() => handleSelectExisting(label.name)}
>
{isAI && <Sparkles className="h-3 w-3" />}
{label.name}
</Badge>
</button>
)
})}
</div>