Ely-GPUI-Components/tasks/ch11-20.md

# Chapters 11–20

## T11a Loading · Spinners & skeletons — `src/motion`

- [x] Spinner — ring, dots, bars, pulse, orbit, wave; also the Button loading state (T05 LoadingButton) and T07a LoadMore → `motion::Spinner`, `buttons::Button::loading`, `navigation::LoadMore`
- [x] DotsLoader → `motion::Spinner`
- [x] BarsLoader → `motion::Spinner`
- [x] PulseLoader → `motion::Spinner`
- [x] RingLoader → `motion::Spinner`
- [x] OrbitLoader → `motion::Spinner`
- [x] WaveLoader → `motion::Spinner`
- [x] Skeleton / SkeletonText / SkeletonAvatar / SkeletonCard / SkeletonTable → `motion::Skeleton` and kin
- [x] Shimmer → `motion::Shimmer`

## T11b Loading · Progress & states

- [x] ProgressBar — determinate, indeterminate, segmented, buffered — also T06e UploadList → `motion::ProgressBar`, `forms::UploadList`
- [x] ProgressCircle / ProgressRing → `motion::ProgressRing`
- [x] StepProgress → `navigation::Steps`
- [x] LoadingOverlay → `motion::LoadingOverlay`
- [x] LoadingScreen → `shell::SplashScreen`, which renders in place too
- [x] InlineLoader → `motion::Spinner`
- [x] LazyLoad → `motion::LazyLoad`
- [x] Suspense / AsyncView → `feedback::Suspense`, `feedback::AsyncView`; a failure shows the error view, so they live with it
- [x] RefreshIndicator → `motion::RefreshIndicator`
- [x] TypingIndicator → `motion::TypingIndicator`

## T11c Motion · Presence & order — `src/motion`

- [x] Transition — fade, slide, scale, collapse → `motion::Transition` fades, rises and slides; collapse is `layout::Collapsible`; scale is blocked: gpui 0.2.2 transforms only icons
- [x] AnimatePresence → `motion::AnimatePresence`
- [x] Motion → gpui's `with_animation`, timed by `motion::duration` and eased by the curves in `motion`
- [x] Spring → `motion::spring`
- [x] Stagger → `motion::Stagger`
- [x] Reorder → `motion::Reorder`
- [x] Flip → `motion::Flip`
- [x] CountUp → `typography::AnimatedNumber`, counting up

## T11d Motion · Effects

- [x] Marquee → `motion::Marquee`
- [x] Ripple → `motion::Ripple`
- [x] Confetti → `motion::Confetti`
- [x] Glow / Pulse → `motion::Glow`, `motion::Pulse`
- [x] Blink / Flash → `motion::Blink`, `motion::Flash`
- [x] Shake → `motion::Shake`
- [x] ParticleBackground → `motion::ParticleBackground`
- [x] AnimatedGradient — slow tonal drift → `motion::AnimatedGradient`
- [x] Lottie Player — blocked: gpui 0.2.2 paints paths without the clip masks, mattes, blend modes and radial gradients Lottie files lean on, so frames would come out wrong

## T12a Data Display · People & numbers — `src/data_display`

- [x] Badge / CountBadge / DotBadge → `data_display::Badge`, `CountBadge`, `DotBadge`; the activity bar's count is a CountBadge
- [x] Tag / Chip → `data_display::Tag`; the chips in TagInput and MultiSelect are Tags
- [x] Avatar — image, initials, icon, presence — also T06e AvatarUpload → `data_display::Avatar`, `forms::AvatarUpload`
- [x] AvatarGroup → `data_display::AvatarGroup`
- [x] UserChip → `data_display::UserChip`
- [x] Statistic / KPI Card → `data_display::Statistic`, `data_display::KpiCard`
- [x] Metric → `data_display::Statistic`, at a smaller size
- [x] TrendIndicator → `data_display::TrendIndicator`

## T12b Data Display · Records

- [x] DescriptionList → `data_display::DescriptionList`
- [x] PropertyGrid → `data_display::PropertyGrid`, `PropertyGroup`
- [x] KeyValueList → `data_display::DescriptionList`
- [x] InfoRow → `data_display::DescriptionList`
- [x] Timeline / TimelineItem → `data_display::Timeline`, `TimelineItem`
- [x] ActivityFeed → `data_display::ActivityFeed`, `Activity`
- [x] Changelog → `data_display::Changelog`, `Release`, `Change`

