Refine Notes list header: scale buttons, replace Refresh with icon, align button group

This commit is contained in:
2026-01-10 22:34:37 +00:00
parent a168fe2b7c
commit 53bf74e6f4
2 changed files with 38 additions and 25 deletions
+21 -25
View File
@@ -54,15 +54,18 @@
<!-- 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 class="flex-shrink-0">
<div class="flex items-center justify-between gap-3">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<div>
<h2 class="text-2xl font-bold text-gray-800">Notes</h2>
<p class="text-sm text-gray-600">Browse all notes and open details.</p>
<h2 class="text-lg sm:text-2xl font-bold text-gray-800">Notes</h2>
</div>
<div class="flex gap-2">
<button id="refreshNotesBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Refresh</button>
<button id="newNoteBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Note</button>
<button id="conversationsBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">Conversations</button>
<div class="flex gap-2 flex-wrap">
<button id="refreshNotesBtn" class="h-6 px-1.5 py-0 rounded hover:bg-gray-200 text-gray-700 transition flex items-center justify-center" title="Refresh notes">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="w-5 h-5">
<path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
</svg>
</button>
<button id="newNoteBtn" class="h-6 px-2 sm:px-3 py-0 text-xs leading-none rounded bg-secondary text-white font-semibold flex items-center justify-center">New Note</button>
<button id="conversationsBtn" class="h-6 px-2 sm:px-3 py-0 text-xs leading-none rounded bg-secondary text-white font-semibold flex items-center justify-center">Conversations</button>
</div>
</div>
<div class="w-full mt-3">
@@ -120,12 +123,9 @@
<!-- 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 class="flex items-center justify-between gap-3">
<div class="flex items-center gap-2">
<button id="backToListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
<h2 class="text-2xl font-bold text-gray-800">New Note</h2>
</div>
<span id="graphStatus" class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600">Graph: checking…</span>
<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>
</div>
<div class="space-y-4">
<div>
@@ -228,14 +228,13 @@
<!-- Conversations List Container -->
<div id="conversationsContainer" 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 class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<div>
<h2 class="text-2xl font-bold text-gray-800">Conversations</h2>
<p class="text-sm text-gray-600">Browse all conversations.</p>
<h2 class="text-lg sm:text-2xl font-bold text-gray-800">Conversations</h2>
</div>
<div class="flex gap-2">
<button id="backToListFromConversationsBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Notes</button>
<button id="newConversationBtn" class="px-4 py-2 rounded bg-secondary text-white font-semibold">New Conversation</button>
<div class="flex gap-2 flex-wrap">
<button id="backToListFromConversationsBtn" 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>
<button id="newConversationBtn" class="px-3 sm:px-4 py-1 sm:py-2 text-xs sm:text-sm rounded bg-secondary text-white font-semibold">New Conversation</button>
</div>
</div>
</div>
@@ -248,12 +247,9 @@
<!-- Conversation Form Container -->
<div id="conversationContainer" class="hidden self-center bg-white rounded-2xl shadow-2xl max-w-xl w-full p-8 space-y-6">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-2">
<button id="backToConversationsListBtn" class="px-3 py-2 rounded border border-gray-200 text-gray-700 hover:bg-gray-100">Back to Conversations</button>
<h2 class="text-2xl font-bold text-gray-800">New Conversation</h2>
</div>
<span id="conversationGraphStatus" class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600">Graph: checking…</span>
<div class="flex items-center gap-2 flex-wrap">
<button id="backToConversationsListBtn" 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 Conversations</button>
<h2 class="text-lg sm:text-2xl font-bold text-gray-800">New Conversation</h2>
</div>
<div class="space-y-4">