Goal

Replace the current hand-rolled click-to-copy JS (data-copy attrs + static/app.js handler) with the Web Awesome <wa-copy-button> web component (https://webawesome.com/docs/components/copy-button/), which has better UX (built-in success/error feedback, tooltip) and accessibility (copy-label as accessible name, focus-visible tooltip).

Related: tracking epic c32b584 (shadcn appview migration). Explicitly out of scope there; do the swap here after the table/alert migrations land.

Current usage to replace

• internal/appview/ui/domain.templ dnsTable: <code data-copy={ r.Name }> / <code data-copy={ r.Content }>
• internal/appview/ui/fragments.templ appPasswordSecret: <code data-copy={ secret }> + Copy <button data-copy={ secret }>
• Handler: internal/appview/ui/static/app.js (data-copy click -> navigator.clipboard.writeText)
• Styles: shadcn table/alert subtasks own the surrounding markup; this issue owns only the copy trigger + feedback.

Plan

1. Decide delivery: vendor the wa-copy-button component JS (preferred, like htmx.min.js in ui/static/ + embed.go handler) vs CDN import. Vendored keeps CSP/offline behavior consistent with htmx.
2. Register the component once in Layout (or per-page script include) and add the Copy/Copied styling via CSS parts to match shadcn tokens.
3. Swap each data-copy site to <wa-copy-button value=...> (literal secret/record content) or from="id" pointing at the code element; set copy-label / success-label / error-label.
4. Remove the data-copy handler from app.js once no call sites remain; keep data-copy attrs only where still needed during transition.
5. Note: clipboard.writeText() needs a secure context (HTTPS); verify dev (https://*.sovrn.test) + prod behavior and the error state when unavailable.

Files (likely): - Edit: internal/appview/ui/domain.templ, internal/appview/ui/fragments.templ, internal/appview/ui/layout.templ, internal/appview/ui/static/app.js, internal/appview/ui/embed.go - Add: vendored webawesome JS under internal/appview/ui/static/

Verify

• go generate ./internal/appview/ui, rebuild CSS, SOVRN_INTEGRATION=0 go test ./internal/appview/...
• Manual: copy DNS name/content, copy app-password secret (chunked display still copies full secret), success tooltip + accessible name announced, error state on non-secure context.
• Confirm no data-copy handlers/attrs remain (grep -r data-copy internal/appview/ui).

Done when: all click-to-copy flows use <wa-copy-button>; old JS removed; a11y (keyboard focus, tooltip, labels) verified.