From cd0bca1c858360082be4b21723fc979b5f1d906a Mon Sep 17 00:00:00 2001
From: Arc <ben@arc.wales>
Date: Wed, 24 Dec 2025 05:59:51 +0000
Subject: [PATCH] tweak

---
 .../components/direct-messages.html           | 269 +++++++++---------
 templates/nostrmarket/index.html              |  28 +-
 2 files changed, 150 insertions(+), 147 deletions(-)

diff --git a/templates/nostrmarket/components/direct-messages.html b/templates/nostrmarket/components/direct-messages.html
index 9f68511..88ae2c0 100644
--- a/templates/nostrmarket/components/direct-messages.html
+++ b/templates/nostrmarket/components/direct-messages.html
@@ -1,143 +1,146 @@
 <div>
   <q-card>
-    <q-card-section>
-      <div class="row items-center q-col-gutter-sm">
-        <div class="col-auto">
-          <h6 class="text-subtitle1 q-my-none">Messages</h6>
-        </div>
-        <div class="col-auto">
-          <q-badge v-if="unreadMessages" color="primary" outline
-            ><span v-text="unreadMessages"></span>&nbsp; new</q-badge
-          >
-        </div>
-        <div class="col-auto q-ml-auto">
-          <q-btn
-            v-if="activePublicKey"
-            @click="showClientOrders"
-            unelevated
-            outline
-            size="sm"
-            >Client Orders</q-btn
-          >
-        </div>
-      </div>
-    </q-card-section>
-    <q-card-section class="q-pa-none">
-      <q-separator></q-separator>
-    </q-card-section>
-    <q-card-section>
-      <div class="row q-col-gutter-sm items-end">
-        <div class="col" style="min-width: 0">
-          <q-select
-            v-model="activePublicKey"
-            :options="customers.map(c => ({label: buildCustomerLabel(c), value: c.public_key}))"
-            label="Select Customer"
-            emit-value
-            @input="selectActiveCustomer()"
-            :display-value="activePublicKey ? buildCustomerLabel(customers.find(c => c.public_key === activePublicKey)) : ''"
-            class="ellipsis"
-          >
-            <template v-slot:option="scope">
-              <q-item v-bind="scope.itemProps">
-                <q-item-section>
-                  <q-item-label>
-                    <span v-text="scope.opt.label.split('(')[0]"></span>
-                  </q-item-label>
-                  <q-item-label
-                    caption
-                    class="text-mono"
-                    style="word-break: break-all"
-                  >
-                    <span v-text="scope.opt.value"></span>
-                  </q-item-label>
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </div>
-        <div class="col-auto">
-          <q-btn
-            label="ADD"
-            color="primary"
-            unelevated
-            @click="showAddPublicKey = true"
-          >
-            <q-tooltip> Add a public key to chat with </q-tooltip>
-          </q-btn>
-        </div>
-      </div>
-    </q-card-section>
-    <q-card-section>
-      <div class="chat-container" ref="chatCard">
-        <div class="chat-box">
-          <div class="chat-messages" style="height: 45vh">
-            <q-chat-message
-              v-for="(dm, index) in messagesAsJson"
-              :key="index"
-              :name="dm.incoming ? 'customer': 'me'"
-              :sent="!dm.incoming"
-              :stamp="dm.dateFrom"
-              :bg-color="dm.incoming ? 'white' : 'light-green-2'"
-              :class="'chat-mesage-index-'+index"
+    <q-expansion-item
+      icon="chat"
+      label="Messages"
+      header-class="text-grey"
+      expand-separator
+    >
+      <q-card-section class="q-pb-none">
+        <div class="row items-center q-col-gutter-sm">
+          <div class="col-auto">
+            <q-badge v-if="unreadMessages" color="primary" outline
+              ><span v-text="unreadMessages"></span>&nbsp; new</q-badge
+            >
+          </div>
+          <div class="col-auto q-ml-auto">
+            <q-btn
+              v-if="activePublicKey"
+              @click="showClientOrders"
+              unelevated
+              outline
+              size="sm"
+              >Client Orders</q-btn
             >
-              <div v-if="dm.isJson">
-                <div v-if="dm.message.type === 0">
-                  <strong>New order:</strong>
-                </div>
-                <div v-else-if="dm.message.type === 1">
-                  <strong>Reply sent for order: </strong>
-                </div>
-                <div v-else-if="dm.message.type === 2">
-                  <q-badge v-if="dm.message.paid" color="green">Paid </q-badge>
-                  <q-badge v-if="dm.message.shipped" color="green"
-                    >Shipped
-                  </q-badge>
-                </div>
-                <div>
-                  <span v-text="dm.message.message"></span>
-                  <q-badge color="orange">
-                    <span
-                      v-text="dm.message.id"
-                      @click="showOrderDetails(dm.message.id, dm.event_id)"
-                      class="cursor-pointer"
-                    ></span>
-                  </q-badge>
-                </div>
-                <q-badge
-                  @click="showMessageRawData(index)"
-                  class="cursor-pointer"
-                  >...</q-badge
-                >
-              </div>
-              <div v-else><span v-text="dm.message"></span></div>
-            </q-chat-message>
           </div>
         </div>
-        <q-card-section>
-          <q-form @submit="sendDirectMesage" class="full-width chat-input">
-            <q-input
-              ref="newMessage"
-              v-model="newMessage"
-              placeholder="Message"
-              class="full-width"
-              dense
-              outlined
+      </q-card-section>
+      <q-card-section>
+        <div class="row q-col-gutter-sm items-end">
+          <div class="col" style="min-width: 0">
+            <q-select
+              v-model="activePublicKey"
+              :options="customers.map(c => ({label: buildCustomerLabel(c), value: c.public_key}))"
+              label="Select Customer"
+              emit-value
+              @input="selectActiveCustomer()"
+              :display-value="activePublicKey ? buildCustomerLabel(customers.find(c => c.public_key === activePublicKey)) : ''"
+              class="ellipsis"
             >
