From a9cb30d77b7a4fb70162a62d2a58f0417cfc9c3b Mon Sep 17 00:00:00 2001 From: Yuurin Bee Date: Thu, 5 Feb 2026 13:34:34 +0700 Subject: [PATCH 01/12] User Profile: Add Share Button, Copy, Multi-Theme Support --- src/icons/share.svg | 3 +++ src/index.html | 4 ++++ src/main.js | 29 ++++++++++++++++++++++++++--- src/styles.css | 10 ++++++++-- src/themes/chatstr/dark.css | 1 + src/themes/gifverse/dark.css | 1 + src/themes/pivx/dark.css | 1 + src/themes/satoshi/dark.css | 1 + src/themes/vector/dark.css | 1 + 9 files changed, 46 insertions(+), 5 deletions(-) create mode 100644 src/icons/share.svg diff --git a/src/icons/share.svg b/src/icons/share.svg new file mode 100644 index 0000000..bb663a7 --- /dev/null +++ b/src/icons/share.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index a5f2eea..6c2b6fa 100644 --- a/src/index.html +++ b/src/index.html @@ -510,6 +510,10 @@

Mute

+
+ +

Share

+
diff --git a/src/main.js b/src/main.js index ef20331..b483bde 100644 --- a/src/main.js +++ b/src/main.js @@ -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 = ''; 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'; diff --git a/src/styles.css b/src/styles.css index 1d4ffa4..dd171e7 100644 --- a/src/styles.css +++ b/src/styles.css @@ -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; diff --git a/src/themes/chatstr/dark.css b/src/themes/chatstr/dark.css index 5fe1555..8919a01 100644 --- a/src/themes/chatstr/dark.css +++ b/src/themes/chatstr/dark.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 { diff --git a/src/themes/gifverse/dark.css b/src/themes/gifverse/dark.css index 02bcfe4..be0f8f2 100644 --- a/src/themes/gifverse/dark.css +++ b/src/themes/gifverse/dark.css @@ -6,6 +6,7 @@ --icon-color-primary: #F7FFAE; --voice-progress-secondary: #F7FFAE40; --reply-highlight-border: #FFAECE; + --toast-border-color: #F7FFAE; } .sync-line { diff --git a/src/themes/pivx/dark.css b/src/themes/pivx/dark.css index cfec619..917aba4 100644 --- a/src/themes/pivx/dark.css +++ b/src/themes/pivx/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; } diff --git a/src/themes/satoshi/dark.css b/src/themes/satoshi/dark.css index 98e344b..e12aff4 100644 --- a/src/themes/satoshi/dark.css +++ b/src/themes/satoshi/dark.css @@ -6,6 +6,7 @@ --icon-color-primary: #F7931A; --voice-progress-secondary: #F7931A40; --reply-highlight-border: #F9AA4B; + --toast-border-color: #F7931A; } .sync-line { diff --git a/src/themes/vector/dark.css b/src/themes/vector/dark.css index 34d229c..e0308c5 100644 --- a/src/themes/vector/dark.css +++ b/src/themes/vector/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 { From aa4faab90d58cdca059fffc12a4dfef7dde00587 Mon Sep 17 00:00:00 2001 From: Yuurin Bee Date: Thu, 5 Feb 2026 16:16:20 +0700 Subject: [PATCH 02/12] Frontend: New Design for Create New Chat Page --- src/icons/chat-bubble.svg | 3 + src/icons/help.svg | 3 + src/index.html | 38 +++++++------ src/main.js | 12 +++- src/styles.css | 114 ++++++++++++++++++++++++++++++++------ 5 files changed, 135 insertions(+), 35 deletions(-) create mode 100644 src/icons/chat-bubble.svg create mode 100644 src/icons/help.svg diff --git a/src/icons/chat-bubble.svg b/src/icons/chat-bubble.svg new file mode 100644 index 0000000..488cb2e --- /dev/null +++ b/src/icons/chat-bubble.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/help.svg b/src/icons/help.svg new file mode 100644 index 0000000..04cd781 --- /dev/null +++ b/src/icons/help.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 6c2b6fa..2025916 100644 --- a/src/index.html +++ b/src/index.html @@ -657,29 +657,33 @@

Back

-
-

My nPub Key

-
-
- - -
-
- -

Start a New Chat

+ +

Create New Chat

- Use your friend's 'nPub' key to begin a conversation with them. Enter it below and click the + button. + Enter your contact’s nPub Key below to begin a new chat with them.

This action will also add them as a contact. +
+
+ + + + Need Help? +
+
+ Profile + › + nPub Key + › + Copy
-
- - +
+
+ + +
-
- +

Create New Chat

@@ -684,7 +684,7 @@

Create New Chat

- +