# `PhiaUi.Components.Collab.VersionHistory`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/collab/version_history.ex#L1)

Version history components for collaborative document editing.

Provides a timeline of document versions, diff views, restore dialogs,
and save-state indicators for TipTap-based collaborative editors.

## Components

| Component                | Purpose                                           |
|--------------------------|---------------------------------------------------|
| `version_summary/1`      | Single version entry in the timeline              |
| `version_list/1`         | Timeline of versions grouped by day               |
| `version_diff/1`         | Diff view between two document versions           |
| `version_restore_dialog/1` | Confirmation dialog for restoring a version     |
| `version_panel/1`        | Full version history side panel                   |
| `version_badge/1`        | "Saved N seconds ago" indicator                   |

## Version map shape

Components that accept a `:version` map expect:

    %{
      id: "v-1",
      author_name: "Alice Adams",
      author_color: "#3B82F6",
      author_avatar_url: "/avatars/alice.jpg",  # optional
      created_at: ~U[2026-03-19 10:00:00Z],
      word_count: 1250,
      word_count_delta: "+42",                   # optional
      label: "Auto-save"                         # optional
    }

# `version_badge`

Renders a save-state indicator badge.

Shows "Saved X ago" when changes are saved, or "Unsaved changes" with a
warning style when there are pending unsaved modifications.

## Example

    <.version_badge
      id="save-badge"
      last_saved_at={~U[2026-03-19 10:00:00Z]}
      has_unsaved={false}
    />

## Attributes

* `id` (`:string`) (required)
* `last_saved_at` (`:any`) - Defaults to `nil`.
* `has_unsaved` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.

# `version_diff`

Renders a diff view between two document versions.

Additions are highlighted in green, removals in red, and modifications
show both the old and new content. Supports `:inline` and `:side_by_side`
display modes.

## Example

    <.version_diff
      id="diff-view"
      changes={[%{type: :added, path: [0], content: %{"type" => "paragraph"}}]}
      mode={:inline}
    />

## Attributes

* `id` (`:string`) (required)
* `changes` (`:list`) - Defaults to `[]`.
* `mode` (`:atom`) - Defaults to `:inline`. Must be one of `:inline`, or `:side_by_side`.
* `class` (`:string`) - Defaults to `nil`.

# `version_list`

Renders a timeline of versions grouped by day with date headers.

Each day group has a sticky date header and a list of version summaries.

## Example

    <.version_list
      id="version-timeline"
      versions={@versions}
      active_version_id={@active_version_id}
    />

## Attributes

* `id` (`:string`) (required)
* `versions` (`:list`) - Defaults to `[]`.
* `active_version_id` (`:string`) - Defaults to `nil`.
* `on_select` (`:string`) - Defaults to `"collab:version:select"`.
* `class` (`:string`) - Defaults to `nil`.

# `version_panel`

Renders a full version history side panel.

Contains a header with title and close button, the version list timeline,
and a diff view for the currently selected version.

## Example

    <.version_panel
      id="version-panel"
      versions={@versions}
      active_version_id={@active_version_id}
      changes={@changes}
    />

## Attributes

* `id` (`:string`) (required)
* `versions` (`:list`) - Defaults to `[]`.
* `active_version_id` (`:string`) - Defaults to `nil`.
* `changes` (`:list`) - Defaults to `[]`.
* `on_close` (`:string`) - Defaults to `"collab:version:panel:close"`.
* `class` (`:string`) - Defaults to `nil`.

# `version_restore_dialog`

Renders a confirmation dialog for restoring a previous version.

Shows a modal overlay with version details, a warning message, and
confirm/cancel buttons.

## Example

    <.version_restore_dialog
      id="restore-dialog"
      version={%{id: "v-1", author_name: "Alice", created_at: ~U[2026-03-19T10:00:00Z]}}
      open={true}
    />

## Attributes

* `id` (`:string`) (required)
* `version` (`:map`) - Defaults to `nil`.
* `open` (`:boolean`) - Defaults to `false`.
* `on_confirm` (`:string`) - Defaults to `"collab:version:restore"`.
* `on_cancel` (`:string`) - Defaults to `"collab:version:restore:cancel"`.
* `class` (`:string`) - Defaults to `nil`.

# `version_summary`

Renders a single version entry in the timeline.

Shows a colored dot on a vertical timeline line, author avatar, formatted
time, an optional label, and a word count delta badge.

## Example

    <.version_summary
      id="v-1"
      version={%{id: "v-1", author_name: "Alice", author_color: "#3B82F6", created_at: ~U[2026-03-19T10:00:00Z], word_count: 1250, word_count_delta: "+42"}}
      active={false}
    />

## Attributes

* `id` (`:string`) (required)
* `version` (`:map`) (required)
* `active` (`:boolean`) - Defaults to `false`.
* `on_select` (`:string`) - Defaults to `"collab:version:select"`.
* `class` (`:string`) - Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*