> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Comment Sidebar Wireframe Variables

> Template variables exposed by the Comment Sidebar wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

<Note>
  New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview.
</Note>

## Overview

The **Comment Sidebar** is the panel that lists all annotations in a document — with filters, search, focused-thread view, and a page-mode composer. Variables below are available inside any `<velt-comments-sidebar-...-wireframe>` or `<velt-comment-sidebar-...-wireframe>` tag (both prefixes are used) via three forms:

| You want to…              | Use                         | Example                                                                    |
| ------------------------- | --------------------------- | -------------------------------------------------------------------------- |
| Display a value as text   | `<velt-data field="var" />` | `<velt-data field="focusedAnnotation.from.name" />`                        |
| Hide / show conditionally | `velt-if="{var}"`           | `velt-if="{componentConfig.skeletonLoading}"`                              |
| Toggle a CSS class        | `velt-class="'cls': {var}"` | `velt-class="'filter-{selectedMinimalFilterDropdownOption.filter}': true"` |

<Note>
  **Hybrid access pattern.** Unlike Comment Dialog, the sidebar uses a **flat `componentConfig`** model — every property lives directly on the root rather than nested under `appState` / `data` / `uiState` / `featureState`. A small set of sidebar-specific names **are** mapped — those are listed under [Mapped Variables](#mapped-variables) and resolve via bare names. For everything else, write `{componentConfig.<name>}` and the resolver will reach it via the flat fallback.
</Note>

## Mapped Variables

These entries resolve only inside sidebar wireframes — their data is set by the sidebar's `componentConfigSignal`.

| Variable                              | Type                                                                           | Sample Value                                                                                                | Description                                                                                                                                            | Example                                                                    |
| ------------------------------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
| `focusedAnnotation`                   | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | `{ annotationId: "ann-42", from: { name: "Mayank" }, comments: [{ commentText: "Looks good", ... }], ... }` | The currently-focused annotation in focused-thread view. Supports deep paths (`{focusedAnnotation.from.name}`, `{focusedAnnotation.comments.length}`). | `<velt-data field="focusedAnnotation.from.name" />`                        |
| `selectedMinimalFilterDropdownOption` | `{ filter: string; sort: string }`                                             | `{ filter: "all", sort: "date" }`                                                                           | Currently-selected option in the minimal filter dropdown.                                                                                              | `velt-class="'filter-{selectedMinimalFilterDropdownOption.filter}': true"` |
| `appliedFiltersCount`                 | `number`                                                                       | `2`                                                                                                         | Number of filters currently applied — drives the badge on the filter button.                                                                           | `<velt-data field="appliedFiltersCount" />`                                |
| `filteredCommentAnnotationsCount`     | `number`                                                                       | `12`                                                                                                        | Count of annotations after filtering.                                                                                                                  | `<velt-data field="filteredCommentAnnotationsCount" />`                    |
| `unreadCommentAnnotationCount`        | `number`                                                                       | `3`                                                                                                         | Count of unread annotations on the current document. Also exposed inside Comment Dialog.                                                               | `<velt-data field="unreadCommentAnnotationCount" />`                       |

### Inherited Mapped Variables

The sidebar shares these standard mapped entries with every other Comments feature. For full definitions see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables):

* App state: `user`, `isUserAdmin`, `isKnownUser`.
* Per-instance UI: `darkMode`, `variant`.
* Comment data: `annotation`, `annotations`, `allAnnotations`, `commentAnnotation`, `commentAnnotations`.

Inside a sidebar wireframe that nests a comment-dialog wireframe (e.g. focused-thread mode), all of the [Comment Dialog variables](../comment-dialog/wireframe-variables) become available.

## Component Config

Many sidebar properties are not in the wireframe map. Reach them via `{componentConfig.<name>}`. Grouped by area for readability — the underlying shape is flat.

**Layout / mode** — which rendering mode the sidebar is in.

| Variable                          | Type               | Description                                 | Example                                                       |
| --------------------------------- | ------------------ | ------------------------------------------- | ------------------------------------------------------------- |
| `componentConfig.darkMode`        | `boolean`          | Per-sidebar dark-mode flag.                 | `velt-class="'dark': {componentConfig.darkMode}"`             |
| `componentConfig.variant`         | `string`           | Wireframe variant id (default `'sidebar'`). | `<velt-data field="componentConfig.variant" />`               |
| `componentConfig.fullScreen`      | `boolean`          | Sidebar is rendered full-screen.            | `velt-class="'fullscreen': {componentConfig.fullScreen}"`     |
| `componentConfig.embedMode`       | `string` \| `null` | Embedded vs floating vs default layout.     | `velt-class="'embed-{componentConfig.embedMode}': true"`      |
| `componentConfig.floatingMode`    | `boolean`          | Floating overlay layout is active.          | `velt-class="'floating': {componentConfig.floatingMode}"`     |
| `componentConfig.pageMode`        | `boolean`          | Page-mode layout is active.                 | `velt-class="'page-mode': {componentConfig.pageMode}"`        |
| `componentConfig.readOnly`        | `boolean`          | Read-only mode is active.                   | `velt-class="'readonly': {componentConfig.readOnly}"`         |
| `componentConfig.sidebarVisible`  | `boolean`          | Master visibility toggle.                   | `velt-if="{componentConfig.sidebarVisible}"`                  |
| `componentConfig.sidebarReadMode` | `boolean`          | Read-mode flag.                             | `velt-class="'read-mode': {componentConfig.sidebarReadMode}"` |
| `componentConfig.fullExpanded`    | `boolean`          | Sidebar is fully expanded.                  | `velt-class="'expanded': {componentConfig.fullExpanded}"`     |

