ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 12 Packages Projects Releases Wiki Activity
Files
48ff3483573c2fd4118f3b2deddc5fcfe5a754a4
Ely-GPUI-Components/tasks/ch21-30.md
T
ZacharyZhang-NY 48ff348357 Calendar · Agenda and people: an agenda, an event's details, its guests 
AgendaView lists the days ahead under their names, whole days first,
then by the hour, and leaves out days with nothing; it rides on
lists::Sections, so a press or an arrow selects and Enter opens. An
empty stretch says nothing is planned.

EventPopover is an event's chip that opens its details: its title in
its hue, when and where, who is asked, and Edit and Delete when the
owner handles them. It opens through Popover::with_opener, which now
hands any element the toggle and keeps focus, placement and every way
out in the popover. AttendeeList counts the answers and lists each
guest with their answer, the organizer first. A hue worn in a row is
now data_display::color_mark, for mail labels and events alike.
2026-09-27 03:35:59 -04:00

12 KiB
Raw Blame History

Chapters 21–30

T21a Documents · Editing — src/documents

  • RichTextEditor
  • MarkdownEditor — visual, source, split
  • BlockEditor
  • Block types — paragraph, heading, list, todo, quote, code, divider, table, image, video, embed, math, callout, toggle, columns, synced; video and embed open as cards the app plays or shows
  • BlockHandle → the block editor's handle, a menus::OverflowMenu that drags its block
  • SlashMenu → / in BlockEditor
  • FloatingFormatToolbar → overlays::FloatingToolbar
  • FixedFormatToolbar
  • LinkEditor
  • MentionMenu → @ in RichTextEditor and BlockEditor; forms::MentionInput in a field
  • EmojiAutocomplete → a colon and two letters in RichTextEditor and BlockEditor
  • TableEditor → the block editor's table: rows and columns added and removed, cells merged across
  • ImageEditorBlock → the block editor's picture: resized by its edges, aligned, captioned
  • MathEditor / LatexBlock → the block editor's math block over typography::Latex
  • MermaidBlock / DiagramBlock — host renders the SVG → BlockEditor::diagrams
  • CodeBlockEditor → the block editor's code block
  • TodoItem / Checklist
  • PlaceholderText → each kind's hint in BlockEditor
  • WordCount / CharacterCount → WordCount, with limit for characters
  • ReadingTime

T21b Documents · Reading

  • MarkdownRenderer
  • DocumentViewer — host pages
  • PDFViewer — host pages; thumbnails, search, zoom, notes → documents::DocumentViewer with thumbnails, find (an editor::FindWidget) and notes
  • EpubReader — host chapters
  • OfficePreview — host pages → documents::DocumentViewer
  • PageThumbnailList
  • TableOfContents → navigation::TableOfContents; MarkdownRenderer::sections and outline feed it
  • DocumentOutline → navigation::TableOfContents
  • Footnote
  • Glossary / TooltipTerm
  • ReadingProgress
  • FocusMode / ZenMode → documents::ZenMode
  • PrintPreview — host pages

T21c Documents · Knowledge

  • PageTree → lists::Tree, a page's emoji leading its label
  • Backlinks
  • GraphView → charts::NetworkGraph
  • PageCover / PageIcon
  • PageProperties → data_display::PropertyGrid
  • DatabaseView — table, board, gallery, calendar, timeline → lands with Project (T31): its board is the KanbanBoard, its calendar the CalendarMonthView (T30)
  • TemplatePicker
  • TrashBin
  • VersionHistory
  • PageHistoryDiff
  • Favorites / Pinned → documents::Favorites

T22 Collaboration — src/collab

  • PresenceAvatars
  • RemoteCursor → over a forms::TextInput, placed where its offset sits as the field paints
  • RemoteSelection → over a forms::TextInput, from TextInput::bounds_for_range
  • CommentThread
  • CommentBubble / CommentMarker → collab::CommentMarker, its thread in an overlays::Popover
  • CommentSidebar
  • Reply / ReactionPicker
  • Reactions
  • Annotation / Highlight → collab::AnnotatedText; a plain mark is typography::Highlight
  • SuggestionMode → edits become suggestions through collab::suggested
  • TrackChanges
  • ShareDialog → with collab::LinkAccess for who the link lets in
  • PermissionSelect
  • InviteInput → a forms::TagInput that checks each address
  • AccessList
  • ActivityLog → data_display::ActivityFeed
  • FollowMode
  • LiveIndicator

