feat(ui): add comments and annotations UX to file detail page

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com> Agent-Logs-Url: https://github.com/christianlouis/DocuElevate/sessions/20bbea80-fdfd-42d2-b0c2-756ca25b240b
2026-03-21 21:45:24 +00:00
parent 4b6412734b
commit a7a88218c3
5 changed files with 1576 additions and 0 deletions
@@ -705,6 +705,64 @@ You can test your rules without actually routing a document using the
 **evaluate** endpoint (`POST /api/routing-rules/evaluate`).  For the full
 API reference, see [API Documentation](API.md#routing-rules).

+## Comments & Annotations
+
+The file detail page includes a **collaboration panel** for threaded
+comments and PDF annotations, allowing team members to discuss documents
+directly within DocuElevate.
+
+### Comments
+
+The **Comments** panel is on the left side of the collaboration section at
+the bottom of the file detail page.
+
+#### Viewing Comments
+Open any file's detail page (`/files/{id}/detail`). Existing comments load
+automatically, displayed in a threaded tree — replies are nested under their
+parent.
+
+#### Adding a Comment
+1. Type your comment in the text area at the bottom of the Comments panel.
+2. Use `@username` to mention another user — an autocomplete dropdown
+   appears as you type after the `@` symbol. Use arrow keys and Enter to
+   select a user.
+3. Click **Add comment** to post.
+
+#### Replying to a Comment
+Click the **Reply** button on any top-level comment. A reply text area
+appears inline; type your response and click **Reply** to post.
+
+#### Editing & Deleting
+You can edit or delete your own comments using the **Edit** and trash
+buttons. Edits re-extract @mentions automatically.
+
+#### Resolving Threads
+Click **Resolve** on a top-level comment to mark the thread as resolved
+(shown with a green badge). Click **Reopen** to re-open it.
+
+### Annotations
+
+The **Annotations** panel is on the right side of the collaboration
+section.
+
+#### Adding an Annotation
+1. Type the annotation content in the text area.
+2. Set the **Page** number the annotation refers to.
+3. Choose a **Type**: Note, Highlight, Underline, or Strikethrough.
+4. Pick a **Color** using the color picker.
+5. Click **Add annotation** to save.
+
+#### Editing & Deleting
+You can edit or delete your own annotations using the pencil and trash
+buttons. When editing, you can also change the annotation type.
+
+### @Mention Autocomplete
+
+When typing `@` followed by characters in the comment input, an
+autocomplete dropdown shows matching users (sourced from the
+`/api/users/mentionable` endpoint). Navigate with arrow keys and press
+Enter or click to insert the mention.
+
 ## API Access

 For programmatic access, DocuElevate provides a comprehensive REST API: