Files
Ely-GPUI-Components/tasks/ch31-43.md
T
ZacharyZhang-NY 86a8b4a958 DB & Dev Tools · Data formats: JSON, YAML and XML as trees, a JSON editor
A document reads into one value, Datum: JSON through serde_json, its
keys now kept in their written order, and YAML's block style through a
small reader that says which line it could not read. JsonViewer and
YamlViewer draw it as one tree: each key with its value, maps and lists
with their counts; a search keeps what holds its words and opens the
way; Enter on a value copies its JSONPath. XmlViewer reads elements,
attributes and text and says where tags cross. JsonEditor writes JSON
in the code editor with Format and Minify and says whether it reads.
DocumentViewer is JsonViewer.
2026-09-27 09:22:30 -04:00

8.3 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 → agent::TraceViewer
  • EventStream
  • ResourceGauge → data_display::Gauge
  • SystemMonitor
  • 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 → theme::ThemeSwitcher
  • 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

T36 Account — src/account

  • LoginForm
  • SignupForm
  • OAuthButtons
  • MagicLinkForm
  • TwoFactorInput
  • ForgotPassword
  • ProfileCard
  • ProfileEditor
  • AccountSwitcher
  • WorkspaceSwitcher / OrgSwitcher
  • UserMenu
  • SessionList
  • ApiKeyManager
  • SubscriptionCard / PlanBadge
  • UsageQuota
  • BillingHistory
  • PaymentMethodForm
  • UpgradePrompt / Paywall
  • TeamMemberTable
  • RoleSelector
  • InvitationList

T37 Onboarding & Help — src/onboarding

  • OnboardingWizard
  • WelcomeTour → overlays::Tour (T09b)
  • Coachmark / Hotspot — Coachmark → overlays::Spotlight; Hotspot here
  • FeatureHighlight / NewBadge
  • Checklist (first-run tasks)
  • HelpTooltip
  • HelpPanel / DocsSidebar
  • KeyboardShortcutCheatsheet
  • WhatsNewDialog
  • FeedbackWidget
  • ContactSupport
  • InlineHelp
  • EmptyStateWithAction → feedback::EmptyState

T38 Interaction — src/interaction

  • Draggable — native on_drag
  • Droppable / DropTarget — native on_drop, drag_over
  • DragOverlay / DragPreview — native drag view
  • DragGhost → DragPreview (native)
  • Sortable / SortableContext
  • Resizable
  • Rotatable
  • Selectable / SelectionArea
  • RubberBandSelection → interaction::SelectionArea
  • LongPress → primitives::Pressable
  • DoubleClick — native ClickEvent::click_count
  • Gesture — prove: wheel zoom, pinch, two-finger swipe
  • PanZoom → layout::Viewport
  • Hotkeys / KeyBinding — native actions!, bind_keys, key_context
  • KeyChord — native multi-keystroke bindings
  • Undo / Redo Manager
  • InfiniteScroll Trigger → lists::InfiniteList
  • VirtualScroller — native list() / uniform_list()
  • ScrollSync
  • Autofocus — native window.focus()
  • RovingTabIndex
  • TypeAhead
  • FocusVisible → primitives::FocusRing

T39 Theme — src/theme

  • ThemeProvider (T00)
  • ThemeSwitcher
  • ColorTokens / DesignTokens (T00)
  • ThemeEditor
  • ThemeImporter — VS Code theme JSON
  • SyntaxThemes
  • IconThemeProvider
  • DensityProvider (T00)
  • RadiusProvider (T00)
  • FontProvider (T00)
  • HighContrastMode (T00)
  • ReducedMotionProvider (T00)
  • Platform Style
  • VibrancyBackground / Mica / Acrylic — native WindowBackgroundAppearance::Blurred
  • Elevation / Shadow (T00)

T40 i18n & a11y — src/i18n

  • I18nProvider
  • Trans / LocalizedText
  • LocaleNumber / LocaleDate
  • RTL layout — prove: mirrored stacks
  • LiveRegion / Announcer — blocked: gpui 0.2.2 has no accessibility tree
  • SkipLink
  • AccessibleIcon — blocked: no accessibility tree
  • AriaLabel helper — blocked: no accessibility tree
  • KeyboardNavigationHelper
  • ScreenReaderOnly — blocked: no accessibility tree
  • ColorBlindSafe Palette

T41 Maps — src/maps

  • MapView — host tiles
  • MapMarker
  • MapPopup
  • MapCluster
  • RouteLine
  • GeoJSON Layer
  • ChoroplethMap
  • LocationPicker
  • CoordinateDisplay
  • WorldMap (from T34)
  • GeoHeatmap (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