Add upload progress indicator and display settings to chat interface

[jeremyeder]

Summary

During the chat input refactoring (chatbox-component branch), two features were identified that need proper end-to-end implementation rather than being stubbed as unused props.

Features

1. Upload Progress Indicator

The PendingAttachment type has a progress field, but there's no UI showing upload progress to the user.

Requirements:

• Show upload progress bar/indicator on pending attachments in the chat input area
• Wire the progress field from PendingAttachment through to a visual component
• Handle states: uploading, complete, error

2. Display Settings (Compact Mode + Timestamps)

The messages display area needs user-configurable display settings.

Requirements:

• Compact mode toggle: Reduce spacing/padding in message bubbles for denser display
• Timestamps toggle: Show/hide per-message timestamps
• Wire settings end-to-end through MessagesTab (or equivalent messages container)
• Persist settings (localStorage or user preferences)
• Add UI controls (e.g., toolbar dropdown or settings popover)

Context

These were previously passed as unused props during an earlier implementation. The chatbox-component branch intentionally removed them to keep the refactoring clean. This issue tracks implementing them properly with full end-to-end wiring.

Acceptance Criteria

• Upload progress is visually displayed on pending file attachments
• Users can toggle compact mode on/off in the messages area
• Users can toggle timestamp visibility on/off
• Settings persist across page reloads
• All new UI uses Shadcn components

🤖 Generated with Claude Code