From 497c29ce14aa74cec83bb027dafe25f9ec669ca6 Mon Sep 17 00:00:00 2001
From: Golwhit <alfonso.ewing@outlook.com>
Date: Mon, 29 Dec 2025 21:02:37 -0600
Subject: [PATCH] Fix layout: replace inline styles with Tailwind, enable audio
 playback in detail view, adjust spacing

---
 index.html | 52 ++++++++++++++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 20 deletions(-)
diff --git a/index.html b/index.html
index e6e93fe..6548985 100644
--- a/index.html
+++ b/index.html
@@ -18,9 +18,9 @@
     }
   </script>
 </head>
-<body class="bg-gradient-to-br from-primary to-secondary p-4 sm:p-8 flex flex-col font-sans relative" style="height: 100vh; overflow: hidden;">
+<body class="bg-gradient-to-br from-primary to-secondary p-4 sm:p-8 flex flex-col font-sans relative h-screen overflow-hidden">
   <!-- Top-right display name -->
-  <div id="userDisplay" class="hidden fixed right-2 text-white text-xs font-semibold drop-shadow z-50" style="top: 5px;">
+  <div id="userDisplay" class="hidden fixed right-2 text-white text-xs font-semibold drop-shadow z-50 top-1">
     <span id="userDisplayName"></span>
   </div>
 
@@ -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" style="flex: 1; max-height: calc(100vh - 60px); overflow: hidden; margin-top: 10px;">
+  <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 class="flex-shrink-0">
       <div class="flex items-center justify-between gap-3">
         <div>
@@ -78,12 +78,13 @@
     <div class="flex-1 overflow-y-auto">
       <div id="notesListStatus" class="text-sm text-gray-600"></div>
       <div id="notesEmpty" class="hidden text-sm text-gray-500">No notes yet. Click New Note to create one.</div>
-      <div id="notesGrid" class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3"></div>
+      <div id="notesGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full"></div>
     </div>
+  </div>
 
   <!-- Note Detail Container -->
-  <div id="noteDetailContainer" class="hidden self-start bg-white rounded-2xl shadow-2xl max-w-4xl w-full p-6 space-y-3 max-h-[calc(100vh-80px)] overflow-y-auto">
-    <div class="flex items-center justify-between">
+  <div id="noteDetailContainer" class="hidden flex flex-col bg-white rounded-2xl shadow-2xl max-w-4xl w-full p-6 gap-3 overflow-hidden mt-2.5" style="max-height: calc(100vh - 140px);">
+    <div class="flex-shrink-0 flex items-center justify-between">
       <div>
         <div class="text-xs text-gray-500" id="noteDetailMeta"></div>
         <h2 id="noteDetailTitle" class="text-2xl font-bold text-gray-900">Note</h2>
@@ -93,11 +94,13 @@
         <button id="detailNewNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Note</button>
       </div>
     </div>
-    <div class="text-gray-800 leading-relaxed whitespace-pre-wrap border border-gray-100 rounded-lg p-3 bg-gray-50" id="noteDetailBody"></div>
-    <div class="space-y-2">
-      <div class="text-sm text-gray-600">Audio</div>
-      <audio id="noteDetailAudio" controls class="hidden w-full"></audio>
-      <div id="noteDetailAudioStatus" class="text-xs text-gray-500"></div>
+    <div class="min-h-0 overflow-y-auto">
+      <div class="text-gray-800 leading-relaxed whitespace-pre-wrap border border-gray-100 rounded-lg p-3 bg-gray-50 mb-3" id="noteDetailBody"></div>
+      <div class="space-y-2">
+        <div class="text-sm text-gray-600">Audio</div>
+        <audio id="noteDetailAudio" controls class="hidden w-full"></audio>
+        <div id="noteDetailAudioStatus" class="text-xs text-gray-500"></div>
+      </div>
     </div>
   </div>
 
@@ -173,7 +176,7 @@
             </button>
             <div class="flex-1">
               <div class="h-2 bg-gray-200 rounded-full overflow-hidden cursor-pointer" id="progressTrack">
-                <div id="progressFill" class="h-full bg-primary" style="width: 0%"></div>
+                <div id="progressFill" class="h-full bg-primary w-0"></div>
               </div>
               <div class="flex justify-between text-xs text-gray-600 mt-1">
                 <span id="currentTime">0:00</span>
@@ -1021,13 +1024,6 @@
       document.getElementById('noteDetailContainer').classList.remove('hidden');
 
       document.getElementById('noteDetailTitle').textContent = note.title || 'Untitled';
-      document.getElementById('noteDetailType').textContent = note.type || 'personal';
-      document.getElementById('noteDetailJob').textContent = note.job_note ? 'Yes' : 'No';
-      const jobNumRow = document.getElementById('noteDetailJobNumberRow');
-      const showJobNumber = note.job_note && note.Job_Number;
-      document.getElementById('noteDetailJobNumber').textContent = showJobNumber ? note.Job_Number : '—';
-      jobNumRow.classList.toggle('hidden', !showJobNumber);
-      document.getElementById('noteDetailAuthor').textContent = note.Username || note.email || '(unknown)';
       document.getElementById('noteDetailMeta').textContent = note.created ? `Created ${new Date(note.created).toLocaleString()}` : '';
       const body = note[NOTE_BODY_PLAIN_FIELD] || (note[NOTE_BODY_HTML_FIELD] ? htmlToPlainText(note[NOTE_BODY_HTML_FIELD]) : '');
       document.getElementById('noteDetailBody').textContent = body || '(empty)';
@@ -1036,7 +1032,23 @@
       const audioStatus = document.getElementById('noteDetailAudioStatus');
       audioEl.classList.add('hidden');
       audioEl.src = '';
-      audioStatus.textContent = 'Attachments are hidden in detail view.';
+      audioStatus.textContent = 'Loading audio...';
+      try {
+        const atts = await pb.collection(ATTACHMENTS_COLLECTION).getList(1, 1, {
+          sort: '-created',
+          filter: `${ATTACHMENTS_PBID_FIELD} = "${note.id}"`,
+        });
+        if (atts.items.length) {
+          const att = atts.items[0];
+          audioEl.src = pb.files.getURL(att, att[ATTACHMENTS_FILE_FIELD]);
+          audioEl.classList.remove('hidden');
+          audioStatus.textContent = '';
+        } else {
+          audioStatus.textContent = 'No audio attached.';
+        }
+      } catch (e) {
+        audioStatus.textContent = `Audio load failed: ${e.message}`;
+      }
     }
 
     document.getElementById('notesGrid').addEventListener('click', (e) => {
