ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity
Files
106faca9700b3cd856cd7aaf0afd7674c26f61e7
Ely-GPUI-Components/tasks/ch11-20.md
T
ZacharyZhang-NY 74d6bd1771 T20: Debug 
- DebugToolbar, BreakpointList, CallStack with folded library frames, ThreadList
- VariablesPanel and WatchPanel, colored by kind, changes washed
- HexViewer at a base address with the byte under the pointer lit on both sides
- Disassembly with source lines, registers and numbers colored, gutter breakpoints
- Flamegraph that zooms by frame, TimelineProfiler that zooms and pans by wheel
- NetworkInspector with a waterfall, a filter and a request's headers and body
- icons: redo-dot, arrow-down-to-dot, arrow-up-from-dot
- gallery: the Debug page
2026-09-26 02:38:50 -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 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`
## 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