From 04ae0c0c82b101cc5536bd791db4ce4533cc4b7e Mon Sep 17 00:00:00 2001
From: aewing <aewing@cardoza.construction>
Date: Fri, 16 Jan 2026 12:06:06 +0000
Subject: [PATCH] UI improvements: filter buttons, note detail styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Color-code filter buttons to match note types: grey (all), green (my shared), blue (shared with me), pink (job), orange (manager), amber (personal)
- Decrease note detail container width: max-w-4xl → max-w-2xl
- Increase body text area height to 224px with min-height on display
- Hide Audio/Attachments labels when no content present
- Remove placeholder text for empty audio/attachments sections
---
 index.html | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index d1a78ce..7cd5b9a 100644
--- a/index.html
+++ b/index.html
@@ -418,12 +418,12 @@
       </div>
       <div class="w-full mt-3">
         <div class="flex items-center gap-2 mb-3 flex-wrap">
-          <button id="filterAllBtn" class="px-3 py-1 text-xs rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 transition font-medium">All Notes</button>
-          <button id="filterMySharedBtn" class="px-3 py-1 text-xs rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 transition font-medium">My Shared</button>
-          <button id="filterSharedWithMeBtn" class="px-3 py-1 text-xs rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 transition font-medium">Shared With Me</button>
-          <button id="filterJobBtn" class="px-3 py-1 text-xs rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 transition font-medium">Job Notes</button>
-          <button id="filterManagerBtn" class="px-3 py-1 text-xs rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 transition font-medium">Manager Notes</button>
-          <button id="filterPersonalBtn" class="px-3 py-1 text-xs rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-100 transition font-medium">Personal Notes</button>
+          <button id="filterAllBtn" class="px-3 py-1 text-xs rounded border border-gray-400 bg-gray-200 text-gray-700 hover:border-gray-500 transition font-medium">All Notes</button>
+          <button id="filterMySharedBtn" class="px-3 py-1 text-xs rounded border border-green-300 bg-green-100 text-gray-700 hover:border-green-400 transition font-medium">My Shared</button>
+          <button id="filterSharedWithMeBtn" class="px-3 py-1 text-xs rounded border border-blue-300 bg-blue-100 text-gray-700 hover:border-blue-400 transition font-medium">Shared With Me</button>
+          <button id="filterJobBtn" class="px-3 py-1 text-xs rounded border border-pink-400 bg-pink-200 text-gray-700 hover:border-pink-500 transition font-medium">Job Notes</button>
+          <button id="filterManagerBtn" class="px-3 py-1 text-xs rounded border border-orange-400 bg-orange-200 text-gray-700 hover:border-orange-500 transition font-medium">Manager Notes</button>
+          <button id="filterPersonalBtn" class="px-3 py-1 text-xs rounded border border-amber-400 bg-amber-200 text-gray-700 hover:border-amber-500 transition font-medium">Personal Notes</button>
         </div>
         <div class="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 bg-gray-50">
           <input id="notesSearch" type="text" class="flex-1 bg-transparent outline-none text-sm text-gray-800" placeholder="Search notes..." />
@@ -451,7 +451,7 @@
   </div>
 
   <!-- Note Detail Container -->
-  <div id="noteDetailContainer" class="hidden flex flex-col bg-white rounded-2xl shadow-2xl border border-gray-300 max-w-4xl w-full p-6 gap-3 overflow-hidden mt-2.5 max-h-[calc(100vh-140px)]">
+  <div id="noteDetailContainer" class="hidden flex flex-col bg-white rounded-2xl shadow-2xl border border-gray-300 max-w-2xl w-full p-6 gap-3 overflow-hidden mt-2.5 max-h-[calc(100vh-140px)]">
     <div class="flex-shrink-0 flex items-center justify-between">
       <div class="flex-1">
         <div class="text-xs text-gray-500" id="noteDetailMeta"></div>
@@ -470,21 +470,21 @@
       </div>
     </div>
     <div class="min-h-0 overflow-y-auto">
-      <div id="noteDetailBodyDisplay" class="text-gray-800 leading-relaxed whitespace-pre-wrap border border-gray-100 rounded-lg p-3 bg-gray-50 mb-3 cursor-pointer hover:bg-gray-100 transition" title="Double-click to edit"></div>
+      <div id="noteDetailBodyDisplay" class="min-h-56 text-gray-800 leading-relaxed whitespace-pre-wrap border border-gray-100 rounded-lg p-3 bg-gray-50 mb-3 cursor-pointer hover:bg-gray-100 transition" title="Double-click to edit"></div>
       <div id="noteDetailBodyEdit" class="hidden">
-        <textarea id="noteDetailBodyInput" class="w-full h-32 border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary text-gray-800 leading-relaxed"></textarea>
+        <textarea id="noteDetailBodyInput" class="w-full h-56 border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary text-gray-800 leading-relaxed"></textarea>
         <div class="flex gap-2 mt-2">
           <button id="noteDetailBodySave" class="px-3 py-1 rounded bg-green-600 text-white text-sm font-medium hover:bg-green-700">Save</button>
           <button id="noteDetailBodyCancel" class="px-3 py-1 rounded bg-gray-400 text-white text-sm font-medium hover:bg-gray-500">Cancel</button>
         </div>
       </div>
       <div class="space-y-2">
-        <div class="text-sm text-gray-600">Audio</div>
+        <div id="noteDetailAudioLabel" 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 class="space-y-2">
-        <div class="text-sm text-gray-600">Attachments</div>
+        <div id="noteDetailAttachmentsLabel" class="text-sm text-gray-600">Attachments</div>
         <div id="noteDetailAttachments" class="space-y-1 text-sm text-gray-800"></div>
         <div id="noteDetailAttachmentsStatus" class="text-xs text-gray-500"></div>
       </div>
@@ -2463,13 +2463,17 @@
           audioEl.src = audioMatch.url;
           audioEl.classList.remove('hidden');
           audioStatus.textContent = '';
+          document.getElementById('noteDetailAudioLabel').classList.remove('hidden');
         } else {
-          audioStatus.textContent = 'No audio attached.';
+          document.getElementById('noteDetailAudioLabel').classList.add('hidden');
+          audioStatus.textContent = '';
         }
 
         if (!atts.length) {
-          attachmentsStatusEl.textContent = 'No attachments uploaded.';
+          document.getElementById('noteDetailAttachmentsLabel').classList.add('hidden');
+          attachmentsStatusEl.textContent = '';
         } else {
+          document.getElementById('noteDetailAttachmentsLabel').classList.remove('hidden');
           attachmentsStatusEl.textContent = '';
           const frag = document.createDocumentFragment();
           atts.forEach((att) => {