Ely-GPUI-Components/tasks/ch31-43.md

# Chapters 31–43

## T31a Project · Tasks — `src/project`

- [x] PriorityIndicator
- [x] IssueIdBadge
- [x] StatusSelect
- [x] AssigneePicker
- [x] DueDatePicker → `forms::DatePicker`
- [x] TaskItem — check, priority, due date, assignee
- [x] TaskList
- [x] SubtaskList → `documents::Checklist`, which gains a field to add one

## T31b Project · Issues and boards

- [x] IssueCard
- [x] LabelManager
- [x] KanbanBoard / KanbanColumn / KanbanCard
- [x] Sprint Board → `project::KanbanBoard`
- [x] TaskDetailPanel

## T31c Project · Plans

- [x] GanttChart / TimelineView → `charts::GanttChart`
- [x] Roadmap
- [x] Burndown Chart → `charts::BurndownChart`, on the charts' scales and paint
- [x] MilestoneProgress
- [x] WorkloadView

## T31d Project · Time and databases

- [x] TimeTracker
- [x] Pomodoro Timer
- [x] DatabaseView (from T21c) — table, board, gallery, calendar, timeline

## T32a Canvas · Plane — `src/canvas`

- [x] InfiniteCanvas
- [x] CanvasGrid / Guides
- [x] Ruler
- [x] ZoomControls / ZoomIndicator
- [x] MiniMap
- [x] ArtboardFrame

## T32b Canvas · Tools

- [x] SelectionBox
- [x] TransformHandles
- [x] SnapIndicator
- [x] ToolPalette
- [x] ShapeTools — rect, ellipse, polygon, line, arrow
- [x] PenTool / PathEditor
- [x] TextTool
- [x] BrushTool / BrushSettings
- [x] HistoryPanel

## T32c Canvas · Panels

- [x] LayerPanel
- [x] AssetPanel
- [x] InspectorPanel
- [x] AlignmentToolbar
- [x] ColorPanel
- [x] GradientPanel → `forms::GradientEditor`
- [x] ShadowEditor
- [x] BorderEditor
- [x] TypographyPanel
- [x] ConstraintsEditor
- [x] AutoLayoutControls
- [x] ExportPanel

## T32d Canvas · Graphs and boards

- [x] NodeEditor / NodeGraph
- [x] Node / Port / Edge / Connection
- [x] FlowChart / DiagramEditor
- [x] MindMap
- [x] Whiteboard
- [x] StickyNote
- [x] Connector Line

## T33a DB & Dev Tools · Databases — `src/devtools`

- [x] ConnectionManager
- [x] ConnectionForm
- [x] SchemaTree
- [x] QueryEditor → `editor::CodeEditor`
- [x] QueryResultGrid → `tables::DataGrid`
- [x] QueryHistory
- [x] QueryPlanViewer
- [x] TableStructureEditor
- [x] ERDiagram
- [x] IndexManager
- [x] RedisKeyBrowser

## T33b DB & Dev Tools · Data formats

- [x] DocumentViewer (MongoDB / JSON) → `devtools::JsonViewer`
- [x] JsonViewer / JsonTree
- [x] JsonEditor
- [x] YamlViewer
- [x] XmlViewer

## T33c DB & Dev Tools · APIs

- [x] ApiRequestBuilder
- [x] ResponseViewer
- [x] HeadersTable
- [x] QueryParamsEditor → `forms::KeyValueInput`
- [x] EnvironmentSelector
- [x] CollectionTree
- [x] WebSocketConsole
- [x] GraphQLExplorer

## T33d DB & Dev Tools · Tools and machines

- [x] RegexTester
- [x] Base64 / Encoder
- [x] ColorContrastChecker
- [x] ContainerList
- [x] PodList
- [x] ResourceMonitor

## T34 Dashboard — `src/dashboard`

