Frontend Onboarding Improvements

[YuurinBee]

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

Frontend: New Design for Create New Chat Page

Fix missing div

UX/UI Improvement for Toast Actions & Multi-Theme Support

[github-actions]

Claude finished @YuurinBee's task in 2m 17s —— View job

---

PR Review: Frontend Onboarding Improvements

• Read repository guidelines
• Analyze HTML changes (index.html)
• Analyze JavaScript changes (main.js)
• Analyze CSS changes (styles.css)
• Analyze theme changes (dark.css files)
• Review SVG icon additions
• Compile review feedback

---

Overview

This PR redesigns the "Create New Chat" page, adds a Share button to user profiles, improves toast notification styling with multi-theme support, and standardizes input background colors across themes. The changes are spread across 11 files (3 new SVG icons, HTML, JS, CSS, and 5 theme files).

---

Bugs & Issues

1. Dead code: share-npub element removed but still referenced (src/main.js:11115-11127)

The share-npub element was removed from index.html, and a guard was correctly added at line 6453 (if (domShareNpub)). However, there is still dead code at lines 11115-11127 that references share-npub and chat-new-npub-copy — both elements no longer exist in the HTML. The document.getElementById('chat-new-npub-copy') call will always return null, making this entire block unreachable.

// Line 11115 - This entire block is now dead code
document.getElementById('chat-new-npub-copy')?.addEventListener('click', (e) => {
    const npub = document.getElementById('share-npub')?.textContent;
    // ...
});

Fix this →

2. Event listener leak on profile-npub-copy (src/main.js:6588)

The renderProfileTab function adds a new click event listener to #profile-npub-copy each time it's called, without removing previous listeners. Since addEventListener doesn't replace previous handlers, every call to renderProfileTab stacks another listener, leading to duplicate toast messages and icon flashing on click.

// Line 6588 - New listener added on every renderProfileTab call
document.getElementById('profile-npub-copy')?.addEventListener('click', (e) => {

Consider using onclick = assignment instead (as done for other buttons in the same function), or use { once: true }, or store and remove the previous listener.

Fix this →

3. No --toast-border-color fallback in base styles (src/main.js:432)

The toast border uses var(--toast-border-color) but this variable is only defined in theme-specific dark.css files. If a user is on a theme that doesn't define this variable (or if a new theme is added without it), the border declaration will silently fail. Consider adding a fallback:

border: 1px solid var(--toast-border-color, rgba(255, 255, 255, 0.15));

4. Missing .catch() on clipboard operations (src/main.js:6592, 6666)

The new clipboard write calls use .then() without .catch(). The Clipboard API can fail (e.g., if the document isn't focused, or in certain browser contexts). This is consistent with some existing patterns in the codebase but worth noting — a failed clipboard write would silently fail with no user feedback.

---

CSS Issues

5. Missing semicolons in CSS (src/styles.css:164, 234)

Two CSS declarations are missing trailing semicolons:

/* Line 164 */
.icon-chat-bubble {
  mask-image: url("./icons/chat-bubble.svg")  /* <-- missing ; */
}

/* Line 234 */
.icon-help {
  mask-image: url("./icons/help.svg")  /* <-- missing ; */
}

While browsers are lenient about the last declaration in a block, this is technically invalid CSS and could cause issues if properties are added later.

Fix this →

6. Incorrect hover selector (src/styles.css:3998)

The selector .chat-new-help-step :hover (with a space) targets children of .chat-new-help-step on hover, not the element itself. Since <span class="chat-new-help-step"> has no child elements (just text), this rule will never apply. It should be .chat-new-help-step:hover (without the space):

/* Line 3998 - Current (broken): targets children */
.chat-new-help-step :hover { ... }

/* Should be: */
.chat-new-help-step:hover { ... }

Fix this →

7. -webkit-mask-image missing for new icon classes (src/styles.css:163-165, 233-235)

.icon-share correctly includes both mask-image and -webkit-mask-image, but .icon-chat-bubble and .icon-help only set mask-image. For consistency and full WebKit/Safari support, add -webkit-mask-image as well.

8. Hardcoded color #59FCB3 for help arrows (src/styles.css:4007)

The .chat-new-help-arrow color is hardcoded to #59FCB3 (Vector's primary color). This won't adapt for other themes (chatstr, gifverse, pivx, satoshi). Consider using var(--icon-color-primary) instead.

---

Code Style & Consistency

9. Indentation inconsistency in satoshi theme (src/themes/satoshi/dark.css:9)

The --toast-border-color property uses extra leading spaces compared to other properties in the same :root block:

  --reply-highlight-border: #F9AA4B;
    --toast-border-color: #F7931A;  /* <-- extra indent */

10. Inconsistent indentation in JS (src/main.js:10424-10425)

The tooltip event listeners have inconsistent indentation — the body of the callback is not indented relative to the surrounding block:

    document.querySelector('.chat-new-help-link').addEventListener('mouseenter', function() {
    showGlobalTooltip('Visit the Vector Privacy Docs', this);  // <-- should be indented
    });

11. Backdrop element indentation (src/main.js:465)

The document.body.appendChild(backdrop) call inside the showToast function is inside the if (!backdrop) block but aligned at a different indent level than the rest of the block:

    if (!backdrop) {
        backdrop = document.createElement('div');
        // ...
    document.body.appendChild(backdrop);  // <-- appears to be outside the if, but is inside
    }

This is technically correct but visually misleading.

---

UX Considerations

12. Toast duration reduced from 3s to 1s

The toast display time was reduced from 3000ms to 1000ms. For short messages like "Copied" this is fine, but for longer messages this may not give users enough time to read. Consider keeping a longer duration or basing it on message length.

13. Full-screen backdrop blur on every toast

The new backdrop blur (rgba(0, 0, 0, 0.8) + blur(4px)) covers the entire screen for every toast notification. This is a heavy visual treatment for simple notifications like "Copied". Standard toast patterns typically don't obscure the background — the backdrop effect might be better reserved for modal dialogs.

---

Summary

The PR introduces solid UX improvements — the redesigned Create New Chat page is cleaner, the Share button is a nice addition, and the multi-theme toast support is well-structured. The main items to address are:

Priority	Issue
Bug	Dead code referencing removed share-npub / chat-new-npub-copy elements (#1)
Bug	Event listener leak in renderProfileTab (#2)
Bug	Broken .chat-new-help-step :hover selector (#6)
Low	Missing CSS semicolons (#5), -webkit-mask-image (#7)
Low	Hardcoded theme color (#8), indentation issues (#9-11)
UX	Consider whether full-screen backdrop blur is warranted for simple toasts (#13)

---