MedITron/PTSRaiAgent
4
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): единый дизайн всех страниц по образцу кабинета врача #88

Merged
Eleboba merged 2 commits from feat/85-unified-design into dev 2026-10-04 16:20:11 +03:00
Conversation 0 Commits 2 Files Changed 16
+526 -192
15 changed files with 526 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2a2fdb171e - Show all commits
.streamlit/config.toml
+6 -6
View File
@@ -1,15 +1,15 @@
# Dashboard-only Streamlit settings (doctor dashboard + demo console). # Dashboard-only Streamlit settings (doctor dashboard + demo console).
[theme] [theme]
base = "light" base = "light"
primaryColor = "#2A78D6" primaryColor = "#285E4E"
backgroundColor = "#F6F7F9" backgroundColor = "#F6F7F3"
secondaryBackgroundColor = "#FFFFFF" secondaryBackgroundColor = "#FFFFFF"
textColor = "#1B1F24" textColor = "#213B38"
borderColor = "#E3E6EA" borderColor = "#E1E7E3"
baseRadius = "medium" baseRadius = "medium"
# Falls back to the system sans-serif when offline (ADR-004). # 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" font = "sans-serif"
headingFontWeights = 700 headingFontWeights = 600
[client] [client]
toolbarMode = "minimal" toolbarMode = "minimal"
dashboard/components/patient_card.py
+11 -8
View File
@@ -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>' f'<span><i style="border:1.5px dashed var(--grey)"></i>ожидается · {c["pending"]}</span>'
"</div>" "</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: 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") main, side = st.columns([1.75, 1], gap="large")
with main: with main:
with st.container(border=True): with st.container(border=True, key="panel-scales"):
c1, c2 = st.columns(2) c1, c2 = st.columns(2)
for col, scale_id, title in ((c1, "phq9", "PHQ-9"), (c2, "pcl5", "PCL-5")): for col, scale_id, title in ((c1, "phq9", "PHQ-9"), (c2, "pcl5", "PCL-5")):
fig = charts.scale_figure(card.series, scale_id, title, start) fig = charts.scale_figure(card.series, scale_id, title, start)
@@ -191,22 +194,22 @@ def render(card: PatientCard, today: date | None) -> None:
else: else:
st.plotly_chart(fig, config=theme.PLOTLY_CONFIG, key=f"chart-{scale_id}") st.plotly_chart(fig, config=theme.PLOTLY_CONFIG, key=f"chart-{scale_id}")
st.caption("◇ — внеплановое заполнение (по триггеру правил). Полосы — градации тяжести из config/scales.") st.caption("◇ — внеплановое заполнение (по триггеру правил). Полосы — градации тяжести из config/scales.")
with st.container(border=True): with st.container(border=True, key="panel-wellbeing"):
fig = charts.wellbeing_figure(card.series, start) fig = charts.wellbeing_figure(card.series, start)
if fig is None: if fig is None:
st.caption("Ежедневных чек-инов пока нет") st.caption("Ежедневных чек-инов пока нет")
else: else:
st.plotly_chart(fig, config=theme.PLOTLY_CONFIG, key="chart-wellbeing") st.plotly_chart(fig, config=theme.PLOTLY_CONFIG, key="chart-wellbeing")
st.caption("Красная зона настроения ≤ 3 (3 дня → внеплановый PHQ-9); пунктир — сон 4 ч.") 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('<div class="mt-panel-title">Календарь приёма</div>')
st.html(dose_strip_html(grid, start)) st.html(dose_strip_html(grid, start))
with side: with side:
with st.container(border=True): with st.container(border=True, key="panel-alerts"):
_alerts_feed(card.alerts, today) _alerts_feed(card.alerts, today)
with st.container(border=True): with st.container(border=True, key="panel-summary"):
_summary(card.summary) _summary(card.summary)
with st.container(border=True): with st.container(border=True, key="panel-safety"):
_safety_plan(card.safety_plan) _safety_plan(card.safety_plan)
with st.container(border=True): with st.container(border=True, key="panel-prescriptions"):
_prescriptions(card) _prescriptions(card)
dashboard/console/playback_ui.py
+1 -1
View File
@@ -51,7 +51,7 @@ def render_playback_panel(persona: dict[str, Any]) -> None:
token = persona["token"] token = persona["token"]
scenario, source = w.scenario_for(persona) scenario, source = w.scenario_for(persona)
state = w.playback_state(token) state = w.playback_state(token)
st.subheader("🎬 Сценарий демо") st.subheader("Сценарий демо")
_scenario_source_controls(persona, source) _scenario_source_controls(persona, source)
if scenario.errors: if scenario.errors:
with st.expander(f"⚠️ Замечания к сценарию: {len(scenario.errors)}", expanded=not scenario.days): with st.expander(f"⚠️ Замечания к сценарию: {len(scenario.errors)}", expanded=not scenario.days):
dashboard/console/widgets.py
+2 -3
View File
@@ -368,10 +368,9 @@ def render_doctor_panel(highlight_token: str | None, *, key: str = "doc") -> Non
] ]
for a in fresh_acute[:1]: for a in fresh_acute[:1]:
st.markdown( st.markdown(
"<div style='background:#c62828;color:#fff;padding:18px 20px;border-radius:12px;" "<div class='mt-banner t-red mt-console-alert'><div>"
"font-size:1.35rem;font-weight:700;margin-bottom:8px'>"
f"🚨 ОСТРЫЙ АЛЕРТ · {_escape(a.get('patient_name', ''))} · {_fmt_ts(a.get('ts'))}<br>" 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, unsafe_allow_html=True,
) )
c1, c2 = st.columns(2) c1, c2 = st.columns(2)
dashboard/pages/1b_Подключить_пациента.py
+3 -3
View File
@@ -68,7 +68,7 @@ def _reset() -> None:
def _result(res: ConnectPatientOut, name: str) -> None: def _result(res: ConnectPatientOut, name: str) -> None:
link = h.absolute_link(res.deep_link, os.environ.get("DASHBOARD_PUBLIC_URL", "http://localhost:8501")) 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( st.html(
f'<div class="mt-kicker">Пациент подключён · {escape(name)}</div>' f'<div class="mt-kicker">Пациент подключён · {escape(name)}</div>'
'<div class="mt-sub" style="margin:4px 0 10px">Покажите QR пациенту или продиктуйте код — бот спросит ' '<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,)) st.button("Заполнить демо-данными (Андрей)", icon=":material/auto_fix_high:", on_click=_fill_demo, args=(today,))
left, right = st.columns(2, gap="large") 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.html('<div class="mt-panel-title">Пациент</div>')
st.text_input("Имя и инициал фамилии", key="cp_name", placeholder="Андрей С.", help="Без полного ФИО") st.text_input("Имя и инициал фамилии", key="cp_name", placeholder="Андрей С.", help="Без полного ФИО")
a, b = st.columns(2) a, b = st.columns(2)
@@ -128,7 +128,7 @@ def main() -> None:
key="cp_modules", key="cp_modules",
format_func=lambda m: h.MODULE_LABELS[m], 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>') st.html('<div class="mt-panel-title">Назначение</div>')
d1, d2 = st.columns([1.4, 1]) d1, d2 = st.columns([1.4, 1])
with d1: with d1:
dashboard/pages/2_Демо-консоль.py
+16 -6
View File
@@ -14,21 +14,31 @@ sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
from console import widgets as w # noqa: E402 from console import widgets as w # noqa: E402
from console.playback_ui import render_playback_panel # 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.set_page_config(page_title="Демо-консоль", page_icon="🎬", layout="wide")
st.html(theme.CSS)
st.html(
ui.page_header(
"Демо-консоль",
"Чат пациента и сценарий сопровождения. Прототип на синтетических данных.",
kicker="Демонстрация",
)
)
persona = w.select_persona() persona = w.select_persona()
w.render_connect_hero() w.render_connect_hero()
w.show_flash() w.show_flash()
st.sidebar.caption(f"API: {w.get_api().base_url}") st.sidebar.caption(f"API: {w.get_api().base_url}")
st.title("Демо-консоль") with st.container(border=True, key="panel-console-clock"):
st.caption("Прототип на синтетических данных. Время — виртуальные демо-часы (ADR-005).")
w.render_clock_bar(persona, key="console-clock") w.render_clock_bar(persona, key="console-clock")
st.divider()
chat_col, play_col = st.columns([1.05, 1], gap="large") chat_col, play_col = st.columns([1.05, 1], gap="large")
with chat_col: with chat_col, st.container(border=True, key="panel-console-chat"):
st.subheader(f"💬 Чат пациента — {persona.get('display_name') or persona['token']}") st.subheader(f"Чат пациента — {persona.get('display_name') or persona['token']}")
w.render_chat(persona["token"], height=560, key="console-chat") 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) render_playback_panel(persona)
dashboard/pages/3_Сплит-экран.py
+10 -10
View File
@@ -15,12 +15,12 @@ sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
from console import widgets as w # noqa: E402 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.set_page_config(page_title="Сплит-экран", page_icon="🖥️", layout="wide", initial_sidebar_state="collapsed")
st.markdown( st.html(theme.CSS)
"<style>.block-container{padding-top:1.2rem;max-width:100%} " st.html(ui.page_header("Сплит-экран", "Пациент и врач: сопровождение в реальном времени.", kicker="Демонстрация"))
"[data-testid='stMarkdownContainer'] p, [data-testid='stMarkdownContainer'] li{font-size:1.08rem}</style>",
unsafe_allow_html=True,
)
persona = w.select_persona() persona = w.select_persona()
w.show_flash() w.show_flash()
@@ -44,15 +44,15 @@ if clicked and nxt is not None:
st.rerun() st.rerun()
left, right = st.columns([1.1, 1], gap="large") 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() url = w.patient_web_url()
if 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.iframe(url, height=760)
st.caption(f"Веб-приложение пациента: {url}") st.caption(f"Веб-приложение пациента: {url}")
else: 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") w.render_chat(token, height=600, key="split-chat")
with right: with right, st.container(border=True, key="panel-split-doctor"):
st.markdown("#### 🩺 Кабинет врача — д-р Смирнова Е. А.") st.markdown("#### Кабинет врача — д-р Смирнова Е. А.")
w.polled_doctor_panel(token, key="split-doc") w.polled_doctor_panel(token, key="split-doc")
dashboard/theme.py
+23 -6
View File
@@ -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; }} .mt-empty p {{ font-size:.85rem; margin:8px 0 0; }}
/* ---------- chips, badges, bars ---------- */ /* ---------- chips, badges, bars ---------- */
.mt-chip {{ display:inline-block; font-size:.72rem; padding: 1px 8px; border-radius: 999px; margin-right: 4px; .mt-chip {{ display:inline-block; font-size:.72rem; padding: 1px 8px; border-radius: 5px; margin-right: 4px;
background: var(--blue-tint); color: var(--blue-ink); font-weight: 500; }} 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; .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; }} border-radius: 5px; white-space: normal; }}
.mt-badge.t-red {{ background: var(--red-tint); color: var(--red-ink); }} .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-banner b {{ color: inherit; }}
.mt-pulse {{ width: 12px; height: 12px; border-radius: 50%; background: var(--red); margin-top: 5px; flex: none; .mt-pulse {{ width: 12px; height: 12px; border-radius: 50%; background: var(--red); margin-top: 5px; flex: none;
box-shadow: 0 0 0 4px #faeeee; }} 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; }} color: var(--ink-3); margin: 2px 0 8px; }}
.mt-alert {{ border-left: 4px solid var(--grey); padding: 4px 0 4px 12px; }} .mt-alert {{ border-left: 4px solid var(--grey); padding: 4px 0 4px 12px; }}
.mt-alert.t-red {{ border-left-color: var(--red); }} .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 .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 .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-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); .mt-summary {{ background: #f4f6f2; border:1px solid var(--line); border-radius: 12px; padding: 14px 16px;
line-height: 1.5; font-size: .93rem; }} 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 .disc {{ color: var(--ink-2); font-size: .76rem; margin-top: 8px; }}
.mt-plan ol {{ margin: 0; padding-left: 1.2rem; }} .mt-plan ol {{ margin: 0; padding-left: 1.2rem; }}
.mt-plan li {{ margin: 3px 0; color: var(--ink); font-size: .9rem; }} .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; .mt-legend i {{ display:inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px;
vertical-align: -1px; }} 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 ---------- */ /* ---------- connect result ---------- */
.mt-code {{ font-size: 2.4rem; font-weight: 700; letter-spacing: .12em; color: var(--ink); .mt-code {{ font-size: 2.4rem; font-weight: 700; letter-spacing: .12em; color: var(--ink);
font-variant-numeric: tabular-nums; }} 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-mobile-label {{ display:block; color:var(--ink-3); font-size:.68rem; margin-bottom:5px; }}
.mt-row-details {{ grid-template-columns:1fr; gap:12px; }} .mt-row-details {{ grid-template-columns:1fr; gap:12px; }}
.mt-list-footer {{ flex-wrap:wrap; }} .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; }} .mt-tip:hover::after, .mt-tip:focus-visible::after {{ display:none; }}
}} }}
@media (prefers-reduced-motion: reduce) {{ @media (prefers-reduced-motion: reduce) {{
web/public/favicon.svg
+1 -1
View File
@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 175 B

After

Width:  |  Height:  |  Size: 201 B

web/src/components/AppShell.tsx
+27 -2
View File
@@ -3,13 +3,14 @@ import { Link, NavLink } from "react-router-dom";
import { ru } from "../content/ru"; import { ru } from "../content/ru";
import { useDialog } from "../dialog/DialogContext"; import { useDialog } from "../dialog/DialogContext";
import { useSession } from "../session/SessionContext";
import { HotlineCard, useHelp } from "./HelpSheet"; import { HotlineCard, useHelp } from "./HelpSheet";
import { Icon, LogoMark, type IconName } from "./Icon"; 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) * 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) * bare: one centred column on every width (questionnaires)
*/ */
@@ -87,6 +88,10 @@ function Sidebar({ signedIn }: { signedIn: boolean }) {
</li> </li>
</ul> </ul>
)} )}
<div className="sidebar__note">
<strong>{ru.product.supportTitle}</strong>
<span>{ru.product.supportText}</span>
</div>
</nav> </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({ export function AppShell({
children, children,
signedIn = true, signedIn = true,
@@ -144,6 +167,7 @@ export function AppShell({
return ( return (
<div className="app app--bare"> <div className="app app--bare">
<div className="app__main"> <div className="app__main">
<WorkspaceHeader signedIn={signedIn} bare />
<main className="screen" id="main"> <main className="screen" id="main">
{children} {children}
{sos && <EmergencyBlock />} {sos && <EmergencyBlock />}
@@ -155,6 +179,7 @@ export function AppShell({
<div className={`app${signedIn && !focus ? " app--tabs" : ""}`}> <div className={`app${signedIn && !focus ? " app--tabs" : ""}`}>
<Sidebar signedIn={signedIn} /> <Sidebar signedIn={signedIn} />
<div className="app__main"> <div className="app__main">
<WorkspaceHeader signedIn={signedIn} />
<main className="screen" id="main"> <main className="screen" id="main">
{children} {children}
{sos && <EmergencyBlock />} {sos && <EmergencyBlock />}
web/src/components/Icon.tsx
+2 -2
View File
@@ -163,8 +163,8 @@ export function Icon({ name, size = 22, label }: { name: IconName; size?: number
export function LogoMark({ size = 32 }: { size?: number }) { export function LogoMark({ size = 32 }: { size?: number }) {
return ( return (
<svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true" focusable="false"> <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)" /> <rect width="32" height="32" rx="9" fill="var(--c-primary)" />
<path d="M13 7h6v6h6v6h-6v6h-6v-6H7v-6h6z" fill="#fff" /> <path d="M16 8v16M8 16h16" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
</svg> </svg>
); );
} }
web/src/content/ru.ts
+3
View File
@@ -6,6 +6,9 @@ export const ru = {
product: { product: {
name: "Сопровождение пациента", name: "Сопровождение пациента",
tagline: "между визитами к врачу", tagline: "между визитами к врачу",
workspace: "Личный кабинет",
supportTitle: "Рядом между визитами",
supportText: "Наблюдение за самочувствием и поддержка назначенного лечения.",
}, },
nav: { nav: {
today: "Сегодня", today: "Сегодня",
web/src/main.tsx
-4
View File
@@ -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/tokens.css";
import "./theme/global.css"; import "./theme/global.css";
web/src/theme/global.css
+387 -106
View File
File diff suppressed because it is too large Load Diff
web/src/theme/tokens.css
+33 -33
View File
@@ -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. * Capacitor wraps this same bundle; a React Native port maps these 1:1 to a theme object.
*/ */
:root { :root {
/* Ink & surfaces */ /* Ink & surfaces */
--c-navy: #0f2747; /* primary buttons, headings, desktop sidebar */ --c-primary: #285e4e; /* primary buttons and active navigation */
--c-navy-hover: #0a1d37; --c-primary-hover: #204b3e;
--c-navy-soft: #e8eef6; --c-primary-soft: #edf3ee;
--c-text: #13294b; --c-text: #213b38;
--c-text-2: #4d5d73; --c-text-2: #526660;
--c-text-3: #7a889b; --c-text-3: #63736f;
--c-page: #ffffff; --c-page: #f6f7f3;
--c-page-desk: #f4f7fb; /* desktop canvas behind white panels */ --c-page-desk: #f6f7f3; /* desktop canvas behind white panels */
--c-surface: #ffffff; --c-surface: #ffffff;
--c-tile: #f3f7fb; /* soft card fill */ --c-tile: #f4f6f2; /* soft card fill */
--c-border: #e2e9f1; --c-border: #e1e7e3;
--c-border-strong: #c9d4e1; --c-border-strong: #b4c6ba;
/* Selection & positive: teal */ /* Selection & positive */
--c-teal: #17a08f; --c-teal: #527f61;
--c-teal-strong: #0e7e71; --c-teal-strong: #38634b;
--c-teal-soft: #e3f5f2; --c-teal-soft: #eef4ee;
/* Info: blue */ /* Informational surfaces */
--c-blue: #2f7fdb; --c-blue: #38634b;
--c-blue-soft: #eaf3fd; --c-blue-soft: #edf3ee;
/* Help & crisis: red */ /* Help & crisis: red */
--c-red: #e2383b; --c-red: #a83236;
--c-red-strong: #c62b2e; --c-red-strong: #a83236;
--c-red-soft: #fdeded; --c-red-soft: #faeeee;
--c-red-line: #f7d3d3; --c-red-line: #e7cbcb;
/* Warning */ /* Warning */
--c-amber: #e69a12; --c-amber: #805714;
--c-amber-soft: #fff4dd; --c-amber-soft: #fbf3e4;
--c-focus: #2f7fdb; --c-focus: #598d7a;
/* Type: Golos Text (OFL), bundled locally — works offline. */ /* Same offline system stack as the doctor workspace. */
--font: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--fs-12: 0.75rem; --fs-12: 0.75rem;
--fs-13: 0.8125rem; --fs-13: 0.8125rem;
--fs-14: 0.875rem; --fs-14: 0.875rem;
@@ -63,14 +63,14 @@
--s-12: 48px; --s-12: 48px;
/* Radii: tiles > buttons > chips */ /* Radii: tiles > buttons > chips */
--r-tile: 16px; --r-tile: 12px;
--r-btn: 12px; --r-btn: 8px;
--r-chip: 999px; --r-chip: 5px;
--tap: 52px; --tap: 52px;
--nav-h: 64px; --nav-h: 64px;
--sidebar-w: 232px; --sidebar-w: 228px;
--rail-w: 300px; --rail-w: 264px;
--safe-top: env(safe-area-inset-top, 0px); --safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);