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

feat(ux): epic UX design improvements across agents, chat, notes, and i18n

Browse Source 
Comprehensive UI/UX updates including agent card redesign, chat container
improvements, note editor enhancements, memory echo notifications, and
updated translations for all 15 locales.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Sepehr Ramezani
2026-04-19 23:01:04 +02:00
parent c2a4c22e5f
commit 402e88b788
208 changed files with 493 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
keep-notes/components/agents/agent-card.tsx
View File

@@ -52,10 +52,10 @@ interface AgentCardProps {
// --- Config ---
const typeConfig: Record<string, { icon: typeof Globe; color: string; bgColor: string }> = {
scraper: { icon: Globe, color: 'text-blue-600', bgColor: 'bg-blue-50 border-blue-200' },
researcher: { icon: Search, color: 'text-purple-600', bgColor: 'bg-purple-50 border-purple-200' },
monitor: { icon: Eye, color: 'text-amber-600', bgColor: 'bg-amber-50 border-amber-200' },
custom: { icon: Settings, color: 'text-green-600', bgColor: 'bg-green-50 border-green-200' },
scraper: { icon: Globe, color: 'text-blue-600 dark:text-blue-400', bgColor: 'bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800' },
researcher: { icon: Search, color: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800' },
monitor: { icon: Eye, color: 'text-amber-600 dark:text-amber-400', bgColor: 'bg-amber-50 dark:bg-amber-950 border-amber-200 dark:border-amber-800' },
custom: { icon: Settings, color: 'text-green-600 dark:text-green-400', bgColor: 'bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800' },
}
const frequencyKeys: Record<string, string> = {
@@ -142,10 +142,10 @@ export function AgentCard({ agent, onEdit, onRefresh, onToggle }: AgentCardProps
return (
<div className={`
bg-white rounded-xl border-2 transition-all overflow-hidden
${agent.isEnabled ? 'border-slate-200 hover:border-primary/30 hover:shadow-md' : 'border-slate-100 opacity-60'}
bg-card rounded-xl border-2 transition-all overflow-hidden
${agent.isEnabled ? 'border-border hover:border-primary/30 hover:shadow-md' : 'border-border/50 opacity-60'}
`}>
<div className={`h-1 ${agent.isEnabled ? 'bg-primary' : 'bg-slate-200'}`} />
<div className={`h-1 ${agent.isEnabled ? 'bg-primary' : 'bg-muted'}`} />
<div className="p-4">
<div className="flex items-start justify-between mb-3">
@@ -155,9 +155,9 @@ export function AgentCard({ agent, onEdit, onRefresh, onToggle }: AgentCardProps
</div>
<div className="min-w-0">
<div className="flex items-center gap-2">
<h3 className="font-semibold text-slate-800 truncate">{agent.name}</h3>
<h3 className="font-semibold text-card-foreground truncate">{agent.name}</h3>
{mounted && isNew && (
<span className="flex-shrink-0 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider bg-emerald-100 text-emerald-700 rounded">
<span className="flex-shrink-0 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 rounded">
{t('agents.newBadge')}
</span>
)}
@@ -171,16 +171,16 @@ export function AgentCard({ agent, onEdit, onRefresh, onToggle }: AgentCardProps
{agent.isEnabled ? (
<ToggleRight className="w-6 h-6 text-primary" />
) : (
<ToggleLeft className="w-6 h-6 text-slate-300" />
<ToggleLeft className="w-6 h-6 text-muted-foreground/40" />
)}
</button>
</div>
{agent.description && (
<p className="text-xs text-slate-500 mb-3 line-clamp-2">{agent.description}</p>
<p className="text-xs text-muted-foreground mb-3 line-clamp-2">{agent.description}</p>
)}
<div className="flex items-center gap-3 text-xs text-slate-400 mb-3">
<div className="flex items-center gap-3 text-xs text-muted-foreground mb-3">
<span className="flex items-center gap-1">
<Clock className="w-3 h-3" />
{t(frequencyKeys[agent.frequency] || 'agents.frequencies.manual')}
@@ -199,9 +199,9 @@ export function AgentCard({ agent, onEdit, onRefresh, onToggle }: AgentCardProps
{lastAction && (
<div className={`
flex items-center gap-1.5 text-xs px-2 py-1 rounded-md mb-3
${lastAction.status === 'success' ? 'bg-green-50 text-green-600' : ''}
${lastAction.status === 'failure' ? 'bg-red-50 text-red-600' : ''}
${lastAction.status === 'running' ? 'bg-blue-50 text-blue-600' : ''}
${lastAction.status === 'success' ? 'bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400' : ''}
${lastAction.status === 'failure' ? 'bg-red-50 dark:bg-red-950 text-red-600 dark:text-red-400' : ''}
${lastAction.status === 'running' ? 'bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400' : ''}
`}>
{lastAction.status === 'success' && <CheckCircle2 className="w-3 h-3" />}
{lastAction.status === 'failure' && <XCircle className="w-3 h-3" />}
@@ -224,7 +224,7 @@ export function AgentCard({ agent, onEdit, onRefresh, onToggle }: AgentCardProps
<button
onClick={handleRun}
disabled={isRunning || !agent.isEnabled}
className="p-1.5 text-green-600 bg-green-50 rounded-lg hover:bg-green-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="p-1.5 text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-950 rounded-lg hover:bg-green-100 dark:hover:bg-green-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
title={t('agents.actions.run')}
>
{isRunning ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
@@ -232,7 +232,7 @@ export function AgentCard({ agent, onEdit, onRefresh, onToggle }: AgentCardProps
<button
onClick={handleDelete}
disabled={isDeleting}
className="p-1.5 text-red-500 bg-red-50 rounded-lg hover:bg-red-100 transition-colors disabled:opacity-50"
className="p-1.5 text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950 rounded-lg hover:bg-red-100 dark:hover:bg-red-900 transition-colors disabled:opacity-50"
title={t('agents.actions.delete')}
>
{isDeleting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}

104
keep-notes/components/agents/agent-form.tsx
View File

@@ -21,7 +21,7 @@ function FieldHelp({ tooltip }: { tooltip: string }) {
return (
<Tooltip>
<TooltipTrigger asChild>
<button type="button" className="inline-flex items-center ml-1 text-slate-300 hover:text-slate-500 transition-colors">
<button type="button" className="inline-flex items-center ml-1 text-muted-foreground/40 hover:text-muted-foreground transition-colors">
<HelpCircle className="w-3.5 h-3.5" />
</button>
</TooltipTrigger>
@@ -61,6 +61,16 @@ const TOOL_PRESETS: Record<string, string[]> = {
custom: ['memory_search'],
}
// --- Shared class strings ---
const labelCls = 'block text-sm font-medium text-foreground mb-1.5'
const labelCls2 = 'block text-sm font-medium text-foreground mb-2'
const inputCls = 'w-full px-3 py-2 text-sm border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-card text-foreground'
const selectCls = 'w-full px-3 py-2 text-sm border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-card text-foreground'
const toggleOffBorder = 'border-border hover:border-primary/30'
const toggleOffIcon = 'text-muted-foreground'
const toggleOffLabel = 'text-sm font-medium text-foreground'
const toggleOffHint = 'text-xs text-muted-foreground'
// --- Component ---
export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps) {
@@ -187,26 +197,26 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
return (
<div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
<div className="bg-card rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
{/* Header — editable agent name */}
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-100">
<div className="flex items-center justify-between px-6 py-4 border-b border-border">
<input
type="text"
value={name}
onChange={e => setName(e.target.value)}
className="text-lg font-semibold text-slate-800 bg-transparent border-none outline-none focus:ring-0 p-0 flex-1 placeholder:text-slate-300"
className="text-lg font-semibold text-card-foreground bg-transparent border-none outline-none focus:ring-0 p-0 flex-1 placeholder:text-muted-foreground/40"
placeholder={t('agents.form.namePlaceholder')}
required
/>
<button onClick={onCancel} className="p-1 rounded-md hover:bg-slate-100 ml-3">
<X className="w-5 h-5 text-slate-400" />
<button onClick={onCancel} className="p-1 rounded-md hover:bg-accent ml-3">
<X className="w-5 h-5 text-muted-foreground" />
</button>
</div>
<form onSubmit={handleSubmit} className="p-6 space-y-5">
{/* Agent Type */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">{t('agents.form.agentType')}<FieldHelp tooltip={t('agents.help.tooltips.agentType')} /></label>
<label className={labelCls2}>{t('agents.form.agentType')}<FieldHelp tooltip={t('agents.help.tooltips.agentType')} /></label>
<div className="grid grid-cols-2 gap-2">
{agentTypes.map(at => (
<button
@@ -217,11 +227,11 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
text-left px-3 py-2.5 rounded-lg border-2 transition-all text-sm
${type === at.value
? 'border-primary bg-primary/5 text-primary font-medium'
: 'border-slate-200 text-slate-600 hover:border-slate-300'}
: `${toggleOffBorder} text-muted-foreground`}
`}
>
<div className="font-medium">{t(at.labelKey)}</div>
<div className="text-xs text-slate-400 mt-0.5">{t(at.descKey)}</div>
<div className="text-xs text-muted-foreground mt-0.5">{t(at.descKey)}</div>
</button>
))}
</div>
@@ -230,12 +240,12 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
{/* Research Topic (researcher only) — replaces Description for this type */}
{type === 'researcher' && (
<div>
<label className="block text-sm font-medium text-slate-700 mb-1.5">{t('agents.form.researchTopic')}<FieldHelp tooltip={t('agents.help.tooltips.researchTopic')} /></label>
<label className={labelCls}>{t('agents.form.researchTopic')}<FieldHelp tooltip={t('agents.help.tooltips.researchTopic')} /></label>
<input
type="text"
value={description}
onChange={e => setDescription(e.target.value)}
className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
className={inputCls}
placeholder={t('agents.form.researchTopicPlaceholder')}
/>
</div>
@@ -244,12 +254,12 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
{/* Description (for non-researcher types) */}
{type !== 'researcher' && (
<div>
<label className="block text-sm font-medium text-slate-700 mb-1.5">{t('agents.form.description')}<FieldHelp tooltip={t('agents.help.tooltips.description')} /></label>
<label className={labelCls}>{t('agents.form.description')}<FieldHelp tooltip={t('agents.help.tooltips.description')} /></label>
<input
type="text"
value={description}
onChange={e => setDescription(e.target.value)}
className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
className={inputCls}
placeholder={t('agents.form.descriptionPlaceholder')}
/>
</div>
@@ -258,7 +268,7 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
{/* URLs (scraper and custom only — researcher uses search, not URLs) */}
{(type === 'scraper' || type === 'custom') && (
<div>
<label className="block text-sm font-medium text-slate-700 mb-1.5">
<label className={labelCls}>
{t('agents.form.urlsLabel')}<FieldHelp tooltip={t('agents.help.tooltips.urls')} />
</label>
<div className="space-y-2">
@@ -268,14 +278,14 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
type="url"
value={url}
onChange={e => updateUrl(i, e.target.value)}
className="flex-1 px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
className={inputCls}
placeholder="https://example.com"
/>
{urls.length > 1 && (
<button
type="button"
onClick={() => removeUrl(i)}
className="p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
className="p-2 text-red-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950 rounded-lg transition-colors"
>
<Trash2 className="w-4 h-4" />
</button>
@@ -297,11 +307,11 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
{/* Source Notebook (monitor only) */}
{showSourceNotebook && (
<div>
<label className="block text-sm font-medium text-slate-700 mb-1.5">{t('agents.form.sourceNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.sourceNotebook')} /></label>
<label className={labelCls}>{t('agents.form.sourceNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.sourceNotebook')} /></label>
<select
value={sourceNotebookId}
onChange={e => setSourceNotebookId(e.target.value)}
className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white"
className={selectCls}
>
<option value="">{t('agents.form.selectNotebook')}</option>
{notebooks.map(nb => (
@@ -315,11 +325,11 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
{/* Target Notebook */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-1.5">{t('agents.form.targetNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.targetNotebook')} /></label>
<label className={labelCls}>{t('agents.form.targetNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.targetNotebook')} /></label>
<select
value={targetNotebookId}
onChange={e => setTargetNotebookId(e.target.value)}
className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white"
className={selectCls}
>
<option value="">{t('agents.form.inbox')}</option>
{notebooks.map(nb => (
@@ -332,11 +342,11 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
{/* Frequency */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-1.5">{t('agents.form.frequency')}<FieldHelp tooltip={t('agents.help.tooltips.frequency')} /></label>
<label className={labelCls}>{t('agents.form.frequency')}<FieldHelp tooltip={t('agents.help.tooltips.frequency')} /></label>
<select
value={frequency}
onChange={e => setFrequency(e.target.value)}
className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white"
className={selectCls}
>
<option value="manual">{t('agents.frequencies.manual')}</option>
<option value="hourly">{t('agents.frequencies.hourly')}</option>
@@ -352,16 +362,16 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
className={`flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${
notifyEmail
? 'border-primary bg-primary/5'
: 'border-slate-200 hover:border-slate-300'
: toggleOffBorder
}`}
>
<Mail className={`w-4 h-4 flex-shrink-0 ${notifyEmail ? 'text-primary' : 'text-slate-400'}`} />
<Mail className={`w-4 h-4 flex-shrink-0 ${notifyEmail ? 'text-primary' : toggleOffIcon}`} />
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-slate-700">{t('agents.form.notifyEmail')}</div>
<div className="text-xs text-slate-400">{t('agents.form.notifyEmailHint')}</div>
<div className={toggleOffLabel}>{t('agents.form.notifyEmail')}</div>
<div className={toggleOffHint}>{t('agents.form.notifyEmailHint')}</div>
</div>
<div className={`w-9 h-5 rounded-full transition-colors flex-shrink-0 ${notifyEmail ? 'bg-primary' : 'bg-slate-200'}`}>
<div className={`w-4 h-4 bg-white rounded-full shadow-sm transition-transform mt-0.5 ${notifyEmail ? 'translate-x-4.5 ml-0.5' : 'ml-0.5'}`} />
<div className={`w-9 h-5 rounded-full transition-colors flex-shrink-0 ${notifyEmail ? 'bg-primary' : 'bg-muted'}`}>
<div className={`w-4 h-4 bg-card rounded-full shadow-sm transition-transform mt-0.5 ${notifyEmail ? 'translate-x-4.5 ml-0.5' : 'ml-0.5'}`} />
</div>
</div>
@@ -371,16 +381,16 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
className={`flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${
includeImages
? 'border-primary bg-primary/5'
: 'border-slate-200 hover:border-slate-300'
: toggleOffBorder
}`}
>
<ImageIcon className={`w-4 h-4 flex-shrink-0 ${includeImages ? 'text-primary' : 'text-slate-400'}`} />
<ImageIcon className={`w-4 h-4 flex-shrink-0 ${includeImages ? 'text-primary' : toggleOffIcon}`} />
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-slate-700">{t('agents.form.includeImages')}</div>
<div className="text-xs text-slate-400">{t('agents.form.includeImagesHint')}</div>
<div className={toggleOffLabel}>{t('agents.form.includeImages')}</div>
<div className={toggleOffHint}>{t('agents.form.includeImagesHint')}</div>
</div>
<div className={`w-9 h-5 rounded-full transition-colors flex-shrink-0 ${includeImages ? 'bg-primary' : 'bg-slate-200'}`}>
<div className={`w-4 h-4 bg-white rounded-full shadow-sm transition-transform mt-0.5 ${includeImages ? 'translate-x-4.5 ml-0.5' : 'ml-0.5'}`} />
<div className={`w-9 h-5 rounded-full transition-colors flex-shrink-0 ${includeImages ? 'bg-primary' : 'bg-muted'}`}>
<div className={`w-4 h-4 bg-card rounded-full shadow-sm transition-transform mt-0.5 ${includeImages ? 'translate-x-4.5 ml-0.5' : 'ml-0.5'}`} />
</div>
</div>
@@ -388,7 +398,7 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
<button
type="button"
onClick={() => setShowAdvanced(!showAdvanced)}
className="flex items-center gap-2 text-sm text-slate-500 hover:text-slate-700 font-medium w-full pt-2 border-t border-slate-100"
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground font-medium w-full pt-2 border-t border-border"
>
{showAdvanced ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
{t('agents.form.advancedMode')}
@@ -398,23 +408,23 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
{showAdvanced && (
<>
<div>
<label className="block text-sm font-medium text-slate-700 mb-1">
<label className="block text-sm font-medium text-foreground mb-1">
{t('agents.form.instructions')}
<FieldHelp tooltip={t('agents.help.tooltips.instructions')} />
<span className="text-xs text-slate-400 font-normal ml-1">({t('agents.form.instructionsHint')})</span>
<span className="text-xs text-muted-foreground font-normal ml-1">({t('agents.form.instructionsHint')})</span>
</label>
<textarea
value={role}
onChange={e => setRole(e.target.value)}
rows={3}
className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-y min-h-[80px]"
className="w-full px-3 py-2 text-sm border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-y min-h-[80px] bg-card text-foreground"
placeholder={t('agents.form.instructionsPlaceholder')}
/>
</div>
{/* Advanced: Tools */}
<div>
<label className="block text-sm font-medium text-slate-700 mb-2">{t('agents.tools.title')}<FieldHelp tooltip={t('agents.help.tooltips.tools')} /></label>
<label className="block text-sm font-medium text-foreground mb-2">{t('agents.tools.title')}<FieldHelp tooltip={t('agents.help.tooltips.tools')} /></label>
<div className="grid grid-cols-2 gap-2">
{availableTools.map(at => {
const Icon = at.icon
@@ -432,20 +442,20 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
flex items-center gap-2 px-3 py-2 rounded-lg border text-sm transition-all text-left
${isSelected
? 'border-primary bg-primary/5 text-primary font-medium'
: 'border-slate-200 text-slate-600 hover:border-slate-300'}
: `${toggleOffBorder} text-muted-foreground`}
`}
>
<Icon className="w-4 h-4 flex-shrink-0" />
<span>{t(at.labelKey)}</span>
{at.external && !isSelected && (
<span className="ml-auto text-[10px] text-amber-500 bg-amber-50 px-1.5 py-0.5 rounded-full">{t('agents.tools.configNeeded')}</span>
<span className="ml-auto text-[10px] text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950 px-1.5 py-0.5 rounded-full">{t('agents.tools.configNeeded')}</span>
)}
</button>
)
})}
</div>
{selectedTools.length > 0 && (
<p className="text-xs text-slate-400 mt-1.5">
<p className="text-xs text-muted-foreground mt-1.5">
{t('agents.tools.selected', { count: selectedTools.length })}
</p>
)}
@@ -454,9 +464,9 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
{/* Advanced: Max Steps */}
{selectedTools.length > 0 && (
<div>
<label className="block text-sm font-medium text-slate-700 mb-1.5">
<label className="block text-sm font-medium text-foreground mb-1.5">
{t('agents.tools.maxSteps')}<FieldHelp tooltip={t('agents.help.tooltips.maxSteps')} />
<span className="text-slate-400 font-normal ml-1">({maxSteps})</span>
<span className="text-muted-foreground font-normal ml-1">({maxSteps})</span>
</label>
<input
type="range"
@@ -466,7 +476,7 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
onChange={e => setMaxSteps(Number(e.target.value))}
className="w-full accent-primary"
/>
<div className="flex justify-between text-xs text-slate-400">
<div className="flex justify-between text-xs text-muted-foreground">
<span>3</span>
<span>25</span>
</div>
@@ -480,14 +490,14 @@ export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps
<button
type="button"
onClick={onCancel}
className="px-4 py-2 text-sm font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors"
className="px-4 py-2 text-sm font-medium text-muted-foreground bg-muted rounded-lg hover:bg-accent transition-colors"
>
{t('agents.form.cancel')}
</button>
<button
type="submit"
disabled={isSaving}
className="px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
className="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
>
{isSaving ? t('agents.form.saving') : agent ? t('agents.form.save') : t('agents.form.create')}
</button>

38
keep-notes/components/agents/agent-run-log.tsx
View File

@@ -66,15 +66,15 @@ export function AgentRunLog({ agentId, agentName, onClose }: AgentRunLogProps) {
return (
<div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-2xl shadow-xl max-w-md w-full max-h-[70vh] overflow-hidden flex flex-col">
<div className="bg-card rounded-2xl shadow-xl max-w-md w-full max-h-[70vh] overflow-hidden flex flex-col">
{/* Header */}
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
<div className="flex items-center justify-between px-5 py-4 border-b border-border">
<div>
<h3 className="font-semibold text-slate-800">{t('agents.runLog.title')}</h3>
<p className="text-xs text-slate-400">{agentName}</p>
<h3 className="font-semibold text-card-foreground">{t('agents.runLog.title')}</h3>
<p className="text-xs text-muted-foreground">{agentName}</p>
</div>
<button onClick={onClose} className="p-1 rounded-md hover:bg-slate-100">
<X className="w-5 h-5 text-slate-400" />
<button onClick={onClose} className="p-1 rounded-md hover:bg-accent">
<X className="w-5 h-5 text-muted-foreground" />
</button>
</div>
@@ -82,12 +82,12 @@ export function AgentRunLog({ agentId, agentName, onClose }: AgentRunLogProps) {
<div className="flex-1 overflow-y-auto p-4 space-y-2">
{loading && (
<div className="flex items-center justify-center py-8">
<Loader2 className="w-5 h-5 animate-spin text-slate-400" />
<Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
</div>
)}
{!loading && actions.length === 0 && (
<p className="text-center text-sm text-slate-400 py-8">
<p className="text-center text-sm text-muted-foreground py-8">
{t('agents.runLog.noHistory')}
</p>
)}
@@ -103,10 +103,10 @@ export function AgentRunLog({ agentId, agentName, onClose }: AgentRunLogProps) {
key={action.id}
className={`
p-3 rounded-lg border
${action.status === 'success' ? 'bg-green-50/50 border-green-100' : ''}
${action.status === 'failure' ? 'bg-red-50/50 border-red-100' : ''}
${action.status === 'running' ? 'bg-blue-50/50 border-blue-100' : ''}
${action.status === 'pending' ? 'bg-slate-50 border-slate-100' : ''}
${action.status === 'success' ? 'bg-green-50/50 dark:bg-green-950/50 border-green-100 dark:border-green-900' : ''}
${action.status === 'failure' ? 'bg-red-50/50 dark:bg-red-950/50 border-red-100 dark:border-red-900' : ''}
${action.status === 'running' ? 'bg-blue-50/50 dark:bg-blue-950/50 border-blue-100 dark:border-blue-900' : ''}
${action.status === 'pending' ? 'bg-muted border-border' : ''}
`}
>
<div className="flex items-start gap-3">
@@ -114,19 +114,19 @@ export function AgentRunLog({ agentId, agentName, onClose }: AgentRunLogProps) {
{action.status === 'success' && <CheckCircle2 className="w-4 h-4 text-green-500" />}
{action.status === 'failure' && <XCircle className="w-4 h-4 text-red-500" />}
{action.status === 'running' && <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />}
{action.status === 'pending' && <Clock className="w-4 h-4 text-slate-400" />}
{action.status === 'pending' && <Clock className="w-4 h-4 text-muted-foreground" />}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-slate-700">
<span className="text-sm font-medium text-foreground">
{t(statusKeys[action.status] || action.status)}
</span>
<span className="text-xs text-slate-400">
<span className="text-xs text-muted-foreground">
{formatDistanceToNow(new Date(action.createdAt), { addSuffix: true, locale: dateLocale })}
</span>
</div>
{action.log && (
<p className="text-xs text-slate-500 mt-1 line-clamp-2">{action.log}</p>
<p className="text-xs text-muted-foreground mt-1 line-clamp-2">{action.log}</p>
)}
</div>
</div>
@@ -142,13 +142,13 @@ export function AgentRunLog({ agentId, agentName, onClose }: AgentRunLogProps) {
<div className="mt-2 space-y-2 pl-2">
{toolSteps.map((step, i) => (
<div key={i} className="text-xs border-l-2 border-primary/30 pl-2 py-1">
<span className="font-medium text-slate-600">{t('agents.runLog.step', { num: step.step })}</span>
<span className="font-medium text-muted-foreground">{t('agents.runLog.step', { num: step.step })}</span>
{step.toolCalls && step.toolCalls.length > 0 && (
<div className="mt-1 space-y-1">
{step.toolCalls.map((tc, j) => (
<div key={j} className="bg-slate-100 rounded px-2 py-1">
<div key={j} className="bg-muted rounded px-2 py-1">
<span className="font-mono text-primary">{tc.toolName}</span>
<span className="text-slate-400 ml-1">
<span className="text-muted-foreground ml-1">
{JSON.stringify(tc.args).substring(0, 80)}
</span>
</div>

19
keep-notes/components/chat/chat-container.tsx
View File

@@ -14,19 +14,22 @@ import { useLanguage } from '@/lib/i18n'
interface ChatContainerProps {
initialConversations: any[]
notebooks: any[]
webSearchAvailable?: boolean
}
export function ChatContainer({ initialConversations, notebooks }: ChatContainerProps) {
export function ChatContainer({ initialConversations, notebooks, webSearchAvailable }: ChatContainerProps) {
const { t, language } = useLanguage()
const [conversations, setConversations] = useState(initialConversations)
const [currentId, setCurrentId] = useState<string | null>(null)
const [selectedNotebook, setSelectedNotebook] = useState<string | undefined>(undefined)
const [webSearchEnabled, setWebSearchEnabled] = useState(false)
const [historyMessages, setHistoryMessages] = useState<UIMessage[]>([])
const [isLoadingHistory, setIsLoadingHistory] = useState(false)
// Prevents the useEffect from loading an empty conversation
// when we just created one via createConversation()
const skipHistoryLoad = useRef(false)
const scrollRef = useRef<HTMLDivElement>(null)
const transport = useRef(new DefaultChatTransport({
api: '/api/chat',
@@ -129,6 +132,7 @@ export function ChatContainer({ initialConversations, notebooks }: ChatContainer
conversationId: convId,
notebookId: notebookId || selectedNotebook || undefined,
language,
webSearch: webSearchEnabled,
},
}
)
@@ -139,6 +143,7 @@ export function ChatContainer({ initialConversations, notebooks }: ChatContainer
setMessages([])
setHistoryMessages([])
setSelectedNotebook(undefined)
setWebSearchEnabled(false)
}
const handleDeleteConversation = async (id: string) => {
@@ -158,6 +163,13 @@ export function ChatContainer({ initialConversations, notebooks }: ChatContainer
? messages
: historyMessages
// Auto-scroll to bottom when messages change
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight
}
}, [displayMessages])
return (
<div className="flex-1 flex overflow-hidden bg-white dark:bg-[#1a1c22]">
<ChatSidebar
@@ -169,7 +181,7 @@ export function ChatContainer({ initialConversations, notebooks }: ChatContainer
/>
<div className="flex-1 flex flex-col h-full overflow-hidden">
<div className="flex-1 overflow-y-auto scrollbar-hide pb-6 w-full flex justify-center">
<div ref={scrollRef} className="flex-1 overflow-y-auto scrollbar-hide pb-6 w-full flex justify-center">
<ChatMessages messages={displayMessages} isLoading={isLoading || isLoadingHistory} />
</div>
@@ -180,6 +192,9 @@ export function ChatContainer({ initialConversations, notebooks }: ChatContainer
isLoading={isLoading}
notebooks={notebooks}
currentNotebookId={selectedNotebook || null}
webSearchEnabled={webSearchEnabled}
onToggleWebSearch={() => setWebSearchEnabled(prev => !prev)}
webSearchAvailable={webSearchAvailable}
/>
</div>
</div>

29
keep-notes/components/chat/chat-input.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { useState, useRef, useEffect } from 'react'
import { Send, BookOpen, X } from 'lucide-react'
import { Send, BookOpen, X, Globe } from 'lucide-react'
import { getNotebookIcon } from '@/lib/notebook-icon'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
@@ -21,9 +21,12 @@ interface ChatInputProps {
isLoading?: boolean
notebooks: any[]
currentNotebookId?: string | null
webSearchEnabled?: boolean
onToggleWebSearch?: () => void
webSearchAvailable?: boolean
}
export function ChatInput({ onSend, isLoading, notebooks, currentNotebookId }: ChatInputProps) {
export function ChatInput({ onSend, isLoading, notebooks, currentNotebookId, webSearchEnabled, onToggleWebSearch, webSearchAvailable }: ChatInputProps) {
const { t } = useLanguage()
const [input, setInput] = useState('')
const [selectedNotebook, setSelectedNotebook] = useState<string | undefined>(currentNotebookId || undefined)
@@ -76,8 +79,8 @@ export function ChatInput({ onSend, isLoading, notebooks, currentNotebookId }: C
<div className="flex items-center justify-between px-3 pb-3 pt-1">
{/* Context Selector */}
<div className="flex items-center gap-2">
<Select
value={selectedNotebook || 'global'}
<Select
value={selectedNotebook || 'global'}
onValueChange={(val) => setSelectedNotebook(val === 'global' ? undefined : val)}
>
<SelectTrigger className="h-8 w-auto min-w-[130px] rounded-full bg-white dark:bg-[#1a1c22] border-slate-200 dark:border-white/10 shadow-sm text-xs font-medium gap-2 ring-offset-transparent focus:ring-0 focus:ring-offset-0 hover:bg-slate-50 dark:hover:bg-[#252830] transition-colors">
@@ -96,12 +99,28 @@ export function ChatInput({ onSend, isLoading, notebooks, currentNotebookId }: C
))}
</SelectContent>
</Select>
{selectedNotebook && (
<Badge variant="secondary" className="text-[10px] bg-primary/10 text-primary border-none rounded-full px-2.5 h-6 font-semibold tracking-wide">
{t('chat.active')}
</Badge>
)}
{webSearchAvailable && (
<button
type="button"
onClick={onToggleWebSearch}
className={cn(
"h-8 rounded-full border shadow-sm text-xs font-medium gap-1.5 flex items-center px-3 transition-all duration-200",
webSearchEnabled
? "bg-primary/10 text-primary border-primary/30 hover:bg-primary/20"
: "bg-white dark:bg-[#1a1c22] border-slate-200 dark:border-white/10 text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-[#252830]"
)}
>
<Globe className="h-3.5 w-3.5" />
{webSearchEnabled && t('chat.webSearch')}
</button>
)}
</div>
{/* Send Button */}

10
keep-notes/components/comparison-modal.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { useState } from 'react'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Sparkles, ThumbsUp, ThumbsDown, GitMerge, X } from 'lucide-react'
import { cn } from '@/lib/utils'
@@ -84,12 +84,12 @@ export function ComparisonModal({
<Sparkles className="h-5 w-5 text-amber-600 dark:text-amber-400" />
</div>
<div>
<h2 className="text-xl font-semibold">
<DialogTitle className="text-xl font-semibold">
{t('memoryEcho.comparison.title')}
</h2>
<p className="text-sm text-gray-600 dark:text-gray-400">
</DialogTitle>
<DialogDescription className="text-sm text-gray-600 dark:text-gray-400">
{t('memoryEcho.comparison.similarityInfo', { similarity: similarityPercentage })}
</p>
</DialogDescription>
</div>
</div>
<button

2
keep-notes/components/connections-overlay.tsx
View File

@@ -310,7 +310,7 @@ export function ConnectionsOverlay({
</div>
)}
{/* Footer - Action */}
{/* Footer - Actions */}
<div className="px-6 py-4 border-t dark:border-zinc-700">
<div className="flex items-center gap-2">
<Button

34
keep-notes/components/fusion-modal.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { useState, useEffect, useCallback, useRef } from 'react'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Checkbox } from '@/components/ui/checkbox'
@@ -114,8 +114,22 @@ export function FusionModal({
try {
// Parse the preview into title and content
const lines = fusionPreview.split('\n')
const title = lines[0].replace(/^#+\s*/, '').trim()
const content = lines.slice(1).join('\n').trim()
let title = ''
let content = fusionPreview.trim()
const firstLine = lines[0].trim()
if (firstLine.startsWith('#')) {
title = firstLine.replace(/^#+\s*/, '').trim()
content = lines.slice(1).join('\n').trim()
} else {
// No markdown heading — use first meaningful line as title
title = firstLine.length > 100 ? firstLine.substring(0, 100) + '...' : firstLine
content = lines.slice(1).join('\n').trim()
}
if (!title) {
title = notes[0]?.title || t('memoryEcho.comparison.untitled')
}
await onConfirmFusion(
{ title, content },
@@ -132,7 +146,7 @@ export function FusionModal({
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-3xl max-h-[90vh] overflow-hidden flex flex-col p-0">
<DialogContent showCloseButton={false} className="max-w-3xl max-h-[90vh] overflow-hidden flex flex-col p-0">
{/* Header */}
<div className="flex items-center justify-between p-6 border-b dark:border-zinc-700">
<div className="flex items-center gap-3">
@@ -140,19 +154,19 @@ export function FusionModal({
<Link2 className="h-5 w-5 text-purple-600 dark:text-purple-400" />
</div>
<div>
<h2 className="text-xl font-semibold">
<DialogTitle className="text-xl font-semibold">
{t('memoryEcho.fusion.title')}
</h2>
<p className="text-sm text-gray-600 dark:text-gray-400">
</DialogTitle>
<DialogDescription className="text-sm text-gray-600 dark:text-gray-400">
{t('memoryEcho.fusion.mergeNotes', { count: selectedNoteIds.length })}
</p>
</DialogDescription>
</div>
</div>
<button
onClick={onClose}
className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
className="p-1 rounded-md text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
>
<X className="h-6 w-6" />
<X className="h-5 w-5" />
</button>
</div>

1
keep-notes/components/memory-echo-notification.tsx
View File

@@ -209,6 +209,7 @@ export function MemoryEchoNotification({ onOpenNote }: MemoryEchoNotificationPro
type: 'text',
isMarkdown: true,
autoGenerated: true,
aiProvider: 'fusion',
notebookId: fusionNotes[0].notebookId ?? undefined
})
if (options.archiveOriginals) {

16
keep-notes/components/note-card.tsx
View File

@@ -462,6 +462,21 @@ export const NoteCard = memo(function NoteCard({
/>
)}
{/* Fusion Badge */}
{optimisticNote.aiProvider === 'fusion' && (
<div className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 border border-purple-200 dark:border-purple-800 flex items-center gap-1 group/badge relative mb-2 w-fit">
<Link2 className="h-2.5 w-2.5" />
{t('memoryEcho.fused')}
<button
onClick={handleRemoveFusedBadge}
className="ml-1 opacity-0 group-hover/badge:opacity-100 hover:opacity-100 transition-opacity"
title={t('notes.remove') || 'Remove'}
>
<Trash2 className="h-2.5 w-2.5" />
</button>
</div>
)}
{/* Title */}
{optimisticNote.title && (
<h3 className="text-base font-medium mb-2 pr-10 text-foreground">
@@ -684,6 +699,7 @@ export const NoteCard = memo(function NoteCard({
type: 'text',
isMarkdown: true,
autoGenerated: true,
aiProvider: 'fusion',
notebookId: fusionNotes[0].notebookId ?? undefined
})
if (options.archiveOriginals) {

1
keep-notes/components/note-editor.tsx
View File

@@ -1150,6 +1150,7 @@ export function NoteEditor({ note, readOnly = false, onClose }: NoteEditorProps)
type: 'text',
isMarkdown: true, // AI generates markdown content
autoGenerated: true, // Mark as AI-generated fused note
aiProvider: 'fusion',
notebookId: fusionNotes[0].notebookId ?? undefined // Keep the notebook from the first note, convert null to undefined
})

215
keep-notes/components/note-inline-editor.tsx
View File

@@ -27,8 +27,6 @@ import {
toggleArchive,
updateColor,
deleteNote,
removeImageFromNote,
leaveSharedNote,
createNote,
} from '@/app/actions/notes'
import { fetchLinkMetadata } from '@/app/actions/scrape'
@@ -55,8 +53,6 @@ import {
RotateCcw,
Languages,
ChevronRight,
Copy,
LogOut,
} from 'lucide-react'
import { toast } from 'sonner'
import { MarkdownContent } from '@/components/markdown-content'
@@ -108,12 +104,10 @@ export function NoteInlineEditor({
defaultPreviewMode = false,
}: NoteInlineEditorProps) {
const { t, language } = useLanguage()
const { labels: globalLabels, addLabel, refreshLabels } = useLabels()
const { labels: globalLabels, addLabel } = useLabels()
const [, startTransition] = useTransition()
const { triggerRefresh } = useNoteRefresh()
const isSharedNote = !!(note as any)._isShared
// ── Local edit state ──────────────────────────────────────────────────────
const [title, setTitle] = useState(note.title || '')
const [content, setContent] = useState(note.content || '')
@@ -132,34 +126,6 @@ export function NoteInlineEditor({
const changeContent = (c: string) => { setContent(c); onChange?.(note.id, { content: c }) }
const changeCheckItems = (ci: CheckItem[]) => { setCheckItems(ci); onChange?.(note.id, { checkItems: ci }) }
// Textarea ref for formatting toolbar
const textAreaRef = useRef<HTMLTextAreaElement>(null)
const applyFormat = (prefix: string, suffix: string = prefix) => {
const textarea = textAreaRef.current
if (!textarea) return
const start = textarea.selectionStart
const end = textarea.selectionEnd
const selected = content.substring(start, end)
const before = content.substring(0, start)
const after = content.substring(end)
const newContent = before + prefix + selected + suffix + after
changeContent(newContent)
scheduleSave()
// Restore cursor position after React re-renders
requestAnimationFrame(() => {
textarea.focus()
const newCursorPos = selected ? end + prefix.length + suffix.length : start + prefix.length
textarea.setSelectionRange(
selected ? start + prefix.length : start + prefix.length,
selected ? end + prefix.length : newCursorPos
)
})
}
// Link dialog
const [linkUrl, setLinkUrl] = useState('')
const [showLinkInput, setShowLinkInput] = useState(false)
@@ -272,78 +238,30 @@ export function NoteInlineEditor({
await updateNote(note.id, { labels: newLabels }, { skipRevalidation: true })
const globalExists = globalLabels.some((l) => l.name.toLowerCase() === tag.toLowerCase())
if (!globalExists) {
try {
await addLabel(tag)
// Refresh labels to get the new color assignment
await refreshLabels()
} catch {}
try { await addLabel(tag) } catch {}
}
toast.success(t('ai.tagAdded', { tag }))
}
}
const handleRemoveLabel = async (label: string) => {
const newLabels = (note.labels || []).filter((l) => l !== label)
// Optimistic UI
onChange?.(note.id, { labels: newLabels })
await updateNote(note.id, { labels: newLabels }, { skipRevalidation: true })
toast.success(t('labels.labelRemoved', { label }))
}
// ── Shared note actions ────────────────────────────────────────────────────
const handleMakeCopy = async () => {
try {
await createNote({
title: `${title || t('notes.untitled')} (${t('notes.copy')})`,
content,
color: note.color,
type: note.type,
checkItems: note.checkItems ?? undefined,
labels: note.labels ?? undefined,
images: note.images ?? undefined,
links: note.links ?? undefined,
isMarkdown,
})
toast.success(t('notes.copySuccess'))
triggerRefresh()
} catch (error) {
toast.error(t('notes.copyFailed'))
}
}
const handleLeaveShare = async () => {
try {
await leaveSharedNote(note.id)
toast.success(t('notes.leftShare') || 'Share removed')
triggerRefresh()
onDelete?.(note.id)
} catch (error) {
toast.error(t('general.error'))
}
const fetchNotesByIds = async (noteIds: string[]) => {
const fetched = await Promise.all(noteIds.map(async (id) => {
try {
const res = await fetch(`/api/notes/${id}`)
if (!res.ok) return null
const data = await res.json()
return data.success && data.data ? data.data : null
} catch { return null }
}))
return fetched.filter((n: any) => n !== null) as Array<Partial<Note>>
}
const handleMergeNotes = async (noteIds: string[]) => {
const fetched = await Promise.all(noteIds.map(async (id) => {
try {
const res = await fetch(`/api/notes/${id}`)
if (!res.ok) return null
const data = await res.json()
return data.success && data.data ? data.data : null
} catch { return null }
}))
setFusionNotes(fetched.filter((n: any) => n !== null) as Array<Partial<Note>>)
setFusionNotes(await fetchNotesByIds(noteIds))
}
const handleCompareNotes = async (noteIds: string[]) => {
const fetched = await Promise.all(noteIds.map(async (id) => {
try {
const res = await fetch(`/api/notes/${id}`)
if (!res.ok) return null
const data = await res.json()
return data.success && data.data ? data.data : null
} catch { return null }
}))
setComparisonNotes(fetched.filter((n: any) => n !== null) as Array<Partial<Note>>)
setComparisonNotes(await fetchNotesByIds(noteIds))
}
const handleConfirmFusion = async ({ title, content }: { title: string; content: string }, options: { archiveOriginals: boolean; keepAllTags: boolean; useLatestTitle: boolean; createBacklinks: boolean }) => {
@@ -357,11 +275,12 @@ export function NoteInlineEditor({
type: 'text',
isMarkdown: true,
autoGenerated: true,
aiProvider: 'fusion',
notebookId: fusionNotes[0].notebookId ?? undefined
})
if (options.archiveOriginals) {
for (const n of fusionNotes) {
if (n.id) await updateNote(n.id, { isArchived: true }, { skipRevalidation: true })
if (n.id) await updateNote(n.id, { isArchived: true })
}
}
toast.success(t('toast.notesFusionSuccess'))
@@ -395,21 +314,10 @@ export function NoteInlineEditor({
}
const handleDelete = () => {
toast(t('notes.confirmDelete'), {
action: {
label: t('notes.delete'),
onClick: () => {
startTransition(async () => {
await deleteNote(note.id)
onDelete?.(note.id)
})
},
},
cancel: {
label: t('common.cancel'),
onClick: () => {},
},
duration: 5000,
if (!confirm(t('notes.confirmDelete'))) return
startTransition(async () => {
await deleteNote(note.id)
onDelete?.(note.id)
})
}
@@ -437,7 +345,7 @@ export function NoteInlineEditor({
const handleRemoveImage = async (index: number) => {
const newImages = (note.images || []).filter((_, i) => i !== index)
onChange?.(note.id, { images: newImages })
await removeImageFromNote(note.id, index)
await updateNote(note.id, { images: newImages })
}
// ── Link ──────────────────────────────────────────────────────────────────
@@ -581,27 +489,7 @@ export function NoteInlineEditor({
return (
<div className="flex h-full flex-col overflow-hidden">
{/* ── Shared note banner ──────────────────────────────────────────── */}
{isSharedNote && (
<div className="flex items-center justify-between border-b border-border/30 bg-primary/5 dark:bg-primary/10 px-4 py-2">
<span className="text-xs font-medium text-primary">
{t('notes.sharedReadOnly') || 'Lecture seule — note partagée'}
</span>
<div className="flex items-center gap-1">
<Button variant="default" size="sm" className="h-7 gap-1.5 text-xs" onClick={handleMakeCopy}>
<Copy className="h-3.5 w-3.5" />
{t('notes.makeCopy') || 'Copier'}
</Button>
<Button variant="ghost" size="sm" className="h-7 gap-1.5 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30" onClick={handleLeaveShare}>
<LogOut className="h-3.5 w-3.5" />
{t('notes.leaveShare') || 'Quitter'}
</Button>
</div>
</div>
)}
{/* ── Toolbar (hidden for shared notes) ────────────────────────────── */}
{!isSharedNote && (
{/* ── Toolbar ────────────────────────────────────────────────────────── */}
<div className="flex shrink-0 items-center justify-between border-b border-border/30 px-4 py-2">
<div className="flex items-center gap-1">
{/* Image upload */}
@@ -789,6 +677,12 @@ export function NoteInlineEditor({
)}
</span>
{/* Pin */}
<Button variant="ghost" size="sm" className="h-8 w-8 p-0"
title={note.isPinned ? t('notes.unpin') : t('notes.pin')} onClick={handleTogglePin}>
<Pin className={cn('h-4 w-4', note.isPinned && 'fill-current text-primary')} />
</Button>
{/* Color picker */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
@@ -835,7 +729,6 @@ export function NoteInlineEditor({
</DropdownMenu>
</div>
</div>
)}
{/* ── Link input bar (inline) ───────────────────────────────────────── */}
{showLinkInput && (
@@ -863,11 +756,7 @@ export function NoteInlineEditor({
<div className="flex shrink-0 flex-wrap items-center gap-1.5 border-b border-border/20 px-8 py-2">
{/* Existing labels */}
{(note.labels ?? []).map((label) => (
<LabelBadge
key={label}
label={label}
onRemove={() => handleRemoveLabel(label)}
/>
<LabelBadge key={label} label={label} />
))}
{/* AI-suggested tags inline with labels */}
<GhostTags
@@ -891,7 +780,6 @@ export function NoteInlineEditor({
placeholder={t('notes.titlePlaceholder') || 'Titre…'}
value={title}
onChange={(e) => { changeTitle(e.target.value); scheduleSave() }}
readOnly={isSharedNote}
/>
{/* AI title suggestion — show when title is empty and there's content */}
{!title && content.trim().split(/\s+/).filter(Boolean).length >= 5 && (
@@ -976,21 +864,17 @@ export function NoteInlineEditor({
<MarkdownContent content={content || ''} />
</div>
) : (
<>
<textarea
ref={textAreaRef}
dir="auto"
className="flex-1 w-full resize-none bg-transparent text-sm leading-relaxed text-foreground outline-none placeholder:text-muted-foreground/40"
placeholder={isMarkdown
? t('notes.takeNoteMarkdown') || 'Écris en Markdown…'
: t('notes.takeNote') || 'Écris quelque chose…'
}
value={content}
onChange={(e) => { changeContent(e.target.value); scheduleSave() }}
readOnly={isSharedNote}
style={{ minHeight: '200px' }}
/>
</>
<textarea
dir="auto"
className="flex-1 w-full resize-none bg-transparent text-sm leading-relaxed text-foreground outline-none placeholder:text-muted-foreground/40"
placeholder={isMarkdown
? t('notes.takeNoteMarkdown') || 'Écris en Markdown…'
: t('notes.takeNote') || 'Écris quelque chose…'
}
value={content}
onChange={(e) => { changeContent(e.target.value); scheduleSave() }}
style={{ minHeight: '200px' }}
/>
)}
{/* Ghost tag suggestions are now shown in the top labels strip */}
@@ -1049,17 +933,18 @@ export function NoteInlineEditor({
</div>
)}
</div>
{/* ── Memory Echo Connections Section (not for shared notes) ── */}
{!isSharedNote && (
<EditorConnectionsSection
noteId={note.id}
onMergeNotes={handleMergeNotes}
onCompareNotes={handleCompareNotes}
/>
)}
</div>
{/* ── Memory Echo Connections Section ── */}
<EditorConnectionsSection
noteId={note.id}
onOpenNote={(connNoteId) => {
window.open(`/?note=${connNoteId}`, '_blank')
}}
onCompareNotes={handleCompareNotes}
onMergeNotes={handleMergeNotes}
/>
{/* ── Footer ───────────────────────────────────────────────────────────── */}
<div className="shrink-0 border-t border-border/20 px-8 py-2">
<div className="flex items-center gap-3 text-[11px] text-muted-foreground/40">