Files
Ely-GPUI-Components/tasks/ch31-43.md
T
ZacharyZhang-NYandClaude Opus 5.5 bbba5ee04b Maps · View: pins in view take presses, the popup hands focus back
A pin whose place lies outside the view takes no press or Tab, as its
popup would not show. The popup takes focus when it shows and, the
frame it stops showing by its button, Escape, the owner or a pan, hands
focus back to what held it, so focus stays in the map. Its body scrolls
past the room on its side and it paints over the zoom buttons. Tiles
load through gpui's logging loader, so a tile that fails says so. A
drag's owner check has a test, and the per-move viewport logs at debug.
The maps tests split into the map's and the popup's.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-27 21:57:27 -04:00

12 KiB
Raw Blame History

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 (T41)
  • WorldMap → maps::WorldMap (T41)
  • 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 0.2.2 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 blocked, gpui 0.2.2 forwards no magnify event
  • 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 — blocked: gpui 0.2.2's one blur, Blurred, is acrylic on Windows

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 — blocked: gpui 0.2.2 has no accessibility tree; AppKit's announcement request needs none, but no process here is trusted to observe VoiceOver take it
  • SkipLink → i18n::SkipLink: a Tab stop in flow that shows only while focused, raised over the page, and hands focus to its target
  • AccessibleIcon — blocked: no accessibility tree
  • AriaLabel helper — blocked: no accessibility tree
  • KeyboardNavigationHelper → interaction::RovingFocus
  • ScreenReaderOnly — blocked: no accessibility tree
  • 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, pressable while in view when the map hears it
  • 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
  • RouteLine
  • GeoJSON Layer
  • GeoHeatmap (from T34)

T41c Maps · World

  • ChoroplethMap
  • WorldMap (from T34)

T42 Misc — src/misc

  • Clock / WorldClock
  • Stopwatch
  • Calculator
  • UnitConverter
  • QRCodeScanner — prove: host frames, rqrr decode
  • BarcodeDisplay → data_display::Barcode
  • Captcha
  • Signature → forms::SignaturePad
  • Rating Widget → forms::Rating
  • Poll / Survey
  • Quiz / Flashcard
  • ChangeLog Viewer → data_display::Changelog
  • LicenseViewer
  • Terms / Consent Dialog
  • CookieBanner
  • WebView — prove: wry
  • IframeEmbed / EmbedCard
  • HTMLPreview → misc::WebView
  • PrintButton — blocked: gpui 0.2.2 has no print API
  • ExportDialog — PDF, PNG, CSV, JSON
  • ImportDialog — field mapping
  • CSVImporter
  • ShareSheet

T43 Library Tooling — src/tooling

  • ComponentGallery / Storybook
  • PlaygroundPanel
  • InspectorOverlay
  • FPSMeter / PerfOverlay
  • RenderCounter
  • EventLogger
  • DesignTokenViewer
  • IconBrowser
  • A11yChecker — contrast audit
  • ScreenshotTest Harness — self-capture; scripted input since T01