Components

StatusBar

A bottom bar like a code editor's: segments dropped by priority.

A bottom bar like a code editor's: segments, live counters, connection state. It completes AppShell from below.

Example

live

Сужайте полосу — сегменты уходят по возрастанию важности, связь остаётся.

<StatusBar
  segments={[
    { id: "branch", content: <>main</>, priority: 5 },
    { id: "conn", content: <LiveIndicator status="live" />, pinned: true, align: "right" },
    { id: "pos", content: <>Ln 42, Col 8</>, priority: 1, align: "right" },
  ]}
/>

Props

Prop	Type	Default	Description
`segments`*	`StatusBarSegment[]`	—	The segments: content, priority, pinned, align, onClick, tip.
`gap`	`number`	`12`	The gap between segments (must match the CSS).

segments*StatusBarSegment[]

The segments: content, priority, pinned, align, onClick, tip.

gapnumber

defaults to: 12

The gap between segments (must match the CSS).

Priorities when space runs out

The layout, separately

tsx

import { fitSegments, estimateWidth } from "@toimetdev/pathlogs-core";