From f22a8f15c07c91a94fda5380bab8dbda419b19c5 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 17 Oct 2025 12:22:31 +0200
Subject: [PATCH] style(debug): improve debug page styling and layout
 consistency

---
 src/components/Debug.tsx | 64 ++++++++++++++++++++++------------------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/src/components/Debug.tsx b/src/components/Debug.tsx
index f3ec4ef5..a82f88d8 100644
--- a/src/components/Debug.tsx
+++ b/src/components/Debug.tsx
@@ -90,20 +90,21 @@ const Debug: React.FC = () => {
 
   return (
     <div className="content-panel">
-      <h2>Debug / NIP-46 Tools</h2>
-
-      <div className="flex items-center gap-2 mb-3">
-        <button className="btn btn-outline" onClick={toggleDebug}>{debugEnabled ? 'Disable' : 'Enable'} debug logs</button>
-        <button className="btn btn-ghost" onClick={() => setLogs([])}>Clear logs</button>
-        <span className="opacity-70">Active pubkey:</span> <code>{pubkey || 'none'}</code>
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold mb-2">Debug / NIP-46 Tools</h2>
+        <div className="flex items-center gap-2 mb-3">
+          <button className="btn btn-outline" onClick={toggleDebug}>{debugEnabled ? 'Disable' : 'Enable'} debug logs</button>
+          <button className="btn btn-ghost" onClick={() => setLogs([])}>Clear logs</button>
+          <span className="opacity-70">Active pubkey:</span> <code className="text-sm">{pubkey || 'none'}</code>
+        </div>
       </div>
 
       <div className="grid" style={{ gap: 12 }}>
         <div className="card">
           <div className="card-body">
-            <h3>Payload</h3>
-            <textarea className="textarea" value={payload} onChange={e => setPayload(e.target.value)} rows={3} />
-            <div className="flex gap-2 mt-2">
+            <h3 className="text-lg font-semibold mb-3">Payload</h3>
+            <textarea className="textarea w-full" value={payload} onChange={e => setPayload(e.target.value)} rows={3} />
+            <div className="flex gap-2 mt-3">
               <button className="btn btn-primary" onClick={() => doEncrypt('nip44')} disabled={!hasNip44}>Encrypt (nip44)</button>
               <button className="btn" onClick={() => doEncrypt('nip04')} disabled={!hasNip04}>Encrypt (nip04)</button>
               <button className="btn btn-outline" onClick={() => { setCipher44(''); setCipher04(''); setPlain44(''); setPlain04(''); setTEncrypt44(null); setTEncrypt04(null); setTDecrypt44(null); setTDecrypt04(null) }}>Clear</button>
@@ -114,16 +115,16 @@ const Debug: React.FC = () => {
         <div className="grid" style={{ gap: 12, gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)' }}>
           <div className="card">
             <div className="card-body">
-              <h3>nip44</h3>
-              <div className="flex flex-wrap items-center gap-2 mb-2">
+              <h3 className="text-lg font-semibold mb-3">nip44</h3>
+              <div className="flex flex-wrap items-center gap-2 mb-3">
                 <Stat label="enc" value={tEncrypt44 !== null ? `${tEncrypt44}ms` : null} />
                 <Stat label="dec" value={tDecrypt44 !== null ? `${tDecrypt44}ms` : null} />
               </div>
-              <label className="opacity-70">cipher</label>
+              <label className="block text-sm opacity-70 mb-2">cipher</label>
               <CodeBox value={cipher44} />
-              <div className="flex gap-2 mt-2">
+              <div className="flex gap-2 mt-3">
                 <button className="btn btn-secondary" onClick={() => doDecrypt('nip44')} disabled={!cipher44}>Decrypt (nip44)</button>
-                <span>Plain:</span>
+                <span className="text-sm opacity-70">Plain:</span>
               </div>
               <CodeBox value={plain44} />
             </div>
@@ -131,16 +132,16 @@ const Debug: React.FC = () => {
 
           <div className="card">
             <div className="card-body">
-              <h3>nip04</h3>
-              <div className="flex flex-wrap items-center gap-2 mb-2">
+              <h3 className="text-lg font-semibold mb-3">nip04</h3>
+              <div className="flex flex-wrap items-center gap-2 mb-3">
                 <Stat label="enc" value={tEncrypt04 !== null ? `${tEncrypt04}ms` : null} />
                 <Stat label="dec" value={tDecrypt04 !== null ? `${tDecrypt04}ms` : null} />
               </div>
-              <label className="opacity-70">cipher</label>
+              <label className="block text-sm opacity-70 mb-2">cipher</label>
               <CodeBox value={cipher04} />
-              <div className="flex gap-2 mt-2">
+              <div className="flex gap-2 mt-3">
                 <button className="btn btn-secondary" onClick={() => doDecrypt('nip04')} disabled={!cipher04}>Decrypt (nip04)</button>
-                <span>Plain:</span>
+                <span className="text-sm opacity-70">Plain:</span>
               </div>
               <CodeBox value={plain04} />
             </div>
@@ -149,16 +150,21 @@ const Debug: React.FC = () => {
 
         <div className="card">
           <div className="card-body">
-            <h3>Live Logs</h3>
-            <div style={{ maxHeight: 300, overflow: 'auto', fontFamily: 'monospace', fontSize: 12, lineHeight: 1.4 }}>
-              {logs.slice(-200).map((l, i) => (
-                <div key={i}>
-                  [{new Date(l.ts).toLocaleTimeString()}] {l.level.toUpperCase()} {l.source}: {l.message}
-                  {l.data !== undefined && (
-                    <span> — {typeof l.data === 'string' ? l.data : JSON.stringify(l.data)}</span>
-                  )}
-                </div>
-              ))}
+            <h3 className="text-lg font-semibold mb-3">Live Logs</h3>
+            <div className="text-sm opacity-70 mb-3">Recent NIP-46 activity</div>
+            <div className="max-h-64 overflow-y-auto font-mono text-xs leading-relaxed">
+              {logs.length === 0 ? (
+                <div className="text-sm opacity-50 italic">No logs yet</div>
+              ) : (
+                logs.slice(-200).map((l, i) => (
+                  <div key={i} className="mb-1 p-2 bg-gray-100 dark:bg-gray-800 rounded">
+                    <span className="opacity-70">[{new Date(l.ts).toLocaleTimeString()}]</span> <span className="font-semibold">{l.level.toUpperCase()}</span> {l.source}: {l.message}
+                    {l.data !== undefined && (
+                      <span className="opacity-70"> — {typeof l.data === 'string' ? l.data : JSON.stringify(l.data)}</span>
+                    )}
+                  </div>
+                ))
+              )}
             </div>
           </div>
         </div>