Final v0.3.0 Frontend Polishes

[YuurinBee]

• Theme Polishes & Design Consistency Improvements
• Added Theme "サトシ"
• New Feature: Added Background Wallpaper for Theme
• New Setting: Enable/Disable Background Wallpaper

[github-actions]

Claude finished @YuurinBee's task in 1m 18s —— View job

---

PR Review: Final v0.3.0 Frontend Polishes

• Read repository guidelines
• Review changed files for code quality and best practices
• Check for potential bugs or edge cases
• Identify security concerns
• Provide actionable feedback

---

Summary

This PR adds several frontend polish features for v0.3.0:

• New "サトシ" (Satoshi) theme with Bitcoin orange color scheme
• Background wallpaper feature for themes (currently implemented in PIVX theme)
• Toggle setting to enable/disable background wallpaper
• Various design consistency improvements

---

Code Review Findings

Positive Aspects

1. Clean theme implementation: The new Satoshi theme follows the existing pattern well and provides consistent styling across all UI components.

2. Good user preference handling: The background wallpaper toggle correctly persists user preferences using localStorage and properly applies/removes the CSS class.

3. CSS pseudo-element approach: Using ::before for the wallpaper background is a good pattern - it keeps the background separate from content and allows proper stacking with z-index.

---

Issues & Suggestions

1. Missing info tooltip handler for the new setting (Minor)

The HTML adds a #chat-bg-info info icon button at src/index.html:817, but there's no corresponding click handler to display tooltip information about this setting.

Location: src/index.html:817

<span id="chat-bg-info" class="icon icon-info btn" ...>

Other info icons in settings (e.g., privacy-web-previews-info, display-image-types-info) have tooltip handlers. Consider adding one for consistency.

Fix this →

---

2. Inconsistent use of localStorage vs database storage (Minor)

The background wallpaper setting uses localStorage (src/js/settings.js:1470-1483), while other display settings like fDisplayImageTypes use the database via loadDisplayImageTypes() / saveDisplayImageTypes().

Current approach:

const chatBgEnabled = localStorage.getItem('chatBgEnabled') !== 'false';
localStorage.setItem('chatBgEnabled', 'true');

For consistency and to ensure settings sync across devices (if that's a feature goal), consider using the same DB-based persistence pattern used by other settings.

---

3. Background image may not load for relative paths in Satoshi theme (Potential Issue)

The Satoshi theme at src/themes/satoshi/dark.css:60-67 references a background image that doesn't exist:

.chat-messages::before {
  background-image: url('./chat-bg.png');
  ...
}

However, I don't see src/themes/satoshi/chat-bg.png in the changed files - only src/themes/pivx/chat-bg.png was added. This will cause a 404 error when using the Satoshi theme.

Either:

• Add the missing chat-bg.png to the satoshi theme folder, OR
• Remove the ::before pseudo-element from the Satoshi theme if it shouldn't have a background

Fix this →

---

4. Hardcoded opacity value for wallpaper (Enhancement suggestion)

The wallpaper opacity is hardcoded to 0.04 in both theme CSS files. Consider making this a CSS variable so it could potentially be user-configurable in the future:

:root {
  --chat-bg-opacity: 0.04;
}

.chat-messages::before {
  opacity: var(--chat-bg-opacity);
}

---

No Security Concerns

No security issues were identified in this PR. The changes are purely frontend/UI related and don't introduce any new security vectors.

---

Verdict

This is a solid polish PR with well-structured theme work. The main actionable items are:

1. Required: Add the missing chat-bg.png for the Satoshi theme or remove the CSS reference to avoid 404 errors
2. Optional: Add tooltip handler for the new setting info icon
3. Optional: Consider using DB persistence for consistency with other settings