- Add capture="environment" to imageInput and videoInput
- Add capture="environment" to conversationImageInput and conversationVideoInput
- Enables camera/video capture on mobile and desktop devices
- Falls back to file picker on devices without camera capability
- Remove Record Video option and related MediaRecorder implementation
- Remove Take Picture option and camera input handling
- Update both note and conversation attachment menus
- Remove unused event listeners and variable declarations
- Simplify file input arrays to 3 inputs instead of 4
- Add zoom in (+), zoom out (−), reset, and close buttons to preview panel
- Zoom buttons only show for images (other media types don't need zoom)
- Zoom level indicator shows current zoom percentage
- Support zoom levels: 100% to 400% in 25% increments
- Image zoom uses CSS transform scale for smooth performance
- Click on image to toggle between 100% and 150% zoom (quick toggle)
- Reset button appears when zoomed in, allows quick return to original
- Zoom out button only appears when zoomed in
- Preview panel has scrollable content area (max-height 600px)
- Maintains aspect ratio and smooth transitions during zoom
- Add max-h-[calc(100vh-120px)] and overflow-y-auto to note and conversation containers
- Reduce bottom padding from pb-32 (128px) to pb-16 (64px)
- Prevents form containers from expanding beyond viewport bounds
- Keeps header buttons (New Note, Conversations) visible at all times
- Allows scrolling within form when content exceeds viewport height
- Show visible 'Recording Video...' indicator with pulsing red dot when recording starts
- Add 'Stop Recording' button for easy access (not just text feedback)
- Display video preview player after recording completes
- Add 'Use Video' button to attach recorded video to form
- Add 'Remove Video' button to discard recording without attaching
- Implement separate video recording for note and conversation containers
- Store video blob in window.noteVideoBlob and window.conversationVideoBlob
- Video player shows up to 300px height with full controls
- Red/green color scheme for visual feedback (recording = red, actions = green)
- Replace single file input with paper clip icon button and dropdown menu
- Add 5 attachment options: image, video, file, video recording, picture capture
- Implement video recording with MediaRecorder API (5 min auto-stop)
- Support multiple file input interactions accumulating in pending array
- Add same menu system to conversation container (separate attachment array)
- Add render functions for displaying selected attachment summaries
- Fix CSS positioning for menu with relative parent and top-full positioning
- Menu closes on outside click and when file is selected
- Extract all containers (login, notes list, note detail, note form, conversation form, conversations list) to CONTAINERS object
- Create initializeContainers() function to inject templates on page load
- Replace 300+ lines of inline HTML with single containerHost div
- Add session log documenting Option 1 approach with future intent for Option 2
- Each container now independently updatable without touching markup
- Maintains functionality while improving code organization and maintainability
aewing
Golwhit