From 8a70038b6406c0bab6ad20b5e6da0c225a941f2d Mon Sep 17 00:00:00 2001
From: aewing <aewing@cardoza.construction>
Date: Sun, 11 Jan 2026 03:03:12 +0000
Subject: [PATCH] Add camera vs file picker options for image and video
 attachments

- 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
---
 index.html | 70 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 64 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 3124944..da4daaf 100644
--- a/index.html
+++ b/index.html
@@ -232,12 +232,24 @@
           </svg>
           Attach Image
         </button>
+        <button id="takePhotoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
+            <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/>
+          </svg>
+          Take Photo
+        </button>
         <button id="attachVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
             <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
           </svg>
           Attach Video
         </button>
+        <button id="recordVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
+            <circle cx="12" cy="13" r="9"/><path d="M12 10v6"/>
+          </svg>
+          Record Video
+        </button>
         <button id="attachFileBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
             <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
@@ -247,8 +259,10 @@
       </div>
       
       <!-- Hidden file inputs -->
-      <input id="imageInput" type="file" class="hidden" accept="image/*" multiple capture="environment">
-      <input id="videoInput" type="file" class="hidden" accept="video/*" capture="environment">
+      <input id="imageInput" type="file" class="hidden" accept="image/*" multiple>
+      <input id="imageCameraInput" type="file" class="hidden" accept="image/*" multiple capture="environment">
+      <input id="videoInput" type="file" class="hidden" accept="video/*">
+      <input id="videoCameraInput" type="file" class="hidden" accept="video/*" capture="environment">
       <input id="fileInput" type="file" class="hidden" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar">
       
       <div id="noteAttachmentsList" class="space-y-1"></div>
@@ -397,12 +411,24 @@
             </svg>
             Attach Image
           </button>
+          <button id="conversationTakePhotoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
+              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/>
+            </svg>
+            Take Photo
+          </button>
           <button id="conversationAttachVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
               <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
             </svg>
             Attach Video
           </button>
+          <button id="conversationRecordVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
+              <circle cx="12" cy="13" r="9"/><path d="M12 10v6"/>
+            </svg>
+            Record Video
+          </button>
           <button id="conversationAttachFileBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center gap-2" type="button">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4">
               <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
@@ -412,8 +438,10 @@
         </div>
         
         <!-- Hidden file inputs for conversation -->
-        <input id="conversationImageInput" type="file" class="hidden" accept="image/*" multiple capture="environment">
-        <input id="conversationVideoInput" type="file" class="hidden" accept="video/*" capture="environment">
+        <input id="conversationImageInput" type="file" class="hidden" accept="image/*" multiple>
+        <input id="conversationImageCameraInput" type="file" class="hidden" accept="image/*" multiple capture="environment">
+        <input id="conversationVideoInput" type="file" class="hidden" accept="video/*">
+        <input id="conversationVideoCameraInput" type="file" class="hidden" accept="video/*" capture="environment">
         <input id="conversationFileInput" type="file" class="hidden" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar">
         
         <div id="conversationAttachmentsList" class="space-y-1"></div>
@@ -1709,7 +1737,9 @@
     const attachmentMenuBtn = document.getElementById('attachmentMenuBtn');
     const attachmentMenu = document.getElementById('attachmentMenu');
     const imageInput = document.getElementById('imageInput');
+    const imageCameraInput = document.getElementById('imageCameraInput');
     const videoInput = document.getElementById('videoInput');
+    const videoCameraInput = document.getElementById('videoCameraInput');
     const fileInput = document.getElementById('fileInput');
 
     attachmentMenuBtn.addEventListener('click', (e) => {
@@ -1722,18 +1752,28 @@
       imageInput.click();
     });
 
+    document.getElementById('takePhotoBtn').addEventListener('click', () => {
+      attachmentMenu.classList.add('hidden');
+      imageCameraInput.click();
+    });
+
     document.getElementById('attachVideoBtn').addEventListener('click', () => {
       attachmentMenu.classList.add('hidden');
       videoInput.click();
     });
 
