Avatars, Node Status, Encrypted Images & Theme Parity

Community Testing Pre-release: Chrome Extension

Avatars, Node Status, Encrypted Images & Theme Parity

This is a Qortal-Community test build of the Qortal Chrome Extension based
on the current upstream code, plus several focused changes:

• Clickable chat avatars & hover – user and group avatars in chat are
  clickable to open profile/group info, with clearer hover/interaction
  states (parity with Qortal Hub).
• Node status icon update – the node status indicator has been added/
  moved to a more visible location, improving parity with Hub.
• Encrypted chat images – encrypted image messages in Q-Chat now decrypt
  and display correctly in the Extension, matching Hub/Go behavior.
• Full theme support & Theme Manager – Light/Dark and custom themes are
  now powered by the same canonical palette schema used in Hub and Go,
  with a Theme Manager that can import/export shared theme JSON files.
• Developer docs – DEVELOPMENT documentation for building and loading
  the extension in Chrome/Chromium.

⚠️ This is NOT an official Qortal release.
It is a community test build to gather feedback before proposing changes
upstream.

This pre-release includes everything from the earlier “Dev Docs, Clickable
Avatars, & Node Status Icon Parity” build, plus the encrypted image support
and the theme/Theme Manager parity work.

---

Downloads

• Extension build (for "Load unpacked"): dist-avatars-themes-fixes.zip

After downloading:

1. Unzip the archive.
2. In Chrome/Chromium, go to chrome://extensions.
3. Enable Developer mode.
4. Click Load unpacked and select the unzipped folder.

---

What to test

Focus on:

• Chat avatars & hover behavior
• Node status icon
• Encrypted chat images
• Theme support & Theme Manager (Light/Dark + custom themes)
• (Optional) Developer docs

You can reuse any notes from testing the previous build; this one supersedes it.

---

1. Clickable chat avatars & hover states

In Q-Chat within the Extension popup or full view:

• Open a group or direct chat with active messages.

• Hover your mouse over user avatars in the message list.

  • ✅ Expect: a hover affordance (cursor change, highlight, etc.) that makes
    it clear they are clickable.

• Click on a user avatar.

  • ✅ Expect: a user info view/popup opens (as close to Hub’s behavior as
    the Extension UX allows).

• Click on a group avatar where applicable.

  • ✅ Expect: group info view/popup opens.

Check for:

• ❌ No dead clicks or needing multiple clicks.
• ❌ No broken scroll or layout glitches when hovering/clicking avatars.

---

2. Node status icon

With the extension loaded and connected to your node:

• Look for the node status icon in the sidebar/header area of the
  Extension UI.

  • ✅ Expect: it’s clearly visible in a consistent place.

Test state changes:

• With your node connected and synced:

  • ✅ Expect: icon shows the “good/connected” state.

• With your node stopped/offline:

  • ✅ Expect: icon switches to a warning/offline state.

• If clicking/tapping the icon shows details:

  • Note what you see and whether it matches expectations.

---

3. Encrypted chat images

This build includes the encrypted image fix for Q-Chat inside the Extension.

Try these scenarios:

1. Receiving encrypted images from Hub or Go

   • From another account (Hub or Go), send an encrypted image in Q-Chat
     (direct or group).

   • View the same chat in the Extension:

     • ✅ Expect: encrypted image messages are shown with the appropriate
       “encrypted” treatment (lock/indicator as designed).
     • ✅ If you have permission/keys, the image should decrypt and display.
     • ❌ No permanent “broken image” icons if decryption is possible.

2. Sending encrypted images from the Extension

   • From the Extension, send an encrypted image to another user or group.

   • Open the same chat in Hub and/or Go:

     • ✅ Expect: Hub and Go display the image correctly as encrypted content,
       and decrypt it when the viewer has permission.

3. No-leak & error handling

   • If you deliberately test a case where the recipient shouldn’t be able
     to decrypt (no keys / wrong account):

     • ✅ Expect: you see a clear “can’t decrypt” style state (whatever the
       UI uses) rather than a half-loaded or plain image.

   • Try with slow or flaky connection:

     • ✅ No crashes or stuck spinners; the message eventually resolves to
       a clear state.

---

4. Theme support & Theme Manager parity

The Extension now uses the same canonical theme schema as Hub and Go,
with a Theme Manager and theme-driven surfaces (no leftover hard-coded colors).

4.1 Light/Dark defaults

• Find the theme toggle (sun/moon) in the Extension UI:

  • ✅ Expect: it’s in a sensible location (e.g. sidebar/footer) and has a
    tooltip/aria label.

Test:

• Switch between Light and Dark modes.

  • ✅ Expect:

    • Sidebars/backgrounds, headers, chat lists, message cards, buttons,
      and modals all update consistently.
    • The toggle icon/label matches the upcoming or current mode.

• Reload the Extension UI.

  • ✅ Expect: your chosen theme persists.

Compare visually with Hub/Go:

• With all three set to Light:

  • ✅ Expect: major surfaces (nav, cards, primary buttons) use the same
    palette values (allowing for layout differences).

• Repeat for Dark.

4.2 Theme Manager: import/export & custom themes

Open the Theme Manager in the Extension (e.g. via Settings → Theme/Appearance):

1. Import from Hub or Go

   • In Hub, export a theme JSON using Hub’s Theme Manager.

   • In the Extension, import that JSON file:

     • ✅ Expect: no generic “invalid theme” errors.
     • ✅ Colors in the Extension update to match Hub’s theme (nav, cards,
       buttons, etc.).

   • Repeat with a theme exported from Go.