**Loading / empty state.**

| Variable                                           | Type      | Description                                       | Example                                                        |
| -------------------------------------------------- | --------- | ------------------------------------------------- | -------------------------------------------------------------- |
| `componentConfig.skeletonLoading`                  | `boolean` | Skeleton loader is active while annotations load. | `velt-if="{componentConfig.skeletonLoading}"`                  |
| `componentConfig.noCommentsFound`                  | `boolean` | No annotations exist in scope.                    | `velt-if="{componentConfig.noCommentsFound}"`                  |
| `componentConfig.noCommentsFoundForAppliedFilters` | `boolean` | Filters reduced the list to zero.                 | `velt-if="{componentConfig.noCommentsFoundForAppliedFilters}"` |

**Filter state.**

| Variable                                | Type                                                                                             | Description                                            | Example                                                             |
| --------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | ------------------------------------------------------------------- |
| `componentConfig.moreFiltersVisible`    | `boolean`                                                                                        | Expanded filter panel is open.                         | `velt-class="'filters-open': {componentConfig.moreFiltersVisible}"` |
| `componentConfig.filterConfig`          | [`CommentSidebarFilterConfig`](/api-reference/sdk/models/data-models#commentsidebarfilterconfig) | Filter-panel configuration (`layout`, ordering, etc.). | `<velt-data field="componentConfig.filterConfig.layout" />`         |
| `componentConfig.filters`               | `Record<string, any[]>`                                                                          | Currently-selected filter values per category.         | `<velt-data field="componentConfig.filters.statuses.length" />`     |
| `componentConfig.systemFiltersOperator` | `'AND'` \| `'OR'`                                                                                | How multiple filter categories compose.                | `velt-class="'op-{componentConfig.systemFiltersOperator}': true"`   |

**List data.**

| Variable                                           | Type                                     | Description                                            | Example                                                                              |
| -------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------ |
| `componentConfig.virtualScrollData`                | `{ type: string; data: any }[]`          | Virtual-scroll items (annotations + section dividers). | `<velt-data field="componentConfig.virtualScrollData.length" />`                     |
| `componentConfig.commentAnnotationsCountByFilters` | `Record<string, Record<string, number>>` | Per-filter-category-and-id annotation count.           | `<velt-data field="componentConfig.commentAnnotationsCountByFilters.status.OPEN" />` |

**Callbacks.**

| Variable                            | Type       | Description                                            | Example                                     |
| ----------------------------------- | ---------- | ------------------------------------------------------ | ------------------------------------------- |
| `componentConfig.openMoreFilters`   | `Function` | Open the more-filters panel. Wire to a custom trigger. | *Call this from your custom click handler.* |
| `componentConfig.toggleMoreFilters` | `Function` | Toggle the more-filters panel.                         | *Call this from your custom click handler.* |

## Common Props

The root `<velt-comments-sidebar>` element accepts a wide set of attributes; the most useful for wireframe authors:

| React Prop                   | HTML Attribute                  | Type                | Default     | Description                                          |
| ---------------------------- | ------------------------------- | ------------------- | ----------- | ---------------------------------------------------- |
| `fullScreen`                 | `full-screen`                   | `boolean`           | `false`     | Full-screen layout.                                  |
| `embedMode`                  | `embed-mode`                    | `string`            | `null`      | Embedded layout id (e.g. `'figma'`).                 |
| `floatingMode`               | `floating-mode`                 | `boolean`           | `false`     | Floating-overlay layout.                             |
| `pageMode`                   | `page-mode`                     | `boolean`           | `false`     | Page-mode layout (includes top-level composer).      |
| `darkMode`                   | `dark-mode`                     | `boolean`           | `false`     | Force dark mode.                                     |
| `readOnly`                   | `read-only`                     | `boolean`           | `false`     | Read-only mode.                                      |
| `variant`                    | `variant`                       | `string`            | `'sidebar'` | Wireframe variant id.                                |
| `dialogVariant`              | `dialog-variant`                | `string`            | —           | Variant forwarded to nested comment-dialogs.         |
| `focusedThreadDialogVariant` | `focused-thread-dialog-variant` | `string`            | —           | Variant for the focused-thread dialog.               |
| `pageModeComposerVariant`    | `page-mode-composer-variant`    | `string`            | —           | Variant for the page-mode composer.                  |
| `sortBy`                     | `sort-by`                       | `string`            | —           | Sort field.                                          |
| `sortOrder`                  | `sort-order`                    | `'asc'` \| `'desc'` | —           | Sort direction.                                      |
| `currentLocationSuffix`      | `current-location-suffix`       | `string`            | —           | Per-location suffix used in location-scoped filters. |
| `systemFiltersOperator`      | `system-filters-operator`       | `'AND'` \| `'OR'`   | `'AND'`     | How filter categories compose.                       |
| `selection`                  | `selection`                     | `string`            | —           | Selection behavior mode.                             |
| `expandOnSelection`          | `expand-on-selection`           | `boolean`           | —           | Auto-expand sidebar on annotation selection.         |
| `sortData`                   | `sort-data`                     | `string`            | —           | Sort data source.                                    |
| `queryParamsComments`        | `query-params-comments`         | `boolean`           | —           | Use URL query params for comment navigation.         |

Signal inputs (for parent-child component composition):

* `[componentConfigSignal]` — shared per-sidebar config signal.

Every primitive accepts `default-condition` to bypass `shouldShow` for previews.

## Context-Specific Variables

These are only resolvable inside the nested wireframe tags noted in the **Available in** column. Each is injected by the iteration / focused-thread primitive that owns the tag.

| Variable            | Type                                                                           | Available in                                                                                         | Example                                             |
| ------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
| `focusedAnnotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | `<velt-comments-sidebar-focused-thread-wireframe>` and descendants                                   | `<velt-data field="focusedAnnotation.from.name" />` |
| `sidebarRef`        | `HTMLElement`                                                                  | Focused-thread context — DOM reference to the sidebar overlay (used by inner overlay positioning).   | *Internal — not normally read in user wireframes.*  |
| `filter`            | `{ name: string }`                                                             | Per-filter-category tags — `<velt-comments-sidebar-filter-name-wireframe>` and friends.              | `<velt-data field="filter.name" />`                 |
| `item`              | `{ name: string; count: number; selected: boolean }`                           | Per-option-row tags — filter-item children, status / location / document dropdown content-items.     | `<velt-data field="item.name" />`                   |
| `group`             | `{ name: string; count: number; expanded: boolean }`                           | `<velt-comments-sidebar-list-item-group-wireframe>` and children                                     | `velt-class="'expanded': {group.expanded}"`         |
| `tag`               | `{ name: string }`                                                             | Filter-search-tag children — `<velt-comments-sidebar-filter-search-tags-item-wireframe>` and friends | `<velt-data field="tag.name" />`                    |

## Type Reference

Types referenced by the variables above are documented in [Data Models](/api-reference/sdk/models/data-models):

| Type                                                                                             | Description                                            |
| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
| [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation)                   | The annotation thread (id, status, comments, etc.).    |
| [`User`](/api-reference/sdk/models/data-models#user)                                             | Identified end-user object.                            |
| [`CommentSidebarFilterConfig`](/api-reference/sdk/models/data-models#commentsidebarfilterconfig) | Filter-panel configuration (`layout`, ordering, etc.). |

## Subcomponents

Each subcomponent below has its own wireframe tag. For per-subcomponent CSS classes, see [Styling](/ui-customization/styling); for per-subcomponent props, see the existing [Comment Sidebar Components](./comment-sidebar-components).

### `comments-sidebar` (root)

The root primitive — the `<velt-comments-sidebar>` element customers place in their app.

* **Public element:** `<velt-comments-sidebar>`
* **Wireframe tag:** `<velt-comments-sidebar-wireframe>`

| Property        | Value                                   |   |                              |   |                                                                                                                |
| --------------- | --------------------------------------- | - | ---------------------------- | - | -------------------------------------------------------------------------------------------------------------- |
| Extra variables | None — root only sees common variables. |   |                              |   |                                                                                                                |
| `shouldShow`    | \`componentConfig.isFirstComponent      |   | componentConfig.floatingMode |   | componentConfig.embedMode`. The floating-mode overlay additionally requires `componentConfig.sidebarVisible\`. |

| Class                                       | Applied when                        |
| ------------------------------------------- | ----------------------------------- |
| `velt-comments-sidebar-container`           | Always on the host wrapper.         |
| `dark`                                      | `componentConfig.darkMode` is true. |
| `snippyly-sidebar-panel velt-overlay-panel` | On the floating overlay container.  |

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
      <VeltCommentsSidebarWireframe>
        <VeltCommentsSidebarWireframe.Header>
          <div className="my-sidebar__title">
            <strong>Comments</strong>
            <VeltCommentsSidebarWireframe.FilterButton />
            <VeltCommentsSidebarWireframe.FullscreenButton />
            <VeltCommentsSidebarWireframe.CloseButton />
          </div>
        </VeltCommentsSidebarWireframe.Header>
        <VeltCommentsSidebarWireframe.List />
        <VeltCommentsSidebarWireframe.EmptyPlaceholder veltIf="{componentConfig.noCommentsFound}">
          <p>No comments yet.</p>
        </VeltCommentsSidebarWireframe.EmptyPlaceholder>
        <VeltCommentsSidebarWireframe.PageModeComposer />
      </VeltCommentsSidebarWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe>
      <velt-comments-sidebar-wireframe>
        <velt-comments-sidebar-header-wireframe>
          <div class="my-sidebar__title">
            <strong>Comments</strong>
            <velt-comments-sidebar-filter-button-wireframe></velt-comments-sidebar-filter-button-wireframe>
            <velt-comments-sidebar-fullscreen-button-wireframe></velt-comments-sidebar-fullscreen-button-wireframe>
            <velt-comments-sidebar-close-button-wireframe></velt-comments-sidebar-close-button-wireframe>
          </div>
        </velt-comments-sidebar-header-wireframe>
        <velt-comments-sidebar-list-wireframe></velt-comments-sidebar-list-wireframe>
        <velt-comments-sidebar-empty-placeholder-wireframe velt-if="{componentConfig.noCommentsFound}">
          <p>No comments yet.</p>
        </velt-comments-sidebar-empty-placeholder-wireframe>
        <velt-comments-sidebar-page-mode-composer-wireframe></velt-comments-sidebar-page-mode-composer-wireframe>
      </velt-comments-sidebar-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

***

### `comments-sidebar-wrapper`

Wrapper element that hosts the actual sidebar content + scroll container. Always rendered when the sidebar is visible.

* **Public element:** `<velt-comments-sidebar-wrapper>`
* **Wireframe tag:** Registered via the wrapper's own template; exposes `componentConfigSignal` and `[darkMode]`.

| Property        | Value                         |
| --------------- | ----------------------------- |
| Extra variables | None beyond common variables. |

***

### `comment-sidebar-header`

Top of the sidebar — title row with the action buttons (filter, fullscreen, close, search…).

* **Public element:** `<velt-comment-sidebar-header>`
* **Wireframe tag:** `<velt-comment-sidebar-header-wireframe>`

| Property        | Value                         |
| --------------- | ----------------------------- |
| Extra variables | None beyond common variables. |

***

### `comment-sidebar-filter-button`

Filter icon button. Click opens the more-filters panel. An alternate badge SVG renders when `appliedFiltersCount > 0`.

* **Public element:** `<velt-comment-sidebar-filter-button>`
* **Wireframe tag:** `<velt-comments-sidebar-filter-button-wireframe>`

| Property        | Value                                                                                                                                        |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| Extra variables | None.                                                                                                                                        |
| Host classes    | `velt-sidebar-header--filter-button` (always); `velt-comments-sidebar-filter-button-open` when `componentConfig.moreFiltersVisible` is true. |

***

### `comment-sidebar-close-button` / `comment-sidebar-fullscreen-button`

Close / fullscreen toggle buttons in the header.

* **Wireframe tags:** `<velt-comment-sidebar-close-button-wireframe>`, `<velt-comment-sidebar-fullscreen-button-wireframe>`

| Property        | Value |
| --------------- | ----- |
| Extra variables | None. |

***

### `comment-sidebar-search`

Search input row.

* **Public element:** `<velt-comment-sidebar-search>`
* **Wireframe tag:** `<velt-comment-sidebar-search-wireframe>`

| Property        | Value |
| --------------- | ----- |
| Extra variables | None. |

***

### `comment-sidebar-filter`

The expanded filter panel — opens when the filter button is clicked. Contains many child filter primitives (status / priority / people / pages / documents / accessMode / commentCategory / version), each with its own `<velt-comment-sidebar-filter-<name>-wireframe>`.

* **Public element:** `<velt-comment-sidebar-filter>`
* **Wireframe tag:** `<velt-comment-sidebar-filter-wireframe>`

| Property        | Value                                                                                                                                   |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Extra variables | Per-iteration `filter` (category metadata) and `item` (per-option row) — see [Context-Specific Variables](#context-specific-variables). |

***

### `comment-sidebar-minimal-filter-dropdown`

The compact filter + sort dropdown shown in the minimal layout (when `filterConfig.layout === 'minimal'`). Composes a trigger + content; each has its own wireframe tag.

* **Wireframe tag:** `<velt-comments-sidebar-minimal-filter-dropdown-wireframe>`

| Variable                                     | Type     | Example                                                                    |
| -------------------------------------------- | -------- | -------------------------------------------------------------------------- |
| `selectedMinimalFilterDropdownOption.filter` | `string` | `velt-class="'filter-{selectedMinimalFilterDropdownOption.filter}': true"` |
| `selectedMinimalFilterDropdownOption.sort`   | `string` | `<velt-data field="selectedMinimalFilterDropdownOption.sort" />`           |

***

### `comment-sidebar-minimal-actions-dropdown`

The "⋯" actions dropdown next to the minimal filter (mark all read, etc.).

* **Wireframe tag:** `<velt-comments-sidebar-minimal-actions-dropdown-wireframe>`

| Property        | Value |
| --------------- | ----- |
| Extra variables | None. |

***

### `comment-sidebar-status`

Status filter dropdown (one of the per-category filter dropdowns; lives inside the filter panel). A standalone selector is also available as `<velt-comment-sidebar-status>`.

* **Public element:** `<velt-comment-sidebar-status>`
* **Wireframe tag:** `<velt-comment-sidebar-status-wireframe>`

| Property        | Value                                                                                                        |
| --------------- | ------------------------------------------------------------------------------------------------------------ |
| Extra variables | Per-iteration `item` for each status option — see [Context-Specific Variables](#context-specific-variables). |

***

### `comment-sidebar-list`

The annotations list. Iterates `componentConfig.virtualScrollData` and renders a comment-dialog primitive (in sidebar mode) per annotation entry.

* **Public element:** `<velt-comment-sidebar-list>`
* **Wireframe tag:** `<velt-comment-sidebar-list-wireframe>`

| Property        | Value                                                                                                                                                                                                                                         |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Extra variables | None at the list level. Nested comment-dialog wireframes (e.g. `<velt-comment-dialog-thread-card-wireframe>`) resolve in the standard Comment Dialog scope — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables). |

***

### `comment-sidebar-empty-placeholder`

Empty-state shown when the document has no annotations or the active filters reduce to zero.

* **Public element:** `<velt-comment-sidebar-empty-placeholder>`
* **Wireframe tag:** `<velt-comments-sidebar-empty-placeholder-wireframe>`

| Property        | Value                             |   |                                                    |
| --------------- | --------------------------------- | - | -------------------------------------------------- |
| Extra variables | None.                             |   |                                                    |
| `shouldShow`    | \`componentConfig.noCommentsFound |   | componentConfig.noCommentsFoundForAppliedFilters\` |

| Class                                         | Applied when           |
| --------------------------------------------- | ---------------------- |
| `velt-sidebar--no-comments-container`         | Always on the wrapper. |
| `velt-sidebar--no-comments-block`             | Inner block.           |
| `velt-sidebar--no-comments-message-container` | Message wrapper.       |
| `velt-sidebar--no-comments-message-header`    | Heading.               |

***

### `comment-sidebar-skeleton`

Skeleton loader shown while annotations are being fetched.

* **Public element:** `<velt-comment-sidebar-skeleton>`
* **Wireframe tag:** `<velt-comment-sidebar-skeleton-wireframe>`

| Property        | Value                                      |
| --------------- | ------------------------------------------ |
| Extra variables | None.                                      |
| `shouldShow`    | `componentConfig.skeletonLoading === true` |

***

### `comment-sidebar-focused-thread`

Focused-thread view — a single annotation taken full-width inside the sidebar with a back button. **This is where `focusedAnnotation` becomes resolvable.**

* **Public element:** `<velt-comment-sidebar-focused-thread>`
* **Wireframe tag:** `<velt-comments-sidebar-focused-thread-wireframe>`

| Variable            | Type                                                                           | Example                                             |
| ------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------- |
| `focusedAnnotation` | [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) | `<velt-data field="focusedAnnotation.from.name" />` |
| `sidebarRef`        | `HTMLElement`                                                                  | *Internal — DOM reference for overlay positioning.* |

| Property     | Value                                                                           |
| ------------ | ------------------------------------------------------------------------------- |
| `shouldShow` | `!componentConfig.skeletonLoading && componentConfig.focusedAnnotation` is set. |

| Class                                 | Applied when           |
| ------------------------------------- | ---------------------- |
| `velt-comment-sidebar-focused-thread` | Always on the wrapper. |

The focused-thread renders its own back-button + a comment-dialog (in `dialogVariant='sidebar'` and `focusedThreadDialogVariant='sidebar'` modes). Inside the inner comment-dialog wireframes the standard Comment Dialog variables resolve — see [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables).

***

### `comment-sidebar-page-mode-composer`

The page-level "Add comment" composer at the top of the sidebar when `componentConfig.pageMode` is enabled.

* **Public element:** `<velt-comment-sidebar-page-mode-composer>`
* **Wireframe tag:** `<velt-comment-sidebar-page-mode-composer-wireframe>`

| Property        | Value                                                                                                                                             |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Extra variables | Delegates to the standard Comment Dialog composer — see [Comment Dialog Composer](../comment-dialog/wireframe-variables#comment-dialog-composer). |

***

### `comment-sidebar-action-button` / `comment-sidebar-reset-filter-button`

Generic action-button / reset-filter-button primitives used inside the empty placeholder and other positions.

* **Wireframe tags:** `<velt-comment-sidebar-action-button-wireframe>`, `<velt-comment-sidebar-reset-filter-button-wireframe>`

| Property        | Value |
| --------------- | ----- |
| Extra variables | None. |

***

### `comment-sidebar-location-filter-dropdown` / `-document-filter-dropdown` / `-status-dropdown`

Standalone filter dropdowns customers can place anywhere in their UI (independent of the main filter panel). Each has its own trigger + content + content-item structure.

* **Wireframe tags:** `<velt-comment-sidebar-location-filter-dropdown-wireframe>`, `<velt-comments-sidebar-document-filter-dropdown-wireframe>`, `<velt-comments-sidebar-status-dropdown-wireframe>`

| Property        | Value                                                                                                 |
| --------------- | ----------------------------------------------------------------------------------------------------- |
| Extra variables | Per-iteration `item` for each option — see [Context-Specific Variables](#context-specific-variables). |

## Deeply-Nested Wireframe Tags

The sidebar has the largest set of overridable surfaces in the SDK. Tags are grouped by area below — every tag is registered and customers can override any individual surface.

### Top-level sidebar tags

| Tag                                                                 | Notes                                                       | Example                                                   |
| ------------------------------------------------------------------- | ----------------------------------------------------------- | --------------------------------------------------------- |
| `<velt-comments-sidebar-panel-wireframe>`                           | The visible panel container.                                | `velt-class="'embed': {componentConfig.embedMode}"`       |
| `<velt-comments-sidebar-header-wireframe>`                          | Sidebar header bar.                                         | (composes header children)                                |
| `<velt-comments-sidebar-toggle-button-wireframe>`                   | Open / close toggle button.                                 | (click handler)                                           |
| `<velt-comments-sidebar-close-button-wireframe>`                    | Close button.                                               | (click handler closes the sidebar)                        |
| `<velt-comments-sidebar-fullscreen-button-wireframe>`               | Fullscreen toggle.                                          | `velt-class="'fullscreen': {componentConfig.fullScreen}"` |
| `<velt-comments-sidebar-search-wireframe>`                          | Search input row.                                           | `<velt-data field="componentConfig.searchQuery" />`       |
| `<velt-comments-sidebar-list-wireframe>`                            | The annotations list.                                       | (composes list-item rows)                                 |
| `<velt-comments-sidebar-list-item-wireframe>`                       | Per-annotation row.                                         | `velt-class="'is-selected': {annotation.selected}"`       |
| `<velt-comments-sidebar-list-item-dialog-container-wireframe>`      | Container for the inline comment-dialog inside a list item. | (composes the nested dialog)                              |
| `<velt-comments-sidebar-list-item-group-wireframe>`                 | Section divider for grouped lists.                          | `velt-class="'expanded': {group.expanded}"`               |
| `<velt-comments-sidebar-list-item-group-name-wireframe>`            | Group name label.                                           | `<velt-data field="group.name" />`                        |
| `<velt-comments-sidebar-list-item-group-count-wireframe>`           | Group count badge.                                          | `<velt-data field="group.count" />`                       |
| `<velt-comments-sidebar-list-item-group-arrow-wireframe>`           | Expand / collapse chevron.                                  | `velt-class="'open': {group.expanded}"`                   |
| `<velt-comments-sidebar-skeleton-wireframe>`                        | Skeleton loader.                                            | `velt-if="{componentConfig.skeletonLoading}"`             |
| `<velt-comments-sidebar-page-mode-wireframe>`                       | Page-mode wrapper variant.                                  | `velt-if="{componentConfig.pageMode}"`                    |
| `<velt-comments-sidebar-reset-filter-button-wireframe>`             | Reset-filters button (used in empty placeholder).           | `velt-if="{componentConfig.appliedFiltersCount} > 0"`     |
| `<velt-comments-sidebar-focused-thread-dialog-container-wireframe>` | Container for the focused-thread comment-dialog.            | (composes the nested dialog)                              |

### Filter panel tags

The expanded filter panel composes a title + close + many per-category sub-panels + done / reset buttons + per-item primitives.

| Tag                                                     | Notes                                                  | Example                                                     |
| ------------------------------------------------------- | ------------------------------------------------------ | ----------------------------------------------------------- |
| `<velt-comments-sidebar-filter-wireframe>`              | The expanded filter panel root.                        | `velt-class="'open': {componentConfig.moreFiltersVisible}"` |
| `<velt-comments-sidebar-filter-title-wireframe>`        | Panel title.                                           | (static label)                                              |
| `<velt-comments-sidebar-filter-close-button-wireframe>` | Close button.                                          | (click handler)                                             |
| `<velt-comments-sidebar-filter-done-button-wireframe>`  | "Done" button to apply changes.                        | (click handler)                                             |
| `<velt-comments-sidebar-filter-reset-button-wireframe>` | Reset-all button.                                      | `velt-if="{componentConfig.appliedFiltersCount} > 0"`       |
| `<velt-comments-sidebar-filter-view-all-wireframe>`     | "View all" expander for a category with many options.  | (click handler)                                             |
| `<velt-comments-sidebar-filter-name-wireframe>`         | Filter category name label.                            | `<velt-data field="filter.name" />`                         |
| `<velt-comments-sidebar-filter-status-wireframe>`       | Status filter category.                                | (composes per-status rows)                                  |
| `<velt-comments-sidebar-filter-priority-wireframe>`     | Priority filter category.                              | (composes per-priority rows)                                |
| `<velt-comments-sidebar-filter-people-wireframe>`       | People filter category.                                | (composes per-user rows)                                    |
| `<velt-comments-sidebar-filter-assigned-wireframe>`     | Assigned-to filter category.                           | (composes per-user rows)                                    |
| `<velt-comments-sidebar-filter-tagged-wireframe>`       | Tagged-with filter category.                           | (composes per-user rows)                                    |
| `<velt-comments-sidebar-filter-involved-wireframe>`     | Involved-in filter category.                           | (composes per-user rows)                                    |
| `<velt-comments-sidebar-filter-document-wireframe>`     | Document filter category.                              | (composes per-document rows)                                |
| `<velt-comments-sidebar-filter-location-wireframe>`     | Location filter category.                              | (composes per-location rows)                                |
| `<velt-comments-sidebar-filter-versions-wireframe>`     | Version filter category.                               | (composes per-version rows)                                 |
| `<velt-comments-sidebar-filter-comment-type-wireframe>` | Comment-type filter category.                          | (composes per-type rows)                                    |
| `<velt-comments-sidebar-filter-category-wireframe>`     | Comment-category filter.                               | (composes per-category rows)                                |
| `<velt-comments-sidebar-filter-custom-wireframe>`       | Custom filter category (for customer-defined filters). | (composes per-option rows)                                  |
| `<velt-comments-sidebar-filter-group-by-wireframe>`     | Group-by selector.                                     | (composes per-group rows)                                   |

### Filter-item tags

Inside each filter category, each individual option is rendered as a `filter-item`.

| Tag                                                                | Notes                              | Example                                    |
| ------------------------------------------------------------------ | ---------------------------------- | ------------------------------------------ |
| `<velt-comments-sidebar-filter-item-wireframe>`                    | Per-option row.                    | `velt-class="'selected': {item.selected}"` |
| `<velt-comments-sidebar-filter-item-name-wireframe>`               | Option name.                       | `<velt-data field="item.name" />`          |
| `<velt-comments-sidebar-filter-item-count-wireframe>`              | Option's annotation-count badge.   | `<velt-data field="item.count" />`         |
| `<velt-comments-sidebar-filter-item-checkbox-wireframe>`           | Checkbox wrapper.                  | (composes the two variants below)          |
| `<velt-comments-sidebar-filter-item-checkbox-checked-wireframe>`   | Checkbox icon (checked variant).   | `velt-if="{item.selected}"`                |
| `<velt-comments-sidebar-filter-item-checkbox-unchecked-wireframe>` | Checkbox icon (unchecked variant). | `velt-if="!{item.selected}"`               |

### Filter-search tags

| Tag                                                               | Notes                                         | Example                                                           |
| ----------------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------- |
| `<velt-comments-sidebar-filter-search-wireframe>`                 | Search input wrapper inside the filter panel. | (composes input + tags)                                           |
| `<velt-comments-sidebar-filter-search-input-wireframe>`           | The actual input.                             | (input handler)                                                   |
| `<velt-comments-sidebar-filter-search-dropdown-icon-wireframe>`   | Dropdown chevron icon.                        | *Visual only.*                                                    |
| `<velt-comments-sidebar-filter-search-tags-wireframe>`            | Selected-tag pills container.                 | `<velt-data field="componentConfig.selectedFilterTags.length" />` |
| `<velt-comments-sidebar-filter-search-tags-item-wireframe>`       | A single selected-tag pill.                   | `<velt-data field="tag.name" />`                                  |
| `<velt-comments-sidebar-filter-search-tags-item-name-wireframe>`  | Tag name.                                     | `<velt-data field="tag.name" />`                                  |
| `<velt-comments-sidebar-filter-search-tags-item-close-wireframe>` | Tag remove (×) button.                        | (click handler)                                                   |
| `<velt-comments-sidebar-filter-search-hidden-count-wireframe>`    | "+N more" badge when tags overflow.           | `<velt-data field="hiddenCount" />`                               |

### Standalone status / location / document dropdown tags

Customers can place these dropdowns outside the main filter panel.

| Tag                                                                                 | Notes                             | Example                                    |
| ----------------------------------------------------------------------------------- | --------------------------------- | ------------------------------------------ |
| `<velt-comments-sidebar-status-wireframe>`                                          | Standalone status-filter root.    | (composes trigger + content)               |
| `<velt-comments-sidebar-status-dropdown-trigger-wireframe>`                         | Trigger pill.                     | (click handler)                            |
| `<velt-comments-sidebar-status-dropdown-trigger-name-wireframe>`                    | Label inside trigger.             | `<velt-data field="item.name" />`          |
| `<velt-comments-sidebar-status-dropdown-trigger-arrow-wireframe>`                   | Trigger chevron.                  | *Visual only.*                             |
| `<velt-comments-sidebar-status-dropdown-trigger-indicator-wireframe>`               | Selected-count indicator dot.     | `velt-if="{appliedFiltersCount} > 0"`      |
| `<velt-comments-sidebar-status-dropdown-content-wireframe>`                         | Open menu wrapper.                | (composes content rows)                    |
| `<velt-comments-sidebar-status-dropdown-content-item-wireframe>`                    | Per-status row.                   | `velt-class="'selected': {item.selected}"` |
| `<velt-comments-sidebar-status-dropdown-content-item-name-wireframe>`               | Status name.                      | `<velt-data field="item.name" />`          |
| `<velt-comments-sidebar-status-dropdown-content-item-icon-wireframe>`               | Status icon.                      | `<velt-data field="item.icon" />`          |
| `<velt-comments-sidebar-status-dropdown-content-item-count-wireframe>`              | Status count badge.               | `<velt-data field="item.count" />`         |
| `<velt-comments-sidebar-status-dropdown-content-item-checkbox-wireframe>`           | Checkbox.                         | (composes the two variants below)          |
| `<velt-comments-sidebar-status-dropdown-content-item-checkbox-checked-wireframe>`   | Checked variant.                  | `velt-if="{item.selected}"`                |
| `<velt-comments-sidebar-status-dropdown-content-item-checkbox-unchecked-wireframe>` | Unchecked variant.                | `velt-if="!{item.selected}"`               |
| `<velt-comments-sidebar-document-filter-dropdown-trigger-wireframe>`                | Document-filter dropdown trigger. | (click handler)                            |
| `<velt-comments-sidebar-document-filter-dropdown-trigger-label-wireframe>`          | Trigger label.                    | `<velt-data field="item.name" />`          |
| `<velt-comments-sidebar-document-filter-dropdown-content-wireframe>`                | Document-filter open menu.        | (composes content rows)                    |
| `<velt-comments-sidebar-location-filter-dropdown-wireframe>`                        | Location-filter root.             | (composes trigger + content)               |
| `<velt-comments-sidebar-location-filter-dropdown-trigger-wireframe>`                | Trigger pill.                     | (click handler)                            |
| `<velt-comments-sidebar-location-filter-dropdown-trigger-label-wireframe>`          | Trigger label.                    | `<velt-data field="item.name" />`          |
| `<velt-comments-sidebar-location-filter-dropdown-content-wireframe>`                | Open menu.                        | (composes content rows)                    |

### Minimal filter / actions dropdown tags

Compact filter + sort UI used in the minimal layout (matches the multi-thread pattern).

| Tag                                                                                       | Notes                           | Example                                                                                 |
| ----------------------------------------------------------------------------------------- | ------------------------------- | --------------------------------------------------------------------------------------- |
| `<velt-comments-sidebar-minimal-filter-dropdown-trigger-wireframe>`                       | Trigger pill.                   | (click handler)                                                                         |
| `<velt-comments-sidebar-minimal-filter-dropdown-content-wireframe>`                       | Open menu.                      | (composes filter rows)                                                                  |
| `<velt-comments-sidebar-minimal-filter-dropdown-content-filter-all-wireframe>`            | "All" filter row.               | `velt-class="'selected': '{selectedMinimalFilterDropdownOption.filter} === \'all\\''"`  |
| `<velt-comments-sidebar-minimal-filter-dropdown-content-filter-open-wireframe>`           | "Open" filter row.              | `velt-class="'selected': '{selectedMinimalFilterDropdownOption.filter} === \'open\\''"` |
| `<velt-comments-sidebar-minimal-filter-dropdown-content-filter-resolved-wireframe>`       | "Resolved" filter row.          | (selected-state)                                                                        |
| `<velt-comments-sidebar-minimal-filter-dropdown-content-filter-read-wireframe>`           | "Read" filter row.              | (selected-state)                                                                        |
| `<velt-comments-sidebar-minimal-filter-dropdown-content-filter-unread-wireframe>`         | "Unread" filter row.            | (selected-state)                                                                        |
| `<velt-comments-sidebar-minimal-filter-dropdown-content-filter-assigned-to-me-wireframe>` | "Assigned to me" row.           | (selected-state)                                                                        |
| `<velt-comments-sidebar-minimal-filter-dropdown-content-filter-reset-wireframe>`          | Reset-filter row.               | (click handler)                                                                         |
| `<velt-comments-sidebar-minimal-filter-dropdown-content-selected-icon-wireframe>`         | Per-row selected tick.          | `velt-if="{item.selected}"`                                                             |
| `<velt-comments-sidebar-minimal-filter-dropdown-content-sort-date-wireframe>`             | Sort-by-date row.               | (selected-state)                                                                        |
| `<velt-comments-sidebar-minimal-filter-dropdown-content-sort-unread-wireframe>`           | Sort-by-unread row.             | (selected-state)                                                                        |
| `<velt-comments-sidebar-minimal-actions-dropdown-trigger-wireframe>`                      | Actions dropdown trigger ("⋯"). | (click handler)                                                                         |
| `<velt-comments-sidebar-minimal-actions-dropdown-content-wireframe>`                      | Actions menu.                   | (composes the actions below)                                                            |
| `<velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-read-wireframe>`        | "Mark all as read" action.      | (click handler)                                                                         |
| `<velt-comments-sidebar-minimal-actions-dropdown-content-mark-all-resolved-wireframe>`    | "Mark all as resolved" action.  | (click handler)                                                                         |

## Related

* [Comment Sidebar Components](./comment-sidebar-components) — wireframe overview and components reference.
* [Comment Sidebar V2 Wireframes](./comment-sidebar-v2-wireframes) — composition reference for the wireframe tags themselves.
* [Comment Sidebar V2 Primitives](./comment-sidebar-v2-primitives) — granular components if you don't need a full wireframe.
* [Comment Sidebar Button Wireframe Variables](../comment-sidebar-button/wireframe-variables) — the button that opens this sidebar.
* [Comment Dialog Wireframe Variables](../comment-dialog/wireframe-variables) — variables that resolve inside nested dialog tags rendered by the list / focused-thread.
* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.