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

Chapters 31–43

T31a Project · Tasks — src/project

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

T31b Project · Issues and boards

• IssueCard
• LabelManager
• KanbanBoard / KanbanColumn / KanbanCard
• Sprint Board → project::KanbanBoard
• TaskDetailPanel

T31c Project · Plans

• GanttChart / TimelineView → charts::GanttChart
• Roadmap
• Burndown Chart → charts::BurndownChart, on the charts' scales and paint
• MilestoneProgress
• WorkloadView

T31d Project · Time and databases

• TimeTracker
• Pomodoro Timer
• DatabaseView (from T21c) — table, board, gallery, calendar, timeline

T32a Canvas · Plane — src/canvas

• InfiniteCanvas
• CanvasGrid / Guides
• Ruler
• ZoomControls / ZoomIndicator
• MiniMap
• ArtboardFrame

T32b Canvas · Tools

• SelectionBox
• TransformHandles
• SnapIndicator
• ToolPalette
• ShapeTools — rect, ellipse, polygon, line, arrow
• PenTool / PathEditor
• TextTool
• BrushTool / BrushSettings
• HistoryPanel

T32c Canvas · Panels

• LayerPanel
• AssetPanel
• InspectorPanel
• AlignmentToolbar
• ColorPanel
• GradientPanel → forms::GradientEditor
• ShadowEditor
• BorderEditor
• TypographyPanel
• ConstraintsEditor
• AutoLayoutControls
• ExportPanel

T32d Canvas · Graphs and boards

• NodeEditor / NodeGraph
• Node / Port / Edge / Connection
• FlowChart / DiagramEditor
• MindMap
• Whiteboard
• StickyNote
• Connector Line

T33a DB & Dev Tools · Databases — src/devtools

• ConnectionManager
• ConnectionForm
• SchemaTree
• QueryEditor → editor::CodeEditor
• QueryResultGrid → tables::DataGrid
• QueryHistory
• QueryPlanViewer
• TableStructureEditor
• ERDiagram
• IndexManager
• RedisKeyBrowser

T33b DB & Dev Tools · Data formats

• DocumentViewer (MongoDB / JSON) → devtools::JsonViewer
• JsonViewer / JsonTree
• JsonEditor
• YamlViewer
• XmlViewer

T33c DB & Dev Tools · APIs

• ApiRequestBuilder
• ResponseViewer
• HeadersTable
• QueryParamsEditor → forms::KeyValueInput
• EnvironmentSelector
• CollectionTree
• WebSocketConsole
• GraphQLExplorer

T33d DB & Dev Tools · Tools and machines

• RegexTester
• Base64 / Encoder
• ColorContrastChecker
• ContainerList
• PodList
• ResourceMonitor

T34 Dashboard — src/dashboard

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

T35 Settings — src/settings

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

T36a Account · Sign in — src/account

• LoginForm
• SignupForm
• OAuthButtons
• MagicLinkForm
• TwoFactorInput
• ForgotPassword

T36b Account · Profile and access

• ProfileCard
• ProfileEditor
• AccountSwitcher
• WorkspaceSwitcher / OrgSwitcher
• UserMenu
• SessionList
• ApiKeyManager

T36c Account · Billing and team

• SubscriptionCard / PlanBadge
• UsageQuota
• BillingHistory
• PaymentMethodForm
• UpgradePrompt / Paywall
• TeamMemberTable
• RoleSelector
• InvitationList

T37a Onboarding · Flows and highlights — src/onboarding

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

T37b Onboarding · Help

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

T38a Interaction · Pointer — src/interaction

• Draggable — native on_drag
• Droppable / DropTarget — native on_drop, drag_over, can_drop
• DragOverlay / DragPreview — native drag view
• DragGhost → DragPreview (native)
• Sortable / SortableContext → motion::Reorder
• Resizable
• Rotatable — an svg: gpui turns no other element
• Selectable / SelectionArea
• RubberBandSelection → interaction::SelectionArea
• LongPress → primitives::Pressable
• 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
• PanZoom → layout::Viewport

T38b Interaction · Keys, scroll and focus

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

T39a Theme · Editing — src/theme

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

T39b Theme · Importing

• ThemeImporter — VS Code theme JSON → settings::ThemeImporter on settings::read_vscode_theme
• SyntaxThemes → theme::syntax_themes, chosen through settings::SyntaxThemePicker

T39c Theme · Platform

• IconThemeProvider → primitives::IconTheme, an owner's rules by name and extension over file_icon
• Platform Style → theme::Platform, the theme's platform: the window buttons Ely draws, the title bar, key caps
• 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

• I18nProvider → i18n::I18n, a gpui global: the shown locale and one catalog per locale
• Trans / LocalizedText → I18n::text, a message with its {name} arguments filled
• LocaleNumber / LocaleDate → Locale::number and Locale::date, CLDR's separators, right-to-left sign and short dates
• 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
• 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
• KeyboardNavigationHelper → interaction::RovingFocus
• ScreenReaderOnly → VisuallyHidden (prove)
• 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

• 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
• 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
• 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
• LocationPicker → maps::LocationPicker, the place under a center crosshair
• CoordinateDisplay → maps::CoordinateDisplay, degrees or degrees, minutes and seconds, copyable

T41b Maps · Layers

• 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
• RouteLine → maps::RouteLine, a layer that crosses the date line the short way
• GeoJSON Layer → maps::read_geojson reads RFC 7946 to features; maps::GeoJsonLayer washes areas with their holes open, strokes lines, dots points
• GeoHeatmap (from T34) → maps::GeoHeatmap, weighted places as heat scaled to the densest spot in view

T41c Maps · World

• 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
• 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

• Clock / WorldClock → misc::Clock, a face over its digits ticking each second; misc::WorldClock, places in rows by day and offset against home
• 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

• 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
• 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

• 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
• BarcodeDisplay → data_display::Barcode
• Captcha → misc::Captcha: the owner's picture and verdict over an answer field that empties and keeps focus with each answer, with a refresh
• Signature → forms::SignaturePad
• Rating Widget → forms::Rating

T42d Misc · Asking and learning

• 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
• 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

• ChangeLog Viewer → data_display::Changelog
• 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
• 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
• 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

• 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
• IframeEmbed / EmbedCard → misc::IframeEmbed, a page in a frame of its own under its address, with Open in browser; EmbedCard is chat::LinkPreviewCard
• HTMLPreview → misc::WebView
• PrintButton — blocked: gpui has no print API
• ShareSheet → buttons::ShareButton

T42g Misc · Export and import

• 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
• 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
• 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

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

T43b Tooling · Inspection

• 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
• FPSMeter / PerfOverlay → tooling::FpsMeter: frames per second over the last second, the worst frame, a bar per frame against the 60 Hz budget
• RenderCounter → tooling::RenderCounter: how often the view that draws it has rendered
• EventLogger → tooling::EventLogger: the input events that reach what it holds, newest first, moves run together, each timed from the first

T43c Tooling · Catalogs

• DesignTokenViewer → tooling::DesignTokenViewer: the theme's shared colors and scales in the mode shown, named as code reads them, with their values
• IconBrowser → forms::IconPicker: the library's icons, searchable
• 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
• ScreenshotTest Harness — self-capture; scripted input since T01 → examples/gallery --capture: every page light and dark, then its scripted states