From 68d00a8b035ea5fcd4756eb5347cb2aebdb3ecff Mon Sep 17 00:00:00 2001 From: Oreofe Date: Thu, 11 Jun 2026 13:11:01 +0100 Subject: [PATCH 1/2] fix(ui): real document icon for AI sources, unnumbered nav groups, flat callout border MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Ask AI 'Used N sources' rows showed a spine-less book glyph that read as an empty box; replace with a document/page icon (folded corner + text lines). - Drop the '01 / 02' index prefix from sidebar section headings (and the dead .n CSS) — titles read cleaner without it. - Callouts: remove the 2px left accent stripe so the card has a uniform hairline border + background tint (docs + API reference). --- app/api-reference.css | 6 +++--- app/docs.css | 7 +++---- components/docs/ai/ask-dock.tsx | 21 ++++++++++++++++++++- components/docs/nav.tsx | 8 +++----- 4 files changed, 29 insertions(+), 13 deletions(-) diff --git a/app/api-reference.css b/app/api-reference.css index 0070af5..1a3d007 100644 --- a/app/api-reference.css +++ b/app/api-reference.css @@ -283,7 +283,7 @@ /* MDX callouts (Note / Tip / Info / Warning / Danger / Check) in section & operation overlays — ported from docs.css since the API route doesn't load it. */ .ml-apiref .callout { - margin-top: 20px; border: 1px solid var(--line); border-left: 2px solid var(--accent); + margin-top: 20px; border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); display: flex; gap: 12px; max-width: 68ch; @@ -294,9 +294,9 @@ .ml-apiref .callout p, .ml-apiref .callout .callout-body { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; } .ml-apiref .callout .callout-body > * + * { margin-top: 8px; } .ml-apiref .callout strong { color: var(--ink); } -.ml-apiref .callout.tone-warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--panel)); } +.ml-apiref .callout.tone-warn { background: color-mix(in srgb, var(--warn) 6%, var(--panel)); } .ml-apiref .callout.tone-warn .ic { color: var(--warn); } -.ml-apiref .callout.tone-ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--panel)); } +.ml-apiref .callout.tone-ok { background: color-mix(in srgb, var(--ok) 6%, var(--panel)); } .ml-apiref .callout.tone-ok .ic { color: var(--ok); } /* ---------- dark code rail ---------- */ diff --git a/app/docs.css b/app/docs.css index 922af94..4b1c1bc 100644 --- a/app/docs.css +++ b/app/docs.css @@ -98,7 +98,6 @@ font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); padding: 0 9px; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } -.docs-shell .docs-nav-grp > .t .n { color: var(--ink-4); opacity: .6; } .docs-shell .docs-nav a { display: flex; align-items: center; gap: 8px; padding: 6.5px 9px; border-radius: 7px; font-size: 13.5px; color: var(--ink-3); line-height: 1.3; position: relative; text-decoration: none; @@ -190,7 +189,7 @@ /* callout */ .docs-shell .callout { - margin-top: 20px; border: 1px solid var(--line); border-left: 2px solid var(--accent); + margin-top: 20px; border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); display: flex; gap: 12px; max-width: 68ch; @@ -201,9 +200,9 @@ .docs-shell .callout p, .docs-shell .callout .callout-body { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; } .docs-shell .callout .callout-body > * + * { margin-top: 8px; } .docs-shell .callout strong { color: var(--ink); } -.docs-shell .callout.tone-warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--panel)); } +.docs-shell .callout.tone-warn { background: color-mix(in srgb, var(--warn) 6%, var(--panel)); } .docs-shell .callout.tone-warn .ic { color: var(--warn); } -.docs-shell .callout.tone-ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--panel)); } +.docs-shell .callout.tone-ok { background: color-mix(in srgb, var(--ok) 6%, var(--panel)); } .docs-shell .callout.tone-ok .ic { color: var(--ok); } /* steps */ diff --git a/components/docs/ai/ask-dock.tsx b/components/docs/ai/ask-dock.tsx index 2f8b5f8..8a03041 100644 --- a/components/docs/ai/ask-dock.tsx +++ b/components/docs/ai/ask-dock.tsx @@ -548,7 +548,7 @@ function Sources({ list }: { list: string[] }) { {list.map((s) => (
- + {s}
@@ -596,3 +596,22 @@ function Book({ sm }: { sm?: boolean }) { ); } +/** Document/page glyph for retrieved sources (a file with a folded corner). */ +function PageIcon() { + return ( + + + + + + ); +} diff --git a/components/docs/nav.tsx b/components/docs/nav.tsx index 08ff34d..09eb14a 100644 --- a/components/docs/nav.tsx +++ b/components/docs/nav.tsx @@ -41,8 +41,8 @@ function pickActiveTabId(tabs: TopTab[], pathname: string): string { return tabs.find((t) => t.matchPrefixes.includes("__default__"))?.id ?? tabs[0]?.id ?? ""; } -/** Numbered nav groups (the design's .docs-nav): "01 Get started", etc. The - * index is derived from the section's position. Method/badge chips are kept. */ +/** Nav groups (the design's .docs-nav): a section title over its links. + * Method/badge chips on links are kept. */ function SidebarSections({ sections, pathname, @@ -56,9 +56,7 @@ function SidebarSections({