ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity
Files
main
Ely-GPUI-Components/tasks/ch11-20.md
T
ZacharyZhang-NY 3f1597fa28 Port · Parity: every page matches gpui 0.2.2's; the rules re-tested 
Every page and scripted state was shot with gpui 0.2.2 and with the
port, light and dark, full width and at 280px, judged pair by pair by
agents with skeptics, and every page's log diffed. What differed is
fixed, each with a test that fails without it where the test platform
can show it:

- The gallery's harness takes posted mouse moves (gpui_macos listens
  to a tracking area), posts each drag move twice (it no longer
  replays a held drag), and waits three frames before each shot.
- Rolling digits: a block column, so taffy 0.13 lends the cell no
  baseline, and a line of whole device pixels, since gpui snaps each
  length on its own. DescriptionList's row aligns ends.
- Margins that taffy 0.13 collapses through a plain block: the
  drawer's pull and snap, the stagger and transition rise, the dialog
  and palette rises, the fullscreen dialog's slide.
- An Input keeps room to type in a squeezed row; the field rows drop
  w_full, whose reason was taffy 0.9's.

AGENTS.md's rules that named gpui 0.2.2 or taffy 0.9 were re-tested
against both sources and rewritten, and new ones say what the port
changed. TASKS.md's tags follow: what the new gpui makes possible is
prove. Captions, doc comments and README say what holds now.
2026-09-29 10:39:55 -04:00

15 KiB
Raw Permalink Blame History

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 transforms only svgs
  • 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 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 → editor::CodeEditor, its gutter: breakpoints, problems, numbers, folds, git marks
  • LineNumbers — absolute, relative → CodeEditor::line_numbers with LineNumbers
  • FoldingControl → CodeEditor, gutter folds
  • Minimap → CodeEditor::minimap
  • Ruler / IndentGuide → CodeEditor::rulers; guides on unless hide_indent_guides
  • BracketMatcher / RainbowBrackets → CodeEditor::rainbow_brackets; the matched pair always marked
  • WhitespaceRenderer → CodeEditor::show_whitespace
  • CursorRenderer — block, line, underline, blink → CodeEditor::cursor_shape with CursorShape
  • SelectionHighlight → CodeEditor, the word at the cursor marked while focused
  • MultiCursor → CodeEditor: Cmd-D, Cmd-Alt-Up and Down, Alt-click
  • VimModeIndicator
  • StickyScroll → CodeEditor::sticky_scroll
  • Breadcrumb → navigation::Breadcrumb
  • InlayHints → CodeEditor::set_inlay_hints
  • CodeLens → CodeEditor::set_code_lenses
  • InlineDecoration → CodeEditor::set_diagnostics and set_backgrounds
  • GhostText → CodeEditor::set_ghost_text
  • InlineChat → CodeEditor::set_chat
  • InlineDiff → CodeEditor::set_diff
  • ReadOnlyBanner

T17b Editor · Intelligence

  • CompletionMenu
  • SignatureHelp
  • HoverInfo
  • QuickFix / CodeActionMenu → editor::CodeActionMenu
  • RenameInput
  • PeekView → overlays::Peek
  • ReferencesPanel
  • SymbolOutline
  • GoToSymbol
  • CallHierarchy / TypeHierarchy → editor::CallHierarchy, types for supertypes and subtypes

T17c Editor · Search

  • FindWidget
  • ReplaceWidget → editor::FindWidget::replace
  • SearchPanel
  • SearchResultItem
  • SearchFilters

T17d Editor · Panels

  • ProblemsPanel / DiagnosticsList → editor::ProblemsPanel
  • OutputPanel
  • DebugConsole
  • ExtensionsPanel / PluginList → editor::ExtensionsPanel
  • SettingsEditor — UI and JSON
  • KeybindingsEditor
  • ThemePreview
  • WelcomePage
  • RecentProjects
  • ProjectSwitcher
  • TaskRunner / RunConfiguration → editor::TaskRunner, a task open to its configuration

T17e Editor · Status items

  • CursorPosition
  • LanguageMode
  • Encoding
  • LineEnding
  • IndentSettings
  • BranchIndicator
  • LspStatus
  • NotificationBell

T18 Terminal — src/terminal

  • Terminal — proven: alacritty_terminal 0.26 grid on a pseudo-terminal → terminal::Terminal::spawn, and Terminal::replay for recorded output
  • TerminalTabs → navigation::EditorTabs
  • TerminalSplit → layout::PaneGroup, a Terminal per pane
  • TerminalToolbar
  • TerminalSearch → editor::FindWidget over Terminal::find
  • TerminalLink → Terminal, a Cmd-press on terminal::links: URLs and path:line:column
  • ShellSelector
  • CommandBlock
  • CommandHistory
  • AnsiText
  • LogViewer
  • ProcessList

T19 Git — src/git

  • DiffViewer — split, unified
  • InlineDiff → editor::CodeEditor::set_diff
  • ThreeWayMerge
  • ConflictResolver
  • ChangesList
  • CommitInput
  • CommitGraph → git::CommitList::graph
  • CommitList / CommitItem
  • BranchSelector
  • BranchList
  • TagList
  • StashList
  • BlameView / GitBlameAnnotation
  • FileHistory
  • PullRequestCard
  • ReviewComment
  • DiffStat
  • GitStatusBadge

T20 Debug — src/debug

  • DebugToolbar
  • BreakpointList
  • BreakpointGutter → editor::CodeEditor, its gutter and toggle_breakpoint
  • CallStack
  • VariablesPanel
  • WatchPanel
  • ThreadList
  • MemoryViewer / HexViewer → debug::HexViewer, placed at base
  • Disassembly
  • PerformanceProfiler / Flamegraph → debug::Flamegraph
  • TimelineProfiler
  • NetworkInspector
  • ConsoleREPL → editor::DebugConsole
Reference in new issue View Git Blame Copy Permalink