release: dev → main (сдача хакатона) #106
@@ -1,15 +1,15 @@
|
||||
# Dashboard-only Streamlit settings (doctor dashboard + demo console).
|
||||
[theme]
|
||||
base = "light"
|
||||
primaryColor = "#2A78D6"
|
||||
backgroundColor = "#F6F7F9"
|
||||
primaryColor = "#285E4E"
|
||||
backgroundColor = "#F6F7F3"
|
||||
secondaryBackgroundColor = "#FFFFFF"
|
||||
textColor = "#1B1F24"
|
||||
borderColor = "#E3E6EA"
|
||||
textColor = "#213B38"
|
||||
borderColor = "#E1E7E3"
|
||||
baseRadius = "medium"
|
||||
# Falls back to the system sans-serif when offline (ADR-004).
|
||||
font = "Inter:https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap, sans-serif"
|
||||
headingFontWeights = 700
|
||||
font = "sans-serif"
|
||||
headingFontWeights = 600
|
||||
|
||||
[client]
|
||||
toolbarMode = "minimal"
|
||||
|
||||
@@ -42,7 +42,10 @@ def dose_strip_html(grid: h.DoseGrid, start: date | None) -> str:
|
||||
f'<span><i style="border:1.5px dashed var(--grey)"></i>ожидается · {c["pending"]}</span>'
|
||||
"</div>"
|
||||
)
|
||||
return f'<div class="mt-doses" style="grid-template-columns:{cols}">{"".join(cells)}</div>{legend}'
|
||||
return (
|
||||
f'<div class="mt-dose-scroll"><div class="mt-doses" style="grid-template-columns:{cols}">'
|
||||
f"{''.join(cells)}</div></div>{legend}"
|
||||
)
|
||||
|
||||
|
||||
def _tile(label: str, value: str, hint: str = "", tone: str = "blue") -> str:
|
||||
@@ -181,7 +184,7 @@ def render(card: PatientCard, today: date | None) -> None:
|
||||
|
||||
main, side = st.columns([1.75, 1], gap="large")
|
||||
with main:
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-scales"):
|
||||
c1, c2 = st.columns(2)
|
||||
for col, scale_id, title in ((c1, "phq9", "PHQ-9"), (c2, "pcl5", "PCL-5")):
|
||||
fig = charts.scale_figure(card.series, scale_id, title, start)
|
||||
@@ -191,22 +194,22 @@ def render(card: PatientCard, today: date | None) -> None:
|
||||
else:
|
||||
st.plotly_chart(fig, config=theme.PLOTLY_CONFIG, key=f"chart-{scale_id}")
|
||||
st.caption("◇ — внеплановое заполнение (по триггеру правил). Полосы — градации тяжести из config/scales.")
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-wellbeing"):
|
||||
fig = charts.wellbeing_figure(card.series, start)
|
||||
if fig is None:
|
||||
st.caption("Ежедневных чек-инов пока нет")
|
||||
else:
|
||||
st.plotly_chart(fig, config=theme.PLOTLY_CONFIG, key="chart-wellbeing")
|
||||
st.caption("Красная зона настроения ≤ 3 (3 дня → внеплановый PHQ-9); пунктир — сон 4 ч.")
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-doses"):
|
||||
st.html('<div class="mt-panel-title">Календарь приёма</div>')
|
||||
st.html(dose_strip_html(grid, start))
|
||||
with side:
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-alerts"):
|
||||
_alerts_feed(card.alerts, today)
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-summary"):
|
||||
_summary(card.summary)
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-safety"):
|
||||
_safety_plan(card.safety_plan)
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-prescriptions"):
|
||||
_prescriptions(card)
|
||||
|
||||
@@ -51,7 +51,7 @@ def render_playback_panel(persona: dict[str, Any]) -> None:
|
||||
token = persona["token"]
|
||||
scenario, source = w.scenario_for(persona)
|
||||
state = w.playback_state(token)
|
||||
st.subheader("🎬 Сценарий демо")
|
||||
st.subheader("Сценарий демо")
|
||||
_scenario_source_controls(persona, source)
|
||||
if scenario.errors:
|
||||
with st.expander(f"⚠️ Замечания к сценарию: {len(scenario.errors)}", expanded=not scenario.days):
|
||||
|
||||
@@ -368,10 +368,9 @@ def render_doctor_panel(highlight_token: str | None, *, key: str = "doc") -> Non
|
||||
]
|
||||
for a in fresh_acute[:1]:
|
||||
st.markdown(
|
||||
"<div style='background:#c62828;color:#fff;padding:18px 20px;border-radius:12px;"
|
||||
"font-size:1.35rem;font-weight:700;margin-bottom:8px'>"
|
||||
"<div class='mt-banner t-red mt-console-alert'><div>"
|
||||
f"🚨 ОСТРЫЙ АЛЕРТ · {_escape(a.get('patient_name', ''))} · {_fmt_ts(a.get('ts'))}<br>"
|
||||
f"<span style='font-size:1.05rem;font-weight:500'>{_escape(a.get('reason', ''))}</span></div>",
|
||||
f"<div class='mt-sub'>{_escape(a.get('reason', ''))}</div></div></div>",
|
||||
unsafe_allow_html=True,
|
||||
)
|
||||
c1, c2 = st.columns(2)
|
||||
|
||||
@@ -68,7 +68,7 @@ def _reset() -> None:
|
||||
|
||||
def _result(res: ConnectPatientOut, name: str) -> None:
|
||||
link = h.absolute_link(res.deep_link, os.environ.get("DASHBOARD_PUBLIC_URL", "http://localhost:8501"))
|
||||
with st.container(border=True):
|
||||
with st.container(border=True, key="panel-connect-result"):
|
||||
st.html(
|
||||
f'<div class="mt-kicker">Пациент подключён · {escape(name)}</div>'
|
||||
'<div class="mt-sub" style="margin:4px 0 10px">Покажите QR пациенту или продиктуйте код — бот спросит '
|
||||
@@ -108,7 +108,7 @@ def main() -> None:
|
||||
st.button("Заполнить демо-данными (Андрей)", icon=":material/auto_fix_high:", on_click=_fill_demo, args=(today,))
|
||||
|
||||
left, right = st.columns(2, gap="large")
|
||||
with left, st.container(border=True):
|
||||
with left, st.container(border=True, key="panel-connect-person"):
|
||||
st.html('<div class="mt-panel-title">Пациент</div>')
|
||||
st.text_input("Имя и инициал фамилии", key="cp_name", placeholder="Андрей С.", help="Без полного ФИО")
|
||||
a, b = st.columns(2)
|
||||
@@ -128,7 +128,7 @@ def main() -> None:
|
||||
key="cp_modules",
|
||||
format_func=lambda m: h.MODULE_LABELS[m],
|
||||
)
|
||||
with right, st.container(border=True):
|
||||
with right, st.container(border=True, key="panel-connect-prescription"):
|
||||
st.html('<div class="mt-panel-title">Назначение</div>')
|
||||
d1, d2 = st.columns([1.4, 1])
|
||||
with d1:
|
||||
|
||||
@@ -14,21 +14,31 @@ sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
|
||||
from console import widgets as w # noqa: E402
|
||||
from console.playback_ui import render_playback_panel # noqa: E402
|
||||
|
||||
from dashboard import theme # noqa: E402
|
||||
from dashboard.components import ui # noqa: E402
|
||||
|
||||
st.set_page_config(page_title="Демо-консоль", page_icon="🎬", layout="wide")
|
||||
|
||||
st.html(theme.CSS)
|
||||
st.html(
|
||||
ui.page_header(
|
||||
"Демо-консоль",
|
||||
"Чат пациента и сценарий сопровождения. Прототип на синтетических данных.",
|
||||
kicker="Демонстрация",
|
||||
)
|
||||
)
|
||||
|
||||
persona = w.select_persona()
|
||||
w.render_connect_hero()
|
||||
w.show_flash()
|
||||
st.sidebar.caption(f"API: {w.get_api().base_url}")
|
||||
|
||||
st.title("Демо-консоль")
|
||||
st.caption("Прототип на синтетических данных. Время — виртуальные демо-часы (ADR-005).")
|
||||
with st.container(border=True, key="panel-console-clock"):
|
||||
w.render_clock_bar(persona, key="console-clock")
|
||||
st.divider()
|
||||
|
||||
chat_col, play_col = st.columns([1.05, 1], gap="large")
|
||||
with chat_col:
|
||||
st.subheader(f"💬 Чат пациента — {persona.get('display_name') or persona['token']}")
|
||||
with chat_col, st.container(border=True, key="panel-console-chat"):
|
||||
st.subheader(f"Чат пациента — {persona.get('display_name') or persona['token']}")
|
||||
w.render_chat(persona["token"], height=560, key="console-chat")
|
||||
with play_col:
|
||||
with play_col, st.container(border=True, key="panel-console-scenario"):
|
||||
render_playback_panel(persona)
|
||||
|
||||
@@ -15,12 +15,12 @@ sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
|
||||
|
||||
from console import widgets as w # noqa: E402
|
||||
|
||||
from dashboard import theme # noqa: E402
|
||||
from dashboard.components import ui # noqa: E402
|
||||
|
||||
st.set_page_config(page_title="Сплит-экран", page_icon="🖥️", layout="wide", initial_sidebar_state="collapsed")
|
||||
st.markdown(
|
||||
"<style>.block-container{padding-top:1.2rem;max-width:100%} "
|
||||
"[data-testid='stMarkdownContainer'] p, [data-testid='stMarkdownContainer'] li{font-size:1.08rem}</style>",
|
||||
unsafe_allow_html=True,
|
||||
)
|
||||
st.html(theme.CSS)
|
||||
st.html(ui.page_header("Сплит-экран", "Пациент и врач: сопровождение в реальном времени.", kicker="Демонстрация"))
|
||||
|
||||
persona = w.select_persona()
|
||||
w.show_flash()
|
||||
@@ -44,15 +44,15 @@ if clicked and nxt is not None:
|
||||
st.rerun()
|
||||
|
||||
left, right = st.columns([1.1, 1], gap="large")
|
||||
with left:
|
||||
with left, st.container(border=True, key="panel-split-patient"):
|
||||
url = w.patient_web_url()
|
||||
if url:
|
||||
st.markdown(f"#### 📱 Пациент — {persona.get('display_name') or token}")
|
||||
st.markdown(f"#### Пациент — {persona.get('display_name') or token}")
|
||||
st.iframe(url, height=760)
|
||||
st.caption(f"Веб-приложение пациента: {url}")
|
||||
else:
|
||||
st.markdown(f"#### 💬 Пациент — {persona.get('display_name') or token}")
|
||||
st.markdown(f"#### Пациент — {persona.get('display_name') or token}")
|
||||
w.render_chat(token, height=600, key="split-chat")
|
||||
with right:
|
||||
st.markdown("#### 🩺 Кабинет врача — д-р Смирнова Е. А.")
|
||||
with right, st.container(border=True, key="panel-split-doctor"):
|
||||
st.markdown("#### Кабинет врача — д-р Смирнова Е. А.")
|
||||
w.polled_doctor_panel(token, key="split-doc")
|
||||
|
||||
+23
-6
@@ -138,8 +138,8 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
|
||||
.mt-empty p {{ font-size:.85rem; margin:8px 0 0; }}
|
||||
|
||||
/* ---------- chips, badges, bars ---------- */
|
||||
.mt-chip {{ display:inline-block; font-size:.72rem; padding: 1px 8px; border-radius: 999px; margin-right: 4px;
|
||||
background: var(--blue-tint); color: var(--blue-ink); font-weight: 500; }}
|
||||
.mt-chip {{ display:inline-block; font-size:.72rem; padding: 1px 8px; border-radius: 5px; margin-right: 4px;
|
||||
background: #edf3ee; color: #38634b; font-weight: 500; }}
|
||||
.mt-badge {{ display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:550; padding: 5px 8px;
|
||||
border-radius: 5px; white-space: normal; }}
|
||||
.mt-badge.t-red {{ background: var(--red-tint); color: var(--red-ink); }}
|
||||
@@ -166,7 +166,7 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
|
||||
.mt-banner b {{ color: inherit; }}
|
||||
.mt-pulse {{ width: 12px; height: 12px; border-radius: 50%; background: var(--red); margin-top: 5px; flex: none;
|
||||
box-shadow: 0 0 0 4px #faeeee; }}
|
||||
.mt-panel-title {{ font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 650;
|
||||
.mt-panel-title {{ font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 550;
|
||||
color: var(--ink-3); margin: 2px 0 8px; }}
|
||||
.mt-alert {{ border-left: 4px solid var(--grey); padding: 4px 0 4px 12px; }}
|
||||
.mt-alert.t-red {{ border-left-color: var(--red); }}
|
||||
@@ -175,9 +175,9 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
|
||||
.mt-alert .when {{ color: var(--ink-3); font-size: .78rem; }}
|
||||
.mt-alert .why {{ color: var(--ink); font-weight: 600; font-size: .92rem; margin: 2px 0; }}
|
||||
.mt-alert.acked .why {{ color: var(--ink-3); font-weight: 500; }}
|
||||
.mt-summary {{ background: var(--blue-tint); border-radius: 12px; padding: 14px 16px; color: var(--ink);
|
||||
line-height: 1.5; font-size: .93rem; }}
|
||||
.mt-summary .disc {{ color: var(--blue-ink); font-size: .76rem; margin-top: 8px; }}
|
||||
.mt-summary {{ background: #f4f6f2; border:1px solid var(--line); border-radius: 12px; padding: 14px 16px;
|
||||
color: var(--ink); line-height: 1.5; font-size: .93rem; }}
|
||||
.mt-summary .disc {{ color: var(--ink-2); font-size: .76rem; margin-top: 8px; }}
|
||||
.mt-plan ol {{ margin: 0; padding-left: 1.2rem; }}
|
||||
.mt-plan li {{ margin: 3px 0; color: var(--ink); font-size: .9rem; }}
|
||||
|
||||
@@ -195,6 +195,21 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
|
||||
.mt-legend i {{ display:inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px;
|
||||
vertical-align: -1px; }}
|
||||
|
||||
/* ---------- internal pages ---------- */
|
||||
div[class*="st-key-panel-"] {{ background:var(--surface); border:1px solid var(--line); border-radius:12px;
|
||||
padding:20px; }}
|
||||
[data-testid="stExpander"] {{ background:var(--surface); border-color:var(--line); border-radius:12px; }}
|
||||
[data-testid="stChatMessage"] {{ background:#f4f6f2; border:1px solid var(--line); border-radius:12px; }}
|
||||
[data-testid="stChatInput"] {{ background:var(--surface); border:1px solid var(--line); border-radius:8px; }}
|
||||
[data-testid="stNumberInputContainer"], [data-testid="stDateInput"] input {{
|
||||
background:var(--surface); color:var(--ink); border-color:var(--line); border-radius:8px; }}
|
||||
[data-testid="stApp"] [data-variant="pills"][data-selected] {{ background:#edf3ee; color:#285e4e;
|
||||
border-color:#b4c6ba; }}
|
||||
.mt-console-alert {{ font-size:1.1rem; font-weight:600; }}
|
||||
.mt-console-alert .mt-sub {{ color:var(--red-ink); font-weight:400; }}
|
||||
.mt-dose-scroll {{ overflow-x:auto; padding-bottom:4px; }}
|
||||
.mt-doses {{ min-width:max-content; }}
|
||||
|
||||
/* ---------- connect result ---------- */
|
||||
.mt-code {{ font-size: 2.4rem; font-weight: 700; letter-spacing: .12em; color: var(--ink);
|
||||
font-variant-numeric: tabular-nums; }}
|
||||
@@ -222,6 +237,8 @@ div[class*="st-key-prow-"] {{ border-top:1px solid var(--line); padding:18px 0 4
|
||||
.mt-mobile-label {{ display:block; color:var(--ink-3); font-size:.68rem; margin-bottom:5px; }}
|
||||
.mt-row-details {{ grid-template-columns:1fr; gap:12px; }}
|
||||
.mt-list-footer {{ flex-wrap:wrap; }}
|
||||
.mt-head .mt-side {{ text-align:left; }}
|
||||
div[class*="st-key-panel-"] {{ padding:16px; }}
|
||||
.mt-tip:hover::after, .mt-tip:focus-visible::after {{ display:none; }}
|
||||
}}
|
||||
@media (prefers-reduced-motion: reduce) {{
|
||||
|
||||
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#0a4da2"/><path d="M13 7h6v6h6v6h-6v6h-6v-6H7v-6h6z" fill="#fff"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="9" fill="#285e4e"/><path d="M16 8v16M8 16h16" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 175 B After Width: | Height: | Size: 201 B |
@@ -3,13 +3,14 @@ import { Link, NavLink } from "react-router-dom";
|
||||
|
||||
import { ru } from "../content/ru";
|
||||
import { useDialog } from "../dialog/DialogContext";
|
||||
import { useSession } from "../session/SessionContext";
|
||||
import { HotlineCard, useHelp } from "./HelpSheet";
|
||||
import { Icon, LogoMark, type IconName } from "./Icon";
|
||||
|
||||
/*
|
||||
* Layout from docs/mock (series 2).
|
||||
* Shared patient workspace, following the approved doctor dashboard.
|
||||
* phone: content → «Экстренная помощь» block → bottom tab bar (signed in)
|
||||
* desktop: navy sidebar | content | right rail (optional `aside` + emergency panel)
|
||||
* desktop: white sidebar | workspace header | content + emergency panel
|
||||
* bare: one centred column on every width (questionnaires)
|
||||
*/
|
||||
|
||||
@@ -87,6 +88,10 @@ function Sidebar({ signedIn }: { signedIn: boolean }) {
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
<div className="sidebar__note">
|
||||
<strong>{ru.product.supportTitle}</strong>
|
||||
<span>{ru.product.supportText}</span>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -122,6 +127,24 @@ function Rail({ aside }: { aside?: ReactNode }) {
|
||||
);
|
||||
}
|
||||
|
||||
function WorkspaceHeader({ signedIn, bare = false }: { signedIn: boolean; bare?: boolean }) {
|
||||
const { session } = useSession();
|
||||
return (
|
||||
<header className={`workspace${bare ? " workspace--bare" : ""}`}>
|
||||
<div className="workspace__brand">
|
||||
<LogoMark size={30} />
|
||||
<span>{bare ? ru.product.name : signedIn ? ru.product.workspace : ru.nav.signIn}</span>
|
||||
</div>
|
||||
{signedIn && !bare ? (
|
||||
<Link className="workspace__profile" to="/profile">
|
||||
<span className="avatar"><Icon name="user" size={18} /></span>
|
||||
<span>{session?.displayName || ru.nav.profile}</span>
|
||||
</Link>
|
||||
) : <span className="workspace__tag">{ru.product.tagline}</span>}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export function AppShell({
|
||||
children,
|
||||
signedIn = true,
|
||||
@@ -144,6 +167,7 @@ export function AppShell({
|
||||
return (
|
||||
<div className="app app--bare">
|
||||
<div className="app__main">
|
||||
<WorkspaceHeader signedIn={signedIn} bare />
|
||||
<main className="screen" id="main">
|
||||
{children}
|
||||
{sos && <EmergencyBlock />}
|
||||
@@ -155,6 +179,7 @@ export function AppShell({
|
||||
<div className={`app${signedIn && !focus ? " app--tabs" : ""}`}>
|
||||
<Sidebar signedIn={signedIn} />
|
||||
<div className="app__main">
|
||||
<WorkspaceHeader signedIn={signedIn} />
|
||||
<main className="screen" id="main">
|
||||
{children}
|
||||
{sos && <EmergencyBlock />}
|
||||
|
||||
@@ -163,8 +163,8 @@ export function Icon({ name, size = 22, label }: { name: IconName; size?: number
|
||||
export function LogoMark({ size = 32 }: { size?: number }) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true" focusable="false">
|
||||
<rect width="32" height="32" rx="9" fill="var(--c-teal)" />
|
||||
<path d="M13 7h6v6h6v6h-6v6h-6v-6H7v-6h6z" fill="#fff" />
|
||||
<rect width="32" height="32" rx="9" fill="var(--c-primary)" />
|
||||
<path d="M16 8v16M8 16h16" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,6 +6,9 @@ export const ru = {
|
||||
product: {
|
||||
name: "Сопровождение пациента",
|
||||
tagline: "между визитами к врачу",
|
||||
workspace: "Личный кабинет",
|
||||
supportTitle: "Рядом между визитами",
|
||||
supportText: "Наблюдение за самочувствием и поддержка назначенного лечения.",
|
||||
},
|
||||
nav: {
|
||||
today: "Сегодня",
|
||||
@@ -201,6 +204,7 @@ export const ru = {
|
||||
toIntake: "Пройти первичный опрос",
|
||||
},
|
||||
flow: {
|
||||
home: "На главный экран",
|
||||
question: (n: number, total: number) => `Вопрос ${n} из ${total}`,
|
||||
period: "За последний месяц",
|
||||
textPlaceholder: "Напишите несколько слов",
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
import "@fontsource/golos-text/400.css";
|
||||
import "@fontsource/golos-text/500.css";
|
||||
import "@fontsource/golos-text/600.css";
|
||||
import "@fontsource/golos-text/700.css";
|
||||
import "./theme/tokens.css";
|
||||
import "./theme/global.css";
|
||||
|
||||
|
||||
+14
-15
@@ -265,7 +265,7 @@ function FreeText({
|
||||
{skip.label}
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" className="btn btn--ghost" onClick={onExit}>
|
||||
<button type="button" className="btn btn--ghost" disabled={busy} onClick={onExit}>
|
||||
{ru.flow.exit}
|
||||
</button>
|
||||
)}
|
||||
@@ -362,6 +362,7 @@ function SurveyAct({
|
||||
press,
|
||||
say,
|
||||
onPause,
|
||||
onHome,
|
||||
}: {
|
||||
step: Survey;
|
||||
stepKey: string;
|
||||
@@ -369,6 +370,7 @@ function SurveyAct({
|
||||
press: (b: DialogButton) => void;
|
||||
say: (text: string) => void;
|
||||
onPause: (b: DialogButton) => void;
|
||||
onHome: () => void;
|
||||
}) {
|
||||
let answer: ReactNode;
|
||||
switch (step.input) {
|
||||
@@ -381,7 +383,7 @@ function SurveyAct({
|
||||
break;
|
||||
case "text":
|
||||
answer = (
|
||||
<FreeText key={stepKey} skip={step.skip} busy={busy} onSend={say} onSkip={press} onExit={() => undefined} />
|
||||
<FreeText key={stepKey} skip={step.skip} busy={busy} onSend={say} onSkip={press} onExit={onHome} />
|
||||
);
|
||||
break;
|
||||
default:
|
||||
@@ -522,17 +524,6 @@ export function Flow() {
|
||||
navigate("/today", { replace: true });
|
||||
}, [step, stepKey, navigate, toast]);
|
||||
|
||||
// Questionnaire: answers are saved on the server per question, and there is no going back to change one.
|
||||
// The browser «back» is absorbed by a duplicate history entry of this same screen.
|
||||
const testing = step?.kind === "survey" || step?.kind === "choice" || step?.kind === "consent";
|
||||
useEffect(() => {
|
||||
if (!testing) return;
|
||||
window.history.pushState(null, "", window.location.href);
|
||||
const stay = () => window.history.pushState(null, "", window.location.href);
|
||||
window.addEventListener("popstate", stay);
|
||||
return () => window.removeEventListener("popstate", stay);
|
||||
}, [testing]);
|
||||
|
||||
const press = (b: DialogButton) => void dialog.send({ type: "button", button: b.data }, b.label);
|
||||
// «Продолжить позже»: answers are already saved on the server — pause and go straight home, no confirmation.
|
||||
const pause = (b: DialogButton) =>
|
||||
@@ -588,7 +579,7 @@ export function Flow() {
|
||||
) : item ? (
|
||||
<Progress n={item.index} total={item.total} adaptive={item.adaptive} />
|
||||
) : null;
|
||||
const top = <TopBar onBack={testing ? undefined : home}>{progress}</TopBar>;
|
||||
const top = progress ? <TopBar>{progress}</TopBar> : null;
|
||||
// Phone: one column. Desktop: question and context on the left, answers and actions on the right.
|
||||
let lead: ReactNode;
|
||||
let act: ReactNode;
|
||||
@@ -702,7 +693,7 @@ export function Flow() {
|
||||
break;
|
||||
case "survey":
|
||||
lead = <SurveyLead step={step} catalog={catalog} />;
|
||||
act = <SurveyAct step={step} stepKey={stepKey} busy={dialog.busy} press={press} say={say} onPause={pause} />;
|
||||
act = <SurveyAct step={step} stepKey={stepKey} busy={dialog.busy} press={press} say={say} onPause={pause} onHome={home} />;
|
||||
break;
|
||||
case "choice":
|
||||
lead = <Head title={step.title} lead={step.lead} />;
|
||||
@@ -725,6 +716,14 @@ export function Flow() {
|
||||
|
||||
return (
|
||||
<AppShell focus bare sos={step?.kind !== "crisis"}>
|
||||
<nav className="flow-nav" aria-label={ru.flow.home}>
|
||||
{/* Leaving does not send an answer or clear pending: Today can reopen this same question.
|
||||
Wait for an in-flight answer before leaving so its result has reached the shared dialog. */}
|
||||
<button type="button" className="btn btn--ghost btn--auto" disabled={dialog.busy} onClick={home}>
|
||||
<Icon name="home" size={20} />
|
||||
{ru.flow.home}
|
||||
</button>
|
||||
</nav>
|
||||
{content}
|
||||
</AppShell>
|
||||
);
|
||||
|
||||
+387
-106
File diff suppressed because it is too large
Load Diff
+33
-33
@@ -1,45 +1,45 @@
|
||||
/*
|
||||
* Design tokens — single source of colours, type and spacing (docs/mock, series 2).
|
||||
* Shared visual language with dashboard/theme.py and the approved doctor workspace.
|
||||
* Capacitor wraps this same bundle; a React Native port maps these 1:1 to a theme object.
|
||||
*/
|
||||
:root {
|
||||
/* Ink & surfaces */
|
||||
--c-navy: #0f2747; /* primary buttons, headings, desktop sidebar */
|
||||
--c-navy-hover: #0a1d37;
|
||||
--c-navy-soft: #e8eef6;
|
||||
--c-text: #13294b;
|
||||
--c-text-2: #4d5d73;
|
||||
--c-text-3: #7a889b;
|
||||
--c-page: #ffffff;
|
||||
--c-page-desk: #f4f7fb; /* desktop canvas behind white panels */
|
||||
--c-primary: #285e4e; /* primary buttons and active navigation */
|
||||
--c-primary-hover: #204b3e;
|
||||
--c-primary-soft: #edf3ee;
|
||||
--c-text: #213b38;
|
||||
--c-text-2: #526660;
|
||||
--c-text-3: #63736f;
|
||||
--c-page: #f6f7f3;
|
||||
--c-page-desk: #f6f7f3; /* desktop canvas behind white panels */
|
||||
--c-surface: #ffffff;
|
||||
--c-tile: #f3f7fb; /* soft card fill */
|
||||
--c-border: #e2e9f1;
|
||||
--c-border-strong: #c9d4e1;
|
||||
--c-tile: #f4f6f2; /* soft card fill */
|
||||
--c-border: #e1e7e3;
|
||||
--c-border-strong: #b4c6ba;
|
||||
|
||||
/* Selection & positive: teal */
|
||||
--c-teal: #17a08f;
|
||||
--c-teal-strong: #0e7e71;
|
||||
--c-teal-soft: #e3f5f2;
|
||||
/* Selection & positive */
|
||||
--c-teal: #527f61;
|
||||
--c-teal-strong: #38634b;
|
||||
--c-teal-soft: #eef4ee;
|
||||
|
||||
/* Info: blue */
|
||||
--c-blue: #2f7fdb;
|
||||
--c-blue-soft: #eaf3fd;
|
||||
/* Informational surfaces */
|
||||
--c-blue: #38634b;
|
||||
--c-blue-soft: #edf3ee;
|
||||
|
||||
/* Help & crisis: red */
|
||||
--c-red: #e2383b;
|
||||
--c-red-strong: #c62b2e;
|
||||
--c-red-soft: #fdeded;
|
||||
--c-red-line: #f7d3d3;
|
||||
--c-red: #a83236;
|
||||
--c-red-strong: #a83236;
|
||||
--c-red-soft: #faeeee;
|
||||
--c-red-line: #e7cbcb;
|
||||
|
||||
/* Warning */
|
||||
--c-amber: #e69a12;
|
||||
--c-amber-soft: #fff4dd;
|
||||
--c-amber: #805714;
|
||||
--c-amber-soft: #fbf3e4;
|
||||
|
||||
--c-focus: #2f7fdb;
|
||||
--c-focus: #598d7a;
|
||||
|
||||
/* Type: Golos Text (OFL), bundled locally — works offline. */
|
||||
--font: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
/* Same offline system stack as the doctor workspace. */
|
||||
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
|
||||
--fs-12: 0.75rem;
|
||||
--fs-13: 0.8125rem;
|
||||
--fs-14: 0.875rem;
|
||||
@@ -63,14 +63,14 @@
|
||||
--s-12: 48px;
|
||||
|
||||
/* Radii: tiles > buttons > chips */
|
||||
--r-tile: 16px;
|
||||
--r-btn: 12px;
|
||||
--r-chip: 999px;
|
||||
--r-tile: 12px;
|
||||
--r-btn: 8px;
|
||||
--r-chip: 5px;
|
||||
|
||||
--tap: 52px;
|
||||
--nav-h: 64px;
|
||||
--sidebar-w: 232px;
|
||||
--rail-w: 300px;
|
||||
--sidebar-w: 228px;
|
||||
--rail-w: 264px;
|
||||
|
||||
--safe-top: env(safe-area-inset-top, 0px);
|
||||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
|
||||
Reference in New Issue
Block a user