Files
sencho/frontend/src/components/sidebar/sidebar-styles.ts
T
Anso 4c0efcb9a8 feat(sidebar): §14 sidebar orchestration, filter chips, pinned rail, trailing column (#850)
* feat(sidebar): §14 sidebar orchestration (filter chips, pinned rail, trailing column)

- Add All / Up / Down / Updates filter chips with live counts; active chip
  filters the list; chip-filtered files computed in EditorLayout with useMemo
- Surface the PINNED group with a 3px cyan left rail and glow via the
  sidebarPinnedGroupRail token; reuses the brand token already on the active row
- Compact brand row from three stacked elements to a single 44px horizontal bar
- Restructure StackRow trailing column as fixed slots: label dots (max 3 + +N
  overflow), update-dot | git-pending icon (priority order), kebab; add reserved
  invisible checkbox slot for PR2 bulk mode
- Export statusText / statusColor from StackRow and reuse them in StackList
  remote-results section to remove the duplicate inline logic
- Lift filterChip state and chip-filtered files to EditorLayout; remove
  filterChip from StackListProps to eliminate the dual-path redundancy
- Remove unused labels param from buildGroups and the void labels workaround
- Wrap filteredFiles in useMemo so filterCounts memo is not defeated on every
  render

* fix(sidebar): move statusText and statusColor to stack-status-utils

react-refresh/only-export-components requires component files to export
only components. Move the two utility functions and StackRowStatus type
to a dedicated stack-status-utils.ts so StackRow.tsx is a pure component
module. Update StackList.tsx and EditorLayout.tsx to import from the new
source directly.
2026-04-30 19:37:49 -04:00

31 lines
1.1 KiB
TypeScript

import { cn } from '@/lib/utils';
export const sidebarRowBase = cn(
'relative flex items-center gap-2 w-full px-2 py-1.5 rounded-md mb-0.5',
'font-mono text-[13px] text-muted-foreground',
'hover:bg-glass-highlight hover:text-foreground',
'transition-colors group cursor-pointer',
);
export const sidebarRowActive = cn(
'bg-accent/[0.07] text-stat-value',
'after:content-[""] after:absolute after:left-[-12px] after:top-1 after:bottom-1',
'after:w-[3px] after:rounded-sm after:bg-brand',
'after:shadow-[0_0_6px_var(--brand)]',
);
export const sidebarGroupHeader = cn(
'flex items-center justify-between w-full px-2 pt-3 pb-1',
'text-[9px] leading-3 tracking-[0.22em] uppercase text-stat-subtitle',
'cursor-pointer select-none',
);
export const sidebarRowCheckboxSlot = 'shrink-0 w-4 h-4 opacity-0 pointer-events-none flex-shrink-0';
export const sidebarPinnedGroupRail = cn(
'relative before:absolute before:left-0 before:top-0 before:bottom-0',
'before:w-[3px] before:rounded-sm before:bg-brand',
'before:shadow-[0_0_6px_var(--brand)]',
'pl-[13px]',
);