User Profile: Add Share Button, Copy, Multi-Theme Support

Author: YuurinBee

src/icons/share.svg

@@ -510,6 +510,10 @@ <h3 id="profile-secondary-name" class="chat-contact-with-status btn"></h3>
         <span class="icon icon-volume-mute navbar-icon"></span>
         <p class="navbar-text">Mute</p>
       </div>
+      <div id="profile-option-share" class="profile-option">
+        <span class="icon icon-share navbar-icon"></span>
+        <p class="navbar-text">Share</p>
+      </div>
     </div>
     <span id="profile-description" class="chat-contact-status" style="width: 90%; white-space: pre-line; overflow-y: auto; max-height: 225px; font-style: normal; margin-top: 10px;"></span>
     <textarea id="profile-description-editor" class="chat-contact-status profile-description-editor" style="display: none; margin-top: 10px;"></textarea>

src/index.html

@@ -50,6 +50,7 @@ const domProfileOptions = document.getElementById('profile-option-list');
 const domProfileOptionMute = document.getElementById('profile-option-mute');
 const domProfileOptionMessage = document.getElementById('profile-option-message');
 const domProfileOptionNickname = document.getElementById('profile-option-nickname');
+const domProfileOptionShare = document.getElementById('profile-option-share');
 const domProfileId = document.getElementById('profile-id');
 
 const domGroupOverview = document.getElementById('group-overview');
@@ -426,6 +427,13 @@ function showToast(message) {
             left: 50%;
             transform: translateX(-50%);
             background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid var(--toast-border-color);
+            box-shadow: 
+            0 0 4px rgba(0, 0, 0, 0.8),
+            0 0 12px rgba(0, 0, 0, 0.6),
+            0 0 30px rgba(0, 0, 0, 0.4);
             color: white;
             padding: 12px 24px;
             border-radius: 8px;
@@ -6556,9 +6564,9 @@ function renderProfileTab(cProfile) {
         const npub = document.getElementById('profile-npub')?.textContent;
         if (npub) {
             // Copy the full profile URL for easy sharing
-            const profileUrl = `https://vectorapp.io/profile/${npub}`;
-            navigator.clipboard.writeText(profileUrl).then(() => {
-                const copyBtn = e.target.closest('.profile-npub-copy');
+            navigator.clipboard.writeText(npub).then(() => {
+                showToast('Copied');
+                const copyBtn = e.target.closest('#profile-npub-copy');
                 if (copyBtn) {
                     copyBtn.innerHTML = '<span class="icon icon-check"></span>';
                     setTimeout(() => {
@@ -6625,6 +6633,21 @@ function renderProfileTab(cProfile) {
             await invoke('set_nickname', { npub: cProfile.id, nickname: nick });
         }
 
+        // Setup Share option
+        domProfileOptionShare.onclick = () => {
+            const npub = document.getElementById('profile-npub')?.textContent;
+            if (npub) {
+                const profileUrl = `https://vectorapp.io/profile/${npub}`;
+                navigator.clipboard.writeText(profileUrl).then(() => {
+                    // Brief visual feedback
+                    const icon = domProfileOptionShare.querySelector('span');
+                    showToast('Profile Link Copied!');
+                    icon.classList.replace('icon-share', 'icon-check');
+                    setTimeout(() => icon.classList.replace('icon-check', 'icon-share'), 2000);
+                });
+            }
+        };
+
         // Hide edit buttons
         document.querySelector('.profile-avatar-edit').style.display = 'none';
         document.querySelector('.profile-banner-edit').style.display = 'none';

src/main.js

@@ -192,6 +192,12 @@
   mask-image: url("./icons/send.svg");
 }
 
+.icon-share {
+  mask-image: url("./icons/share.svg");
+  -webkit-mask-image: url("./icons/share.svg");
+  background-color: var(--icon-color-primary);
+}
+
 .icon-withdraw {
   mask-image: url("./icons/withdraw.svg");
 }
@@ -703,9 +709,9 @@ html, body {
   height: 50px;
   width: 50px;
   border-radius: 12px;
-  border-color: #393b3c;
+  border-color: #393B3C;
   border-style: solid;
-  border-width: 1px;
+  border-width: 2px;
   color: #b2b2b2;
   background-color: #060606;
   cursor: pointer;

src/styles.css

@@ -6,6 +6,7 @@
   --icon-color-primary: #b188e2;
   --voice-progress-secondary: rgba(177, 136, 226, 0.4);
   --reply-highlight-border: #CD3DD3;
+  --toast-border-color: #b188e2;
 }
 
 .sync-line {

src/themes/chatstr/dark.css

@@ -6,6 +6,7 @@
   --icon-color-primary: #F7FFAE;
   --voice-progress-secondary: #F7FFAE40;
   --reply-highlight-border: #FFAECE;
+  --toast-border-color: #F7FFAE;
 }
 
 .sync-line {

src/themes/gifverse/dark.css

@@ -6,6 +6,7 @@
   --icon-color-primary: #B359FC;
   --voice-progress-secondary: rgba(177, 136, 226, 0.4);
   --reply-highlight-border: #a128fd;
+  --toast-border-color: #B359FC;
   --chat-bg-opacity: 0.04;
 }
 

src/themes/pivx/dark.css

@@ -6,6 +6,7 @@
   --icon-color-primary: #F7931A;
   --voice-progress-secondary: #F7931A40;
   --reply-highlight-border: #F9AA4B;
+    --toast-border-color: #F7931A;
 }
 
 .sync-line {

src/themes/satoshi/dark.css

@@ -5,6 +5,7 @@
   --voice-frequency-glow: rgba(89, 252, 179, 0.8);
   --icon-color-primary: #59fcb3;
   --reply-highlight-border: #33DB98;
+  --toast-border-color: #33DB98;
 }
 
 .sync-line {