-              <template>
-                <q-btn
-                  round
-                  dense
-                  flat
-                  type="submit"
-                  icon="send"
-                  color="primary"
-                />
+              <template v-slot:option="scope">
+                <q-item v-bind="scope.itemProps">
+                  <q-item-section>
+                    <q-item-label>
+                      <span v-text="scope.opt.label.split('(')[0]"></span>
+                    </q-item-label>
+                    <q-item-label
+                      caption
+                      class="text-mono"
+                      style="word-break: break-all"
+                    >
+                      <span v-text="scope.opt.value"></span>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
               </template>
-            </q-input>
-          </q-form>
-        </q-card-section>
-      </div>
-    </q-card-section>
+            </q-select>
+          </div>
+          <div class="col-auto">
+            <q-btn
+              label="ADD"
+              color="primary"
+              unelevated
+              @click="showAddPublicKey = true"
+            >
+              <q-tooltip> Add a public key to chat with </q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-section>
+        <div class="chat-container" ref="chatCard">
+          <div class="chat-box">
+            <div class="chat-messages" style="height: 45vh">
+              <q-chat-message
+                v-for="(dm, index) in messagesAsJson"
+                :key="index"
+                :name="dm.incoming ? 'customer': 'me'"
+                :sent="!dm.incoming"
+                :stamp="dm.dateFrom"
+                :bg-color="dm.incoming ? 'white' : 'light-green-2'"
+                :class="'chat-mesage-index-'+index"
+              >
+                <div v-if="dm.isJson">
+                  <div v-if="dm.message.type === 0">
+                    <strong>New order:</strong>
+                  </div>
+                  <div v-else-if="dm.message.type === 1">
+                    <strong>Reply sent for order: </strong>
+                  </div>
+                  <div v-else-if="dm.message.type === 2">
+                    <q-badge v-if="dm.message.paid" color="green"
+                      >Paid
+                    </q-badge>
+                    <q-badge v-if="dm.message.shipped" color="green"
+                      >Shipped
+                    </q-badge>
+                  </div>
+                  <div>
+                    <span v-text="dm.message.message"></span>
+                    <q-badge color="orange">
+                      <span
+                        v-text="dm.message.id"
+                        @click="showOrderDetails(dm.message.id, dm.event_id)"
+                        class="cursor-pointer"
+                      ></span>
+                    </q-badge>
+                  </div>
+                  <q-badge
+                    @click="showMessageRawData(index)"
+                    class="cursor-pointer"
+                    >...</q-badge
+                  >
+                </div>
+                <div v-else><span v-text="dm.message"></span></div>
+              </q-chat-message>
+            </div>
+          </div>
+          <q-card-section>
+            <q-form @submit="sendDirectMesage" class="full-width chat-input">
+              <q-input
+                ref="newMessage"
+                v-model="newMessage"
+                placeholder="Message"
+                class="full-width"
+                dense
+                outlined
+              >
+                <template>
+                  <q-btn
+                    round
+                    dense
+                    flat
+                    type="submit"
+                    icon="send"
+                    color="primary"
+                  />
+                </template>
+              </q-input>
+            </q-form>
+          </q-card-section>
+        </div>
+      </q-card-section>
+    </q-expansion-item>
   </q-card>
   <div>
     <q-dialog v-model="showAddPublicKey" position="top">
diff --git a/templates/nostrmarket/index.html b/templates/nostrmarket/index.html
index ac960e9..c3ec16d 100644
--- a/templates/nostrmarket/index.html
+++ b/templates/nostrmarket/index.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %} {% from "macros.jinja" import window_vars with context
 %} {% block page %}
 <div class="row q-col-gutter-md">
-  <div class="col-12 col-md-7 q-gutter-y-md">
+  <div class="col-12 col-md-7 col-lg-8 q-gutter-y-md">
     <div v-if="merchant && merchant.id">
       <q-card>
         <div class="row items-center no-wrap">
@@ -168,7 +168,7 @@
     </q-card>
   </div>
 
-  <div class="col-12 col-md-5 q-gutter-y-md">
+  <div class="col-12 col-md-5 col-lg-4 q-gutter-y-md">
     <div v-if="g.user.admin" class="col-12 q-mb-lg">
       <q-card>
         <q-card-section class="q-pa-md">
@@ -342,6 +342,18 @@
         </q-card-section>
       </q-card>
     </div>
+    <div v-if="merchant && merchant.id" class="col-12">
+      <direct-messages
+        ref="directMessagesRef"
+        :inkey="g.user.wallets[0].inkey"
+        :adminkey="g.user.wallets[0].adminkey"
+        :active-chat-customer="activeChatCustomer"
+        :merchant-id="merchant.id"
+        @customer-selected="filterOrdersForCustomer"
+        @order-selected="showOrderDetails"
+      >
+      </direct-messages>
+    </div>
     <div class="col-12">
       <q-card>
         <q-expansion-item
@@ -370,18 +382,6 @@
         </q-expansion-item>
       </q-card>
     </div>
-    <div v-if="merchant && merchant.id" class="col-12">
-      <direct-messages
-        ref="directMessagesRef"
-        :inkey="g.user.wallets[0].inkey"
-        :adminkey="g.user.wallets[0].adminkey"
-        :active-chat-customer="activeChatCustomer"
-        :merchant-id="merchant.id"
-        @customer-selected="filterOrdersForCustomer"
-        @order-selected="showOrderDetails"
-      >
-      </direct-messages>
-    </div>
   </div>
 
   <div>