feat(ui): add AttachmentList component for lesson file attachments (#822)

* feat(ui): add AttachmentList component for lesson file attachments

Introduce a reusable AttachmentList molecule with view and edit modes.
View mode shows a header with file count and view/download actions; edit
mode supports drag-to-reorder, view, and delete. Includes Storybook
stories and package exports.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): address AttachmentList PR review feedback

- Sync edit-mode file state using full metadata signature, not IDs only
- Clamp formatFileSize unit index and guard non-finite inputs
- Recognize common MIME types for file-type icon styling
- Scope role=list to row container; use dragHandleZone for reordering
- Add reorder label for drag handle accessibility

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): guard AttachmentList against undefined files prop

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): render AttachmentList stories and guard missing props

Use Storybook template snippets and default args so stories mount
correctly. Default mode and labels in the component for autodocs, and
align dragHandleZone items with rendered rows.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* feat(dashboard): use AttachmentList on lesson documents tab

Replace the horizontal DocumentCard grid with AttachmentList in view and
edit modes, including drag-to-reorder in edit. Tighten the list header to
p-2 with xs text, add document mapping helpers, and translate new labels.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(dashboard): reset document upload modal state on close

Clear selected file, success message, and upload progress when the add
document modal closes so reopening starts fresh.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(dashboard): raise PDF viewer above sidebar and AI chat

Use z-modal (200) instead of z-100 so the full-screen PDF overlay stacks
above z-app-bar-elevated (150) course sidebar and z-app-bar (100) AI panel.
Add the missing z-modal utility to dashboard app.css to mirror the UI scale.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* chore: minor changes

* feat(dashboard): show spinner and snackbar on document download

AttachmentList download button now shows the Button loading spinner
immediately while the async download runs. On success, a snackbar confirms
the download; on failure, an error snackbar is shown instead of opening
a new tab.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): address PR review feedback on AttachmentList

- Reject negative byte counts in formatFileSize instead of using Math.abs
- Make AttachmentList mode/files/labels props optional; disable cross-list drops
- Include file name in drag-handle aria-label for screen readers
- Prevent upload modal from closing while an upload is in progress
- Use ICU plural rules for attachment file_count across all locales

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>
This commit is contained in:
Rotimi Best
2026-08-02 21:34:06 +01:00
committed by GitHub
co-authored by Rotimi Best Cursor Agent
parent 06c3a7feba
commit 0482790126
29 changed files with 706 additions and 156 deletions
+3 -1
View File
@@ -67,4 +67,6 @@ apps/db-agent
# Generated htpasswd files (hashes are safe to store in secrets/CI, plaintext never committed)
.htpasswd
*.htpasswd
*.htpasswd
output.css