Skip to content
NockerlDesignv2.0.0

Floating pills

In review
Live · web

Session chips bar + scroll-to-bottom pill, floating over a scrolling feed

Pulled the SessionChipsBar concept: a flat LazyRow of keycaps.
Make the active one lift higher, no glow.
Done. A soft cyan selection wash + a higher shadow tier.
And the context line under each chip?
Cyan → amber → red by usage. No number, just the line.
Scroll up and the jump-to-bottom pill appears.
…and hides once you reach the bottom.
Each pill is a real, keyboard-reachable button.

Switched session 0 times · active gateway. The island is live.

Code

Section titled “Code”
// Web: SHIPPED in @dizyx/nockerl-react (promoted from this page's canon, task 2654).
// NockerlSessionChipsBar floats a scroll-fading cluster of keycaps OVER content,
// distinct from the inline NockerlChip. Positioning is HOST-owned (place it
// absolutely over the feed, top or bottom, exactly like native).
import { NockerlContextChip, NockerlSessionChip, NockerlSessionChipsBar } from '@dizyx/nockerl-react';


<NockerlSessionChipsBar ariaLabel="Sessions" onAdd={createSession}>
  {sessions.map((s) => (
    <NockerlSessionChip
      key={s.slug}
      name={s.name}
      engineGlyph={s.engine === 'nockerl' ? chipGlyph : cloudGlyph} // engine identity, shape-coded
      dot={s.dot}            // status-dot priority: attention > streaming > unread > active > idle
      ratio={s.ratio}        // 0..1 fills the inner context line; null = a faint empty track
      active={s.slug === active}
      mark={checkGlyph}      // the cyan selection check, shown only while active
      onSelect={() => selectSession(s.slug)}
    />
  ))}
</NockerlSessionChipsBar>


// The same pill, read-only, for an inline strip (the Context gauge right rail):
<NockerlContextChip engineGlyph={cloudGlyph} name="docs site" ratio={0.42} />

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
children *ReactNodeThe keycaps: NockerlSessionChip children, rendered inside the fading scroller.
onAdd(() => void) | undefinedRenders the trailing cyan "+" CTA (the real NockerlIconButton filled-circle) and wires it.
addLabelstring'New session'Accessible label for the "+" CTA.
ariaLabelstring'Sessions'Accessible name for the bar (role="group").
classNamestring
styleCSSProperties
PropTypeDefaultDescription
active *booleanSelected keycap: the sanctioned cyan selection tint + higher lift + aria-pressed.
dot *NockerlSessionChipDotLeading status dot from the priority ladder. attention/streaming pulse.
engineGlyph *ReactNodeThe engine identity glyph (an <NockerlIcon>, currentColor).
name *stringThe session name (ellipsized). Carries the accessible name.
markReactNodeOptional selection mark (an accent check) shown only while active.
ratio *number | nullContext-usage ratio 0..1 → the inner line (cyan → amber → red); null = a faint empty track.
onSelect *() => void
classNamestring
styleCSSProperties
ariaLabelstring
PropTypeDefaultDescription
engineGlyph *ReactNodeThe engine identity glyph (an <NockerlIcon>, currentColor).
name *stringThe session name (ellipsized).
ratio *number | nullContext-usage ratio 0..1 → the inner line; null = a faint empty track.
tooltipstringNative hover tooltip. Named tooltip because title means heading-text everywhere else in the family.
ariaLabelstring

The scroll-to-bottom key on this page is the site-level _ScrollToBottom composition (a lifted circle + the same floating border + an unread-count badge), not yet a package export.