Radarist project

Radarist / Design system

Documentation v0.1 · Product in progress

Design system contents

Components

Block-time menu

Start a time reservation with an explicit kind of activity instead of a generic blank calendar entry.

On this page

Purpose and usage

Start a time reservation with an explicit kind of activity instead of a generic blank calendar entry.

Use from the day controls or an agenda gap; do not bypass the editor’s time validation.

Anatomy

Anatomy
PartContract
TriggerBlock time action.
OptionsProject, event, lunch, and time-away choices as defined in source.
Locked treatmentPast day cannot open a creation action.

Variants and configuration

Variants and configuration
ConfigurationBehavior
Presentationcompact, heroOverlay, iconOnly, centerMobileMenu.
Behaviorlocked and onSelect(choice).

State coverage

State coverage
StateImplemented behavior
AvailableChoice menu can open.
LockedCreation is disabled for a past date.
OpenA labeled menu presents the block choices.

Interaction and responsive behavior

  • Let RadarWorkspace choose an available gap and open the real editor.
  • Keep the chosen type explicit; lunch is normalized into its implemented block type.
  • Center the mobile menu where needed to keep choices visible.

Accessibility contract

  • Trigger has Block time accessible name and expansion state.
  • Menu items have meaningful text labels.
  • Escape and outside pointer close it; full menu keyboard behavior needs review.

Known gaps and readiness

The project choices are currently hard-coded examples in BlockTimePicker. Each project choice emits the generic project kind rather than a project ID; Customize these choices only dismisses the menu; no customization flow is implemented. Treat these as prototype controls. Server-side scheduling constraints remain a separate validation boundary.

Composition example

<BlockTimePicker locked={locked}
  onSelect={choice => requestBlock(choice)} />

Source references

Source references
FileResponsibility
app/components/block-time-picker.tsxChoice menu
app/components/radar-workspace.tsxBlock request and view selection

Examples from the app

Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.

Block Time Picker · Component detail · Light · Desktop · 1864 × 230 px
Block Time Picker · Component detail · Light · Desktop · Open · 1864 × 1188 px

Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1