## T12c Data Display · Media

- [x] Carousel → `data_display::Carousel`
- [x] Gallery → `data_display::Gallery`, opening `overlays::Lightbox`
- [x] Accordion list → `layout::Accordion`
- [x] Card Grid → `layout::SimpleGrid`
- [x] BeforeAfter → `data_display::BeforeAfter`
- [x] Watermark → `data_display::Watermark`; its rows run level, since gpui draws text upright

## T12d Data Display · Codes & measures

- [x] QRCode → `data_display::QrCode`
- [x] Barcode → `data_display::Barcode`: Code 128 and EAN-13
- [x] ColorSwatch display → `forms::ColorSwatch`
- [x] Meter → `data_display::Meter`
- [x] Gauge → `data_display::Gauge`
- [x] UsageBar → `data_display::UsageBar`
- [x] Rating display → `data_display::Stars`, read only with parts of a star; `forms::Rating` sets a score
- [x] Comparison → `data_display::Comparison`

## T13a Lists & Trees · Lists — `src/lists`

- [x] List / ListItem → `lists::List`, `ListItem`
- [x] VirtualList → `lists::VirtualList`, on gpui's `list()`; rows as tall as they need
- [x] InfiniteList → `lists::InfiniteList`
- [x] SortableList → `lists::SortableList`; drags through `motion::Reorder`, Alt with arrows moves
- [x] SelectableList — single, multi, shift range → `lists::SelectableList`
- [x] GroupedList → `lists::GroupedList`, headers from `layout::StickyHeader`
- [x] SectionList → `lists::GroupedList`
- [x] ReorderableList → `lists::SortableList`
- [x] SwipeableListItem → `lists::SwipeableListItem`, `SwipeAction`; proved with real trackpad phases (`Step::Swipe`)

## T13b Lists & Trees · Trees

- [x] Tree / TreeView → `lists::Tree`, `TreeNode`; also T06b TreeSelect → `lists::TreeSelect`
- [x] VirtualTree → `lists::Tree`, whose rows draw in a `uniform_list`
- [x] CheckboxTree → `lists::Tree` with `checked`
- [x] Outline → `lists::Outline`
- [x] NestedList → `lists::Outline`

## T13c Lists & Trees · Files

- [x] FileTree → `lists::FileTree`, `GitStatus`; built on `lists::Tree`
- [x] DirectoryListing → `lists::DirectoryListing`, `DirEntry`; rows through `lists::SelectableList`
- [x] Menu List → `menus::Menu`
- [x] Transfer List → `forms::TransferList`

## T14a Tables · Core — `src/tables`

- [x] Table → `tables::Table`
- [x] DataTable — sort, filter, page, select → `tables::DataTable`
- [x] VirtualTable → `tables::DataTable`, `virtualized`
- [x] CellRenderer → `tables::Cell`: text, number, tag, progress, sparkline, person, link
- [x] RowSelection → `tables::DataTable`, `selected`
- [x] TableDensity → `tables::DataTable`, `density`
- [x] AggregationFooter → `tables::Column`, `aggregate`
- [x] ConditionalFormatting → `tables::Column`, `scale`
- [x] HeatmapTable → `tables::HeatmapTable`
- [x] ComparisonTable → `data_display::Comparison`

## T14b Tables · Columns & rows

- [x] ColumnResizer → `tables::DataTable`: a header's edge drags
- [x] ColumnReorder → `tables::DataTable`: a header drags onto another
- [x] ColumnVisibility → `tables::DataTable`, `hidden`; the toolbar's Columns menu
- [x] ColumnPinning → `tables::Column`, `pinned`
- [x] RowExpansion → `tables::DataTable`, `detail`
- [x] RowGrouping → `tables::DataTable`, `group_by`
- [x] InlineRowEdit → `tables::Column`, `editable`; `DataTable::on_edit`
- [x] TableToolbar → `tables::TableToolbar`; `tables::to_csv` for export
- [x] FilterBuilder → `tables::FilterBuilder`, `FilterRule`
- [x] SortBuilder → `tables::SortBuilder`, `SortKey`

