- Type bubble (colored dot) appears inline with body text, far right, only on shared notes
- Shared with capsules displayed in bottom right with consistent person-based colors
- Attachment icons in bottom left
- Body text truncated to single line to maintain consistent card heights
- Added color palette for person names (8 distinct colors) with hash-based consistency
- Removed metadata display from card footer
- Cleaner visual hierarchy with all key info visible at a glance
- Type bubble (colored dot) now appears only on shared notes below timestamp
- Type bubble positioned on far right, below the timestamp
- Shared with capsules display below type bubble on the right side
- Non-shared notes show meta info and attachment icons as before
- Cleaner visual hierarchy: timestamp/type on top, content in middle, details at bottom
- Added share note input field with comma-separated name parsing
- Integrated shared_with and shared boolean fields to note payload
- Reduced form spacing (space-y-4 to space-y-2.5) to accommodate new field
- Adjusted container positioning: noteContainer translateY(-33px), notesListContainer translateY(-24px)
- Share functionality now working with PocketBase multiselect field validation
- Note cards will display green background when shared=true
- Reorganize attachment menu: main menu shows Attach Image, Attach Video, Attach File
- Clicking Attach Image/Video opens submenus with take photo/video and select file options
- Move menu to open to the right of attach button instead of below
- Apply same submenu structure to both note and conversation containers
- Decrease height of notesListContainer and noteContainer for compact layout
- Center containers vertically on page
- Move attachments section and submit button up 30px within noteContainer
- Adjust vertical padding and margins for optimal spacing
- Reduce noteContainer height by 15px and move down 4px
- Increase notesListContainer height by 2px and move down 4px
- Fine-tune noteContainer height and positioning (py-[8px], mt-4)
- Add separate buttons: 'Attach Image' and 'Take Photo'
- Add separate buttons: 'Attach Video' and 'Record Video'
- Create separate file inputs: imageInput/imageCameraInput, videoInput/videoCameraInput
- imageCameraInput and videoCameraInput have capture="environment" attribute
- imageInput and videoInput are for file picker (no capture attribute)
- Both note and conversation menus updated with same structure
- Update all event listeners and clear handlers for new inputs
- 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