ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity
Files
d76a489934eaa0b73baa8d6219539799fe42d185
Ely-GPUI-Components/tasks/ch21-30.md
T
ZacharyZhang-NY d76a489934 Files · Find and look: preview, recent files, search, duplicates and archives 
FilePreview shows a file large: its picture in the host's shape, the first
lines of its text, or its kind's icon, over its name, kind, size and
change; the gallery opens it on Space as a quick look. RecentFiles lists
files newest first under a header a day, a list a day. FileSearch sits
over a field the host owns and lists what the host found with its folder.
DuplicateFinder marks copies to remove and keeps the last of each group,
its mark shut, with the bytes the marks free beside Remove. ArchiveViewer
draws an archive's entries as a tree with sizes and savings, from paths
gathered by the folder builder the file tree now shares. A checkbox's
label wraps inside its box instead of running past it. Favorites and the
hex viewer point to documents and debug.
2026-09-26 20:42:06 -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

T28 Messaging — src/messaging

  • ChannelList / ChatList
  • ChannelItem
  • DirectMessageItem
  • MessageThread
  • ThreadPanel
  • ChatMessage
  • UnreadDivider
  • MessageReactions → collab::Reactions
  • ReadReceipt
  • TypingIndicator → motion::TypingIndicator
  • MemberList
  • UserProfileCard
  • OnlineStatus
  • StatusSetter
  • VoiceCallBar
  • VideoCallGrid — host frames
  • ScreenShareView — host frames
  • CallControls
  • ParticipantTile
  • IncomingCallDialog
  • StickerPicker
  • GifPicker — host images
  • PinnedMessages
  • ChannelHeader
  • HuddleIndicator

T29 Mail — src/mail

  • MailboxList / FolderList
  • MailList
  • MailItem
  • MailReader
  • MailComposer
  • RecipientInput
  • MailThreadView
  • QuotedText
  • SignatureEditor
  • LabelPicker
  • SnoozePicker
  • ScheduleSend
  • InboxZeroState

T30 Calendar — src/calendar

  • CalendarMonthView
  • CalendarWeekView
  • CalendarDayView
  • AgendaView
  • YearView
  • MiniCalendar → forms::Calendar
  • EventCard / EventChip
  • EventEditor
  • EventPopover
  • TimeGrid — drag to create, resize
  • AllDayRow
  • CurrentTimeIndicator
  • RecurrenceEditor
  • AvailabilityPicker
  • TimezoneOverlay
  • ReminderPicker
  • AttendeeList
Reference in new issue View Git Blame Copy Permalink