## T14c Tables · Grids

- [x] DataGrid → `tables::DataGrid`
- [x] Spreadsheet — formula subset, merge, freeze, fill handle → `tables::Spreadsheet`; SUM, AVERAGE, MIN, MAX, COUNT over ranges
- [x] TreeTable → `tables::TreeTable`, `TreeRow`
- [x] PivotTable → `tables::PivotTable`

## T15 Charts — `src/charts`

- [ ] LineChart
- [ ] AreaChart / StackedArea
- [ ] BarChart
- [ ] PieChart / DonutChart
- [ ] ScatterChart
- [ ] BubbleChart
- [ ] RadarChart
- [ ] HeatmapChart
- [ ] CalendarHeatmap
- [ ] Treemap
- [ ] Sunburst
- [ ] SankeyChart
- [ ] FunnelChart
- [ ] WaterfallChart
- [ ] BoxPlot
- [ ] Histogram
- [ ] ViolinPlot
- [ ] GanttChart
- [ ] NetworkGraph / ForceGraph
- [ ] ChordDiagram
- [ ] ParallelCoordinates
- [x] Sparkline / SparkBar / SparkArea → `data_display::Sparkline`, landed with T14a for table cells
- [ ] Bullet Chart
- [ ] ProgressChart
- [ ] RealtimeChart
- [ ] ChartLegend
- [ ] ChartTooltip
- [ ] ChartCrosshair
- [ ] ChartAxis / ChartGrid
- [ ] ChartZoom / Brush
- [ ] ChartAnnotation
- [ ] ChartExport — SVG and CSV

## T16a Finance · Market charts — `src/finance`

- [ ] CandlestickChart
- [ ] OHLCChart → `finance::CandlestickChart`
- [ ] HeikinAshiChart → `finance::CandlestickChart`
- [ ] LineQuoteChart
- [ ] VolumeChart
- [ ] DepthChart
- [ ] MarketProfile / VolumeProfile
- [ ] RenkoChart / PointAndFigure
- [ ] MultiChartLayout
- [ ] ChartSync
- [ ] TimeRangeSelector
- [ ] IntervalSelector
- [ ] ChartTypeSwitcher

## T16b Finance · Technical analysis

- [ ] IndicatorOverlay — MA, EMA, BOLL, VWAP
- [ ] IndicatorPane — MACD, RSI, KDJ, OBV
- [ ] IndicatorSelector
- [ ] DrawingTools
- [ ] DrawingToolbar
- [ ] CompareSymbol
- [ ] PriceAlertLine

## T16c Finance · Quotes & book

- [ ] Ticker / TickerTape
- [ ] QuoteCard
- [ ] PriceText
- [ ] PriceChangeBadge
- [ ] OrderBook
- [ ] Level2 Quotes
- [ ] TimeAndSales / TradeTape
- [ ] MarketDepthLadder / DOM
- [ ] SpreadIndicator
- [ ] BidAskBar

## T16d Finance · Trading

- [ ] OrderEntry / TradePanel
- [ ] QuickTradeButtons
- [ ] PositionTable
- [ ] OrderTable
- [ ] TradeHistoryTable
- [ ] PnLDisplay
- [ ] LeverageSlider
- [ ] MarginIndicator
- [ ] RiskMeter
- [ ] OrderConfirmDialog
- [ ] OptionChain
- [ ] GreeksTable
- [ ] PayoffDiagram

## T16e Finance · Markets & assets

- [ ] Watchlist
- [ ] SymbolSearch
- [ ] SymbolBadge
- [ ] MarketHeatmap
- [ ] SectorTreemap → `charts::Treemap`
- [ ] Screener / FilterPanel
- [ ] MarketOverview
- [ ] IndexCard
- [ ] MarketStatus
- [ ] TradingSessionClock
- [ ] EconomicCalendar
- [ ] EarningsCalendar
- [ ] NewsFeed
- [ ] SentimentGauge → `data_display::Gauge`
- [ ] PortfolioSummary
- [ ] AssetAllocationChart → `charts::PieChart`
- [ ] PerformanceChart — equity curve, drawdown
- [ ] DividendTable
- [ ] FinancialStatementTable
- [ ] CurrencyConverter
- [ ] CryptoWalletCard
- [ ] TransactionList
- [ ] Candle Countdown

