refactor(frontend): migrate TrainingTypesCard.tsx to the banner system

frontend/src/components/TrainingTypesCard.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { api } from "../api/client";
+import { showError } from "../banner";
 import { NullableNumberField } from "./NullableNumberField";
 import { PaceField, formatPace } from "./PaceField";
 import type { WorkoutKind } from "../types/api";
@@ -31,10 +32,9 @@ export function TrainingTypesCard() {
   const [paceMax, setPaceMax] = useState<number | null>(null);
   const [hrMin, setHrMin] = useState<number | null>(null);
   const [hrMax, setHrMax] = useState<number | null>(null);
-  const [error, setError] = useState<string | null>(null);
 
   function reload() {
-    api.listWorkoutKinds(true).then(setKinds).catch((e) => setError(String(e)));
+    api.listWorkoutKinds(true).then(setKinds).catch((e) => showError(String(e)));
   }
 
   useEffect(reload, []);
@@ -47,12 +47,10 @@ export function TrainingTypesCard() {
     setPaceMax(k.pace_max_sec_per_km);
     setHrMin(k.hr_min_pct_hrr);
     setHrMax(k.hr_max_pct_hrr);
-    setError(null);
   }
 
   async function save() {
     if (!editing) return;
-    setError(null);
     try {
       await api.updateWorkoutKind(editing.ID, {
         name,
@@ -66,7 +64,7 @@ export function TrainingTypesCard() {
       setEditing(null);
       reload();
     } catch (e) {
-      setError(String(e));
+      showError(String(e));
     }
   }
 
@@ -74,8 +72,6 @@ export function TrainingTypesCard() {
     <fieldset className="kind-editor">
       <legend>Training types</legend>
 
-      {error && <p className="error">{error}</p>}
-
       <ul className="training-type-list">
         {kinds.map((k) => (
           <li key={k.ID} className="training-type-item">