T23a AI Chat · Messages — src/chat

  • ChatContainer
  • MessageList — virtualized, stick to bottom, new-message hint
  • MessageBubble — user, assistant, system, error
  • MessageAvatar
  • MessageHeader
  • MessageFooter
  • StreamingText
  • StreamingMarkdown
  • StreamingCursor
  • CodeBlock — language, copy, download, run, fold, apply
  • MathBlock → typography::Latex
  • TableBlock → documents::MarkdownRenderer
  • MermaidRenderer → the host draws the SVG; chat::ImageMessage shows it
  • ImageMessage / ImageGrid
  • FileMessage
  • AudioMessage
  • VideoMessage — host frames
  • LinkPreviewCard
  • QuoteReply
  • MessageActions
  • MessageEditor
  • BranchNavigator
  • RegenerateButton → chat::regenerate_button
  • StopGeneratingButton → chat::stop_button
  • ContinueButton → chat::continue_button
  • ErrorMessage / RetryMessage → chat::ErrorMessage, over feedback::Alert
  • RateLimitNotice
  • FeedbackForm
  • ScrollToBottomButton
  • DateSeparator
  • ThinkingBlock / ReasoningPanel → chat::ThinkingBlock
  • ThinkingIndicator
  • ThinkingDuration

T23b AI Chat · Citations

  • CitationBadge / InlineCitation → chat::CitationBadge, set after the words it cites
  • SourceCard
  • SourceList / SourcesPanel → chat::SourceList
  • SearchProgress
  • WebResultCard
  • DocumentChunkPreview

T23c AI Chat · Input

  • PromptInput / Composer → chat::PromptInput
  • AttachmentButton
  • AttachmentChip / AttachmentPreview → chat::AttachmentChip, a picture's thumbnail or a file's icon
  • PasteImagePreview → a pasted picture as an AttachmentChip
  • DragDropOverlay
  • VoiceInputButton
  • VoiceWaveform / RecordingIndicator → chat::VoiceWaveform, a red dot and the time with the bars
  • SlashCommandMenu → / at the start of chat::PromptInput, over forms::Suggestions
  • PromptTemplateMenu → menus::DropdownMenu of saved prompts
  • ContextMentionMenu → @ in chat::PromptInput
  • ContextChips
  • ModelSelector → forms::Select, a note on each model
  • ModeSelector → buttons::SegmentedControl
  • ToolToggleMenu → menus::DropdownMenu with check rows
  • TemperatureSlider / ParameterPanel → chat::ParameterPanel
  • SystemPromptEditor
  • TokenCounter
  • ContextWindowMeter → data_display::UsageBar
  • CostEstimator
  • SendButton
  • InputHint

T23d AI Chat · Conversations

  • ConversationList
  • ConversationItem
  • ConversationSearch → forms::SearchInput over chat::ConversationList::query
  • NewChatButton → chat::new_chat_button, a buttons::Button
  • FolderList / ProjectList → chat::ProjectList
  • ProjectKnowledgePanel
  • SharedConversationView
  • ConversationExport

T23e AI Chat · Welcome

  • WelcomeScreen / Greeting → chat::WelcomeScreen, a greeting for the hour
  • SuggestionChips / StarterPrompts → chat::SuggestionChips
  • PromptLibrary → documents::TemplatePicker over saved prompts
  • FollowUpSuggestions
  • CapabilityCards

T24a Agent · Tool calls — src/agent

  • ToolCallCard
  • ToolCallGroup
  • ToolApprovalDialog
  • PermissionPrompt

T24b Agent · Progress

  • AgentStepList / TaskTimeline → agent::AgentStepList, over data_display::Timeline
  • AgentPlan / TodoList → agent::AgentPlan, marks that pop in as items finish
  • AgentStatus
  • AgentProgress
  • SubAgentTree → lists::Tree, a node per agent with its state as note and tone

T24c Agent · Changes

  • FileChangeCard
  • MultiFileDiff Review → agent::MultiFileDiffReview, verdicts as collab::Decision
  • CommandExecutionCard → terminal::CommandBlock

T24d Agent · Previews

  • BrowserPreview / ScreenshotStream — host frames → agent::BrowserPreview, the frames so far along its foot
  • ComputerUseViewer — host frames
  • ArtifactPanel
  • ArtifactVersionSwitcher → chat::BranchNavigator, in agent::ArtifactPanel
  • LivePreview — host content

T24e Agent · Environment

  • SandboxStatus
  • MCPServerList / ConnectorList → agent::McpServerList
  • ToolRegistry Panel → agent::ToolRegistry
  • MemoryPanel
  • CheckpointList / Rewind → agent::CheckpointList, Rewind on each point but the current

T24f Agent · Control and cost

  • InterruptButton → chat::stop_button
  • HumanInputRequest
  • TokenUsageChart → charts::BarChart (stacked)
  • CostBreakdown
  • TraceViewer → debug::TimelineProfiler (a track per depth)
  • EvalResultTable → tables::DataTable (Tag and Progress cells)

