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

T13 Lists & Trees — src/lists

• List / ListItem
• VirtualList — native list() / uniform_list(), themed rows
• InfiniteList
• SortableList
• SelectableList — single, multi, shift range
• GroupedList — sticky group headers
• SectionList → lists::GroupedList
• ReorderableList → lists::SortableList
• SwipeableListItem — prove: horizontal trackpad scroll
• Tree / TreeView — also T06b TreeSelect
• VirtualTree → lists::Tree
• FileTree
• CheckboxTree
• Outline
• NestedList → lists::Outline
• DirectoryListing
• Menu List → menus::Menu
• Transfer List → forms::TransferList

T14 Tables — src/tables

• Table
• DataTable — sort, filter, page, select
• VirtualTable → tables::DataTable
• DataGrid
• Spreadsheet — formula subset, merge, freeze, fill handle
• TreeTable
• PivotTable
• ColumnResizer
• ColumnReorder
• ColumnVisibility
• ColumnPinning
• RowSelection
• RowExpansion
• RowGrouping
• InlineRowEdit
• CellRenderer
• TableToolbar
• FilterBuilder
• SortBuilder
• AggregationFooter
• TableDensity
• ConditionalFormatting
• HeatmapTable
• ComparisonTable

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
• Sparkline / SparkBar / SparkArea
• 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