feat(dashboard): add appearance palettes and templates redesign

[Leslie-23]

Description

Brief description of changes

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation update

Checklist

• Tests added/updated
• Documentation updated
• Lint passes
• Self-reviewed

Screenshots (if applicable)

Related Issues

Closes #

[rmyndharis]

Really nice work, @Leslie-23 — I rendered this locally (light + a couple of palettes, with a few seeded templates) and it's a clear improvement on both fronts. Approving, with one small consistency fix I'd love to see folded in.

What's great

• Templates redesign → a 3-pane workspace (library list + search + placeholder chips · editor · live preview) instead of the flat grid. Much better for browsing/editing a set, and the search + live {{placeholder}} preview are genuinely useful. It also reuses the design tokens (var(--bg-white), var(--border), var(--text-muted)), so it tracks dark mode, and it's responsive (breakpoints at 1280/900/640 collapse the panes cleanly).
• Palette feature → clean and well-architected: ThemePalette is typed, validated (isPalette guard), persisted, and applied via data-palette overriding --primary/--primary-hover/--primary-soft. The picker in the Appearance menu is tidy. This is the right way to do accent theming.

One thing to fix before merge (1-line-ish)

The redesign's selected-template highlight is hardcoded OpenWA-green (rgba(37, 211, 102, …) in Templates.css), so it doesn't follow the palette this same PR introduces. I confirmed it by switching to the Rose palette: the nav item, buttons, and preview chips all re-theme to rose, but the selected list item stays a green box — visibly out of place.

The carried-over green should use the token you already added:

/* selected template list item */
.template-list-item.selected {
  border-color: var(--primary);
  background: var(--primary-soft);   /* you already define --primary-soft per palette */
}

(Same for the other rgba(37, 211, 102, …) spots.) On the default OpenWA palette it looks identical; on any other palette it now stays consistent.

The status colors (#fee2e2, #ecfdf5, …) are fine to leave hardcoded — they match the existing dashboard-wide pattern (used in ~9 other CSS files), so no need to touch those here.

Minor (housekeeping)

• For a visual redesign, please add before/after screenshots to the PR — it makes review (and the changelog later) much easier.
• The description is still the template placeholder ("Brief description of changes") and Closes # is empty — a sentence or two on the two features + linking any related issue would be great.

Once the selected-item highlight is wired to var(--primary-soft), this is good to go. Thanks for the polish — the templates page is a lot nicer to use now. 🎨

[Leslie-23]

Thanks for the detailed review and approval.
I pushed the requested consistency fix so the selected template item, input focus ring, and preview count chip now use the palette tokens instead of hardcoded OpenWA green.
I appreciate the feedback. It is helping me improve the quality and consistency of my contributions.

[rmyndharis]

Re-reviewed after your push, @Leslie-23 — and the consistency fix landed exactly right. I confirmed Templates.css no longer has any hardcoded OpenWA-green: the selected list item, the input focus ring, and the preview count chip all use var(--primary-soft)/var(--primary) now, so they re-theme correctly on Rose, Indigo, etc. Nicely done. 🎨

I also ran the full local gate on your branch and everything is clean: dashboard lint (0 errors), dashboard build, backend nest build, and the whatsapp-web-js adapter suite (41/41) all pass. The Appearance popover a11y is solid too — role="menuitemradio" + aria-checked, Escape/outside-click close, and the RTL handling are all there. And the old .template-card-* markup and its CSS were both removed cleanly, so no dead styles left behind.

There's just one thing I'd like to tidy up before I merge, since OpenWA ships full localization across all nine locales:

• i18n parity. The three new keys (theme.appearance / theme.mode / theme.palette) are translated in es.json but left as literal English in ar, fr, he, it, te, zh-CN, and zh-HK. They fall back to readable English so nothing is broken, but to keep our localization complete I'd love to get those seven filled in before this lands. If you'd like a hand or want me to take that last bit, just say the word — happy to push the translations onto your branch so we can merge right after.

Two non-blocking notes for the changelog later (no action needed from you):

1. This PR also folds in two nice extras beyond the title — the useToast/dependency-array cleanup in Chats.tsx and a defensive getChats() change in the wwebjs adapter (skipping chats with no serialized id instead of failing the whole request). Both look good and safe; I'll just call out the engine change in the release notes.
2. When the description has a moment, a sentence or two on the two features plus a before/after screenshot would be lovely for the changelog — purely cosmetic.

This is excellent work and effectively ready — just the seven translations and I'll merge it straight away. Thank you for the careful polish; the Templates page is genuinely much nicer to use now.