Comments Sidebar V2 — Structure

Canonical structure for the Velt Comments Sidebar V2 Wireframe. Order follows the provided JSX. Parent/child is defined ONLY by dot-path extensions. Direct children with no descendants are marked (Leaf).

Conventions

• React names use PascalCase under the VeltCommentsSidebarV2Wireframe namespace.
• Parent/child is determined only by the extension path (A.B → B is a child of A). Visual placement does not imply hierarchy.
• HTML names mirror React 1:1 in kebab-case.
• (Leaf) = component has no children in this wireframe.
• The highest parents will start with ’##’ as their header tag, their children will use one more ’#’ at each level.

---

React

VeltCommentsSidebarV2Wireframe

VeltCommentsSidebarV2Wireframe.Skeleton (Leaf)

---

VeltCommentsSidebarV2Wireframe.Panel

VeltCommentsSidebarV2Wireframe.Header

VeltCommentsSidebarV2Wireframe.CloseButton (Leaf)

VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown

• VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Trigger (Leaf)
• VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content
  • VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content.MarkAllRead (Leaf)
  • VeltCommentsSidebarV2Wireframe.MinimalActionsDropdown.Content.MarkAllResolved (Leaf)

VeltCommentsSidebarV2Wireframe.FilterDropdown

• VeltCommentsSidebarV2Wireframe.FilterDropdown.Trigger (Leaf)
• VeltCommentsSidebarV2Wireframe.FilterDropdown.Content
  • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List
    • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item
      • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Indicator (Leaf)
      • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Label (Leaf)
    • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category
      • VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Content (Leaf)

---

VeltCommentsSidebarV2Wireframe.List (Leaf)

---

VeltCommentsSidebarV2Wireframe.EmptyPlaceholder

• VeltCommentsSidebarV2Wireframe.EmptyPlaceholder.ResetFilterButton (Leaf)

---

VeltCommentsSidebarV2Wireframe.PageModeComposer (Leaf)

---

VeltCommentsSidebarV2Wireframe.FocusedThread

• VeltCommentsSidebarV2Wireframe.FocusedThread.BackButton (Leaf)
• VeltCommentsSidebarV2Wireframe.FocusedThread.DialogContainer (Leaf)

---

HTML (1:1 mirror)

velt-comments-sidebar-v2-wireframe

velt-comments-sidebar-skeleton-v2-wireframe (Leaf)

---

velt-comments-sidebar-panel-v2-wireframe

velt-comments-sidebar-header-v2-wireframe

• velt-comments-sidebar-close-button-v2-wireframe (Leaf)

velt-comments-sidebar-minimal-actions-dropdown-v2-wireframe

• velt-comments-sidebar-minimal-actions-dropdown-trigger-v2-wireframe (Leaf)
• velt-comments-sidebar-minimal-actions-dropdown-content-v2-wireframe
  • velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-v2-wireframe (Leaf)
  • velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-v2-wireframe (Leaf)

velt-comments-sidebar-filter-dropdown-v2-wireframe

• velt-comments-sidebar-filter-dropdown-trigger-v2-wireframe (Leaf)
• velt-comments-sidebar-filter-dropdown-content-v2-wireframe
  • velt-comments-sidebar-filter-dropdown-content-list-v2-wireframe
    • velt-comments-sidebar-filter-dropdown-content-list-item-v2-wireframe
      • velt-comments-sidebar-filter-dropdown-content-list-item-indicator-v2-wireframe (Leaf)
      • velt-comments-sidebar-filter-dropdown-content-list-item-label-v2-wireframe (Leaf)
    • velt-comments-sidebar-filter-dropdown-content-list-category-v2-wireframe
      • velt-comments-sidebar-filter-dropdown-content-list-category-content-v2-wireframe (Leaf)

---

velt-comments-sidebar-list-v2-wireframe (Leaf)

---

velt-comments-sidebar-empty-placeholder-v2-wireframe

• velt-comments-sidebar-reset-filter-button-v2-wireframe (Leaf)

---

velt-comments-sidebar-page-mode-composer-v2-wireframe (Leaf)

---

velt-comments-sidebar-focused-thread-v2-wireframe

• velt-comments-sidebar-focused-thread-back-button-v2-wireframe (Leaf)
• velt-comments-sidebar-focused-thread-dialog-container-v2-wireframe (Leaf)