Restructure attachment menu with submenus and adjust container sizing/positioning

- 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)

index.html

@@ -52,7 +52,7 @@
   </div>
 
   <!-- Notes List Container -->
-  <div id="notesListContainer" class="hidden flex flex-col bg-purple-100 rounded-2xl shadow-2xl border border-purple-200 max-w-5xl w-full p-6 gap-4 flex-1 overflow-hidden mt-2.5 mb-3">
+  <div id="notesListContainer" class="hidden flex flex-col bg-purple-100 rounded-2xl shadow-2xl border border-purple-200 max-w-5xl w-full p-6 gap-4 max-h-[calc(100vh-136px)] overflow-hidden mt-6 mb-3">
     <div class="flex-shrink-0">
       <div class="flex flex-row items-center justify-between gap-3">
         <div>
@@ -122,7 +122,7 @@
   </div>
 
   <!-- Note + Audio Container -->
-  <div id="noteContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
+  <div id="noteContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full py-[8px] px-8 space-y-6 mt-4">
     <div class="flex items-center gap-2 flex-wrap">
       <button id="backToListBtn" class="px-2 sm:px-3 py-1 sm:py-2 text-xs sm:text-sm rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
       <h2 class="text-lg sm:text-2xl font-bold text-gray-800">New Note</h2>
@@ -210,7 +210,7 @@
       </div>
       <div id="recordStatus" class="text-xs text-gray-500"></div>
     </div>
-    <div class="space-y-2">
+    <div class="space-y-2 -mt-8">
       <label class="block text-sm font-medium text-gray-700">Attachments</label>
       <div class="relative">
         <div class="flex items-center gap-2">
@@ -225,31 +225,57 @@
         </div>
         
         <!-- Attachment Menu -->
-        <div id="attachmentMenu" class="hidden absolute top-full left-0 mt-2 w-48 rounded border border-gray-300 bg-white shadow-lg z-10">
+        <div id="attachmentMenu" class="hidden absolute top-0 left-0 ml-28 w-48 rounded border border-gray-300 bg-white shadow-lg z-10">
-        <button id="attachImageBtn" 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">
+        <button id="attachImageBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between gap-2" type="button">
+          <span class="flex items-center gap-2">
             <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">
               <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
             </svg>
             Attach Image
+          </span>
+          <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">
+            <polyline points="9 18 15 12 9 6"/>
+          </svg>
         </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">
+        <div id="imageSubmenu" class="hidden bg-gray-50 border-t border-gray-200">
+          <button id="takePhotoBtn" class="w-full text-left px-6 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">
+          <button id="selectImageBtn" class="w-full text-left px-6 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"/>
+            </svg>
+            Select Image
+          </button>
+        </div>
+        <button id="attachVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between gap-2" type="button">
+          <span class="flex items-center gap-2">
             <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
+          </span>
+          <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">
+            <polyline points="9 18 15 12 9 6"/>
+          </svg>
         </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">
+        <div id="videoSubmenu" class="hidden bg-gray-50 border-t border-gray-200">
+          <button id="recordVideoBtn" class="w-full text-left px-6 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
+            Take Video
           </button>
+          <button id="selectVideoBtn" class="w-full text-left px-6 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"/>
+            </svg>
+            Select Video
+          </button>
+        </div>
         <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"/>
@@ -268,7 +294,7 @@
       <div id="noteAttachmentsList" class="space-y-1"></div>
       </div>
     </div>
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-3 -mt-8">
       <button id="submitNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Submit Note</button>
       <div id="submitStatus" class="text-sm text-gray-600"></div>
     </div>
@@ -404,31 +430,57 @@
         </div>
         
         <!-- Conversation Attachment Menu -->
-        <div id="conversationAttachmentMenu" class="hidden absolute top-full left-0 mt-2 w-48 rounded border border-gray-300 bg-white shadow-lg z-10">
+        <div id="conversationAttachmentMenu" class="hidden absolute top-0 left-0 ml-28 w-48 rounded border border-gray-300 bg-white shadow-lg z-10">
-          <button id="conversationAttachImageBtn" 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">
+          <button id="conversationAttachImageBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between gap-2" type="button">
+            <span class="flex items-center gap-2">
               <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">
                 <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
               </svg>
               Attach Image
+            </span>
+            <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">
+              <polyline points="9 18 15 12 9 6"/>
+            </svg>
           </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">
+          <div id="conversationImageSubmenu" class="hidden bg-gray-50 border-t border-gray-200">
+            <button id="conversationTakePhotoBtn" class="w-full text-left px-6 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">
+            <button id="conversationSelectImageBtn" class="w-full text-left px-6 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"/>
+              </svg>
+              Select Image
+            </button>
+          </div>
+          <button id="conversationAttachVideoBtn" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-between gap-2" type="button">
+            <span class="flex items-center gap-2">
               <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
+            </span>
+            <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">
+              <polyline points="9 18 15 12 9 6"/>
+            </svg>
           </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">
+          <div id="conversationVideoSubmenu" class="hidden bg-gray-50 border-t border-gray-200">
+            <button id="conversationRecordVideoBtn" class="w-full text-left px-6 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
+              Take Video
             </button>
