@@ -1044,6 +1052,12 @@
Your Invite Code
+ 
-
+
+
+
+ Back
+
Private & Encrypted Messenger
@@ -1055,25 +1069,29 @@
Private & Encrypted Messenger
-
+
+
+
-
Enter Invite Code
Enter your invite code to join Vector Beta
-
-
+
+
+
+
diff --git a/src/main.js b/src/main.js
index ef20331..91c4b34 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,6 +22,11 @@ const domLoginImport = document.getElementById('login-import');
const domLoginInput = document.getElementById('login-input');
const domLoginBtn = document.getElementById('login-btn');
+const domLoginImportError = document.getElementById('login-import-error');
+
+const domLoginBackBar = document.getElementById('login-back-bar');
+const domLoginBackBtn = document.getElementById('login-back-btn');
+
const domLoginInvite = document.getElementById('login-invite');
const domInviteInput = document.getElementById('invite-input');
const domInviteBtn = document.getElementById('invite-btn');
@@ -50,6 +55,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 +432,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, #161616);
+ 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;
@@ -438,14 +451,39 @@ function showToast(message) {
document.body.appendChild(toast);
}
+ let backdrop = document.getElementById('toast-backdrop');
+ if (!backdrop) {
+ backdrop = document.createElement('div');
+ backdrop.id = 'toast-backdrop';
+ backdrop.style.cssText = `
+ position:fixed;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ background:rgba(0,0,0,0);
+ backdrop-filter:blur(0px);
+ -webkit-backdrop-filter:blur(0px);
+ z-index:9999;pointer-events:none;
+ transition:background 0.3s ease,backdrop-filter 0.3s ease,-webkit-backdrop-filter 0.3s ease;
+ `;
+ document.body.appendChild(backdrop);
+ }
toast.textContent = message;
toast.style.opacity = '1';
- // Hide after 3 seconds
+ backdrop.style.background = 'linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%)';
+ backdrop.style.backdropFilter = 'blur(0px)';
+ backdrop.style.webkitBackdropFilter = 'blur(0px)';
+
+ // Hide after 1 second
clearTimeout(toast._timeout);
toast._timeout = setTimeout(() => {
+ backdrop.style.background = 'rgba(0, 0, 0, 0)';
+ backdrop.style.backdropFilter = 'blur(0px)';
+ backdrop.style.webkitBackdropFilter = 'blur(0px)';
toast.style.opacity = '0';
- }, 3000);
+ }, 1000);
}
/**
@@ -6417,7 +6455,7 @@ function renderCurrentProfile(cProfile) {
/* Start Chat Tab */
// Render our Share npub
- domShareNpub.textContent = strPubkey;
+ if (domShareNpub) domShareNpub.textContent = strPubkey;
}
/**
@@ -6552,13 +6590,15 @@ function renderProfileTab(cProfile) {
domProfileId.textContent = cProfile.id;
// Add npub copy functionality
- document.getElementById('profile-npub-copy')?.addEventListener('click', (e) => {
+ document.getElementById('profile-npub-copy').onclick = (e) => {
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!');
+ }).catch(() => {
+ showToast('Failed to copy');
+ const copyBtn = e.target.closest('#profile-npub-copy');
if (copyBtn) {
copyBtn.innerHTML = '';
setTimeout(() => {
@@ -6567,7 +6607,7 @@ function renderProfileTab(cProfile) {
}
});
}
- });
+ };
// If this is OUR profile: make the elements clickable, hide the "Contact Options"
if (cProfile.mine) {
@@ -6625,6 +6665,23 @@ 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);
+ }).catch(() => {
+ showToast('Failed to copy profile link');
+ });
+ }
+ };
+
// Hide edit buttons
document.querySelector('.profile-avatar-edit').style.display = 'none';
document.querySelector('.profile-banner-edit').style.display = 'none';
@@ -10320,6 +10377,16 @@ window.addEventListener("DOMContentLoaded", async () => {
domLoginAccountBtn.onclick = () => {
domLoginImport.style.display = '';
domLoginStart.style.display = 'none';
+ domLoginBackBar.style.display = '';
+ document.getElementById('login-form').classList.add('has-back-bar');
+ };
+ domLoginBackBtn.onclick = () => {
+ domLoginImport.style.display = 'none';
+ domLoginInvite.style.display = 'none';
+ domLoginBackBar.style.display = 'none';
+ domLoginStart.style.display = '';
+ domLoginInput.value = '';
+ document.getElementById('login-form').classList.remove('has-back-bar');
};
domLoginBtn.onclick = async () => {
// Import and derive our keys
@@ -10368,6 +10435,16 @@ window.addEventListener("DOMContentLoaded", async () => {
domChatNewStartBtn.click();
}
};
+ domChatNewInput.addEventListener('input', function() {
+ domChatNewStartBtn.style.display = this.value.length > 0 ? '' : 'none';
+ });
+
+ // Tooltip for help icon
+ document.querySelector('.chat-new-help-link').addEventListener('mouseenter', function() {
+ showGlobalTooltip('Visit the Vector Privacy Docs', this);
+ });
+ document.querySelector('.chat-new-help-link').addEventListener('mouseleave', hideGlobalTooltip);
+
domChatMessageInputCancel.onclick = () => {
// Cancel edit mode if active, otherwise cancel reply
if (strCurrentEditMessageId) {
@@ -11052,24 +11129,6 @@ domChatMessageInput.oninput = async () => {
popupConfirm('PIVX Wallet Restored', 'The PIVX Wallet has been restored to your Mini Apps panel.', true);
};
}
-
- // Add npub copy functionality for chat-new section
- document.getElementById('chat-new-npub-copy')?.addEventListener('click', (e) => {
- const npub = document.getElementById('share-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');
- if (copyBtn) {
- copyBtn.innerHTML = '';
- setTimeout(() => {
- copyBtn.innerHTML = '';
- }, 2000);
- }
- });
- }
- });
});
// Listen for app-wide click interations
diff --git a/src/styles.css b/src/styles.css
index 1d4ffa4..c59051c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -160,6 +160,11 @@
mask-image: url("./icons/chat-circle.svg");
}
+.icon-chat-bubble {
+ mask-image: url("./icons/chat-bubble.svg");
+ -webkit-mask-image: url("./icons/chat-bubble.svg");
+}
+
.icon-settings {
mask-image: url("./icons/settings.svg");
}
@@ -192,6 +197,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");
}
@@ -220,6 +231,12 @@
mask-image: url("./icons/message.svg");
}
+.icon-help {
+ mask-image: url("./icons/help.svg");
+ -webkit-mask-image: url("./icons/help.svg");
+
+}
+
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
@@ -703,9 +720,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;
@@ -2965,6 +2982,10 @@ audio {
border: none;
}
+#login-form.has-back-bar {
+ padding-top: 40px;
+}
+
#login-encrypt-pins {
background: linear-gradient(90deg, #59fcb3 0%, #2b976c 100%);
-webkit-box-shadow:
@@ -3847,8 +3868,8 @@ select:disabled:hover {
}
.chat-new-content {
- margin-left: 25px;
- margin-right: 25px;
+ margin-left: 50px;
+ margin-right: 50px;
}
.chat-new-title {
@@ -3874,7 +3895,7 @@ select:disabled:hover {
.chat-new-center-content {
position: absolute;
- bottom: 90px;
+ top: 90px;
width: 100%;
}
@@ -3909,28 +3930,98 @@ select:disabled:hover {
line-height: 18px !important;
}
-.chat-new-input-box {
+#chat-new-box {
position: absolute;
bottom: 0;
width: 100%;
+ flex-shrink: 0;
+ padding-top: 5px;
+ padding-bottom: 5px;
}
-.chat-new-input {
- margin-top: 8px;
- height: auto;
- margin-bottom: 8px;
+#chat-new-input {
+ width: -webkit-fill-available;
+ height: 20px;
+ padding: 10px;
+ padding-left: 14px;
+ line-height: inherit;
+ border: none;
+ background: transparent;
+ color: white;
+ font-size: 15px;
}
-.chat-new-add-btn {
- width: 50px;
- margin: 0;
- height: 50px;
+#chat-new-btn .icon {
+ background-color: var(--icon-color-primary);
+}
+
+.chat-new-help {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 80px;
+ gap: 6px;
+}
+
+.chat-new-help-icon {
position: relative;
- display: block;
- margin-left: auto;
- margin-right: 8px;
- margin-bottom: auto;
- margin-top: auto;
+ width: 18px;
+ height: 18px;
+ min-width: 16px;
+ opacity: 0.5;
+ display: inline-block;
+ background-color: currentColor;
+ mask-size: contain;
+ mask-repeat: no-repeat;
+ mask-position: center;
+ padding: 0;
+ margin: 0;
+ top: auto;
+ left: auto;
+ right: auto;
+ bottom: auto;
+}
+
+.chat-new-help-title {
+ font-size: 14px;
+ opacity: 0.5;
+ font-weight: 500;
+}
+
+.chat-new-help-steps {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ margin-top: 6px;
+}
+
+.chat-new-help-step {
+ color: #ffffff80;
+ font-size: 13px;
+ font-weight: 500;
+}
+
+.chat-new-help-step:hover {
+ color: #ffffff;
+}
+
+.chat-new-help-arrow {
+ opacity: 1;
+ font-size: 14px;
+ color: var(--icon-color-primary);
+}
+
+.chat-new-help-link {
+ display: inline-flex;
+ align-items: center;
+ cursor: pointer;
+ color: #5B6060;
+}
+
+.chat-new-help-link:hover .chat-new-help-icon {
+ background-color: var(--icon-color-primary);
+ opacity: 1;
}
.settings-divider {
@@ -4054,6 +4145,12 @@ select:disabled:hover {
margin-top: 0px;
}
+ .login-import-container {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ }
+
#login-start {
bottom: 10px !important;
}
@@ -4088,6 +4185,7 @@ select:disabled:hover {
.login-create-btn {
background-color: #59fcb3;
color: black;
+ font-weight: 600;
width: 225px;
}
@@ -4102,31 +4200,34 @@ select:disabled:hover {
width: 275px;
}
-.login-import-container {
+.login-input-container {
position: absolute;
- bottom: 0px;
+ bottom: 0;
width: 100%;
-}
-
-.login-input-container {
- height: 52px;
+ padding-top: 5px;
+ padding-bottom: 5px;
}
.login-input {
- width: 100%;
- margin-left: 10px;
- margin-top: 5px;
- margin-bottom: 5px;
- background-color: black;
+ width: -webkit-fill-available;
+ height: 20px;
+ padding: 10px;
+ padding-left: 14px;
+ line-height: inherit;
+ border: none;
+ background: transparent;
+ color: white;
+ font-size: 15px;
}
.login-btn {
- width: 50px;
- height: 50px;
- background-color: transparent;
- padding: 3px;
+ width: 32px;
+ height: 32px;
+ padding: 6px;
margin: 0;
- margin-right: 5px;
+ margin-right: 8px;
+ background: transparent;
+ color: var(--icon-color-primary);
}
.login-encrypt-container {
diff --git a/src/themes/chatstr/dark.css b/src/themes/chatstr/dark.css
index 5fe1555..c4936e6 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 {
@@ -105,7 +106,7 @@
input,
textarea,
button {
- background-color: #593b6f99;
+ background-color: #161616;
}
.corner-float {
diff --git a/src/themes/gifverse/dark.css b/src/themes/gifverse/dark.css
index 02bcfe4..2c41857 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 {
@@ -105,7 +106,7 @@
input,
textarea,
button {
- background-color: #F7FFAE50;
+ background-color: #161616;
}
.corner-float {
diff --git a/src/themes/pivx/dark.css b/src/themes/pivx/dark.css
index cfec619..4ee21b0 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;
}
@@ -128,7 +129,7 @@
input,
textarea,
button {
- background-color: #593b6f99;
+ background-color: #161616;
}
.corner-float {
diff --git a/src/themes/satoshi/dark.css b/src/themes/satoshi/dark.css
index 98e344b..1c124d8 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 {
@@ -105,7 +106,7 @@
input,
textarea,
button {
- background-color: #F9AA4B99;
+ background-color: #161616;
}
.corner-float {
diff --git a/src/themes/vector/dark.css b/src/themes/vector/dark.css
index 34d229c..74c7c8b 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 {
@@ -110,7 +111,7 @@
input,
textarea,
button {
- background-color: rgba(152, 255, 214, 0.2);
+ background-color: #161616;
}
.corner-float {