Cardoza_Construction/Prism-Notes-Main
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

recording working righ, but menu is not correct yet

Browse Source
This commit is contained in:
aewing
2026-01-11 02:38:28 +00:00
parent a19a4495f4
commit 8009ad1eb3
2 changed files with 3 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+3 -80
View File
@@ -82,15 +82,9 @@
<div id="notesAttachmentPreviewPanel" class="hidden mt-3 rounded-xl border border-purple-200 bg-white shadow p-4">
<div class="flex items-center justify-between mb-2">
<div id="notesAttachmentPreviewTitle" class="text-sm font-semibold text-gray-800">Attachment Preview</div>
<div class="flex items-center gap-2">
<button id="notesAttachmentPreviewZoomOut" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm hidden" title="Zoom out">−</button>
<span id="notesAttachmentPreviewZoomLevel" class="text-xs text-gray-600 min-w-12 text-center"></span>
<button id="notesAttachmentPreviewZoomIn" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm hidden" title="Zoom in">+</button>
<button id="notesAttachmentPreviewReset" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm hidden" title="Reset zoom">Reset</button>
<button id="notesAttachmentPreviewClose" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm">Close</button>
</div>
<button id="notesAttachmentPreviewClose" class="px-2 py-1 rounded border border-gray-200 text-gray-700 hover:bg-gray-100 text-sm">Close</button>
</div>
<div id="notesAttachmentPreviewContent" class="space-y-2 overflow-auto" style="max-height: 600px;"></div>
<div id="notesAttachmentPreviewContent" class="space-y-2"></div>
</div>
</div>
<div class="flex-1 overflow-x-hidden overflow-y-auto">
@@ -1627,99 +1621,32 @@
const panel = document.getElementById('notesAttachmentPreviewPanel');
const titleEl = document.getElementById('notesAttachmentPreviewTitle');
const contentEl = document.getElementById('notesAttachmentPreviewContent');
const zoomInBtn = document.getElementById('notesAttachmentPreviewZoomIn');
const zoomOutBtn = document.getElementById('notesAttachmentPreviewZoomOut');
const zoomResetBtn = document.getElementById('notesAttachmentPreviewReset');
const zoomLevel = document.getElementById('notesAttachmentPreviewZoomLevel');
// Reset zoom state
let currentZoom = 100;
let currentElement = null;
function updateZoomUI() {
zoomLevel.textContent = `${currentZoom}%`;
zoomOutBtn.classList.toggle('hidden', currentZoom <= 100);
zoomResetBtn.classList.toggle('hidden', currentZoom === 100);
}
contentEl.innerHTML = '';
const match = findFirstAttachmentByKind(note._attachments || [], kind);
if (!match) {
titleEl.textContent = 'Attachment Preview';
contentEl.textContent = 'No matching attachment.';
zoomInBtn.classList.add('hidden');
zoomOutBtn.classList.add('hidden');
zoomResetBtn.classList.add('hidden');
zoomLevel.textContent = '';
panel.classList.remove('hidden');
return;
}
const { att, name: fileName, url } = match;
titleEl.textContent = `Preview: ${kind}`;
let node = null;
if (kind === 'image') {
node = document.createElement('img');
node.src = url;
node.className = 'max-h-80 rounded border border-gray-200 cursor-zoom-in transition-transform origin-center';
node.className = 'max-h-80 rounded border border-gray-200';
node.alt = fileName || 'image';
node.style.transform = 'scale(1)';
currentElement = node;
// Add zoom handlers for images
zoomInBtn.classList.remove('hidden');
zoomOutBtn.classList.add('hidden');
zoomResetBtn.classList.add('hidden');
updateZoomUI();
const applyZoom = () => {
const scale = currentZoom / 100;
node.style.transform = `scale(${scale})`;
node.style.cursor = currentZoom > 100 ? 'zoom-out' : 'zoom-in';
updateZoomUI();
};
zoomInBtn.onclick = () => {
currentZoom = Math.min(currentZoom + 25, 400);
applyZoom();
};
zoomOutBtn.onclick = () => {
currentZoom = Math.max(currentZoom - 25, 100);
applyZoom();
};
zoomResetBtn.onclick = () => {
currentZoom = 100;
applyZoom();
};
node.addEventListener('click', () => {
if (currentZoom > 100) {
currentZoom = 100;
} else {
currentZoom = 150;
}
applyZoom();
});
} else if (kind === 'video') {
node = document.createElement('video');
node.src = url;
node.controls = true;
node.className = 'w-full max-h-80 rounded border border-gray-200 bg-black';
zoomInBtn.classList.add('hidden');
zoomOutBtn.classList.add('hidden');
zoomResetBtn.classList.add('hidden');
zoomLevel.textContent = '';
} else if (kind === 'audio') {
node = document.createElement('audio');
node.src = url;
node.controls = true;
node.className = 'w-full';
zoomInBtn.classList.add('hidden');
zoomOutBtn.classList.add('hidden');
zoomResetBtn.classList.add('hidden');
zoomLevel.textContent = '';
} else {
// Try inline preview for PDFs, otherwise provide a link
const isPdf = (fileName || '').toLowerCase().endsWith('.pdf');
@@ -1737,10 +1664,6 @@
link.textContent = 'Open attachment';
node = link;
}
zoomInBtn.classList.add('hidden');
zoomOutBtn.classList.add('hidden');
zoomResetBtn.classList.add('hidden');
zoomLevel.textContent = '';
}
contentEl.appendChild(node);
panel.classList.remove('hidden');
logs/SESSION_LOG.txt
-74
View File
@@ -3,80 +3,6 @@ PRISM NOTES - SESSION LOG
Project history, decisions, and architectural milestones
================================================================================
[2026-01-10 22:30] MONICA SESSION: Menu-Driven Attachment System Complete
- Changes Applied:
* Replaced single file input with paper clip icon button + dropdown menu
* Menu offers 5 options: Attach Image, Attach Video, Attach File, Record Video, Take Picture
* Implemented video recording with MediaRecorder API
- Supports both camera input and microphone simultaneously
- Creates webm format video file with timestamp name
- Auto-stops after 5 minute limit (prevents excessive recordings)
- Click on status text to stop recording early
- Shows red "Recording..." indicator that user can click to stop
* Multiple file input interactions accumulate in pendingNoteAttachments array
* Implemented same menu system for conversation container
- Separate pendingConversationAttachments array for conversation files
- Same 5 menu options and video recording functionality
* Fixed CSS positioning:
- Wrapped menu button + summary in relative div
- Menu uses absolute positioning with top-full left-0 for proper alignment
- Menu closes on outside click automatically
- Menu closes when any option is selected
* Added renderConversationAttachmentsList() function for summary display
* Updated resetConversationForm() to clear all attachment inputs
- Result: Professional attachment system with rich file type support and video capture
- Features Working:
✓ Attach images (multiple selection)
✓ Attach videos (file picker)
✓ Attach any file type (.pdf, .doc, .xlsx, etc.)
✓ Record video directly from camera (NEW)
✓ Take picture with device camera
✓ Display selected file summary (count and names)
✓ Clear all selected files at once
- Status: Implemented, tested, and committed (b889e48)
- Note: Conversation submission handler (submitConversation) not yet implemented
in backend - feature shell is ready for backend integration when needed
[2026-01-10 21:45] MONICA SESSION: Mobile Layout & Scrolling Fixes
- Changes Applied:
* Kept button group beside Notes heading on all screen sizes (flex-row always)
* Removed graph status badges from form containers
* Added overflow-x-hidden to Notes and Conversations card containers
* Prevents horizontal scrolling/swiping that made cards feel "floating"
* Allows vertical scroll to remain responsive
- Result: Cards now stay stationary horizontally, only scroll up/down normally
- Status: Fixed and committed (4bb4e54 and 0dc0ffb)
[2026-01-10 21:15] MONICA SESSION: Refined Notes List Header UI
- Changes Applied:
* Removed graph status badges from note/conversation form containers
* Made note/conversation form headers responsive (text-lg sm:text-2xl)
* Replaced "Refresh" text button with icon-only refresh button
* Scaled refresh icon to match button group visually
* Reduced "New Note" and "Conversations" button height (h-6 with leading-none)
* Made all three buttons the same height with flex centering
* Aligned button group to vertical middle of Notes header
* Adjusted responsive breakpoints for mobile-first design
- Result: Clean, minimal header with responsive button scaling and proper alignment
- Status: Fixed and committed (53bf74e)
[2026-01-10 20:45] MONICA SESSION: UI Refinements & Polish
- Changes Applied:
* Centered all main containers (body: flex items-center justify-center)
* Reduced card spacing dramatically for compact dense layout
- Grid gap: gap-5 → gap-2 (between cards)
- Card padding: p-5 sm:p-6 → px-2 py-0.5 (internal spacing)
- Internal spacing: space-y-3 → space-y-0 (elements in cards)
* Improved attachment indicator icons with outline strokes instead of fills
- Image: mountain/landscape icon (clearer than grid pattern)
- Video: play button with frame (recognizable)
- Audio: speaker icon (listening/playback, not microphone which is for recording)
- File: document with corner fold (standard file representation)
* Fixed mobile view icon visibility by increasing size to 24px and adding flex-shrink-0
* Replaced purple badges with subtle hover-on-gray style for icons
- Result: Cleaner, more compact UI with better visual hierarchy
- Status: Fixed and committed (a168fe2)
[2026-01-10 20:10] MONICA SESSION: Fixed Container Injection Bug
- Issue: Refactor commit (cee9157) had CONTAINERS + initializeContainers() code
but ALSO kept all old HTML in DOM, creating duplicates and preventing injection