mirror of
https://github.com/NanmiCoder/claude-code-haha.git
synced 2026-10-10 03:43:11 +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.
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { useSettingsStore } from '../../stores/settingsStore'
|
|
import { useTranslation } from '../../i18n'
|
|
import { formatExactMessageTimestamp, formatMessageHoverTime } from '../../lib/formatMessageTimestamp'
|
|
import { formatDurationMs } from '../../lib/backgroundTasks'
|
|
import type { TurnCompletion } from '../../lib/turnCompletion'
|
|
|
|
type Props = {
|
|
completion: TurnCompletion
|
|
}
|
|
|
|
/**
|
|
* Compact metadata for the last reply's action row: when the turn ended and how
|
|
* long it took. The parent action row keeps this visible on pointer and touch
|
|
* layouts alike (#1151).
|
|
*/
|
|
export function TurnCompletionStamp({ completion }: Props) {
|
|
const locale = useSettingsStore((state) => state.locale)
|
|
const t = useTranslation()
|
|
|
|
const clockLabel = formatMessageHoverTime(completion.completedAt, locale)
|
|
if (!clockLabel) return null
|
|
|
|
const duration = formatDurationMs(completion.durationMs, t)
|
|
|
|
return (
|
|
<span
|
|
data-turn-completion
|
|
className="inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap text-xs tabular-nums text-[var(--color-text-tertiary)]"
|
|
>
|
|
<span title={formatExactMessageTimestamp(completion.completedAt, locale) || clockLabel}>
|
|
{clockLabel}
|
|
</span>
|
|
{duration ? (
|
|
<>
|
|
<span aria-hidden="true" className="h-[3px] w-[3px] shrink-0 rounded-full bg-[var(--color-text-tertiary)]" />
|
|
<span data-turn-completion-duration>{t('chat.turnDuration', { duration })}</span>
|
|
</>
|
|
) : null}
|
|
</span>
|
|
)
|
|
}
|