- [x] Dashboard Grid
- [x] Widget / DashboardCard
- [x] StatCard → `data_display::Statistic`
- [x] MetricsChart → `charts::LineChart`
- [x] AlertList
- [x] IncidentCard
- [x] UptimeBar
- [x] ServiceStatus
- [x] HealthCheck Indicator
- [x] LogStream → `terminal::LogViewer`
- [x] TraceWaterfall → `debug::TimelineProfiler`
- [x] EventStream
- [x] ResourceGauge → `data_display::Gauge`
- [x] SystemMonitor → `devtools::ResourceMonitor`
- [x] ProcessTable → `terminal::ProcessList`
- [x] NetworkGraph (throughput) → `charts::RealtimeChart`
- [x] MapView / GeoHeatmap → `maps::MapView`, `maps::GeoHeatmap` (T41a, T41b)
- [x] WorldMap → `maps::WorldMap` (T41c)
- [x] RefreshIntervalSelector
- [x] DashboardFilterBar

## T35 Settings — `src/settings`

- [x] SettingsLayout
- [x] SettingsSection
- [x] SettingsRow
- [x] SettingsSearch
- [x] ThemeSelector (T39's ThemeSwitcher points here)
- [x] AccentColorPicker
- [x] FontSizeControl
- [x] FontFamilySelect → `forms::FontPicker`
- [x] DensitySelector
- [x] LanguageSelector → `forms::Combobox::languages` (T06f)
- [x] KeyboardShortcutsList
- [x] ShortcutEditor → `editor::KeybindingsEditor`
- [x] ProxySettings
- [x] StorageSettings / CacheClear
- [x] PrivacySettings
- [x] NotificationSettings
- [x] StartupSettings
- [x] ImportExportSettings
- [x] ResetToDefault
- [x] AdvancedSettings / FeatureFlags
- [x] DeveloperMode Toggle

## T36a Account · Sign in — `src/account`

- [x] LoginForm
- [x] SignupForm
- [x] OAuthButtons
- [x] MagicLinkForm
- [x] TwoFactorInput
- [x] ForgotPassword

## T36b Account · Profile and access

- [x] ProfileCard
- [x] ProfileEditor
- [x] AccountSwitcher
- [x] WorkspaceSwitcher / OrgSwitcher
- [x] UserMenu
- [x] SessionList
- [x] ApiKeyManager

## T36c Account · Billing and team

- [x] SubscriptionCard / PlanBadge
- [x] UsageQuota
- [x] BillingHistory
- [x] PaymentMethodForm
- [x] UpgradePrompt / Paywall
- [x] TeamMemberTable
- [x] RoleSelector
- [x] InvitationList

## T37a Onboarding · Flows and highlights — `src/onboarding`

- [x] OnboardingWizard — on `navigation::Wizard` without its numbered steps
- [x] WelcomeTour → `overlays::Tour` (T09b)
- [x] Coachmark / Hotspot — Coachmark → `overlays::Spotlight`; Hotspot here
- [x] FeatureHighlight / NewBadge — NewBadge → `data_display::Badge` with `Tone::Accent`, which FeatureHighlight wears
- [x] Checklist (first-run tasks) → `onboarding::SetupChecklist`; a to-do list ticked by hand is `documents::Checklist`

## T37b Onboarding · Help

- [x] HelpTooltip → `primitives::HelpTooltip`, the mark FormLabel's help shows
- [x] HelpPanel / DocsSidebar
- [x] KeyboardShortcutCheatsheet — `settings::KeyboardShortcutsList` in an `overlays::Dialog`
- [x] WhatsNewDialog — `data_display::Changelog` in an `overlays::Dialog`
- [x] FeedbackWidget
- [x] ContactSupport
- [x] InlineHelp
- [x] EmptyStateWithAction → `feedback::EmptyState`, whose `action` adds its buttons

## T38a Interaction · Pointer — `src/interaction`

- [x] Draggable — native `on_drag`
- [x] Droppable / DropTarget — native `on_drop`, `drag_over`, `can_drop`
- [x] DragOverlay / DragPreview — native drag view
- [x] DragGhost → DragPreview (native)
- [x] Sortable / SortableContext → `motion::Reorder`
- [x] Resizable
- [x] Rotatable — an svg: gpui turns no other element
- [x] Selectable / SelectionArea
- [x] RubberBandSelection → `interaction::SelectionArea`
- [x] LongPress → `primitives::Pressable`
- [x] DoubleClick — native `ClickEvent::click_count`
- [ ] Gesture — prove: wheel zoom through `layout::Viewport`, two-finger swipe through `lists::SwipeableListItem`; pinch is not yet shown: gpui hands a trackpad magnify to `on_pinch` as a `PinchEvent`, and `layout::Viewport` must zoom about the pointer on one
- [x] PanZoom → `layout::Viewport`

## T38b Interaction · Keys, scroll and focus

- [x] Hotkeys / KeyBinding — native `actions!`, `bind_keys`, `key_context`
- [x] KeyChord — native multi-keystroke bindings; `window.pending_input_keystrokes()` shows the first stroke
- [x] Undo / Redo Manager → `forms::History`, made public
- [x] InfiniteScroll Trigger → `lists::InfiniteList`
- [x] VirtualScroller — native `list()` / `uniform_list()`
- [x] ScrollSync
- [x] Autofocus — native `window.focus()`
- [x] RovingTabIndex → `interaction::RovingFocus`
- [x] TypeAhead → `lists::SelectableList`, whose letters move its cursor
- [x] FocusVisible → `primitives::FocusRing`

## T39a Theme · Editing — `src/theme`

- [x] ThemeProvider (T00)
- [x] ThemeSwitcher → `settings::ThemeSelector` (T35)
- [x] ColorTokens / DesignTokens (T00)
- [x] ThemeEditor → `settings::ThemeEditor`; `Theme::set_palette` takes the owner's colors per mode
- [x] DensityProvider (T00) — `Theme::density`, laid open in `settings::ThemeEditor`
- [x] RadiusProvider (T00) — `Theme::radius_scale`, laid open in `settings::ThemeEditor`
- [x] FontProvider (T00) — `Theme::font_scale`, laid open in `settings::ThemeEditor`
- [x] HighContrastMode (T00) — `Theme::set_high_contrast`, laid open in `settings::ThemeEditor`
- [x] ReducedMotionProvider (T00) — `Theme::reduced_motion`, laid open in `settings::ThemeEditor`
- [x] Elevation / Shadow (T00)

## T39b Theme · Importing

- [x] ThemeImporter — VS Code theme JSON → `settings::ThemeImporter` on `settings::read_vscode_theme`
- [x] SyntaxThemes → `theme::syntax_themes`, chosen through `settings::SyntaxThemePicker`

## T39c Theme · Platform

- [x] IconThemeProvider → `primitives::IconTheme`, an owner's rules by name and extension over `file_icon`
- [x] Platform Style → `theme::Platform`, the theme's `platform`: the window buttons Ely draws, the title bar, key caps
- [x] VibrancyBackground / Acrylic → `shell::Vibrancy` in a window opened `WindowBackgroundAppearance::Blurred`
- [ ] Mica — prove: a window opened `WindowBackgroundAppearance::MicaBackdrop` or `MicaAltBackdrop` gets a DWM backdrop from Windows 11 build 22621, none on older builds, in silence, and plain transparency on macOS; `shell::Vibrancy` must show Mica through its `glass` on Windows 11, where the capture harness does not run

## T40a i18n — `src/i18n`

- [x] I18nProvider → `i18n::I18n`, a gpui global: the shown locale and one catalog per locale
- [x] Trans / LocalizedText → `I18n::text`, a message with its `{name}` arguments filled
- [x] LocaleNumber / LocaleDate → `Locale::number` and `Locale::date`, CLDR's separators, right-to-left sign and short dates
- [x] RTL layout — proven: `Direction::row` mirrors a stack and `Direction::align` sets its text's side; a right-to-left line stays one `Ellipsis`, since gpui wraps glyphs in drawn order; Ely's other components stay left to right

## T40b a11y — `src/i18n`

- [ ] LiveRegion / Announcer — prove: gpui has no live setter, but `a11y_synthetic_children` hands over the element's own AccessKit node, which takes `set_live`; on macOS AccessKit then posts an announcement of the node's value when it appears and each time the value changes. A box with an id, a `role` and its words in `aria_value` must show each new value in the macOS tree. Neither that tree nor `Window::debug_a11y_tree_json` shows the live flag, and no process here is trusted to observe VoiceOver take the announcement
- [x] SkipLink → `i18n::SkipLink`: a Tab stop in flow that shows only while focused, raised over the page, and hands focus to its target
- [ ] AccessibleIcon — prove: an svg makes no node, so an `Icon` takes its name from a box around it with an id, `role(Role::Image)` and an `aria_label`; that box must reach the macOS tree with its name
- [ ] AriaLabel helper — prove: gpui's own `aria_label`, on an element with an id and a `role`; plain strings make no node, so a control's name goes on its box. A labeled button must reach the macOS tree with its name
- [x] KeyboardNavigationHelper → `interaction::RovingFocus`
- [ ] ScreenReaderOnly → VisuallyHidden (prove)
- [x] ColorBlindSafe Palette → `Theme::set_color_blind_safe`: chart hues fitted to stay apart under Machado's simulated protanopia, deuteranopia and tritanopia, each 3:1 on its page

## T41a Maps · View — `src/maps`

- [x] MapView — host tiles → `maps::MapView`: the host's tile for each zoom, column and row, the nearest cut scaled past its zooms; a drag, the wheel or the arrows pan, Command-wheel, + and - or its buttons zoom
- [x] MapMarker → `maps::MapMarker`, a pin keyed by its place's name, a Tab stop and pressable while in view when the map hears it; a focused pin keeps focus as it leaves the view
- [x] MapPopup → `maps::MapPopup`, over or under its point toward the larger half, held inside the map, its body scrolling past the room; it takes focus when it shows and hands it back when it goes
- [x] LocationPicker → `maps::LocationPicker`, the place under a center crosshair
- [x] CoordinateDisplay → `maps::CoordinateDisplay`, degrees or degrees, minutes and seconds, copyable

## T41b Maps · Layers

- [x] MapCluster → `MapView::cluster_markers`: pins gathered by squares of the world, so a pan keeps each group; a cluster's press shows its members whole
- [x] RouteLine → `maps::RouteLine`, a layer that crosses the date line the short way
- [x] GeoJSON Layer → `maps::read_geojson` reads RFC 7946 to features; `maps::GeoJsonLayer` washes areas with their holes open, strokes lines, dots points
- [x] GeoHeatmap (from T34) → `maps::GeoHeatmap`, weighted places as heat scaled to the densest spot in view

## T41c Maps · World

- [x] ChoroplethMap → `maps::ChoroplethMap` on a `ChoroplethLayer`: areas washed by value on one hue's scale, keyed by id or a property, with a legend; an area without a value reads as no data, a value without an area is logged once
- [x] WorldMap (from T34) → `maps::WorldMap`, Natural Earth's 110m countries bundled and washed by ISO 3166 alpha-2 code; a key that is no code fails

## T42a Misc · Time — `src/misc`

- [x] Clock / WorldClock → `misc::Clock`, a face over its digits ticking each second; `misc::WorldClock`, places in rows by day and offset against home
- [x] Stopwatch → `misc::Stopwatch`, on the executor's clock: Start or Pause on one button, Lap on another that reads Reset once paused, laps newest first

## T42b Misc · Numbers

- [x] Calculator → `misc::Calculator`: digits, the four operations in precedence through `forms::evaluate`, sign, delete and clear; a result goes on at its whole value and shows twelve significant digits; keys type too, and Enter gives the result while the calculator itself has focus
- [x] UnitConverter → `misc::UnitConverter`: length, area, volume, mass, temperature, speed and data, each on a starting pair, with a swap; six significant digits, wrapped when long

## T42c Misc · Codes and checks

- [x] QRCodeScanner — proven: `rqrr` 0.11 reads the host's frames off the main thread → `misc::QrCodeScanner`, a camera's view with a square to aim at; each code goes to the owner once
- [x] BarcodeDisplay → `data_display::Barcode`
- [x] Captcha → `misc::Captcha`: the owner's picture and verdict over an answer field that empties and keeps focus with each answer, with a refresh
- [x] Signature → `forms::SignaturePad`
- [x] Rating Widget → `forms::Rating`

## T42d Misc · Asking and learning

- [x] Poll / Survey → `misc::Poll`: one vote, then each option's share with the vote marked, and Change vote on Vote's stop; `misc::Survey`: questions on one page answered by an option, several, or words; Submit asks for what is missing, then sends, and thanks in its place and focus
- [x] Quiz / Flashcard → `misc::Quiz`: a question at a time, Check shows the right answer, then Next and the score, one button on one stop; `misc::Flashcards`: a press turns the card, Previous and Next go round the deck

## T42e Misc · Terms and notices

- [x] ChangeLog Viewer → `data_display::Changelog`
- [x] LicenseViewer → `misc::LicenseViewer`: each package with its version and license, beside the chosen one's text, which scrolls; narrow, the text drops below the list
- [x] Terms / Consent Dialog → `misc::ConsentDialog` on `overlays::Dialog`: a box to agree, and Accept asks for it until ticked; each way out answers once, accept or decline
- [x] CookieBanner → `misc::CookieBanner`: Accept all, Reject all, or Choose, which turns into Save choices over a switch for each kind; necessary cookies stay on

## T42f Misc · Web

- [x] WebView — proven: `wry` 0.57 lays a child WKWebView over the window → `misc::WebView`, an address or the owner's HTML, following its box each frame and hidden out of view; it draws above gpui and ignores its clipping, and a press anywhere gpui draws, or the view leaving, hands the keyboard back. macOS only
- [x] IframeEmbed / EmbedCard → `misc::IframeEmbed`, a page in a frame of its own under its address, with Open in browser; EmbedCard is `chat::LinkPreviewCard`
- [x] HTMLPreview → `misc::WebView`
- [x] PrintButton — blocked: gpui has no print API
- [x] ShareSheet → `buttons::ShareButton`

## T42g Misc · Export and import

- [x] ExportDialog — PDF, PNG, CSV, JSON → `misc::ExportDialog`: the owner's formats as cards, and Export hands the chosen one over for the owner to write; each way out answers once
- [x] ImportDialog — field mapping → `misc::ImportDialog`: a Select of the columns for each field, matched by name to start, over a preview of the first rows; Import asks for each required field's column
- [x] CSVImporter → `misc::CsvImporter`: CSV read as RFC 4180 (`misc::read_csv`), its first row naming the columns unless the box says otherwise, mapped through the ImportDialog into records; text that does not read says why

## T43a Tooling · Workbench — `src/tooling`

- [x] ComponentGallery / Storybook → `examples/gallery`, a page per chapter, light and dark, with scripted states; `--page` opens one and `--capture` photographs every page and state
- [x] PlaygroundPanel → `tooling::Playground`: a preview beside knobs, each a switch, a choice or a number that edits one property

## T43b Tooling · Inspection

- [x] InspectorOverlay → `tooling::install_inspector`: gpui's inspector, debug builds only, drawn by Ely: hover picks a box, the wheel steps out, a press holds; the box's margin, border, padding and size over the page, its model, source and ids in the panel
- [x] FPSMeter / PerfOverlay → `tooling::FpsMeter`: frames per second over the last second, the worst frame, a bar per frame against the 60 Hz budget
- [x] RenderCounter → `tooling::RenderCounter`: how often the view that draws it has rendered
- [x] EventLogger → `tooling::EventLogger`: the input events that reach what it holds, newest first, moves run together, each timed from the first

## T43c Tooling · Catalogs

- [x] DesignTokenViewer → `tooling::DesignTokenViewer`: the theme's shared colors and scales in the mode shown, named as code reads them, with their values
- [x] IconBrowser → `forms::IconPicker`: the library's icons, searchable
- [x] A11yChecker — contrast audit → `tooling::A11yChecker`: each text color over its surfaces and each code color over the editor's at 4.5:1, the focus ring and chart hues beside the page at 3:1, failures first
- [x] ScreenshotTest Harness — self-capture; scripted input since T01 → `examples/gallery --capture`: every page light and dark, then its scripted states