Potwierdzenia operacji jako okno panelu, nie okno przegladarki

Panel pytal o potwierdzenie natywnym `window.confirm`. Takie okno wyglada
inaczej w kazdej przegladarce i w kazdym systemie, wyskakuje przy gornej
krawedzi zamiast na srodku i pokazuje nad trescia adres domeny ("Komunikat
ze strony ..."). W panelu, ktory poza tym jest spojnym interfejsem, czyta sie
to jak blad strony, a nie jak pytanie aplikacji.

CLAUDE.md wymagalo juz, zeby kazde okno modalne uzywalo komponentu `Modal`,
i tlumaczylo przy otwartym mikrofonie, dlaczego nie `window.confirm`. Regula
obowiazywala w jednym miejscu, a w 42 innych nie.

HOOK, A NIE OKNO W KAZDYM MIEJSCU Z OSOBNA
Potwierdzen jest ponad czterdziesci. Wlasny stan i wlasny `Modal` do kazdego
oznaczalyby kilkanascie linii na jedno pytanie i te sama pewnosc, ze predzej
czy pozniej ktores bedzie wygladalo inaczej. `useConfirm` oddaje funkcje
o ksztalcie zblizonym do `confirm`, wiec zamiana jest jednolinijkowa. Wynik
przychodzi obietnica, bo okno musi sie najpierw wyrenderowac.

TRESC MOWI, CO SIE STANIE
Przy okazji poprawione komunikaty: zamiast "Czy na pewno?" pytania nazywaja
obiekt i skutek. Plik zniknie ze skladu instancji, odbiorca straci dostep do
API, razem z banerem przepadnie jego statystyka wraz z liczbami. Etykieta
przycisku nazywa czynnosc ("Usun nagranie"), a nie mowi "OK".

NIEODWRACALNE WYROZNIONE, ODWRACALNE NIE
`destructive` daje czerwony przycisk i ostrzezenie "Tej operacji nie da sie
cofnac". Odwolanie webinaru i dezaktywacja konta go NIE dostaja: sa
odwracalne, a straszenie tam, gdzie nic nie przepada, rozmydla sygnal tam,
gdzie strata jest prawdziwa. Zgodnie z reguła, ze usuniecie webinaru ma
podpowiadac odwolanie jako lagodniejsza alternatywe.

Sprawdzone `npx tsc -b --force` (pelne typowanie bez cache) i `npm run build`.
Przy okazji poprawione dwa em dash sprzed tej zmiany, w `ApiKeyListPage`
i `ProviderPicker`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/pages/courses/QuizEditor.tsx

@@ -16,6 +16,7 @@ import {
 } from '../../components/ui'
 import { Icon } from '../../components/Icon'
 import { Modal } from '../../components/Modal'
+import { useConfirm } from '../../components/Confirm'
 import { useToasts } from '../../components/Toasts'
 
 type Tab = 'pytania' | 'ustawienia' | 'statystyki' | 'podglad'
@@ -132,6 +133,7 @@ function QuestionsTab({
 }) {
   const queryClient = useQueryClient()
   const toasts = useToasts()
+  const confirm = useConfirm()
   const fileRef = useRef<HTMLInputElement>(null)
 
   const [editing, setEditing] = useState<{ id: number | null; draft: QuestionDraft } | null>(null)
@@ -335,8 +337,25 @@ function QuestionsTab({
                 <IconAction
                   icon="trash"
                   label={`Usuń pytanie ${index + 1}`}
-                  onClick={() => {
-                    if (window.confirm('Usunąć to pytanie?')) remove.mutate(question.id)
+                  onClick={async () => {
+                    const ok = await confirm({
+                      title: 'Usunąć pytanie?',
+                      message: (
+                        <>
+                          {/* tresc pytania bywa dluga: w oknie pokazujemy poczatek */}
+                          Pytanie {index + 1}{' '}
+                          <strong>
+                            {question.content.length > 120
+                              ? `${question.content.slice(0, 120).trimEnd()}...`
+                              : question.content}
+                          </strong>{' '}
+                          zniknie z quizu razem z odpowiedziami.
+                        </>
+                      ),
+                      confirmLabel: 'Usuń pytanie',
+                      destructive: true,
+                    })
+                    if (ok) remove.mutate(question.id)
                   }}
                 />
               </div>