refactor(myqbz): button audit — app primitives + fix glyph centering

Phase-2 Slice 12c (user directive: use the app's circular controls, no invented
buttons; fix the glyph-stuck-left bug).
- Hero §3.6: deleted the local ActionCircle; the 4 hero controls are now the
  shared CircleAction (Play primary = filled white disc + black glyph; the loading
  spinner is now available = more 1:1). Added `enabled` to CircleAction (additive).
- All MyQBZ modal footers (Create / Edit / Mix / AddTo / Discography) now use the
  shared QbzPrimaryButton (+ a new `destructive` variant for Delete) and a new
  shared SecondaryButton (promoted from AppearanceSettings' inline copy).
  QbzPrimaryButton auto-sizes as a footer chip while staying full-width in login
  (verified: login stretches it in a VerticalLayout; footers take preferred width).
- Kept legitimately-local icon+label controls (grid "+ New" CTA, AddToMixtape
  picker chips, toolbar sort/filter/view-mode pills) but verified every glyph is
  centered.
- Fixed 3 glyph-stuck-left bugs (DiscographyBuilder checkboxes used non-snapped
  centering -> the Math.round(.../1px)*1px crisp idiom).

Backend crates untouched. cargo check -p qbz-slint green.

cc

crates/qbz-slint/ui/primitives/QbzPrimaryButton.slint

@@ -7,22 +7,35 @@ import { Typography } from "../foundation/typography.slint";
 export component QbzPrimaryButton inherits Rectangle {
     in property <string> label;
     in property <bool> enabled: true;
+    // Destructive variant (e.g. the Delete confirm) — a red fill instead of the
+    // accent. Additive; existing callers default to the accent primary.
+    in property <bool> destructive: false;
     callback clicked();
 
     height: 48px;
     border-radius: Radius.sm;
     opacity: root.enabled ? 1.0 : 0.5;
-    background: ta.has-hover && root.enabled ? Theme.accent-hover : Theme.accent;
+    background: root.destructive
+        ? (ta.has-hover && root.enabled ? #e57373d9 : #e57373)
+        : (ta.has-hover && root.enabled ? Theme.accent-hover : Theme.accent);
 
     animate background { duration: 150ms; }
 
-    Text {
-        text: root.label;
-        color: Theme.accent-text;
-        font-size: Typography.button;
-        font-weight: Typography.semibold;
-        horizontal-alignment: center;
-        vertical-alignment: center;
+    // A padded layout drives the preferred-width (label + 20px each side) so the
+    // button auto-sizes as a footer chip inside an `alignment: end` row, while
+    // still stretching full-width when the parent layout stretches it (login).
+    HorizontalLayout {
+        alignment: center;
+        padding-left: 20px;
+        padding-right: 20px;
+        Text {
+            text: root.label;
+            color: Theme.accent-text;
+            font-size: Typography.button;
+            font-weight: Typography.semibold;
+            horizontal-alignment: center;
+            vertical-alignment: center;
+        }
     }
 
     ta := TouchArea {