expansion button and copy button

templates/nostrclient/index.html

@@ -99,8 +99,18 @@
     <q-card>
       <q-card-section>
         <div class="row">
-          <div class="col-9">
+          <div class="col">
             <div class="text-weight-bold">
+              <q-btn
+                flat
+                dense
+                size="0.6rem"
+                class="q-px-none q-mx-none"
+                color="grey"
+                icon="content_copy"
+                @click="copyText(`wss://${host}/nostrclient/api/v1/relay`)"
+                ><q-tooltip>Copy address</q-tooltip></q-btn
+              >
               Your endpoint:
               <q-badge
                 outline
@@ -109,15 +119,15 @@
               />
             </div>
           </div>
-          <div class="col-3">
-            <q-btn @click="toggleTestPanel" :label="testData.show ? 'Close' : 'Test Endpoint' " unelevated color="primary" class="float-right"
-              ></q-btn
-            >
-          </div>
         </div>
       </q-card-section>
-      <q-separator v-if="testData.show"></q-separator>
+      <q-expansion-item
-      <q-card-section v-if="testData.show">
+        group="advanced"
+        icon="settings"
+        label="Test this endpoint"
+      >
+        <q-separator></q-separator>
+        <q-card-section>
           <div class="row">
             <div class="col-3">
               <span>Sender Private Key:</span>
@@ -128,7 +138,7 @@
                 v-model="testData.senderPrivateKey"
                 dense
                 filled
-              label="Test Private Key (optional)"
+                label="Private Key (optional)"
               ></q-input>
             </div>
           </div>
@@ -136,14 +146,10 @@
             <div class="col-3"></div>
             <div class="col-9">
               <q-badge color="yellow" text-color="black">
-              <span
+                <span>
-                >This should be a temp private (throw away). No not user your
+                  No not use your real private key! Leave empty for a randomly
-                own private key!
+                  generated key.</span
-              </span>
+                >
-            </q-badge>
-
-            <q-badge color="yellow" text-color="black">
-              <span> It is optional. One can be generated for you!</span>
               </q-badge>
             </div>
           </div>
@@ -195,7 +201,9 @@
             <div class="col-3"></div>
             <div class="col-9">
               <q-badge color="yellow" text-color="black">
-              <span>This is the recipient of the message. Field required.</span>
+                <span
+                  >This is the recipient of the message. Field required.</span
+                >
               </q-badge>
             </div>
           </div>
@@ -212,8 +220,9 @@
             </div>
           </div>
         </q-card-section>
-      <q-separator  v-if="testData.show"></q-separator>
+
-      <q-card-section  v-if="testData.show">
+        <q-separator></q-separator>
+        <q-card-section>
           <div class="row q-mt-md">
             <div class="col-3">
               <span>Sent Data:</span>
@@ -245,6 +254,7 @@
             </div>
           </div>
         </q-card-section>
+      </q-expansion-item>
     </q-card>
   </div>
 
@@ -432,7 +442,10 @@
         this.testData = {
           show: true,
           wsConnection: null,
-          senderPrivateKey: this.$q.localStorage.getItem('lnbits.nostrclient.senderPrivateKey') || '',
+          senderPrivateKey:
+            this.$q.localStorage.getItem(
+              'lnbits.nostrclient.senderPrivateKey'
+            ) || '',
           recieverPublicKey: null,
           message: null,
           sentData: '',