Refine Notes list header: scale buttons, replace Refresh with icon, align button group
This commit is contained in:
+21
-25
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user