Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

07 — Component Library (Files Module)

Module-specific components. Shared components are authoritative in 00-shared/03 and are reused, not re-specified. All visuals use 00-shared/02_Design_Tokens.

1. FileTypeIcon

  • Purpose: mimeType → glyph/color (image/*, application/pdf, application/vnd.*, application/zip, text/*, video/*, fallback generic).
  • Input: mimeType: String (from FileRecord.mimeType, file.schema.ts:13).
  • Behavior: deterministic map; no network call (no icon URLs — files have no web-visible URL today).
  • A11y: decorative (excludeFromSemantics); row label carries the name.

2. FileTile (list row)

  • Composition: FileTypeIcon + two-line text (originalName, mimeType · size · relative date) + trailing AppMenu.
  • Data: FileRecord (list shape: id, originalName, mimeType, size, createdAt).
  • States: normal / selected / locked (no file.read) / offline-dimmed.
  • Interactions: tap → detail sheet; menu → download, delete (conditional), copy name.
  • Semantics: single button label "originalName, mimeType, size".

3. UploadSheet

  • Composition: AppBottomSheet shell; picker rows (system file picker; camera (forward-looking)); selected-file preview; primary Upload AppButton.
  • Behavior: enforces client-side validation matrix (08_Form_Specifications.md); emits pick(file) / upload(file) / cancel.
  • States: idle / picking / selected / uploading / error.

4. UploadProgressCard

  • Composition: filename + AppProgress (indeterminate until first bytes, then %), bytes sent/total, Cancel text button.
  • Behavior: driven by transport onSendProgress (dio) or XMLHttpRequest upload events; cancel aborts request (server keeps nothing partial — no cleanup job yet, (planned)).
  • States: 0% connecting (indeterminate) → percent → success (auto-dismiss) / error (Retry re-POSTs — new record, no idempotency).

5. DownloadManagerSheet

  • Purpose: single place for active/completed downloads (mobile) or inline rows (web).
  • Composition: list of DownloadTask rows: FileTypeIcon, name, AppProgress, pause (forward-looking) / cancel; completed rows show "Open" / "Share" (forward-looking).
  • Behavior: per-task state queued → downloading → completed | failed | cancelled (see 13_State_Management.md).
  • Note: server has no Range support — pause/resume means restart (forward-looking).

6. DeleteConfirmDialog

  • Composition: AppDialog destructive variant; message "Delete originalName? The stored copy is removed permanently."
  • Behavior: confirm → DELETE /files/:id; spinner on confirm; error inline; no undo.

7. EmptyFilesState

  • AppEmptyState variant: icon, "No files yet", caption, optional "Attach first file" CTA (shown only with file.upload).

8. StorageInfoBar (proposed)

  • Optional tenant quota line (server has no quota API — purely informational from client-aggregated size sums; only if a module asks for it).

Shared component reuse (no re-spec)

AppListTile, AppMenu, AppButton, AppBottomSheet, AppDialog, AppSnackbar, AppSkeleton, AppEmptyState, AppOfflineBanner, AppProgress, AppChips, AppAvatar — definitions and contracts in 00-shared/03_Component_Library.md.