feat(ui): extend minimal doctor design across all screens
CI / ruff · pytest (pull_request) Successful in 2m16s

Refs #85
This commit is contained in:
Pavel Eliseev
2026-10-04 16:09:57 +03:00
parent afbfbad19e
commit 2a2fdb171e
15 changed files with 526 additions and 192 deletions
+27 -2
View File
@@ -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 />}