mirror of
https://github.com/NanmiCoder/claude-code-haha.git
synced 2026-10-10 11:53:10 +08:00
程序员阿江(Relakkes)
98e1a12766
Rebuild every desktop page on one visual system, 「素 Porcelain」: a quiet light theme with a tool-call timeline, bubbled user messages and a floating composer card. - Tokens: rewrite the white theme on Porcelain values and give all six themes one radius scale (4/6/8/12/16/20), one type scale (11/12/13/14/15/18/22/26), Inter up to semibold, JetBrains Mono at 400, and status colours by meaning (running = info, waiting = warning, done = success, failed = error). Terracotta is kept for the mark, the send key and selection. - Icons: draw every icon from lucide and drop the Material Symbols font. The generic sparkle glyph is gone: a working turn shows the running ring, skills use the same box the @ and / menus use for SKILL.md. - Chat: tool calls read as a timeline, user turns as bubbles, the composer as a floating card; cards, menus, dialogs and permission prompts share the same surfaces and shadows. - Shell: session tabs and workspace tabs use one shared tab chip; the sidebar, workspace and settings follow the same grounds. - Settings: the page frame is fluid up to 1120px for every pane, so explorer-style panes (memory, skills) are no longer squeezed into 700px. - Guard: designSystem.test.ts fails on off-scale font sizes, weights above semibold, italic text, Material Symbols, Tailwind radius names and sparkle icon imports.
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { TriangleAlert } from 'lucide-react'
|
|
import { useTranslation } from '../../i18n'
|
|
import { ActionDialog } from '@/components/ui/ActionDialog'
|
|
|
|
type Props = {
|
|
open: boolean
|
|
loading?: boolean
|
|
onClose: () => void
|
|
onConfirm: () => void | Promise<void>
|
|
}
|
|
|
|
export function AutoModeOptInDialog({ open, loading = false, onClose, onConfirm }: Props) {
|
|
const t = useTranslation()
|
|
|
|
return (
|
|
<ActionDialog
|
|
open={open}
|
|
onClose={onClose}
|
|
title={t('permMode.enableAutoTitle')}
|
|
width={460}
|
|
loading={loading}
|
|
body={(
|
|
<div className="space-y-3">
|
|
{/* Warning tones are paired: `--color-warning` is the marker (icon,
|
|
border) and `--color-on-warning-container` is the only readable
|
|
foreground on the container fill. The `/N` alpha this replaced is
|
|
also dropped outright by the Safari 15 WebView. */}
|
|
<div className="flex items-start gap-3 rounded-[var(--radius-md)] bg-[var(--color-warning-container)] px-3 py-3">
|
|
<TriangleAlert aria-hidden="true" size={16} strokeWidth={1.75} className="mt-0.5 shrink-0 text-[var(--color-warning)]" />
|
|
<div className="space-y-2 text-[13px] leading-6 text-[var(--color-on-warning-container)]">
|
|
<p className="font-medium">{t('permMode.enableAutoBody')}</p>
|
|
<p>{t('permMode.enableAutoDetail')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
actions={[
|
|
{
|
|
label: t('common.cancel'),
|
|
onClick: onClose,
|
|
variant: 'secondary',
|
|
},
|
|
{
|
|
label: t('permMode.enableAutoBtn'),
|
|
onClick: onConfirm,
|
|
variant: 'primary',
|
|
loading,
|
|
},
|
|
]}
|
|
/>
|
|
)
|
|
}
|