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

feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
Details

Browse Source 
- Sidebar: dynamic brand-accent colors, brainstorm section restyled
- AI chat general: popup panel with expand/collapse, hides when contextual AI open
- AI chat contextual: tabs reordered (Actions first), X close button, height fix
- Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.)
- Global color cleanup: emerald/orange hardcoded → brand-accent dynamic
- Brainstorm page: orange → brand-accent throughout
- PageEntry animation component added to key pages
- Floating AI button: bg-brand-accent instead of hardcoded black
- i18n: all 15 locales updated with new AI/billing keys
- Billing: freemium quota tracking, BYOK, stripe subscription scaffolding
- Admin: integrated into new design
- AGENTS.md + CLAUDE.md project rules added
This commit is contained in:
Antigravity
2026-05-16 12:59:30 +00:00
parent 1fcea6ed7d
commit bd495be965
2284 changed files with 395285 additions and 2327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
memento-note/components/mcp/mcp-settings-panel.tsx
View File

@@ -1,8 +1,10 @@
'use client'
import { useState, useTransition } from 'react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useLanguage } from '@/lib/i18n'
import { toast } from 'sonner'
import {
Dialog,
DialogContent,
@@ -12,10 +14,6 @@ import {
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useLanguage } from '@/lib/i18n'
import { toast } from 'sonner'
import {
Info,
Key,
@@ -37,6 +35,8 @@ import {
type McpKeyInfo,
type McpServerStatus,
} from '@/app/actions/mcp-keys'
import { motion } from 'motion/react'
import { cn } from '@/lib/utils'
interface McpSettingsPanelProps {
initialKeys: McpKeyInfo[]
@@ -54,10 +54,8 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
try {
const result = await generateMcpKey(name)
setCreateOpen(false)
// Show the raw key in a new dialog
setShowRawKey(result.rawKey)
setRawKeyName(result.info.name)
// Refresh keys
setKeys(prev => [
{
shortId: result.info.shortId,
@@ -104,7 +102,6 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
})
}
// Raw key display state
const [showRawKey, setShowRawKey] = useState<string | null>(null)
const [rawKeyName, setRawKeyName] = useState('')
const [copied, setCopied] = useState(false)
@@ -116,26 +113,29 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
}
return (
<div className="columns-1 lg:columns-2 gap-6 space-y-6">
{/* 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-zinc-500/10 flex items-center justify-center text-zinc-500 shrink-0">
<Info className="h-5 w-5" />
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
className="grid grid-cols-1 lg:grid-cols-2 gap-6"
>
<div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl overflow-hidden">
<div className="flex items-center gap-5 p-6 border-b border-border/40">
<div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-concrete border border-border">
<Info size={18} />
</div>
<div>
<h2 className="font-semibold text-foreground">{t('mcpSettings.whatIsMcp.title')}</h2>
<h4 className="text-[13px] font-bold text-ink">{t('mcpSettings.whatIsMcp.title')}</h4>
</div>
</div>
<div className="p-6">
<p className="text-sm text-muted-foreground mt-1">
<p className="text-[11px] text-concrete leading-relaxed">
{t('mcpSettings.whatIsMcp.description')}
</p>
<a
href="https://modelcontextprotocol.io"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1 text-sm text-zinc-600 hover:underline mt-4"
className="inline-flex items-center gap-1.5 text-[10px] font-bold text-brand-accent uppercase tracking-widest hover:underline mt-4"
>
{t('mcpSettings.whatIsMcp.learnMore')}
<ExternalLink className="h-3 w-3" />
@@ -143,26 +143,27 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
</div>
</div>
{/* Section 2: Server Status */}
<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-primary/10 flex items-center justify-center text-primary shrink-0">
<Server className="h-5 w-5" />
<div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl overflow-hidden">
<div className="flex items-center gap-5 p-6 border-b border-border/40">
<div className="p-3 bg-brand-accent/10 rounded-2xl text-brand-accent border border-brand-accent/20">
<Server size={18} />
</div>
<div>
<h2 className="font-semibold text-foreground">{t('mcpSettings.serverStatus.title')}</h2>
<h4 className="text-[13px] font-bold text-ink">{t('mcpSettings.serverStatus.title')}</h4>
</div>
</div>
<div className="p-6">
<div className="space-y-4 text-sm">
<div className="space-y-4">
<div className="flex items-center justify-between">
<span className="text-zinc-600">{t('mcpSettings.serverStatus.mode')}</span>
<Badge variant="secondary">{serverStatus.mode.toUpperCase()}</Badge>
<span className="text-[11px] font-bold text-concrete uppercase tracking-widest">{t('mcpSettings.serverStatus.mode')}</span>
<span className="text-[10px] font-bold text-ink uppercase tracking-widest bg-paper dark:bg-white/10 px-3 py-1 rounded-lg border border-border">
{serverStatus.mode.toUpperCase()}
</span>
</div>
{serverStatus.mode === 'sse' && serverStatus.url && (
<div className="space-y-1.5">
<span className="text-muted-foreground block">{t('mcpSettings.serverStatus.url')}</span>
<code className="text-xs bg-muted p-2 rounded block break-all font-mono">
<div className="space-y-2">
<span className="text-[10px] font-bold text-concrete uppercase tracking-widest">{t('mcpSettings.serverStatus.url')}</span>
<code className="text-[10px] bg-paper dark:bg-black/30 p-3 rounded-xl block break-all font-mono border border-border text-ink">
{serverStatus.url}
</code>
</div>
@@ -171,112 +172,85 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
</div>
</div>
{/* Section 3: API Keys */}
<div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden break-inside-avoid">
<div className="flex items-center justify-between p-6 border-b border-border">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
<Key className="h-5 w-5" />
<div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl overflow-hidden">
<div className="flex items-center justify-between p-6 border-b border-border/40">
<div className="flex items-center gap-5">
<div className="p-3 bg-violet-500/10 rounded-2xl text-violet-500 border border-violet-500/20">
<Key size={18} />
</div>
<div>
<h2 className="font-semibold text-foreground">{t('mcpSettings.apiKeys.title')}</h2>
<p className="text-sm text-muted-foreground">
{t('mcpSettings.apiKeys.description')}
</p>
<h4 className="text-[13px] font-bold text-ink">{t('mcpSettings.apiKeys.title')}</h4>
<p className="text-[10px] text-concrete mt-0.5">{t('mcpSettings.apiKeys.description')}</p>
</div>
</div>
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
<DialogTrigger asChild>
<Button size="sm" className="gap-1.5">
<Plus className="h-4 w-4" />
<button className="flex items-center gap-1.5 px-4 py-2 rounded-xl bg-ink text-paper text-[10px] font-bold uppercase tracking-[0.15em] hover:scale-[1.02] active:scale-95 transition-all duration-300 shadow-lg shadow-ink/20">
<Plus className="h-3.5 w-3.5" />
{t('mcpSettings.apiKeys.generate')}
</Button>
</button>
</DialogTrigger>
<CreateKeyDialog
onGenerate={handleGenerate}
isPending={isPending}
/>
<CreateKeyDialog onGenerate={handleGenerate} isPending={isPending} />
</Dialog>
</div>
<div className="p-6">
{keys.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
<Key className="h-8 w-8 mx-auto mb-2 opacity-50" />
<p>{t('mcpSettings.apiKeys.empty')}</p>
<div className="text-center py-8">
<Key className="h-8 w-8 mx-auto mb-2 text-concrete opacity-30" />
<p className="text-[11px] text-concrete">{t('mcpSettings.apiKeys.empty')}</p>
</div>
) : (
<div className="space-y-3">
{keys.map(k => (
<KeyCard
key={k.shortId}
keyInfo={k}
onRevoke={handleRevoke}
onDelete={handleDelete}
isPending={isPending}
/>
<KeyCard key={k.shortId} keyInfo={k} onRevoke={handleRevoke} onDelete={handleDelete} isPending={isPending} />
))}
</div>
)}
</div>
</div>
{/* Section 4: Configuration Instructions */}
<div className="break-inside-avoid">
<div>
<ConfigInstructions serverStatus={serverStatus} />
</div>
{/* Raw Key Display Dialog */}
<Dialog open={!!showRawKey} onOpenChange={(open) => { if (!open) setShowRawKey(null) }}>
<DialogContent>
<DialogHeader>
<DialogTitle>{t('mcpSettings.createDialog.successTitle')}</DialogTitle>
<DialogDescription>
{t('mcpSettings.createDialog.successDescription')}
</DialogDescription>
<DialogDescription>{t('mcpSettings.createDialog.successDescription')}</DialogDescription>
</DialogHeader>
<div className="space-y-3">
<div>
<Label className="text-xs text-muted-foreground">{rawKeyName}</Label>
<div className="flex items-center gap-2 mt-1">
<code className="flex-1 text-xs bg-muted p-3 rounded break-all font-mono">
<Label className="text-[10px] font-bold text-concrete uppercase tracking-widest">{rawKeyName}</Label>
<div className="flex items-center gap-2 mt-2">
<code className="flex-1 text-[10px] bg-paper dark:bg-black/30 p-3 rounded-xl break-all font-mono border border-border text-ink">
{showRawKey}
</code>
<Button
size="sm"
variant="outline"
<button
onClick={() => handleCopy(showRawKey!)}
className="shrink-0"
className="shrink-0 p-2.5 rounded-xl border border-border hover:bg-paper dark:hover:bg-white/10 transition-colors"
>
{copied ? (
<Check className="h-4 w-4 text-green-500" />
) : (
<Copy className="h-4 w-4" />
)}
</Button>
{copied ? <Check className="h-4 w-4 text-emerald-500" /> : <Copy className="h-4 w-4 text-concrete" />}
</button>
</div>
</div>
</div>
<DialogFooter>
<Button onClick={() => setShowRawKey(null)}>
<button
onClick={() => setShowRawKey(null)}
className="px-6 py-2.5 rounded-xl bg-ink text-paper text-[10px] font-bold uppercase tracking-[0.15em]"
>
{t('mcpSettings.createDialog.done')}
</Button>
</button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</motion.div>
)
}
// ── Sub-components ──────────────────────────────────────────────────────────────
function CreateKeyDialog({
onGenerate,
isPending,
}: {
onGenerate: (name: string) => void
isPending: boolean
}) {
function CreateKeyDialog({ onGenerate, isPending }: { onGenerate: (name: string) => void; isPending: boolean }) {
const [name, setName] = useState('')
const { t } = useLanguage()
@@ -284,109 +258,82 @@ function CreateKeyDialog({
<DialogContent>
<DialogHeader>
<DialogTitle>{t('mcpSettings.createDialog.title')}</DialogTitle>
<DialogDescription>
{t('mcpSettings.createDialog.description')}
</DialogDescription>
<DialogDescription>{t('mcpSettings.createDialog.description')}</DialogDescription>
</DialogHeader>
<div className="space-y-3">
<div>
<Label htmlFor="key-name">{t('mcpSettings.createDialog.nameLabel')}</Label>
<Label htmlFor="key-name" className="text-[10px] font-bold text-concrete uppercase tracking-widest">{t('mcpSettings.createDialog.nameLabel')}</Label>
<Input
id="key-name"
placeholder={t('mcpSettings.createDialog.namePlaceholder')}
value={name}
onChange={e => setName(e.target.value)}
className="mt-1"
className="mt-2"
/>
</div>
</div>
<DialogFooter>
<Button
<button
onClick={() => onGenerate(name)}
disabled={isPending}
className="px-6 py-2.5 rounded-xl bg-ink text-paper text-[10px] font-bold uppercase tracking-[0.15em] disabled:opacity-60"
>
{isPending ? (
<>
<Loader2 className="h-4 w-4 animate-spin mr-1" />
{t('mcpSettings.createDialog.generating')}
</>
) : (
<>
<Key className="h-4 w-4 mr-1" />
{t('mcpSettings.createDialog.generate')}
</>
)}
</Button>
<div className="flex items-center gap-2">
{isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Key className="h-4 w-4" />}
{isPending ? t('mcpSettings.createDialog.generating') : t('mcpSettings.createDialog.generate')}
</div>
</button>
</DialogFooter>
</DialogContent>
)
}
function KeyCard({
keyInfo,
onRevoke,
onDelete,
isPending,
}: {
keyInfo: McpKeyInfo
onRevoke: (shortId: string) => void
onDelete: (shortId: string) => void
isPending: boolean
}) {
function KeyCard({ keyInfo, onRevoke, onDelete, isPending }: { keyInfo: McpKeyInfo; onRevoke: (shortId: string) => void; onDelete: (shortId: string) => void; isPending: boolean }) {
const { t } = useLanguage()
const formatDate = (iso: string | null) => {
if (!iso) return t('mcpSettings.apiKeys.never')
return new Date(iso).toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric',
})
return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
}
return (
<div className="flex items-center justify-between p-4 rounded-lg border bg-muted/50">
<div className="flex items-center justify-between p-4 rounded-2xl border border-border/60 bg-paper/30 dark:bg-black/10">
<div className="space-y-1">
<div className="flex items-center gap-2">
<span className="font-medium text-sm">{keyInfo.name}</span>
<Badge variant={keyInfo.active ? 'default' : 'secondary'} className="text-xs">
{keyInfo.active
? t('mcpSettings.apiKeys.active')
: t('mcpSettings.apiKeys.revoked')}
</Badge>
<span className="text-[13px] font-bold text-ink">{keyInfo.name}</span>
<span className={cn(
'text-[9px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-lg',
keyInfo.active
? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
: 'bg-concrete/10 text-concrete'
)}>
{keyInfo.active ? t('mcpSettings.apiKeys.active') : t('mcpSettings.apiKeys.revoked')}
</span>
</div>
<div className="flex gap-4 text-xs text-muted-foreground">
<span>
{t('mcpSettings.apiKeys.createdAt')}: {formatDate(keyInfo.createdAt)}
</span>
<span>
{t('mcpSettings.apiKeys.lastUsed')}: {formatDate(keyInfo.lastUsedAt)}
</span>
<div className="flex gap-4 text-[10px] text-concrete">
<span>{t('mcpSettings.apiKeys.createdAt')}: {formatDate(keyInfo.createdAt)}</span>
<span>{t('mcpSettings.apiKeys.lastUsed')}: {formatDate(keyInfo.lastUsedAt)}</span>
</div>
</div>
<div>
{keyInfo.active ? (
<Button
size="sm"
variant="outline"
<button
onClick={() => onRevoke(keyInfo.shortId)}
disabled={isPending}
className="gap-1"
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl border border-border text-[10px] font-bold uppercase tracking-widest text-concrete hover:text-ink hover:border-ink/30 transition-colors disabled:opacity-60"
>
<Ban className="h-3.5 w-3.5" />
<Ban className="h-3 w-3" />
{t('mcpSettings.apiKeys.revoke')}
</Button>
</button>
) : (
<Button
size="sm"
variant="destructive"
<button
onClick={() => onDelete(keyInfo.shortId)}
disabled={isPending}
className="gap-1"
className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-rose-500/10 text-rose-600 dark:text-rose-400 text-[10px] font-bold uppercase tracking-widest hover:bg-rose-500/20 transition-colors disabled:opacity-60"
>
<Trash2 className="h-3.5 w-3.5" />
<Trash2 className="h-3 w-3" />
{t('mcpSettings.apiKeys.delete')}
</Button>
</button>
)}
</div>
</div>
@@ -396,6 +343,7 @@ function KeyCard({
function ConfigInstructions({ serverStatus }: { serverStatus: McpServerStatus }) {
const { t } = useLanguage()
const [expanded, setExpanded] = useState<string | null>(null)
const [copied, setCopied] = useState(false)
const baseUrl = serverStatus.url || 'http://localhost:3001'
@@ -430,9 +378,7 @@ function ConfigInstructions({ serverStatus }: { serverStatus: McpServerStatus })
mcpServers: {
'memento-note': {
url: baseUrl + '/mcp',
headers: {
'x-api-key': 'YOUR_API_KEY',
},
headers: { 'x-api-key': 'YOUR_API_KEY' },
},
},
},
@@ -444,47 +390,55 @@ function ConfigInstructions({ serverStatus }: { serverStatus: McpServerStatus })
id: 'n8n',
title: t('mcpSettings.configInstructions.n8n.title'),
description: t('mcpSettings.configInstructions.n8n.description'),
snippet: `MCP Server URL: ${baseUrl}/mcp
Header: x-api-key: YOUR_API_KEY
Transport: Streamable HTTP`,
snippet: `MCP Server URL: ${baseUrl}/mcp\nHeader: x-api-key: YOUR_API_KEY\nTransport: Streamable HTTP`,
},
]
const handleCopySnippet = async (text: string) => {
await navigator.clipboard.writeText(text)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden">
<div className="flex items-center gap-3 p-6 border-b border-border">
<div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
<ExternalLink className="h-5 w-5" />
<div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl overflow-hidden">
<div className="flex items-center gap-5 p-6 border-b border-border/40">
<div className="p-3 bg-emerald-500/10 rounded-2xl text-emerald-600 dark:text-emerald-400 border border-emerald-500/20">
<ExternalLink size={18} />
</div>
<div>
<h2 className="font-semibold text-foreground">
{t('mcpSettings.configInstructions.title')}
</h2>
<p className="text-sm text-muted-foreground">
{t('mcpSettings.configInstructions.description')}
</p>
<h4 className="text-[13px] font-bold text-ink">{t('mcpSettings.configInstructions.title')}</h4>
<p className="text-[10px] text-concrete mt-0.5">{t('mcpSettings.configInstructions.description')}</p>
</div>
</div>
<div className="p-6 space-y-2">
<div className="p-6 space-y-3">
{configs.map(cfg => (
<div key={cfg.id} className="border rounded-lg overflow-hidden">
<div key={cfg.id} className="border border-border/60 rounded-2xl overflow-hidden">
<button
className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-muted transition-colors"
className="w-full flex items-center justify-between px-5 py-3.5 text-left hover:bg-paper/50 dark:hover:bg-white/5 transition-colors"
onClick={() => setExpanded(expanded === cfg.id ? null : cfg.id)}
>
<span className="font-medium text-sm">{cfg.title}</span>
<span className="text-[11px] font-bold text-ink">{cfg.title}</span>
{expanded === cfg.id ? (
<ChevronDown className="h-4 w-4" />
<ChevronDown className="h-4 w-4 text-concrete" />
) : (
<ChevronRight className="h-4 w-4" />
<ChevronRight className="h-4 w-4 text-concrete" />
)}
</button>
{expanded === cfg.id && (
<div className="px-4 pb-4">
<p className="text-sm text-muted-foreground mb-2">{cfg.description}</p>
<pre className="text-xs bg-muted p-3 rounded overflow-x-auto">
<code>{cfg.snippet}</code>
</pre>
<div className="px-5 pb-5">
<p className="text-[11px] text-concrete mb-3">{cfg.description}</p>
<div className="relative">
<pre className="text-[10px] bg-paper dark:bg-black/30 p-4 rounded-xl overflow-x-auto border border-border">
<code>{cfg.snippet}</code>
</pre>
<button
onClick={() => handleCopySnippet(cfg.snippet)}
className="absolute top-3 right-3 p-1.5 rounded-lg border border-border bg-paper dark:bg-black/30 hover:bg-white dark:hover:bg-black/50 transition-colors"
>
{copied ? <Check className="h-3 w-3 text-emerald-500" /> : <Copy className="h-3 w-3 text-concrete" />}
</button>
</div>
</div>
)}
</div>