ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity
Files
ba0e0127b4778c4a3709d75d337d4cefc746bd2c
Ely-GPUI-Components/tasks/ch11-20.md
T
ZacharyZhang-NYandClaude Opus 5.5 d7272e88bd 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.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-29 10:39:55 -04:00

395 lines
15 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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 transforms only svgs
- [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 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`
## T15a Charts · Cartesian — `src/charts`
- [x] LineChart
- [x] AreaChart / StackedArea → `charts::AreaChart::stacked`
- [x] BarChart
- [x] ScatterChart
- [x] BubbleChart → `charts::ScatterChart` with `Points::sizes`
- [x] Sparkline / SparkBar / SparkArea → `data_display::Sparkline`, landed with T14a for table cells
- [x] RealtimeChart
- [x] ChartLegend
- [x] ChartTooltip
- [x] ChartCrosshair → the hover of `LineChart`, `AreaChart` and `BarChart`
- [x] ChartAxis / ChartGrid → the axes every cartesian chart draws
- [x] ChartZoom / Brush → `LineChart::zoom`
- [x] ChartAnnotation → `rule` and `note`
- [x] ChartExport — SVG and CSV → `svg` and `csv` on each cartesian chart
## T15b Charts · Parts and spreads
- [x] PieChart / DonutChart → `charts::PieChart::donut`
- [x] RadarChart
- [x] HeatmapChart
- [x] CalendarHeatmap
- [x] Treemap
- [x] Sunburst
- [x] WaterfallChart
- [x] BoxPlot
- [x] Histogram
- [x] ViolinPlot
## T15c Charts · Flows and relations
- [x] SankeyChart
- [x] FunnelChart
- [x] GanttChart
- [x] NetworkGraph / ForceGraph → `charts::NetworkGraph`
- [x] ChordDiagram
- [x] ParallelCoordinates
- [x] Bullet Chart → `charts::BulletChart`
- [x] ProgressChart
## T16a Finance · Market charts — `src/finance`
- [x] CandlestickChart
- [x] OHLCChart → `finance::CandlestickChart` with `ChartKind::Bars`
- [x] HeikinAshiChart → `finance::CandlestickChart` with `ChartKind::HeikinAshi`
- [x] LineQuoteChart → `finance::CandlestickChart` with `ChartKind::Line` or `ChartKind::Area`
- [x] VolumeChart → `CandlestickChart::volume`
- [x] DepthChart
- [x] MarketProfile / VolumeProfile → `CandlestickChart::profile`
- [x] RenkoChart / PointAndFigure → `RenkoChart`, `PointFigureChart`
- [x] MultiChartLayout
- [x] ChartSync
- [x] TimeRangeSelector
- [x] IntervalSelector
- [x] ChartTypeSwitcher
## T16b Finance · Technical analysis
- [x] IndicatorOverlay — MA, EMA, BOLL, VWAP → `CandlestickChart::overlay` with `Overlay`
- [x] IndicatorPane — MACD, RSI, KDJ, OBV → `CandlestickChart::study` with `Study`
- [x] IndicatorSelector
- [x] DrawingTools → `CandlestickChart::tool` and `drawings`: trend, level, box, Fibonacci retracement
- [x] DrawingToolbar
- [x] CompareSymbol → `CandlestickChart::compare`
- [x] PriceAlertLine → `CandlestickChart::alert`
## T16c Finance · Quotes & book
- [x] Ticker / TickerTape → `TickerTape`
- [x] QuoteCard
- [x] PriceText
- [x] PriceChangeBadge
- [x] OrderBook
- [x] Level2 Quotes → `Level2Quotes`
- [x] TimeAndSales / TradeTape → `TimeAndSales`
- [x] MarketDepthLadder / DOM → `DomLadder`
- [x] SpreadIndicator
- [x] BidAskBar
## T16d Finance · Trading
- [x] OrderEntry / TradePanel → `OrderEntry`
- [x] QuickTradeButtons
- [x] PositionTable
- [x] OrderTable
- [x] TradeHistoryTable
- [x] PnLDisplay
- [x] LeverageSlider
- [x] MarginIndicator
- [x] RiskMeter
- [x] OrderConfirmDialog
- [x] OptionChain
- [x] GreeksTable
- [x] PayoffDiagram
## T16e Finance · Markets & assets
- [x] Watchlist
- [x] SymbolSearch
- [x] SymbolBadge
- [x] MarketHeatmap
- [x] SectorTreemap → `finance::MarketHeatmap`, or `charts::Treemap` for plain weights
- [x] Screener / FilterPanel → `Screener`, its rules from `tables::FilterBuilder`
- [x] MarketOverview
- [x] IndexCard → `finance::QuoteCard`, in a row by `MarketOverview::index`
- [x] MarketStatus
- [x] TradingSessionClock
- [x] EconomicCalendar
- [x] EarningsCalendar
- [x] NewsFeed
- [x] SentimentGauge → `data_display::Gauge`
- [x] PortfolioSummary
- [x] AssetAllocationChart → `charts::PieChart` with `donut`
- [x] PerformanceChart — equity curve, drawdown
- [x] DividendTable
- [x] FinancialStatementTable
- [x] CurrencyConverter
- [x] CryptoWalletCard
- [x] TransactionList
- [x] Candle Countdown → `feedback::Countdown`
## T17a Editor · Core — `src/editor`
- [x] CodeEditor — highlight, multi-cursor, selection, undo, redo
- [x] EditorGutter → `editor::CodeEditor`, its gutter: breakpoints, problems, numbers, folds, git marks
- [x] LineNumbers — absolute, relative → `CodeEditor::line_numbers` with `LineNumbers`
- [x] FoldingControl → `CodeEditor`, gutter folds
- [x] Minimap → `CodeEditor::minimap`
- [x] Ruler / IndentGuide → `CodeEditor::rulers`; guides on unless `hide_indent_guides`
- [x] BracketMatcher / RainbowBrackets → `CodeEditor::rainbow_brackets`; the matched pair always marked
- [x] WhitespaceRenderer → `CodeEditor::show_whitespace`
- [x] CursorRenderer — block, line, underline, blink → `CodeEditor::cursor_shape` with `CursorShape`
- [x] SelectionHighlight → `CodeEditor`, the word at the cursor marked while focused
- [x] MultiCursor → `CodeEditor`: Cmd-D, Cmd-Alt-Up and Down, Alt-click
- [x] VimModeIndicator
- [x] StickyScroll → `CodeEditor::sticky_scroll`
- [x] Breadcrumb → `navigation::Breadcrumb`
- [x] InlayHints → `CodeEditor::set_inlay_hints`
- [x] CodeLens → `CodeEditor::set_code_lenses`
- [x] InlineDecoration → `CodeEditor::set_diagnostics` and `set_backgrounds`
- [x] GhostText → `CodeEditor::set_ghost_text`
- [x] InlineChat → `CodeEditor::set_chat`
- [x] InlineDiff → `CodeEditor::set_diff`
- [x] ReadOnlyBanner
## T17b Editor · Intelligence
- [x] CompletionMenu
- [x] SignatureHelp
- [x] HoverInfo
- [x] QuickFix / CodeActionMenu → `editor::CodeActionMenu`
- [x] RenameInput
- [x] PeekView → `overlays::Peek`
- [x] ReferencesPanel
- [x] SymbolOutline
- [x] GoToSymbol
- [x] CallHierarchy / TypeHierarchy → `editor::CallHierarchy`, `types` for supertypes and subtypes
## T17c Editor · Search
- [x] FindWidget
- [x] ReplaceWidget → `editor::FindWidget::replace`
- [x] SearchPanel
- [x] SearchResultItem
- [x] SearchFilters
## T17d Editor · Panels
- [x] ProblemsPanel / DiagnosticsList → `editor::ProblemsPanel`
- [x] OutputPanel
- [x] DebugConsole
- [x] ExtensionsPanel / PluginList → `editor::ExtensionsPanel`
- [x] SettingsEditor — UI and JSON
- [x] KeybindingsEditor
- [x] ThemePreview
- [x] WelcomePage
- [x] RecentProjects
- [x] ProjectSwitcher
- [x] TaskRunner / RunConfiguration → `editor::TaskRunner`, a task open to its configuration
## T17e Editor · Status items
- [x] CursorPosition
- [x] LanguageMode
- [x] Encoding
- [x] LineEnding
- [x] IndentSettings
- [x] BranchIndicator
- [x] LspStatus
- [x] NotificationBell
## T18 Terminal — `src/terminal`
- [x] Terminal — proven: `alacritty_terminal` 0.26 grid on a pseudo-terminal → `terminal::Terminal::spawn`, and `Terminal::replay` for recorded output
- [x] TerminalTabs → `navigation::EditorTabs`
- [x] TerminalSplit → `layout::PaneGroup`, a `Terminal` per pane
- [x] TerminalToolbar
- [x] TerminalSearch → `editor::FindWidget` over `Terminal::find`
- [x] TerminalLink → `Terminal`, a Cmd-press on `terminal::links`: URLs and path:line:column
- [x] ShellSelector
- [x] CommandBlock
- [x] CommandHistory
- [x] AnsiText
- [x] LogViewer
- [x] ProcessList
## T19 Git — `src/git`
- [x] DiffViewer — split, unified
- [x] InlineDiff → `editor::CodeEditor::set_diff`
- [x] ThreeWayMerge
- [x] ConflictResolver
- [x] ChangesList
- [x] CommitInput
- [x] CommitGraph → `git::CommitList::graph`
- [x] CommitList / CommitItem
- [x] BranchSelector
- [x] BranchList
- [x] TagList
- [x] StashList
- [x] BlameView / GitBlameAnnotation
- [x] FileHistory
- [x] PullRequestCard
- [x] ReviewComment
- [x] DiffStat
- [x] GitStatusBadge
## T20 Debug — `src/debug`
- [x] DebugToolbar
- [x] BreakpointList
- [x] BreakpointGutter → `editor::CodeEditor`, its gutter and `toggle_breakpoint`
- [x] CallStack
- [x] VariablesPanel
- [x] WatchPanel
- [x] ThreadList
- [x] MemoryViewer / HexViewer → `debug::HexViewer`, placed at `base`
- [x] Disassembly
- [x] PerformanceProfiler / Flamegraph → `debug::Flamegraph`
- [x] TimelineProfiler
- [x] NetworkInspector
- [x] ConsoleREPL → `editor::DebugConsole`
Reference in new issue View Git Blame Copy Permalink