+    document.getElementById('recordVideoBtn').addEventListener('click', () => {
+      attachmentMenu.classList.add('hidden');
+      videoCameraInput.click();
+    });
+
     document.getElementById('attachFileBtn').addEventListener('click', () => {
       attachmentMenu.classList.add('hidden');
       fileInput.click();
     });
 
     // File input change handlers
-    [imageInput, videoInput, fileInput].forEach(input => {
+    [imageInput, imageCameraInput, videoInput, videoCameraInput, fileInput].forEach(input => {
       input.addEventListener('change', (e) => {
         pendingNoteAttachments.push(...Array.from(e.target.files || []));
         renderNoteAttachmentsList();
@@ -1744,7 +1784,9 @@
       e.preventDefault();
       pendingNoteAttachments = [];
       imageInput.value = '';
+      imageCameraInput.value = '';
       videoInput.value = '';
+      videoCameraInput.value = '';
       fileInput.value = '';
       renderNoteAttachmentsList();
     });
@@ -1760,7 +1802,9 @@
     const conversationAttachmentMenuBtn = document.getElementById('conversationAttachmentMenuBtn');
     const conversationAttachmentMenu = document.getElementById('conversationAttachmentMenu');
     const conversationImageInput = document.getElementById('conversationImageInput');
+    const conversationImageCameraInput = document.getElementById('conversationImageCameraInput');
     const conversationVideoInput = document.getElementById('conversationVideoInput');
+    const conversationVideoCameraInput = document.getElementById('conversationVideoCameraInput');
     const conversationFileInput = document.getElementById('conversationFileInput');
 
     conversationAttachmentMenuBtn.addEventListener('click', (e) => {
@@ -1773,18 +1817,28 @@
       conversationImageInput.click();
     });
 
+    document.getElementById('conversationTakePhotoBtn').addEventListener('click', () => {
+      conversationAttachmentMenu.classList.add('hidden');
+      conversationImageCameraInput.click();
+    });
+
     document.getElementById('conversationAttachVideoBtn').addEventListener('click', () => {
       conversationAttachmentMenu.classList.add('hidden');
       conversationVideoInput.click();
     });
 
+    document.getElementById('conversationRecordVideoBtn').addEventListener('click', () => {
+      conversationAttachmentMenu.classList.add('hidden');
+      conversationVideoCameraInput.click();
+    });
+
     document.getElementById('conversationAttachFileBtn').addEventListener('click', () => {
       conversationAttachmentMenu.classList.add('hidden');
       conversationFileInput.click();
     });
 
     // File input change handlers for conversation
-    [conversationImageInput, conversationVideoInput, conversationFileInput].forEach(input => {
+    [conversationImageInput, conversationImageCameraInput, conversationVideoInput, conversationVideoCameraInput, conversationFileInput].forEach(input => {
       input.addEventListener('change', (e) => {
         pendingConversationAttachments.push(...Array.from(e.target.files || []));
         renderConversationAttachmentsList();
@@ -1795,7 +1849,9 @@
       e.preventDefault();
       pendingConversationAttachments = [];
       conversationImageInput.value = '';
+      conversationImageCameraInput.value = '';
       conversationVideoInput.value = '';
+      conversationVideoCameraInput.value = '';
       conversationFileInput.value = '';
       renderConversationAttachmentsList();
     });
@@ -1986,7 +2042,9 @@
         await clearAudio();
         pendingNoteAttachments = [];
         document.getElementById('imageInput').value = '';
+        document.getElementById('imageCameraInput').value = '';
         document.getElementById('videoInput').value = '';
+        document.getElementById('videoCameraInput').value = '';
         document.getElementById('fileInput').value = '';
         renderNoteAttachmentsList();
         document.getElementById('noteText').value = '';