# `PhiaUi.Components.Editor.TrackChanges`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/editor/track_changes.ex#L1)

Track Changes Suite — 7 components for document revision tracking and collaboration.

Provides visual change tracking (insert/delete marks), inline diffs,
accept/reject controls, editing mode toggles, sharing permissions,
and auto-save status indicators. Designed to complement the TipTap
editor suite and OT engine.

## Components

- `track_change_mark/1`       — inline `<ins>` / `<del>` annotation with author metadata
- `track_change_panel/1`      — sidebar panel listing all tracked changes with accept/reject
- `track_change_toggle/1`     — segmented control for editing / suggesting / viewing modes
- `accept_reject_controls/1`  — toolbar with accept/reject current + accept/reject all buttons
- `change_diff_inline/1`      — inline diff view showing old (red) and new (green) text
- `share_permissions_dialog/1` — modal dialog for managing document sharing and roles
- `auto_save_indicator/1`     — status dot with label showing save state

## Example

    <.track_change_mark type={:insert} author="Alice">
      new text here
    </.track_change_mark>

    <.track_change_panel id="changes" changes={@tracked_changes} />

    <.track_change_toggle id="mode" mode={@edit_mode} />

    <.auto_save_indicator status={@save_status} last_saved={@last_saved_at} />

# `accept_reject_controls`

Renders a toolbar with four action buttons for tracked changes:

1. Accept current change
2. Reject current change
3. Accept all changes
4. Reject all changes

All buttons are disabled when `:has_changes` is `false`.

Emits phx-click events: `"track_change:accept_current"`,
`"track_change:reject_current"`, `"track_change:accept_all"`,
`"track_change:reject_all"` with the `editor_id` as value.

## Example

    <.accept_reject_controls
      id="ar-controls"
      editor_id="my-editor"
      has_changes={length(@tracked_changes) > 0}
    />

## Attributes

* `id` (`:string`) (required)
* `editor_id` (`:string`) (required)
* `has_changes` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `auto_save_indicator`

Renders a compact auto-save status indicator with a colored dot and label.

Statuses:
- `:saved` — green dot, "Saved" text
- `:saving` — amber animated dot, "Saving..." text
- `:unsaved` — gray dot, "Unsaved changes" text
- `:error` — red dot, "Save failed" text

When `:last_saved` is provided, it is displayed as secondary text for
the `:saved` status.

## Example

    <.auto_save_indicator status={:saving} />
    <.auto_save_indicator status={:saved} last_saved="2 min ago" />

## Attributes

* `status` (`:atom`) - Defaults to `:saved`. Must be one of `:saved`, `:saving`, `:unsaved`, or `:error`.
* `last_saved` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `change_diff_inline`

Renders an inline diff view showing the old text struck through in red
and the new text highlighted in green.

Uses simple `<del>` and `<ins>` elements for semantic correctness
and accessibility.

## Example

    <.change_diff_inline
      old_text="Hello World"
      new_text="Hello Elixir"
    />

## Attributes

* `old_text` (`:string`) - Defaults to `""`.
* `new_text` (`:string`) - Defaults to `""`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `share_permissions_dialog`

Renders a modal dialog for managing document sharing permissions.

Each user in the `:users` list should be a map with:

  - `:name` — display name
  - `:email` — email address
  - `:role` — current role atom (`:owner`, `:editor`, `:commenter`, `:viewer`)

The dialog includes a table of users with role dropdown selectors
and a remove button per user.

Emits phx-click/phx-change events:
- `"share:role_change"` with `phx-value-email` and the selected role
- `"share:remove"` with `phx-value-email`
- `"share:close"` to dismiss the dialog

## Example

    <.share_permissions_dialog
      id="share-dialog"
      visible={@show_share_dialog}
      users={@shared_users}
    />

## Attributes

* `id` (`:string`) (required)
* `users` (`:list`) - Defaults to `[]`.
* `visible` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `track_change_mark`

Renders an inline tracked change annotation.

Wraps content in `<ins>` (for inserts) or `<del>` (for deletes) with
appropriate visual styling and optional author/timestamp metadata.

- **Insert**: green background, underline decoration
- **Delete**: red background, strikethrough decoration

## Example

    <.track_change_mark type={:insert} author="Alice" timestamp="2 min ago">
      added text
    </.track_change_mark>

    <.track_change_mark type={:delete} author="Bob">
      removed text
    </.track_change_mark>

## Attributes

* `type` (`:atom`) (required) - Must be one of `:insert`, or `:delete`.
* `author` (`:string`) - Defaults to `nil`.
* `timestamp` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `track_change_panel`

Renders a panel listing all tracked changes with accept/reject buttons per change.

Each change in the `:changes` list should be a map with:

  - `:type` — `:insert` or `:delete`
  - `:text` — the changed text content
  - `:author` — author name (optional)
  - `:timestamp` — human-readable timestamp (optional)

## Example

    <.track_change_panel
      id="changes-panel"
      changes={[
        %{type: :insert, text: "new text", author: "Alice", timestamp: "2 min ago"},
        %{type: :delete, text: "old text", author: "Bob", timestamp: "5 min ago"}
      ]}
    />

## Attributes

* `id` (`:string`) (required)
* `changes` (`:list`) - Defaults to `[]`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `track_change_toggle`

Renders a segmented control for switching between editing modes.

Modes:
- `:editing` — direct editing (no tracking)
- `:suggesting` — changes are tracked as suggestions
- `:viewing` — read-only view with visible tracked changes

Emits `"track_change:mode"` phx-click events with `phx-value-mode`.

## Example

    <.track_change_toggle id="edit-mode" mode={@edit_mode} />

## Attributes

* `id` (`:string`) (required)
* `mode` (`:atom`) - Defaults to `:editing`. Must be one of `:editing`, `:suggesting`, or `:viewing`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

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