feat(ui): clickable document viewer — open any cited document in the browser from chat chips and the sources table
This commit is contained in:
+177
-3
@@ -153,8 +153,10 @@ body::after {
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
/* 2px brand→cyan gradient hairline under the sticky header (phase 08). */
|
||||
.app-header::after {
|
||||
/* 2px brand→cyan gradient hairline under the sticky header (phase 08;
|
||||
shared by the app header and the document-viewer header, phase 10). */
|
||||
.app-header::after,
|
||||
.doc-header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
@@ -326,7 +328,7 @@ body::after {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.source-chip:hover { background: #2a345f; }
|
||||
.source-chip:hover { background: #2a345f; text-decoration: underline; }
|
||||
|
||||
/* "Maybe try" chips under a deflected bubble (phase 04). Unlike the
|
||||
onboarding row (which scrolls horizontally on mobile), this group wraps
|
||||
@@ -547,6 +549,173 @@ body::after {
|
||||
.docs-table tbody tr:hover { background: var(--bg); }
|
||||
.docs-table tbody tr:last-child td { border-bottom: 0; }
|
||||
|
||||
/* ---------- Document viewer (phase 10) ---------- */
|
||||
.doc-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: var(--surface);
|
||||
}
|
||||
.doc-header-inner {
|
||||
padding-block: 0.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
/* Back link: pill with an SVG arrow + "Sources" (>=44px touch target). */
|
||||
.doc-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
flex: 0 0 auto;
|
||||
min-height: 44px;
|
||||
padding: 0.45rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
background: var(--brand-soft);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--brand-ink); /* 6.9:1 on --brand-soft */
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.doc-back:hover { background: #2a345f; }
|
||||
.doc-back svg { width: 16px; height: 16px; display: block; }
|
||||
.doc-title-block { min-width: 0; }
|
||||
#doc-title {
|
||||
margin: 0;
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/* Meta row: source badge · format badge · mono path · indexed · chunks. */
|
||||
.doc-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.35rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
.doc-source-badge {
|
||||
background: var(--brand-soft);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--brand-ink);
|
||||
font-weight: 600;
|
||||
border-radius: 999px;
|
||||
padding: 0.02rem 0.55rem;
|
||||
}
|
||||
.format-badge {
|
||||
font-family: var(--mono);
|
||||
background: var(--brand-soft);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--brand-ink);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.02rem 0.45rem;
|
||||
}
|
||||
.doc-path {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.75rem;
|
||||
max-width: 26rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.doc-chunks { font-family: var(--mono); }
|
||||
|
||||
.doc-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
#doc-content { display: flex; flex-direction: column; }
|
||||
.doc-loading { margin: 1.5rem auto; text-align: center; color: var(--ink-soft); }
|
||||
|
||||
/* Markdown: the centered, ≤46rem reading column (PLAN §7.1). */
|
||||
.doc-md {
|
||||
width: 100%;
|
||||
max-width: 46rem;
|
||||
margin-inline: auto;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 1.5rem 1.75rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.doc-md p { margin: 0.35rem 0; }
|
||||
.doc-md h3 { margin: 1.1rem 0 0.4rem; font-size: 1.15rem; }
|
||||
.doc-md h4 { margin: 0.9rem 0 0.35rem; font-size: 1rem; }
|
||||
.doc-md > :first-child { margin-top: 0; }
|
||||
.doc-md ul { margin: 0.4rem 0; padding-left: 1.3rem; }
|
||||
.doc-md pre {
|
||||
background: #0d1120;
|
||||
color: #e6e9f2;
|
||||
padding: 0.7rem 0.9rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow-x: auto;
|
||||
font-size: 0.85rem;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.doc-md code { font-family: var(--mono); font-size: 0.88em; background: var(--brand-soft); padding: 0.08em 0.35em; border-radius: 5px; }
|
||||
.doc-md pre code { background: none; padding: 0; }
|
||||
|
||||
/* Raw (non-markdown) formats: full-width mono pre, horizontal scroll. */
|
||||
.doc-raw {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 1.25rem 1.5rem;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Designed not-found state (no emoji — plain SVG mark, phase 08 rule). */
|
||||
.doc-not-found {
|
||||
width: 100%;
|
||||
max-width: 30rem;
|
||||
margin: 2rem auto;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 2.25rem 1.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
.doc-not-found-glyph { color: var(--ink-soft); width: 44px; height: 44px; margin-inline: auto; }
|
||||
.doc-not-found-glyph svg { width: 44px; height: 44px; display: block; }
|
||||
.doc-not-found h2 { margin: 0.8rem 0 0.4rem; font-size: 1.3rem; }
|
||||
.doc-not-found-sub { margin: 0 0 1.25rem; color: var(--ink-soft); }
|
||||
.doc-open-sources {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
padding: 0.5rem 1.1rem;
|
||||
background: var(--brand);
|
||||
color: var(--bg); /* dark ink on brand: 5.2:1 */
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.doc-open-sources:hover { background: #7d88f5; }
|
||||
|
||||
/* Viewer links: Sources-table path cell + chat source chips (phase 10). */
|
||||
.doc-link {
|
||||
color: var(--brand-ink); /* 8.7:1 on --surface */
|
||||
text-decoration: none;
|
||||
}
|
||||
.doc-link:hover, .doc-link:focus-visible { text-decoration: underline; }
|
||||
|
||||
/* ---------- Footer ---------- */
|
||||
.app-footer {
|
||||
border-top: 1px solid var(--line);
|
||||
@@ -574,6 +743,11 @@ body::after {
|
||||
.suggestions { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
|
||||
padding-bottom: 0.4rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
|
||||
.suggestion-chip { flex: 0 0 auto; }
|
||||
.doc-header-inner { flex-wrap: wrap; gap: 0.5rem; padding-block: 0.6rem; }
|
||||
#doc-title { font-size: 1.1rem; }
|
||||
.doc-path { max-width: 16rem; }
|
||||
.doc-md { padding: 1.1rem 1rem; }
|
||||
.doc-raw { padding: 1rem; font-size: 0.8rem; }
|
||||
.composer { padding: 0.5rem; }
|
||||
.footer-inner { flex-direction: column; gap: 0.2rem; text-align: center; }
|
||||
main { padding-bottom: env(safe-area-inset-bottom, 0); }
|
||||
|
||||
Reference in New Issue
Block a user