docs(desktop): add DESIGN.md design-system guide + close two consistency gaps (#40823)
Codify the desktop overlay/design conventions in apps/desktop/DESIGN.md: surfaces & elevation (shadow-nous + --stroke-nous), stroke/color tokens, the single Button (variants/sizes, no per-call overrides), shared form controls (controlVariants / SearchField / SegmentedControl / Switch), flat layout (PAGE_INSET_X, OverlaySplitLayout, ListRow, no card-in-card), feedback states (Loader / ErrorState / LogView / EmptyState), BrandMark, motion, i18n, and the nanostore state model. Ends with a pre-merge checklist. Two fixes so the doc isn't aspirational: - brand-mark: rounded-md + overflow-hidden (doc says "softly rounded") - i18n ja/zh/zh-hant: mirror en's "Begin" + drop trailing period on connectedProvider (doc says update all locales together)
This commit is contained in:
@@ -3,11 +3,14 @@ import { cn } from '@/lib/utils'
|
||||
const assetPath = (path: string) => `${import.meta.env.BASE_URL}${path.replace(/^\/+/, '')}`
|
||||
|
||||
// Brand badge: nous-girl mark on a white tile, identical in light/dark.
|
||||
// Fills the tile (no padding/radius); size via className (default size-14).
|
||||
// Fills the tile (softly rounded); size via className (default size-14).
|
||||
export function BrandMark({ className, ...props }: React.ComponentProps<'span'>) {
|
||||
return (
|
||||
<span
|
||||
className={cn('inline-flex size-14 shrink-0 items-center justify-center bg-white', className)}
|
||||
className={cn(
|
||||
'inline-flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-md bg-white',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<img alt="" className="size-full object-contain" src={assetPath('nous-girl.jpg')} />
|
||||
|
||||
@@ -1430,7 +1430,7 @@ export const ja = defineLocale({
|
||||
},
|
||||
startingSignIn: provider => `${provider} のサインインを開始中...`,
|
||||
verifyingCode: provider => `${provider} でコードを確認中...`,
|
||||
connectedProvider: provider => `${provider} が接続されました。`,
|
||||
connectedProvider: provider => `${provider} が接続されました`,
|
||||
connectedPicking: provider => `${provider} が接続されました。デフォルトモデルを選択中...`,
|
||||
signInFailed: 'サインインに失敗しました。再試行してください。',
|
||||
pickDifferentProvider: '別のプロバイダーを選択',
|
||||
@@ -1456,7 +1456,7 @@ export const ja = defineLocale({
|
||||
free: '無料',
|
||||
price: (input, output) => `${input} 入力 / ${output} 出力 per Mtok`,
|
||||
change: '変更',
|
||||
startChatting: 'チャットを始める',
|
||||
startChatting: '始める',
|
||||
docs: provider => `${provider} ドキュメント`
|
||||
},
|
||||
|
||||
|
||||
@@ -1391,7 +1391,7 @@ export const zhHant = defineLocale({
|
||||
},
|
||||
startingSignIn: provider => `正在為 ${provider} 啟動登入...`,
|
||||
verifyingCode: provider => `正在透過 ${provider} 驗證您的代碼...`,
|
||||
connectedProvider: provider => `${provider} 已連線。`,
|
||||
connectedProvider: provider => `${provider} 已連線`,
|
||||
connectedPicking: provider => `${provider} 已連線。正在選擇預設模型...`,
|
||||
signInFailed: '登入失敗,請重試。',
|
||||
pickDifferentProvider: '選擇其他提供方',
|
||||
@@ -1417,7 +1417,7 @@ export const zhHant = defineLocale({
|
||||
free: '免費',
|
||||
price: (input, output) => `${input} 輸入 / ${output} 輸出 每 Mtok`,
|
||||
change: '變更',
|
||||
startChatting: '開始聊天',
|
||||
startChatting: '開始',
|
||||
docs: provider => `${provider} 文件`
|
||||
},
|
||||
|
||||
|
||||
@@ -1470,7 +1470,7 @@ export const zh: Translations = {
|
||||
},
|
||||
startingSignIn: provider => `正在为 ${provider} 启动登录...`,
|
||||
verifyingCode: provider => `正在通过 ${provider} 验证你的代码...`,
|
||||
connectedProvider: provider => `${provider} 已连接。`,
|
||||
connectedProvider: provider => `${provider} 已连接`,
|
||||
connectedPicking: provider => `${provider} 已连接。正在选择默认模型...`,
|
||||
signInFailed: '登录失败,请重试。',
|
||||
pickDifferentProvider: '选择其他提供方',
|
||||
@@ -1494,7 +1494,7 @@ export const zh: Translations = {
|
||||
free: '免费',
|
||||
price: (input, output) => `${input} 输入 / ${output} 输出每 Mtok`,
|
||||
change: '更改',
|
||||
startChatting: '开始对话',
|
||||
startChatting: '开始',
|
||||
docs: provider => `${provider} 文档`
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user