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" />}