2. Export from Extension

   • In the Extension Theme Manager:

     • Export the current theme as JSON.

   • Import that JSON into:

     • Hub → Theme Manager.
     • Go → Theme Manager.
     • ✅ Expect: both accept and apply the theme without schema complaints
       and with visually similar results.

3. Edit & apply custom themes

   • Use the Theme Manager in the Extension to:

     • Duplicate an existing theme or create a new one.
     • Adjust a few colors (accent/background).
     • Apply the custom theme.

   • ✅ Expect:

     • The Extension UI updates instantly.
     • After reload, the custom theme choice persists.

4. Error cases

   • Try importing:

     • A broken/invalid JSON file.
     • A JSON missing required theme sections.

   • ✅ Expect: a clear error message (e.g., “not valid JSON” or a specific
     validation message), and:

     • The previously active theme remains applied.
     • No crash or blank UI.

---

5. Developer docs (optional, for contributors)

If you’re interested in developing or reviewing the Extension code:

• Follow the dev docs (DEVELOPMENT.md or dev section of README.md) from
  a clean clone:

  • Install prereqs (Node/npm, etc.).
  • Build the extension.
  • Load it via “Load unpacked”.

• ✅ Expect:

  • Instructions are accurate enough to get a working dev build with no big
    missing steps.
  • Any differences (OS-specific, Node version, etc.) are minor and can be
    reported back.

---

How to report feedback

Please report results here, or in the corresponding Q-Community issue:

• Extension parity issues:
  • #4
  • #5
  • #6

When reporting:

• Include:

  • Browser and version (Chrome, Brave, etc.).

  • OS (Windows / Linux / macOS + version).

  • Whether you used the pre-built ZIP or built from source.

  • What you were testing:

    • Avatars / node icon,
    • Encrypted images,
    • Themes / Theme Manager,
    • Dev docs.

  • Exact steps to reproduce.

  • What you expected vs what happened (screenshots or short clips help a lot).

If you mention findings in Qortal chats, please also copy a short summary
into the GitHub issue so we don’t lose track of them.

Thank you for helping test this combined Trifecta parity slice for the
Chrome Extension — avatars, node status, encrypted images, and theming all
working together.

Dev Docs, Clickable Avatars, & Node Status Icon Parity

Community Testing Pre-release: Chrome Extension

Dev Docs, Clickable Avatars, & Node Status Icon Parity

This is a Qortal-Community test build of the Qortal Chrome Extension based
on the current upstream code, plus three focused changes:

• Clickable chat avatars & hover – user and group avatars in chat are now
  clickable to open profile/group info, with a clearer hover/interaction
  state so you can see they’re interactive (parallel to Qortal Hub).
• Node status icon update – the node status indicator has been added/
  moved to a more visible location in the sidebar/header, improving parity
  with Hub.
• Developer docs – initial DEVELOPMENT documentation explains how to
  build and load the extension in Chrome/Chromium for contributors.

⚠️ This is NOT an official Qortal release.
It is a community test build to gather feedback before proposing changes
upstream.

Downloads

• Extension build (for "Load unpacked"): dist-docs-avatars-nodeicon.zip

After downloading:

1. Unzip the archive.
2. In Chrome/Chromium, go to chrome://extensions.
3. Enable Developer mode.
4. Click Load unpacked and select the unzipped folder.

---

What to test

Focus on chat avatars, hover behavior, node status icon, and
(optionally) the dev docs.

1. Clickable chat avatars & hover states

In Q-Chat within the Extension popup or full view:

• Open a group or direct chat with active messages.
• Hover your mouse over user avatars in the message list.
  • ✅ Expect: some hover affordance (cursor change, highlight, etc.) making
    it clear they are clickable.
• Click on a user avatar.
  • ✅ Expect: a user info view/popup opens (matching Hub’s behavior as
    closely as possible).
• Click on a group avatar where applicable.
  • ✅ Expect: group info view/popup opens.

Check for:

• ❌ No weird double-click requirements or dead clicks.
• ❌ No broken scroll or layout glitches when hovering/clicking avatars.

2. Node status icon

With the extension loaded and connected to your node:

• Look for the node status icon in the sidebar/header area.
  • ✅ Expect: it’s clearly visible in a consistent place.
• With your node connected and synced:
  • ✅ Expect: icon shows the "good/connected" state.
• With your node stopped/offline:
  • ✅ Expect: icon switches to a warning/offline state.
• If tapping/clicking the icon shows details:
  • Note what you see and whether it matches your expectations.

3. Developer docs (optional, for contributors)

If you’re testing dev flow:

• Follow the dev docs (DEVELOPMENT.md or dev section of README.md) from a
  clean clone:
  • Install prereqs (Node/npm, etc.).
  • Build the extension.
  • Load it via "Load unpacked".
• ✅ Expect: the steps are complete enough to get a working dev build without
  guessing.

---

How to report feedback

Please report results here, or in the corresponding Q-Community issue:

• Extension parity issue: #4

When reporting:

• Include:
  • Browser and version (Chrome, Brave, etc.).
  • OS (Windows / Linux / macOS + version).
  • Whether you used the pre-built ZIP or built from source.
  • Steps to reproduce and what you expected vs what happened.

If you mention findings in Qortal chats, please also copy a short summary
into the GitHub issue so we don’t lose track of it.

Thank you for helping test this Trifecta parity slice in the Chrome Extension!