+            <button id="conversationSelectVideoBtn" class="w-full text-left px-6 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"/>
+              </svg>
+              Select Video
+            </button>
+          </div>
           <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"/>
@@ -1747,28 +1799,47 @@
       attachmentMenu.classList.toggle('hidden');
     });
 
+    const imageSubmenu = document.getElementById('imageSubmenu');
+    const videoSubmenu = document.getElementById('videoSubmenu');
+
     document.getElementById('attachImageBtn').addEventListener('click', () => {
-      attachmentMenu.classList.add('hidden');
+      imageSubmenu.classList.toggle('hidden');
-      imageInput.click();
+      videoSubmenu.classList.add('hidden');
     });
 
     document.getElementById('takePhotoBtn').addEventListener('click', () => {
       attachmentMenu.classList.add('hidden');
+      imageSubmenu.classList.add('hidden');
       imageCameraInput.click();
     });
 
-    document.getElementById('attachVideoBtn').addEventListener('click', () => {
+    document.getElementById('selectImageBtn').addEventListener('click', () => {
       attachmentMenu.classList.add('hidden');
-      videoInput.click();
+      imageSubmenu.classList.add('hidden');
+      imageInput.click();
+    });
+
+    document.getElementById('attachVideoBtn').addEventListener('click', () => {
+      videoSubmenu.classList.toggle('hidden');
+      imageSubmenu.classList.add('hidden');
     });
 
     document.getElementById('recordVideoBtn').addEventListener('click', () => {
       attachmentMenu.classList.add('hidden');
+      videoSubmenu.classList.add('hidden');
       videoCameraInput.click();
     });
 
+    document.getElementById('selectVideoBtn').addEventListener('click', () => {
+      attachmentMenu.classList.add('hidden');
+      videoSubmenu.classList.add('hidden');
+      videoInput.click();
+    });
+
     document.getElementById('attachFileBtn').addEventListener('click', () => {
       attachmentMenu.classList.add('hidden');
+      imageSubmenu.classList.add('hidden');
+      videoSubmenu.classList.add('hidden');
       fileInput.click();
     });
 
@@ -1795,6 +1866,8 @@
     document.addEventListener('click', (e) => {
       if (!attachmentMenuBtn.contains(e.target) && !attachmentMenu.contains(e.target)) {
         attachmentMenu.classList.add('hidden');
+        imageSubmenu.classList.add('hidden');
+        videoSubmenu.classList.add('hidden');
       }
     });
 
@@ -1812,28 +1885,47 @@
       conversationAttachmentMenu.classList.toggle('hidden');
     });
 
+    const conversationImageSubmenu = document.getElementById('conversationImageSubmenu');
+    const conversationVideoSubmenu = document.getElementById('conversationVideoSubmenu');
+
     document.getElementById('conversationAttachImageBtn').addEventListener('click', () => {
-      conversationAttachmentMenu.classList.add('hidden');
+      conversationImageSubmenu.classList.toggle('hidden');
-      conversationImageInput.click();
+      conversationVideoSubmenu.classList.add('hidden');
     });
 
     document.getElementById('conversationTakePhotoBtn').addEventListener('click', () => {
       conversationAttachmentMenu.classList.add('hidden');
+      conversationImageSubmenu.classList.add('hidden');
       conversationImageCameraInput.click();
     });
 
-    document.getElementById('conversationAttachVideoBtn').addEventListener('click', () => {
+    document.getElementById('conversationSelectImageBtn').addEventListener('click', () => {
       conversationAttachmentMenu.classList.add('hidden');
-      conversationVideoInput.click();
+      conversationImageSubmenu.classList.add('hidden');
+      conversationImageInput.click();
+    });
+
+    document.getElementById('conversationAttachVideoBtn').addEventListener('click', () => {
+      conversationVideoSubmenu.classList.toggle('hidden');
+      conversationImageSubmenu.classList.add('hidden');
     });
 
     document.getElementById('conversationRecordVideoBtn').addEventListener('click', () => {
       conversationAttachmentMenu.classList.add('hidden');
+      conversationVideoSubmenu.classList.add('hidden');
       conversationVideoCameraInput.click();
     });
 
+    document.getElementById('conversationSelectVideoBtn').addEventListener('click', () => {
+      conversationAttachmentMenu.classList.add('hidden');
+      conversationVideoSubmenu.classList.add('hidden');
+      conversationVideoInput.click();
+    });
+
     document.getElementById('conversationAttachFileBtn').addEventListener('click', () => {
       conversationAttachmentMenu.classList.add('hidden');
+      conversationImageSubmenu.classList.add('hidden');
+      conversationVideoSubmenu.classList.add('hidden');
       conversationFileInput.click();
     });
 
@@ -1860,6 +1952,8 @@
     document.addEventListener('click', (e) => {
       if (!conversationAttachmentMenuBtn.contains(e.target) && !conversationAttachmentMenu.contains(e.target)) {
         conversationAttachmentMenu.classList.add('hidden');
+        conversationImageSubmenu.classList.add('hidden');
+        conversationVideoSubmenu.classList.add('hidden');
       }
     });