From 33c62ba1eaad7115def4403fcefc6c41f258a619 Mon Sep 17 00:00:00 2001
From: PatMulligan <43773168+PatMulligan@users.noreply.github.com>
Date: Mon, 15 Sep 2025 08:48:13 +0200
Subject: [PATCH] CHORE: Improve UI (#112)

* Refactor merchant details layout for improved responsiveness and styling in index.html

* Revamp key pair component layout with improved styling and functionality. Added a header with a toggle for showing the private key, enhanced QR code display for both public and private keys, and included copy buttons for better user interaction.

Update key pair component styling and functionality: adjust QR code dimensions, improve key display format with truncation, and refine button margins for enhanced user experience.

Add 'show-buttons' prop to QR code components in key pair template for improved functionality

Update key pair component layout to use 'col-sm-6' for responsive design of QR code sections, enhancing display on smaller screens.

* Enhance direct messages component layout with improved styling and responsiveness. Updated class names for better alignment, added ellipsis for long customer labels, and modified button styles for consistency. Improved select options display with custom templates for better user experience.

* Refactor customer label generation in direct messages component for improved readability. Added checks for undefined customer data, enhanced label formatting with truncation for long descriptions, and adjusted unread message display format.

* make format
---
 static/components/direct-messages.js          |  15 ++-
 .../components/direct-messages.html           |  38 ++++--
 .../nostrmarket/components/key-pair.html      | 113 +++++++++++++-----
 .../nostrmarket/components/stall-list.html    |   1 -
 templates/nostrmarket/index.html              |  35 +++---
 5 files changed, 138 insertions(+), 64 deletions(-)

diff --git a/static/components/direct-messages.js b/static/components/direct-messages.js
index b9dee13..3bb1aa0 100644
--- a/static/components/direct-messages.js
+++ b/static/components/direct-messages.js
@@ -50,13 +50,16 @@ window.app.component('direct-messages', {
   methods: {
     sendMessage: async function () {},
     buildCustomerLabel: function (c) {
-      let label = `${c.profile.name || 'unknown'} ${c.profile.about || ''}`
-      if (c.unread_messages) {
-        label += `[new: ${c.unread_messages}]`
+      if (!c) return ''
+      let label = c.profile.name || 'unknown'
+      if (c.profile.about) {
+        label += ` - ${c.profile.about.substring(0, 30)}`
+        if (c.profile.about.length > 30) label += '...'
       }
-      label += `  (${c.public_key.slice(0, 16)}...${c.public_key.slice(
-        c.public_key.length - 16
-      )}`
+      if (c.unread_messages) {
+        label = `[${c.unread_messages} new] ${label}`
+      }
+      label += ` (${c.public_key.slice(0, 8)}...${c.public_key.slice(-8)})`
       return label
     },
     getDirectMessages: async function (pubkey) {
diff --git a/templates/nostrmarket/components/direct-messages.html b/templates/nostrmarket/components/direct-messages.html
index 8950923..9f68511 100644
--- a/templates/nostrmarket/components/direct-messages.html
+++ b/templates/nostrmarket/components/direct-messages.html
@@ -1,22 +1,22 @@
 <div>
   <q-card>
     <q-card-section>
-      <div class="row">
-        <div class="col-2">
+      <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-4">
+        <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-6">
+        <div class="col-auto q-ml-auto">
           <q-btn
             v-if="activePublicKey"
             @click="showClientOrders"
             unelevated
             outline
-            class="float-right"
+            size="sm"
             >Client Orders</q-btn
           >
         </div>
@@ -26,22 +26,40 @@
       <q-separator></q-separator>
     </q-card-section>
     <q-card-section>
-      <div class="row">
-        <div class="col-10">
+      <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-2">
+        <div class="col-auto">
           <q-btn
-            label="Add"
+            label="ADD"
             color="primary"
-            class="float-right q-mt-md"
+            unelevated
             @click="showAddPublicKey = true"
           >
             <q-tooltip> Add a public key to chat with </q-tooltip>
diff --git a/templates/nostrmarket/components/key-pair.html b/templates/nostrmarket/components/key-pair.html
index 2b65737..911e057 100644
--- a/templates/nostrmarket/components/key-pair.html
+++ b/templates/nostrmarket/components/key-pair.html
@@ -1,40 +1,93 @@
 <div>
   <q-separator></q-separator>
-  <div class="row q-mt-md">
-    <div class="col-6 q-pl-xl">Public Key</div>
-    <div class="col-6">
-      <q-toggle v-model="showPrivateKey" class="q-pl-xl" color="secodary">
-        Show Private Key
-      </q-toggle>
-    </div>
+
+  <!-- Header with toggle -->
+  <div class="row items-center justify-between q-mt-md q-px-md">
+    <div class="text-subtitle2">Keys</div>
+    <q-toggle
+      v-model="showPrivateKey"
+      color="primary"
+      label="Show Private Key"
+    />
   </div>
 
-  <div class="row">
-    <div class="col-6">
-      <div class="text-center q-mb-lg cursor-pointer">
-        <q-responsive :ratio="1" class="q-mx-xl" @click="copyText(publicKey)">
-          <lnbits-qrcode
-            :value="publicKey"
-            :options="{width: 250}"
-            class="rounded-borders"
-          ></lnbits-qrcode>
-        </q-responsive>
-        <small><span v-text="publicKey"></span><br />Click to copy</small>
-      </div>
+  <!-- QR Codes Container -->
+  <div class="row q-col-gutter-md q-pa-md">
+    <!-- Public Key QR -->
+    <div class="col-12" :class="showPrivateKey ? 'col-sm-6' : ''">
+      <q-card flat bordered>
+        <q-card-section class="text-center">
+          <div class="text-subtitle2 q-mb-sm">Public Key</div>
+          <div
+            class="cursor-pointer q-mx-auto"
+            style="max-width: 200px"
+            @click="copyText(publicKey)"
+          >
+            <q-responsive :ratio="1">
+              <lnbits-qrcode
+                :value="publicKey"
+                :options="{width: 200}"
+                :show-buttons="false"
+                class="rounded-borders"
+              ></lnbits-qrcode>
+            </q-responsive>
+          </div>
+          <div class="q-mt-md text-caption text-mono" style="padding: 0 16px">
+            <span v-text="publicKey.substring(0, 8)"></span>...<span
+              v-text="publicKey.substring(publicKey.length - 8)"
+            ></span>
+          </div>
+          <q-btn
+            flat
+            dense
+            size="sm"
+            icon="content_copy"
+            label="Click to copy"
+            @click="copyText(publicKey)"
+            class="q-mt-xs"
+          />
+        </q-card-section>
+      </q-card>
     </div>
-    <div class="col-6 cursor-pointer">
-      <div v-if="showPrivateKey">
-        <div class="text-center q-mb-lg">
-          <q-responsive
-            :ratio="1"
-            class="q-mx-xl"
+
+    <!-- Private Key QR (conditional) -->
+    <div v-if="showPrivateKey" class="col-12 col-sm-6">
+      <q-card flat bordered>
+        <q-card-section class="text-center">
+          <div class="text-subtitle2 q-mb-sm text-warning">
+            <q-icon name="warning"></q-icon>
+            Private Key (Keep Secret!)
+          </div>
+          <div
+            class="cursor-pointer q-mx-auto"
+            style="max-width: 200px"
             @click="copyText(privateKey)"
           >
-            <lnbits-qrcode :value="privateKey"></lnbits-qrcode>
-          </q-responsive>
-          <small><span v-text="privateKey"></span><br />Click to copy</small>
-        </div>
-      </div>
+            <q-responsive :ratio="1">
+              <lnbits-qrcode
+                :value="privateKey"
+                :options="{width: 200}"
+                :show-buttons="false"
+                class="rounded-borders"
+              ></lnbits-qrcode>
+            </q-responsive>
+          </div>
+          <div class="q-mt-md text-caption text-mono" style="padding: 0 16px">
+            <span v-text="privateKey.substring(0, 8)"></span>...<span
+              v-text="privateKey.substring(privateKey.length - 8)"
+            ></span>
+          </div>
+          <q-btn
+            flat
+            dense
+            size="sm"
+            icon="content_copy"
+            label="Click to copy"
+            @click="copyText(privateKey)"
+            class="q-mt-xs"
+          />
+        </q-card-section>
+      </q-card>
     </div>
   </div>
 </div>
diff --git a/templates/nostrmarket/components/stall-list.html b/templates/nostrmarket/components/stall-list.html
index 632eeaa..673e8a7 100644
--- a/templates/nostrmarket/components/stall-list.html
+++ b/templates/nostrmarket/components/stall-list.html
@@ -62,7 +62,6 @@
           />
         </q-td>
 
-     
         <q-td key="id" :props="props"
           ><span v-text="shortLabel(props.row.name)"></span
         ></q-td>
diff --git a/templates/nostrmarket/index.html b/templates/nostrmarket/index.html
index 9b1cafc..d95d965 100644
--- a/templates/nostrmarket/index.html
+++ b/templates/nostrmarket/index.html
@@ -5,8 +5,8 @@
     <div v-if="merchant && merchant.id">
       <q-card>
         <q-card-section>
-          <div class="row">
-            <div class="col-4">
+          <div class="row items-center q-col-gutter-sm">
+            <div class="col-12 col-sm-auto">
               <merchant-details
                 :merchant-id="merchant.id"
                 :inkey="g.user.wallets[0].inkey"
@@ -16,25 +16,26 @@
                 @merchant-deleted="handleMerchantDeleted"
               ></merchant-details>
             </div>
-            <div class="col-6">
-              <q-toggle
-                @update:model-value="toggleMerchantState()"
-                size="md"
-                checked-icon="check"
-                v-model="merchant.config.active"
-                color="primary"
-                unchecked-icon="clear"
-                class="float-left"
-              />
-              <span
-                v-text="merchant.config.active ? 'Accepting Orders': 'Orders Paused'"
-              ></span>
+            <div class="col-12 col-sm-auto q-mx-sm">
+              <div class="row items-center no-wrap">
+                <q-toggle
+                  @update:model-value="toggleMerchantState()"
+                  size="md"
+                  checked-icon="check"
+                  v-model="merchant.config.active"
+                  color="primary"
+                  unchecked-icon="clear"
+                />
+                <span
+                  class="q-ml-sm"
+                  v-text="merchant.config.active ? 'Accepting Orders': 'Orders Paused'"
+                ></span>
+              </div>
             </div>
-            <div class="col-2">
+            <div class="col-12 col-sm-auto q-ml-sm-auto">
               <shipping-zones
                 :inkey="g.user.wallets[0].inkey"
                 :adminkey="g.user.wallets[0].adminkey"
-                class="float-right"
               ></shipping-zones>
             </div>
           </div>