style: restore blue accents for AI dialog components and standardize gold header
This commit is contained in:
Antigravity
@@ -158,7 +158,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
|
||||
|
||||
return (
|
||||
<aside className={cn(
|
||||
"fixed bottom-20 right-6 border border-border/40 bg-card flex flex-col z-40 shadow-2xl rounded-2xl overflow-hidden transition-all duration-300",
|
||||
"fixed bottom-20 right-6 border border-border/40 bg-[#FDFDFE] flex flex-col z-40 shadow-2xl rounded-2xl overflow-hidden transition-all duration-300",
|
||||
isExpanded ? "w-[80vw] h-[85vh] max-w-[1200px]" : "h-[700px] max-h-[85vh] w-[360px]"
|
||||
)}>
|
||||
{/* Header */}
|
||||
@@ -255,7 +255,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
|
||||
<div className={cn(
|
||||
'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 border text-[10px] font-bold',
|
||||
msg.role === 'user'
|
||||
? 'bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300'
|
||||
? 'bg-zinc-100 border-zinc-200 text-zinc-600'
|
||||
: 'bg-[#75B2D6]/10 text-[#75B2D6] border-[#75B2D6]/20',
|
||||
)}>
|
||||
{msg.role === 'user' ? 'U' : <Bot className="h-4 w-4" />}
|
||||
@@ -350,7 +350,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
|
||||
<div className="mb-3">
|
||||
<span className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground block mb-1.5 ml-1">{t('ai.discussionContextLabel')}</span>
|
||||
<Select value={chatScope} onValueChange={setChatScope}>
|
||||
<SelectTrigger className="h-8 text-xs bg-card border-border/60">
|
||||
<SelectTrigger className="h-8 text-xs bg-[#FDFDFE] border-border/60">
|
||||
<SelectValue placeholder={t('ai.selectNotebook')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -388,7 +388,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
|
||||
"py-1 rounded-md border text-[10px] font-medium transition-all flex flex-col items-center justify-center gap-0.5",
|
||||
isSelected
|
||||
? "border-[#75B2D6] bg-[#75B2D6]/10 text-[#75B2D6] shadow-sm"
|
||||
: "border-border/60 bg-card text-muted-foreground hover:bg-muted hover:border-border"
|
||||
: "border-border/60 bg-[#FDFDFE] text-muted-foreground hover:bg-muted hover:border-border"
|
||||
)}
|
||||
>
|
||||
<Icon className="h-3 w-3" />
|
||||
@@ -400,7 +400,7 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
|
||||
</div>
|
||||
|
||||
{/* Text Input */}
|
||||
<div className="relative bg-card border border-border/60 rounded-xl p-1 focus-within:border-[#75B2D6] focus-within:ring-1 focus-within:ring-[#75B2D6]/20 transition-all shadow-sm">
|
||||
<div className="relative bg-[#FDFDFE] border border-border/60 rounded-xl p-1 focus-within:border-[#75B2D6] focus-within:ring-1 focus-within:ring-[#75B2D6]/20 transition-all shadow-sm">
|
||||
<textarea
|
||||
className="w-full bg-transparent border-none focus:ring-0 resize-none text-sm text-foreground placeholder:text-muted-foreground/70 p-2 min-h-[60px] max-h-[120px]"
|
||||
placeholder={t('ai.chatPlaceholder')}
|
||||
|
||||
@@ -482,7 +482,7 @@ export function ContextualAIChat({
|
||||
/>
|
||||
)}
|
||||
<aside className={cn(
|
||||
'border-l border-border bg-[#F9F8F6] flex flex-col flex-shrink-0 z-10 transition-all duration-300 shadow-2xl',
|
||||
'border-l border-border bg-[#FDFDFE] flex flex-col flex-shrink-0 z-10 transition-all duration-300 shadow-2xl',
|
||||
expanded
|
||||
? 'fixed right-0 top-0 h-screen w-[640px] z-[200]'
|
||||
: 'h-full w-[360px]',
|
||||
@@ -492,7 +492,7 @@ export function ContextualAIChat({
|
||||
<div className="p-6 border-b border-border shrink-0">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0 space-y-2">
|
||||
<h2 className="font-serif text-xl font-medium text-[#D4A373] flex items-center gap-2 leading-tight">
|
||||
<h2 className="font-serif text-xl font-medium text-[#1C1C1C] flex items-center gap-2 leading-tight">
|
||||
<Sparkles className="h-[18px] w-[18px] shrink-0 text-[#D4A373]" />
|
||||
IA Assistant
|
||||
</h2>
|
||||
@@ -534,7 +534,7 @@ export function ContextualAIChat({
|
||||
>
|
||||
{tab.label}
|
||||
{activeTab === tab.id && (
|
||||
<motion.div layoutId="activeTab" className="absolute bottom-0 left-0 right-0 h-[2px] bg-[#D4A373]" />
|
||||
<motion.div layoutId="activeTab" className="absolute bottom-0 left-0 right-0 h-[2px] bg-[#75B2D6]" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
@@ -542,9 +542,9 @@ export function ContextualAIChat({
|
||||
|
||||
<div className="flex-1 flex flex-col min-h-0 relative">
|
||||
{actionPreview && (
|
||||
<div className="absolute inset-0 z-20 flex flex-col bg-[#F2F0E9]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
|
||||
<div className="absolute inset-0 z-20 flex flex-col bg-[#FDFDFE]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
|
||||
<div className="px-6 py-4 border-b border-border flex items-center justify-between shrink-0">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-[#D4A373]">{actionPreview.label}</p>
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-[#75B2D6]">{actionPreview.label}</p>
|
||||
<button onClick={handleDiscardPreview} className="text-[#1C1C1C]/40 hover:text-[#1C1C1C]"><X size={18} /></button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
|
||||
@@ -554,13 +554,13 @@ export function ContextualAIChat({
|
||||
</div>
|
||||
<div className="p-6 border-t border-border flex gap-3 shrink-0">
|
||||
<button onClick={handleDiscardPreview} className="flex-1 py-3.5 text-[10px] font-bold uppercase tracking-widest text-[#1C1C1C]/40 hover:text-[#1C1C1C] transition-all">ANNULER</button>
|
||||
<button onClick={handleApplyPreview} className="flex-1 py-3.5 bg-[#1C1C1C] text-[#F2F0E9] rounded-xl text-[10px] font-bold uppercase tracking-widest shadow-lg transition-all hover:opacity-90">APPLIQUER À LA NOTE</button>
|
||||
<button onClick={handleApplyPreview} className="flex-1 py-3.5 bg-[#1C1C1C] text-[#FDFDFE] rounded-xl text-[10px] font-bold uppercase tracking-widest shadow-lg transition-all hover:opacity-90">APPLIQUER À LA NOTE</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{resourcePreview && (
|
||||
<div className="absolute inset-0 z-20 flex flex-col bg-[#F2F0E9]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
|
||||
<div className="absolute inset-0 z-20 flex flex-col bg-[#FDFDFE]/95 backdrop-blur-md animate-in fade-in slide-in-from-top-4 duration-300">
|
||||
<div className="px-6 py-4 border-b border-border/40 flex items-center justify-between shrink-0">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-[#75B2D6]">
|
||||
{resourcePreview.source === 'chat' ? 'Injecter depuis Discussion' : 'Aperçu IA'}
|
||||
@@ -594,7 +594,7 @@ export function ContextualAIChat({
|
||||
{messages.length === 0 && (
|
||||
<div className="h-full flex flex-col items-center justify-center text-center space-y-6 py-12">
|
||||
<div className="w-20 h-20 rounded-full bg-white/40 backdrop-blur-sm border border-dashed border-border flex items-center justify-center shadow-sm">
|
||||
<MessageSquare size={32} className="text-[#D4A373]/30" />
|
||||
<MessageSquare size={32} className="text-[#75B2D6]/60" />
|
||||
</div>
|
||||
<p className="text-xs font-serif italic text-[#1C1C1C]/40 leading-relaxed max-w-[200px]">Posez une question à l'Assistant pour commencer.</p>
|
||||
</div>
|
||||
@@ -606,12 +606,12 @@ export function ContextualAIChat({
|
||||
return (
|
||||
<div key={msg.id} className={cn('flex flex-col gap-3', !isAssistant && 'items-end')} onMouseEnter={() => isAssistant && setHoveredMsgId(msg.id)} onMouseLeave={() => setHoveredMsgId(null)}>
|
||||
<div className="relative group max-w-[95%]">
|
||||
<div className={cn('p-5 rounded-2xl text-sm leading-relaxed transition-all shadow-sm', !isAssistant ? 'bg-[#1C1C1C] text-[#F2F0E9]' : 'bg-white/60 backdrop-blur-sm border border-border text-[#1C1C1C]')}>
|
||||
<div className={cn('p-5 rounded-2xl text-sm leading-relaxed transition-all shadow-sm', !isAssistant ? 'bg-[#1C1C1C] text-[#FDFDFE]' : 'bg-white/60 backdrop-blur-sm border border-border text-[#1C1C1C]')}>
|
||||
{isAssistant ? <MarkdownContent content={content} /> : <p className="font-medium">{content}</p>}
|
||||
</div>
|
||||
{isAssistant && onApplyToNote && (hoveredMsgId === msg.id || messages.at(-1)?.id === msg.id) && (
|
||||
<div className="flex gap-2 mt-3 opacity-0 group-hover:opacity-100 transition-all">
|
||||
<button onClick={() => handleInjectFromChat(content, 'replace')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-[#1C1C1C] text-[#F2F0E9] hover:opacity-90">REPLACER</button>
|
||||
<button onClick={() => handleInjectFromChat(content, 'replace')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-[#1C1C1C] text-[#FDFDFE] hover:opacity-90">REPLACER</button>
|
||||
<button onClick={() => handleInjectFromChat(content, 'complete')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-white/40 backdrop-blur-sm border border-border text-[#1C1C1C] hover:bg-white/60">COMPLÉTER</button>
|
||||
<button onClick={() => handleInjectFromChat(content, 'merge')} className="px-3 py-1.5 rounded-lg text-[9px] font-bold uppercase tracking-widest bg-white/40 backdrop-blur-sm border border-border text-[#1C1C1C] hover:bg-white/60">FUSIONNER</button>
|
||||
</div>
|
||||
@@ -623,7 +623,7 @@ export function ContextualAIChat({
|
||||
{isLoading && (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="bg-white/60 backdrop-blur-sm border border-border p-5 rounded-2xl shadow-sm w-fit">
|
||||
<div className="flex gap-1.5"><span className="w-1.5 h-1.5 bg-[#D4A373] rounded-full animate-pulse" /><span className="w-1.5 h-1.5 bg-[#D4A373] rounded-full animate-pulse delay-75" /><span className="w-1.5 h-1.5 bg-[#D4A373] rounded-full animate-pulse delay-150" /></div>
|
||||
<div className="flex gap-1.5"><span className="w-1.5 h-1.5 bg-[#75B2D6] rounded-full animate-pulse" /><span className="w-1.5 h-1.5 bg-[#75B2D6] rounded-full animate-pulse delay-75" /><span className="w-1.5 h-1.5 bg-[#75B2D6] rounded-full animate-pulse delay-150" /></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -642,7 +642,7 @@ export function ContextualAIChat({
|
||||
<SelectValue />
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-xl border-border shadow-xl bg-[#F2F0E9]">
|
||||
<SelectContent className="rounded-xl border-border shadow-xl bg-[#FDFDFE]">
|
||||
<SelectItem value="note" className="text-[11px] py-2.5 uppercase tracking-wider font-bold">Cette note</SelectItem>
|
||||
<SelectItem value="all" className="text-[11px] py-2.5 uppercase tracking-wider font-bold">Tout Momento</SelectItem>
|
||||
{notebooks.map(nb => (
|
||||
@@ -664,11 +664,11 @@ export function ContextualAIChat({
|
||||
className={cn(
|
||||
'h-[52px] rounded-xl border transition-all flex flex-col items-center justify-center gap-1.5 shadow-sm',
|
||||
isActive
|
||||
? 'bg-[#ACB995]/10 border-[#ACB995] text-[#ACB995]'
|
||||
? 'bg-[#75B2D6]/10 border-[#75B2D6] text-[#75B2D6]'
|
||||
: 'bg-white/60 border-border text-[#1C1C1C]/40 hover:border-[#1C1C1C]/20'
|
||||
)}
|
||||
>
|
||||
<Icon size={14} className={isActive ? 'text-[#ACB995]' : 'text-[#1C1C1C]/40'} />
|
||||
<Icon size={14} className={isActive ? 'text-[#75B2D6]' : 'text-[#1C1C1C]/40'} />
|
||||
<span className="text-[9px] font-bold uppercase tracking-tight">{tone.label}</span>
|
||||
</button>
|
||||
)
|
||||
@@ -680,7 +680,7 @@ export function ContextualAIChat({
|
||||
<div className="relative">
|
||||
<textarea
|
||||
rows={4}
|
||||
className="w-full bg-white/60 border border-border rounded-2xl p-5 pr-14 text-sm outline-none focus:border-[#ACB995] transition-all resize-none leading-relaxed font-light custom-scrollbar shadow-sm text-[#1C1C1C]"
|
||||
className="w-full bg-white/60 border border-border rounded-2xl p-5 pr-14 text-sm outline-none focus:border-[#75B2D6] transition-all resize-none leading-relaxed font-light custom-scrollbar shadow-sm text-[#1C1C1C]"
|
||||
placeholder="Posez votre question sur cette note..."
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
@@ -690,12 +690,12 @@ export function ContextualAIChat({
|
||||
<div className="absolute right-4 bottom-4 flex gap-2">
|
||||
<button
|
||||
onClick={() => setWebSearch(!webSearch)}
|
||||
className={cn("p-2.5 rounded-xl transition-colors", webSearch ? "text-[#ACB995] bg-[#ACB995]/10" : "text-[#1C1C1C]/20 hover:text-[#1C1C1C]")}
|
||||
className={cn("p-2.5 rounded-xl transition-colors", webSearch ? "text-[#75B2D6] bg-[#75B2D6]/10" : "text-[#1C1C1C]/20 hover:text-[#1C1C1C]")}
|
||||
title="Web Search"
|
||||
>
|
||||
<Globe size={18} />
|
||||
</button>
|
||||
<button onClick={handleSend} disabled={!input.trim() || isLoading} className="p-2.5 bg-[#ACB995] text-white rounded-xl transition-all hover:scale-105 active:scale-95 shadow-lg shadow-[#ACB995]/20 disabled:opacity-30">
|
||||
<button onClick={handleSend} disabled={!input.trim() || isLoading} className="p-2.5 bg-[#75B2D6] text-white rounded-xl transition-all hover:scale-105 active:scale-95 shadow-lg shadow-[#75B2D6]/20 disabled:opacity-30">
|
||||
<Send size={18} />
|
||||
</button>
|
||||
</div>
|
||||
@@ -725,7 +725,7 @@ export function ContextualAIChat({
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
onClick={onUndoLastAction}
|
||||
className="w-full py-3.5 bg-[#D4A373]/20 border border-[#D4A373]/50 rounded-xl flex items-center justify-center gap-2 text-[11px] font-bold text-[#D4A373] uppercase tracking-[0.2em] hover:bg-[#D4A373]/30 transition-all shadow-md"
|
||||
className="w-full py-3.5 bg-[#75B2D6]/20 border border-[#75B2D6]/50 rounded-xl flex items-center justify-center gap-2 text-[11px] font-bold text-[#75B2D6] uppercase tracking-[0.2em] hover:bg-[#75B2D6]/30 transition-all shadow-md"
|
||||
>
|
||||
<RotateCcw size={12} /> {t('ai.undoLastAction')}
|
||||
</motion.button>
|
||||
@@ -736,11 +736,11 @@ export function ContextualAIChat({
|
||||
const isActive = action.id === 'translate' && showLangPicker
|
||||
const Icon = action.icon
|
||||
return (
|
||||
<button key={i} onClick={() => action.id === 'translate' ? setShowLangPicker(v => !v) : handleAction(action)} disabled={!!actionLoading} className={cn("flex flex-col items-center gap-3 p-4 bg-white/40 backdrop-blur-sm border rounded-xl transition-all group shadow-sm", isActive ? "border-[#ACB995] bg-[#ACB995]/5" : "border-border hover:border-[#1C1C1C]/20")}>
|
||||
<div className={cn("p-2 rounded-lg bg-white/60 transition-colors group-hover:bg-[#1C1C1C] group-hover:text-[#F2F0E9] shadow-sm", loading && "animate-pulse", isActive && "bg-[#ACB995] text-white")}>
|
||||
<button key={i} onClick={() => action.id === 'translate' ? setShowLangPicker(v => !v) : handleAction(action)} disabled={!!actionLoading} className={cn("flex flex-col items-center gap-3 p-4 bg-white/40 backdrop-blur-sm border rounded-xl transition-all group shadow-sm", isActive ? "border-[#75B2D6] bg-[#75B2D6]/5" : "border-border hover:border-[#1C1C1C]/20")}>
|
||||
<div className={cn("p-2 rounded-lg bg-white/60 transition-colors group-hover:bg-[#1C1C1C] group-hover:text-[#FDFDFE] shadow-sm", loading && "animate-pulse", isActive && "bg-[#75B2D6] text-white")}>
|
||||
{loading ? <Loader2 size={14} className="animate-spin" /> : <Icon size={14} />}
|
||||
</div>
|
||||
<span className={cn("text-[10px] font-bold uppercase tracking-widest", isActive ? "text-[#ACB995]" : "text-[#1C1C1C]/80")}>{t(action.i18nKey)}</span>
|
||||
<span className={cn("text-[10px] font-bold uppercase tracking-widest", isActive ? "text-[#75B2D6]" : "text-[#1C1C1C]/80")}>{t(action.i18nKey)}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
@@ -763,7 +763,7 @@ export function ContextualAIChat({
|
||||
className={cn(
|
||||
"py-2 px-1 rounded-lg border text-[10px] font-bold uppercase tracking-tighter transition-all",
|
||||
translateTarget === lang
|
||||
? "bg-[#ACB995] border-[#ACB995] text-white shadow-md shadow-[#ACB995]/20"
|
||||
? "bg-[#75B2D6] border-[#75B2D6] text-white shadow-md shadow-[#75B2D6]/20"
|
||||
: "bg-white/60 border-border text-[#1C1C1C]/60 hover:border-[#1C1C1C]/20"
|
||||
)}
|
||||
>
|
||||
@@ -862,13 +862,13 @@ export function ContextualAIChat({
|
||||
</button>
|
||||
|
||||
{generateResult?.type === 'slides' && generateResult.canvasId && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mt-4 p-4 bg-[#75B2D6]/10 border border-[#75B2D6]/20 rounded-xl space-y-3"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[9px] font-bold text-[#75B2D6] uppercase tracking-widest flex items-center gap-1.5">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mt-4 p-4 bg-[#75B2D6]/10 border border-[#75B2D6]/20 rounded-xl space-y-3"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[9px] font-bold text-[#75B2D6] uppercase tracking-widest flex items-center gap-1.5">
|
||||
<Check size={12} /> Présentation prête
|
||||
</span>
|
||||
<a
|
||||
@@ -905,7 +905,7 @@ export function ContextualAIChat({
|
||||
mToast.error('Échec du téléchargement')
|
||||
}
|
||||
}}
|
||||
className="flex items-center justify-center gap-2 w-full py-2.5 bg-[#ACB995] text-white rounded-lg text-[10px] font-bold uppercase tracking-[0.15em] hover:opacity-90 transition-opacity shadow-sm"
|
||||
className="flex items-center justify-center gap-2 w-full py-2.5 bg-[#75B2D6] text-white rounded-lg text-[10px] font-bold uppercase tracking-[0.15em] hover:opacity-90 transition-opacity shadow-sm"
|
||||
>
|
||||
<Download size={13} />
|
||||
Télécharger .pptx
|
||||
|
||||
@@ -477,7 +477,7 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
|
||||
className="flex items-center gap-2 text-[13px] text-foreground font-medium hover:opacity-70 transition-opacity"
|
||||
>
|
||||
<Sparkles size={16} />
|
||||
<span>Réorganiser les notes</span>
|
||||
<span>{t('notes.reorganize') || 'Réorganiser les notes'}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -46,8 +46,8 @@ export function LabelBadge({
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{isAI && <Sparkles className="h-3 w-3 text-sky-500 dark:text-sky-400" />}
|
||||
{label}
|
||||
{isAI && <Sparkles className="h-3 w-3 text-[#75B2D6]" />}
|
||||
<span className="truncate">{label}</span>
|
||||
{onRemove && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
@@ -60,9 +60,9 @@ export function LabelBadge({
|
||||
</button>
|
||||
)}
|
||||
{isAI && (
|
||||
<span className="relative flex h-1.5 w-1.5 ml-0.5">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-sky-500"></span>
|
||||
<span className="relative flex h-1.5 w-1.5 ml-1">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#75B2D6] opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#75B2D6]"></span>
|
||||
</span>
|
||||
)}
|
||||
</Badge>
|
||||
|
||||
@@ -120,7 +120,7 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
|
||||
{/* Section 1: What is MCP */}
|
||||
<div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden break-inside-avoid">
|
||||
<div className="flex items-center gap-3 p-6 border-b border-border">
|
||||
<div className="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500 shrink-0">
|
||||
<div className="w-10 h-10 rounded-full bg-zinc-500/10 flex items-center justify-center text-zinc-500 shrink-0">
|
||||
<Info className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
@@ -135,7 +135,7 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
|
||||
href="https://modelcontextprotocol.io"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-sm text-blue-600 hover:underline mt-4"
|
||||
className="inline-flex items-center gap-1 text-sm text-zinc-600 hover:underline mt-4"
|
||||
>
|
||||
{t('mcpSettings.whatIsMcp.learnMore')}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
@@ -156,7 +156,7 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
|
||||
<div className="p-6">
|
||||
<div className="space-y-4 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-muted-foreground">{t('mcpSettings.serverStatus.mode')}</span>
|
||||
<span className="text-zinc-600">{t('mcpSettings.serverStatus.mode')}</span>
|
||||
<Badge variant="secondary">{serverStatus.mode.toUpperCase()}</Badge>
|
||||
</div>
|
||||
{serverStatus.mode === 'sse' && serverStatus.url && (
|
||||
|
||||
@@ -48,11 +48,11 @@ interface ReminderNote {
|
||||
|
||||
// ── Memento brand tokens ──────────────────────────────────────────────────────
|
||||
const C = {
|
||||
blue: '#E9ECEF',
|
||||
blue: '#FDFDFE',
|
||||
gold: '#D4A373',
|
||||
green: '#A3B18A',
|
||||
dark: '#1C1C1C',
|
||||
beige: '#F2F0E9',
|
||||
beige: '#FDFDFE',
|
||||
}
|
||||
|
||||
export function NotificationPanel() {
|
||||
@@ -148,19 +148,19 @@ export function NotificationPanel() {
|
||||
|
||||
// ── icon bg/color per notification type ──────────────────────────────────
|
||||
const notifIconStyle = (type: string) => {
|
||||
if (type === 'agent_success') return { bg: `${C.green}20`, color: C.green }
|
||||
if (type === 'agent_slides_ready') return { bg: `${C.blue}20`, color: C.blue }
|
||||
if (type === 'agent_canvas_ready') return { bg: `${C.blue}20`, color: C.blue }
|
||||
if (type === 'agent_success') return { bg: `${C.gold}20`, color: C.gold }
|
||||
if (type === 'agent_slides_ready') return { bg: `${C.gold}20`, color: C.gold }
|
||||
if (type === 'agent_canvas_ready') return { bg: `${C.gold}20`, color: C.gold }
|
||||
if (type === 'agent_failure') return { bg: '#EF444420', color: '#EF4444' }
|
||||
return { bg: `${C.gold}20`, color: C.gold }
|
||||
return { bg: `${C.green}20`, color: C.green }
|
||||
}
|
||||
|
||||
const notifLabelColor = (type: string) => {
|
||||
if (type === 'agent_success') return C.green
|
||||
if (type === 'agent_slides_ready') return C.blue
|
||||
if (type === 'agent_canvas_ready') return C.blue
|
||||
if (type === 'agent_failure') return '#EF4444'
|
||||
return C.gold
|
||||
if (type.startsWith('agent')) {
|
||||
if (type === 'agent_failure') return '#EF4444'
|
||||
return C.gold
|
||||
}
|
||||
return C.green
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -173,7 +173,7 @@ export function NotificationPanel() {
|
||||
{pendingCount > 0 && (
|
||||
<span
|
||||
className="absolute -top-1 -right-1 h-4 w-4 flex items-center justify-center rounded-full text-white text-[9px] font-bold border border-white shadow-sm"
|
||||
style={{ background: C.gold }}
|
||||
style={{ background: C.green }}
|
||||
>
|
||||
{pendingCount > 9 ? '9+' : pendingCount}
|
||||
</span>
|
||||
@@ -181,9 +181,9 @@ export function NotificationPanel() {
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent align="end" className="w-80 p-0 rounded-2xl overflow-hidden shadow-xl border border-black/10">
|
||||
<PopoverContent align="end" className="w-80 p-0 rounded-2xl overflow-hidden shadow-2xl border border-black/20">
|
||||
{/* Header */}
|
||||
<div className="px-4 py-3 border-b flex items-center justify-between" style={{ background: `${C.beige}` }}>
|
||||
<div className="px-4 py-3 border-b flex items-center justify-between" style={{ background: '#FDFDFE' }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Bell className="h-4 w-4" style={{ color: C.dark }} />
|
||||
<span className="font-bold text-sm tracking-tight" style={{ color: C.dark }}>
|
||||
@@ -203,7 +203,7 @@ export function NotificationPanel() {
|
||||
{pendingCount > 0 && (
|
||||
<span
|
||||
className="h-5 px-1.5 flex items-center justify-center rounded-full text-white text-[9px] font-bold"
|
||||
style={{ background: C.gold }}
|
||||
style={{ background: C.green }}
|
||||
>
|
||||
{pendingCount}
|
||||
</span>
|
||||
@@ -323,15 +323,15 @@ export function NotificationPanel() {
|
||||
<button
|
||||
onClick={() => handleToggleReminder(note.id, true)}
|
||||
className="mt-0.5 flex-none transition-colors hover:opacity-70"
|
||||
style={{ color: C.gold }}
|
||||
style={{ color: C.green }}
|
||||
title={t('reminders.markDone')}
|
||||
>
|
||||
<Circle className="w-4 h-4" />
|
||||
</button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5 mb-0.5">
|
||||
<AlertCircle className="w-3 h-3" style={{ color: C.gold }} />
|
||||
<span className="text-[9px] font-bold uppercase tracking-[0.2em]" style={{ color: C.gold }}>
|
||||
<AlertCircle className="w-3 h-3" style={{ color: C.green }} />
|
||||
<span className="text-[9px] font-bold uppercase tracking-[0.2em]" style={{ color: C.green }}>
|
||||
{t('reminders.overdue')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@ export function Toaster() {
|
||||
success: 'border-l-4 border-l-emerald-400',
|
||||
error: 'border-l-4 border-l-red-400',
|
||||
warning: 'border-l-4 border-l-amber-400',
|
||||
info: 'border-l-4 border-l-sky-400',
|
||||
info: 'border-l-4 border-l-zinc-400',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user