From ca1c0b1cd8b8d435bc3bef62e2e8128f0b915924 Mon Sep 17 00:00:00 2001
From: thesn10 <38666407+thesn10@users.noreply.github.com>
Date: Thu, 25 Jun 2026 19:59:03 +0200
Subject: [PATCH] fix: filter highlight, nav alignment, button centering,
 listing title, dashboard listing name

---
 app/src/components/CreateListingForm.tsx |  3 +++
 app/src/components/Dashboard.tsx         |  4 ++--
 app/src/components/EscrowsTable.tsx      |  4 ++--
 app/src/components/ListingDetail.tsx     | 10 ++++++--
 app/src/components/ListingsTable.tsx     | 30 +++++++++++++++++-------
 app/src/components/Nav.tsx               |  3 +++
 app/src/components/ui/Button.tsx         |  3 +++
 7 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/app/src/components/CreateListingForm.tsx b/app/src/components/CreateListingForm.tsx
index 88f7993..b0eb1a7 100644
--- a/app/src/components/CreateListingForm.tsx
+++ b/app/src/components/CreateListingForm.tsx
@@ -87,6 +87,9 @@ function CurrencyToggle({
 }) {
   const active = (on: boolean): React.CSSProperties => ({
     flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     padding: 11,
     borderRadius: 10,
     fontSize: 13,
diff --git a/app/src/components/Dashboard.tsx b/app/src/components/Dashboard.tsx
index f1f1000..981e6a4 100644
--- a/app/src/components/Dashboard.tsx
+++ b/app/src/components/Dashboard.tsx
@@ -168,7 +168,7 @@ export function Dashboard() {
                   >
                     <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                       <span style={{ fontWeight: 600, fontSize: 15 }}>
-                        {l.data.metadataUri || abbrev(l.address)}
+                        Listing #{String(l.data.listingId)}
                       </span>
                       <Badge color={sc.color} bg={sc.bg}>
                         {l.data.isActive ? 'Active' : 'Inactive'}
@@ -182,7 +182,7 @@ export function Dashboard() {
                         fontFamily: 'var(--font-mono)',
                       }}
                     >
-                      #{String(l.data.listingId)} · {fmtSol(l.data.price)} · {avail}/
+                      {abbrev(l.address)} · {fmtSol(l.data.price)} · {avail}/
                       {String(l.data.quantity)} avail · {String(l.data.quantityReserved)} pending
                     </div>
                   </div>
diff --git a/app/src/components/EscrowsTable.tsx b/app/src/components/EscrowsTable.tsx
index 4807fe3..04264f7 100644
--- a/app/src/components/EscrowsTable.tsx
+++ b/app/src/components/EscrowsTable.tsx
@@ -82,8 +82,8 @@ export function EscrowsTable() {
                   borderRadius: 7,
                   fontSize: 12.5,
                   fontWeight: 600,
-                  color: filter === f.key ? 'var(--tx)' : 'var(--mut)',
-                  background: filter === f.key ? 'var(--bg2)' : 'transparent',
+                  color: filter === f.key ? '#0b0613' : 'var(--mut)',
+                  background: filter === f.key ? 'linear-gradient(135deg,var(--acc),var(--acc2))' : 'transparent',
                   border: 'none',
                   cursor: 'pointer',
                   whiteSpace: 'nowrap',
diff --git a/app/src/components/ListingDetail.tsx b/app/src/components/ListingDetail.tsx
index 1d07fa2..47837f4 100644
--- a/app/src/components/ListingDetail.tsx
+++ b/app/src/components/ListingDetail.tsx
@@ -54,16 +54,22 @@ export function ListingDetail({ pk, walletAddress, onUpdate, onClose, onPlaceOrd
             LISTING ACCOUNT · #{String(d.listingId)}
           </div>
           <h1 style={{ margin: 0, fontSize: 26, fontWeight: 700, letterSpacing: '-.02em' }}>
-            {d.metadataUri || abbrev(pk)}
+            {abbrev(pk)}
           </h1>
         </div>
         <Badge color={sc.color} bg={sc.bg}>{d.isActive ? 'Active' : 'Inactive'}</Badge>
       </div>
+      {d.metadataUri && (
+        <p style={{ margin: '0 0 24px', fontSize: 14, color: 'var(--mut)', maxWidth: 620, lineHeight: 1.55 }}>
+          <a href={d.metadataUri} target="_blank" rel="noreferrer" style={{ color: 'var(--acc2light)' }}>{d.metadataUri}</a>
+        </p>
+      )}
 
       <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 18, alignItems: 'start', marginBottom: 24 }}>
         {/* Left: account fields */}
         <div style={{ background: 'var(--bg2)', border: '1px solid var(--bd)', borderRadius: 'var(--radius)', padding: '8px 22px 16px' }}>
           <div style={{ fontSize: 11, letterSpacing: '.13em', color: 'var(--mut)', fontWeight: 600, padding: '14px 0 4px' }}>ACCOUNT FIELDS</div>
+          <FieldRow label="Address"><MonoChip value={abbrev(pk)} onCopy={() => navigator.clipboard.writeText(pk)} /></FieldRow>
           <FieldRow label="Listing ID"><span style={{ fontSize: 13.5, fontWeight: 600 }}>#{String(d.listingId)}</span></FieldRow>
           <FieldRow label="Seller"><MonoChip value={abbrev(d.seller)} onCopy={() => navigator.clipboard.writeText(d.seller)} onClick={() => router.push(`/search?q=${d.seller}`)} /></FieldRow>
           <FieldRow label="Price"><span style={{ fontSize: 13.5, fontWeight: 600 }}>{fmtListingPrice()}</span></FieldRow>
@@ -137,7 +143,7 @@ export function ListingDetail({ pk, walletAddress, onUpdate, onClose, onPlaceOrd
                 <Button variant="danger" onClick={onClose}>Close Listing</Button>
               </div>
             )}
-            {canPlace && <Button onClick={onPlaceOrder}>Place Order</Button>}
+            {canPlace && <Button style={{ width: '100%', padding: 11 }} onClick={onPlaceOrder}>Place Order</Button>}
             {!walletAddress && <div style={{ fontSize: 13, color: 'var(--mut)', lineHeight: 1.5 }}>Connect a wallet to place an order or manage this listing.</div>}
             {walletAddress && !isSeller && !canPlace && <div style={{ fontSize: 13, color: 'var(--mut)', lineHeight: 1.5 }}>No actions available — listing is inactive or out of stock.</div>}
           </div>
diff --git a/app/src/components/ListingsTable.tsx b/app/src/components/ListingsTable.tsx
index 7c1c722..9e31dc4 100644
--- a/app/src/components/ListingsTable.tsx
+++ b/app/src/components/ListingsTable.tsx
@@ -59,15 +59,27 @@ export function ListingsTable() {
             style={{ height: 38, width: 220, padding: '0 13px', background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 10, fontSize: 13, fontFamily: 'var(--font-mono)', outline: 'none' }}
           />
           <div style={{ display: 'flex', background: 'var(--bg3)', border: '1px solid var(--bd)', borderRadius: 10, padding: 3 }}>
-            {FILTERS.map((f) => (
-              <button
-                key={f.key}
-                onClick={() => setFilter(f.key)}
-                style={{ padding: '6px 13px', borderRadius: 7, fontSize: 12.5, fontWeight: 600, color: filter === f.key ? 'var(--tx)' : 'var(--mut)', background: filter === f.key ? 'var(--bg2)' : 'transparent' }}
-              >
-                {f.label}
-              </button>
-            ))}
+            {FILTERS.map((f) => {
+              const active = filter === f.key
+              return (
+                <button
+                  key={f.key}
+                  onClick={() => setFilter(f.key)}
+                  style={{
+                    padding: '6px 13px',
+                    borderRadius: 7,
+                    fontSize: 12.5,
+                    fontWeight: 600,
+                    color: active ? '#0b0613' : 'var(--mut)',
+                    background: active ? 'linear-gradient(135deg,var(--acc),var(--acc2))' : 'transparent',
+                    border: 'none',
+                    cursor: 'pointer',
+                  }}
+                >
+                  {f.label}
+                </button>
+              )
+            })}
           </div>
         </div>
       </div>
diff --git a/app/src/components/Nav.tsx b/app/src/components/Nav.tsx
index 9127ef1..d8dcbb6 100644
--- a/app/src/components/Nav.tsx
+++ b/app/src/components/Nav.tsx
@@ -147,6 +147,9 @@ export function Nav() {
         })}
       </div>
 
+      {/* Spacer — pushes right-side controls to the edge */}
+      <div style={{ flex: 1 }} />
+
       {/* Network picker */}
       <div ref={netRef} style={{ position: 'relative', flexShrink: 0 }}>
         <button
diff --git a/app/src/components/ui/Button.tsx b/app/src/components/ui/Button.tsx
index 74bbc6e..ef8b42b 100644
--- a/app/src/components/ui/Button.tsx
+++ b/app/src/components/ui/Button.tsx
@@ -36,6 +36,9 @@ export function Button({ variant = 'primary', children, style, disabled, ...rest
       {...rest}
       disabled={disabled}
       style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         padding: '11px 18px',
         borderRadius: 'var(--radius)',
         fontWeight: 700,