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

Chapters 11–20

T11a Loading · Spinners & skeletons — src/motion

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

T11b Loading · Progress & states

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

T11c Motion · Presence & order — src/motion

• 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
• AnimatePresence → motion::AnimatePresence
• Motion → gpui's with_animation, timed by motion::duration and eased by the curves in motion
• Spring → motion::spring
• Stagger → motion::Stagger
• Reorder → motion::Reorder
• Flip → motion::Flip
• CountUp → typography::AnimatedNumber, counting up

T11d Motion · Effects

• Marquee → motion::Marquee
• Ripple → motion::Ripple
• Confetti → motion::Confetti
• Glow / Pulse → motion::Glow, motion::Pulse
• Blink / Flash → motion::Blink, motion::Flash
• Shake → motion::Shake
• ParticleBackground → motion::ParticleBackground
• AnimatedGradient — slow tonal drift → motion::AnimatedGradient
• 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

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

T12b Data Display · Records

• DescriptionList → data_display::DescriptionList
• PropertyGrid → data_display::PropertyGrid, PropertyGroup
• KeyValueList → data_display::DescriptionList
• InfoRow → data_display::DescriptionList
• Timeline / TimelineItem → data_display::Timeline, TimelineItem
• ActivityFeed → data_display::ActivityFeed, Activity
• Changelog → data_display::Changelog, Release, Change

T12c Data Display · Media

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

T12d Data Display · Codes & measures

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

T13a Lists & Trees · Lists — src/lists

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

T13b Lists & Trees · Trees

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

T13c Lists & Trees · Files

• FileTree → lists::FileTree, GitStatus; built on lists::Tree
• DirectoryListing → lists::DirectoryListing, DirEntry; rows through lists::SelectableList
• Menu List → menus::Menu
• Transfer List → forms::TransferList

T14a Tables · Core — src/tables

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

T14b Tables · Columns & rows

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

T14c Tables · Grids

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

T15a Charts · Cartesian — src/charts

• LineChart
• AreaChart / StackedArea → charts::AreaChart::stacked
• BarChart
• ScatterChart
• BubbleChart → charts::ScatterChart with Points::sizes
• Sparkline / SparkBar / SparkArea → data_display::Sparkline, landed with T14a for table cells
• RealtimeChart
• ChartLegend
• ChartTooltip
• ChartCrosshair → the hover of LineChart, AreaChart and BarChart
• ChartAxis / ChartGrid → the axes every cartesian chart draws
• ChartZoom / Brush → LineChart::zoom
• ChartAnnotation → rule and note
• ChartExport — SVG and CSV → svg and csv on each cartesian chart

T15b Charts · Parts and spreads

• PieChart / DonutChart → charts::PieChart::donut
• RadarChart
• HeatmapChart
• CalendarHeatmap
• Treemap
• Sunburst
• WaterfallChart
• BoxPlot
• Histogram
• ViolinPlot

T15c Charts · Flows and relations

• SankeyChart
• FunnelChart
• GanttChart
• NetworkGraph / ForceGraph → charts::NetworkGraph
• ChordDiagram
• ParallelCoordinates
• Bullet Chart → charts::BulletChart
• ProgressChart

T16a Finance · Market charts — src/finance

• CandlestickChart
• OHLCChart → finance::CandlestickChart with ChartKind::Bars
• HeikinAshiChart → finance::CandlestickChart with ChartKind::HeikinAshi
• LineQuoteChart → finance::CandlestickChart with ChartKind::Line or ChartKind::Area
• VolumeChart → CandlestickChart::volume
• DepthChart
• MarketProfile / VolumeProfile → CandlestickChart::profile
• RenkoChart / PointAndFigure → RenkoChart, PointFigureChart
• MultiChartLayout
• ChartSync
• TimeRangeSelector
• IntervalSelector
• ChartTypeSwitcher

T16b Finance · Technical analysis

• IndicatorOverlay — MA, EMA, BOLL, VWAP → CandlestickChart::overlay with Overlay
• IndicatorPane — MACD, RSI, KDJ, OBV → CandlestickChart::study with Study
• IndicatorSelector
• DrawingTools → CandlestickChart::tool and drawings: trend, level, box, Fibonacci retracement
• DrawingToolbar
• CompareSymbol → CandlestickChart::compare
• PriceAlertLine → CandlestickChart::alert

T16c Finance · Quotes & book

• Ticker / TickerTape → TickerTape
• QuoteCard
• PriceText
• PriceChangeBadge
• OrderBook
• Level2 Quotes → Level2Quotes
• TimeAndSales / TradeTape → TimeAndSales
• MarketDepthLadder / DOM → DomLadder
• SpreadIndicator
• BidAskBar

T16d Finance · Trading

• OrderEntry / TradePanel → OrderEntry
• QuickTradeButtons
• PositionTable
• OrderTable
• TradeHistoryTable
• PnLDisplay
• LeverageSlider
• MarginIndicator
• RiskMeter
• OrderConfirmDialog
• OptionChain
• GreeksTable
• PayoffDiagram

T16e Finance · Markets & assets

• Watchlist
• SymbolSearch
• SymbolBadge
• MarketHeatmap
• SectorTreemap → finance::MarketHeatmap, or charts::Treemap for plain weights
• Screener / FilterPanel → Screener, its rules from tables::FilterBuilder
• MarketOverview
• IndexCard → finance::QuoteCard, in a row by MarketOverview::index
• MarketStatus
• TradingSessionClock
• EconomicCalendar
• EarningsCalendar
• NewsFeed
• SentimentGauge → data_display::Gauge
• PortfolioSummary
• AssetAllocationChart → charts::PieChart with donut
• PerformanceChart — equity curve, drawdown
• DividendTable
• FinancialStatementTable
• CurrencyConverter
• CryptoWalletCard
• TransactionList
• Candle Countdown → feedback::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