Design system  /  Components  /  SidebarMock

SidebarMock. The detail panel.

The Nextcloud right-side detail panel, abstracted. Procest adds an xWiki tab to the case sidebar, DocuDesk adds Signatures and PII to the document sidebar, OpenRegister adds Metadata to the object sidebar. SidebarMock paints any one of those, standalone or overlaid on an AppMock.

Chassis

Header, tabs, body. Two render modes.

Every sidebar is the same shape: a header row with title plus close, a horizontal tab strip, and a scrollable body. What varies per kind is which tab is active and what the body shows. The chassis lives in SidebarMock.module.css; the per-kind body lives in a sibling JSX file under variants/.

Standalone mode wraps the panel in a 300×400 white card with a shadow, sized for inline use in copy. Embedded mode drops the card and slots the panel into an <AppMock sidebar={...} /> overlay, full height, pinned right. Same panel, two contexts.

Status colour map matches WidgetMock and AppMock: mint stable or done, orange active or pending, red blocked or overdue, cobalt-200 upcoming. One orange accent per panel.

Standalone catalogue

Nine sidebars, eight apps, one panel shape.

Eight Conduction tabs (Procest xWiki + Timeline, DocuDesk Signatures + PII map, OpenRegister Metadata, OpenCatalogi Publication history, OpenConnector Run logs, DeciDesk Decision detail) and one stock Nextcloud tab (Activity). Call from MDX as <SidebarMock kind="procest-xwiki" />.

01

Procest · xWiki

INFERRED

Pulls the case-handling protocol page out of xWiki and shows it next to the live case. Wiki text body, headings plus paragraphs plus a checklist. Slug: procest-xwiki.

02

Procest · Timeline

INFERRED

Stage history vertical: one done, one active in orange, three to-do. Same .now / .late / .todo modifiers as the AppMock procest timeline. Slug: procest-timeline.

03

DocuDesk · Signatures

INFERRED

Recipients with status pip: signed (mint), pending (orange), declined (red). Avatar palette mix gives the team-of-five feel. Slug: docudesk-signatures.

04

DocuDesk · PII map

INFERRED

Inline pills marking redacted (red) and suggested-to-redact (orange) spans within paragraphs, plus a count of detected PII categories. Slug: docudesk-pii-map.

05

OpenRegister · Metadata

INFERRED

Object frontmatter as a key/value list: register, schema, slug, created, updated. Plus the primary identifiers section below. Slug: openregister-metadata.

06

OpenCatalogi · History

INFERRED

Version history of a publication. Avatar plus version label plus timestamp; mint pip for current, red pip for withdrawn. Slug: opencatalogi-publication-history.

07

OpenConnector · Run logs

INFERRED

Single run inspected: header, then a vertical log stream with severity-coded timestamps. Last line is a warn or an error so the eye lands on it. Slug: openconnector-run-detail.

08

DeciDesk · Decision detail

INFERRED

Decision summary, structured fields (date, source meeting, decision-maker), action-items section showing who owns the follow-up. Slug: decidesk-decision.

09

Nextcloud · Activity

STOCK

The stock first-tab activity feed every Nextcloud sidebar carries. Framed for context so MKB readers see where Conduction tabs sit. Slug: nextcloud-activity.

In context

Sidebar over the app it belongs to.

Pass a SidebarMock as the sidebar prop on AppMock and it renders pinned to the right edge of the frame, full height. Two examples: Procest with the xWiki tab open, OpenRegister with the Metadata tab open. The same composition lights up any app + sidebar pair.

01

Procest with xWiki tab open

COMPOSED

A Procest case loaded in the main column, the xWiki tab of its sidebar pulled out on the right. The case-handling protocol page reads next to the live case, no app switch needed.

02

OpenRegister with Metadata tab open

COMPOSED

An OpenRegister object selected in the dashboard. Sidebar shows the object's frontmatter on the right: register, schema, slug, owner, identifiers.

Status. All nine variants are token-painted, no real text. Each variant describes how a Conduction app extends a Nextcloud sidebar with one tab; the body content reflects the canonical "what would this tab look like" for that app. Once a real screenshot exists, the variant gets a refinement pass.

The React component lives in docusaurus-preset/src/components/SidebarMock/. Each kind is a sibling JSX file under variants/. The chassis (header, tab strip, body atoms like .smKv, .smPerson, .smStage, .smLog) lives in SidebarMock.module.css.