T25a Generative · Prompt and settings — src/generative

  • ImageGenerationPanel → forms::Form of the fields below; Cmd-Enter generates
  • PromptEnhancer
  • NegativePromptInput → forms::TagInput
  • StylePresetPicker
  • SeedInput
  • AspectRatioPicker

T25b Generative · Queue and results

  • GenerationQueue
  • GenerationGrid
  • VariationPicker
  • ImageCompare → data_display::BeforeAfter
  • ABCompareView

T25c Generative · Canvas

  • InpaintCanvas
  • MaskBrush

T25d Generative · Sound and motion

  • AudioGenerationPlayer
  • VideoGenerationTimeline
  • TTSVoicePicker

T25e Generative · Models

  • ModelCard
  • ModelDownloadManager
  • ModelStatus
  • HardwareMonitor
  • FineTuneJobCard

T25f Generative · Data and prompts

  • DatasetViewer → tables::DataTable, with row detail
  • EmbeddingVisualizer — 2D, 3D projection
  • PromptPlayground
  • PromptDiff / PromptVersionHistory

T26a Media · Images — src/media

  • ImageViewer — zoom, pan, rotate, fit
  • ImageThumbnail
  • Lightbox / Gallery Viewer → overlays::Lightbox

T26b Media · Crop and annotate

  • ImageCropper — also T06e ImageUpload
  • ImageAnnotator

T26c Media · Video

  • VideoPlayer — host frames
  • VideoTimeline / Scrubber
  • VideoThumbnailStrip
  • SubtitleEditor

T26d Media · Audio and controls

  • AudioPlayer — host playback
  • AudioWaveform
  • AudioSpectrum / Visualizer
  • VolumeControl
  • PlaybackSpeedControl
  • MediaControls
  • Playlist

T26e Media · Capture and devices

  • ScreenRecorderControls
  • CameraPreview — host frames
  • MicLevelMeter
  • DeviceSelector
  • 3DModelViewer — host frames, orbit input

T27a Files · Items — src/files

  • FileIcon — one map from name to icon, in primitives
  • FileItem
  • FileList → lists::DirectoryListing
  • FileGrid

T27b Files · Explorer

  • FileExplorer — list, icons, columns
  • FileBreadcrumb / PathBar → navigation::Breadcrumb
  • FolderTree → lists::FileTree
  • FileContextMenu → menus::ContextMenu
  • RenameInline → forms::InlineEdit
  • DragDropFiles → forms::DropZone

T27c Files · Find and look

  • FilePreview / QuickLook
  • RecentFiles
  • Favorites / Bookmarks → documents::Favorites
  • FileSearch
  • DuplicateFinder
  • ArchiveViewer — host entries
  • HexViewer → debug::HexViewer

T27d Files · Transfers

  • FileOperationProgress
  • TransferQueue
  • DownloadManager
  • StorageUsage → data_display::UsageBar

T28a Messaging · Channels — src/messaging

  • ChannelList / ChatList
  • ChannelItem
  • DirectMessageItem
  • ChannelHeader
  • PinnedMessages

T28b Messaging · Messages

  • ChatMessage
  • MessageThread
  • ThreadPanel
  • UnreadDivider
  • MessageReactions → collab::Reactions
  • ReadReceipt
  • TypingIndicator → motion::TypingIndicator

T28c Messaging · People

  • MemberList
  • UserProfileCard
  • OnlineStatus
  • StatusSetter

T28d Messaging · Calls

  • CallControls
  • ParticipantTile
  • VideoCallGrid — host frames
  • ScreenShareView — host frames
  • VoiceCallBar
  • IncomingCallDialog
  • HuddleIndicator

T28e Messaging · Stickers and GIFs

  • StickerPicker
  • GifPicker — host images

T29a Mail · Boxes and lists — src/mail

  • MailboxList / FolderList
  • MailList
  • MailItem
  • InboxZeroState → feedback::EmptyState

T29b Mail · Reading

  • MailReader
  • MailThreadView
  • QuotedText

T29c Mail · Writing

  • MailComposer
  • RecipientInput → forms::TagInput, its suggestions and an address check
  • SignatureEditor
  • ScheduleSend

T29d Mail · Sorting

  • LabelPicker
  • SnoozePicker

T30a Calendar · Months — src/calendar

  • CalendarMonthView
  • YearView
  • MiniCalendar → forms::Calendar
  • EventCard / EventChip

T30b Calendar · Time grid

  • CalendarWeekView
  • CalendarDayView
  • TimeGrid — drag to create, resize
  • AllDayRow
  • CurrentTimeIndicator
  • TimezoneOverlay

T30c Calendar · Agenda and people

  • AgendaView
  • EventPopover
  • AttendeeList

T30d Calendar · Editing

  • EventEditor
  • RecurrenceEditor
  • ReminderPicker
  • AvailabilityPicker
Reference in new issue View Git Blame Copy Permalink