## T17a Editor · Core — `src/editor`

- [ ] CodeEditor — highlight, multi-cursor, selection, undo, redo
- [ ] EditorGutter
- [ ] LineNumbers — absolute, relative
- [ ] FoldingControl
- [ ] Minimap
- [ ] Ruler / IndentGuide
- [ ] BracketMatcher / RainbowBrackets
- [ ] WhitespaceRenderer
- [ ] CursorRenderer — block, line, underline, blink
- [ ] SelectionHighlight
- [ ] MultiCursor
- [ ] VimModeIndicator
- [ ] StickyScroll
- [ ] Breadcrumb → `navigation::Breadcrumb`
- [ ] InlayHints
- [ ] CodeLens
- [ ] InlineDecoration
- [ ] GhostText
- [ ] InlineChat
- [ ] InlineDiff
- [ ] ReadOnlyBanner

## T17b Editor · Intelligence

- [ ] CompletionMenu
- [ ] SignatureHelp
- [ ] HoverInfo
- [ ] QuickFix / CodeActionMenu
- [ ] RenameInput
- [ ] PeekView → `overlays::Peek`
- [ ] ReferencesPanel
- [ ] SymbolOutline
- [ ] GoToSymbol
- [ ] CallHierarchy / TypeHierarchy

## T17c Editor · Search

- [ ] FindWidget
- [ ] ReplaceWidget → `editor::FindWidget`
- [ ] SearchPanel
- [ ] SearchResultItem
- [ ] SearchFilters

## T17d Editor · Panels

- [ ] ProblemsPanel / DiagnosticsList
- [ ] OutputPanel
- [ ] DebugConsole
- [ ] ExtensionsPanel / PluginList
- [ ] SettingsEditor — UI and JSON
- [ ] KeybindingsEditor
- [ ] ThemePreview
- [ ] WelcomePage
- [ ] RecentProjects
- [ ] ProjectSwitcher
- [ ] TaskRunner / RunConfiguration

## T17e Editor · Status items

- [ ] CursorPosition
- [ ] LanguageMode
- [ ] Encoding
- [ ] LineEnding
- [ ] IndentSettings
- [ ] BranchIndicator
- [ ] LspStatus
- [ ] NotificationBell

## T18 Terminal — `src/terminal`

- [ ] Terminal — prove: `alacritty_terminal` grid and PTY
- [ ] TerminalTabs → `navigation::EditorTabs`
- [ ] TerminalSplit → `layout::PaneGroup`
- [ ] TerminalToolbar
- [ ] TerminalSearch → `editor::FindWidget`
- [ ] TerminalLink
- [ ] ShellSelector
- [ ] CommandBlock
- [ ] CommandHistory
- [ ] AnsiText
- [ ] LogViewer
- [ ] ProcessList

## T19 Git — `src/git`

- [ ] DiffViewer — split, unified
- [ ] InlineDiff → `editor::InlineDiff`
- [ ] ThreeWayMerge
- [ ] ConflictResolver
- [ ] ChangesList
- [ ] CommitInput
- [ ] CommitGraph
- [ ] CommitList / CommitItem
- [ ] BranchSelector
- [ ] BranchList
- [ ] TagList
- [ ] StashList
- [ ] BlameView / GitBlameAnnotation
- [ ] FileHistory
- [ ] PullRequestCard
- [ ] ReviewComment
- [ ] DiffStat
- [ ] GitStatusBadge

## T20 Debug — `src/debug`

- [ ] DebugToolbar
- [ ] BreakpointList
- [ ] BreakpointGutter → `editor::EditorGutter`
- [ ] CallStack
- [ ] VariablesPanel
- [ ] WatchPanel
- [ ] ThreadList
- [ ] MemoryViewer / HexViewer
- [ ] Disassembly
- [ ] PerformanceProfiler / Flamegraph
- [ ] TimelineProfiler
- [ ] NetworkInspector
- [ ] ConsoleREPL → `editor::DebugConsole`