Add support for secondary actions in dialog components

Updates Confirm, DangerConfirm, and DialogFrame components to support optional secondary actions with customizable labels and variants.

Author: timbornemann

src/App.tsx

@@ -437,6 +437,9 @@ const App: React.FC = () => {
               consequences={state.confirmDialog.consequences}
               confirmLabel={state.confirmDialog.confirmLabel}
               onConfirm={state.executeConfirmDialog}
+              secondaryActionLabel={state.confirmDialog.secondaryActionLabel}
+              secondaryActionVariant={state.confirmDialog.secondaryActionVariant}
+              onSecondaryAction={state.executeConfirmDialogSecondary}
               onCancel={state.closeConfirmDialog}
             />
           )}
@@ -451,6 +454,9 @@ const App: React.FC = () => {
               consequences={state.confirmDialog.consequences}
               confirmLabel={state.confirmDialog.confirmLabel}
               onConfirm={state.executeConfirmDialog}
+              secondaryActionLabel={state.confirmDialog.secondaryActionLabel}
+              secondaryActionVariant={state.confirmDialog.secondaryActionVariant}
+              onSecondaryAction={state.executeConfirmDialogSecondary}
               onCancel={state.closeConfirmDialog}
             />
           )}

src/components/Confirm.tsx

@@ -15,10 +15,13 @@ interface ConfirmProps {
   irreversible?: boolean;
   consequences?: string;
   confirmLabel?: string;
+  secondaryActionLabel?: string;
   cancelLabel?: string;
   onConfirm: () => void;
+  onSecondaryAction?: () => void;
   onCancel: () => void;
   confirmVariant?: 'default' | 'danger';
+  secondaryActionVariant?: 'default' | 'danger';
 }
 
 export const Confirm: React.FC<ConfirmProps> = ({
@@ -29,10 +32,13 @@ export const Confirm: React.FC<ConfirmProps> = ({
   irreversible = false,
   consequences,
   confirmLabel,
+  secondaryActionLabel,
   cancelLabel,
   onConfirm,
+  onSecondaryAction,
   onCancel,
   confirmVariant = 'default',
+  secondaryActionVariant = 'default',
 }) => {
   const { tr } = useI18n();
 
@@ -44,8 +50,11 @@ export const Confirm: React.FC<ConfirmProps> = ({
       onConfirm={onConfirm}
       onEnter={onConfirm}
       confirmLabel={confirmLabel ?? tr('Fortfahren', 'Continue')}
+      secondaryActionLabel={secondaryActionLabel}
       cancelLabel={cancelLabel ?? tr('Abbrechen', 'Cancel')}
       confirmVariant={confirmVariant}
+      secondaryActionVariant={secondaryActionVariant}
+      onSecondaryAction={onSecondaryAction}
     >
       <p className="dialog-message">{message}</p>
       {contextItems.length > 0 && (

src/components/DangerConfirm.tsx

@@ -10,9 +10,12 @@ interface DangerConfirmProps {
   irreversible?: boolean;
   consequences?: string;
   confirmLabel?: string;
+  secondaryActionLabel?: string;
   cancelLabel?: string;
   onConfirm: () => void;
+  onSecondaryAction?: () => void;
   onCancel: () => void;
+  secondaryActionVariant?: 'default' | 'danger';
 }
 
 export const DangerConfirm: React.FC<DangerConfirmProps> = ({
@@ -23,9 +26,12 @@ export const DangerConfirm: React.FC<DangerConfirmProps> = ({
   irreversible = true,
   consequences,
   confirmLabel,
+  secondaryActionLabel,
   cancelLabel,
   onConfirm,
+  onSecondaryAction,
   onCancel,
+  secondaryActionVariant = 'default',
 }) => {
   const { tr } = useI18n();
 
@@ -38,10 +44,13 @@ export const DangerConfirm: React.FC<DangerConfirmProps> = ({
       irreversible={irreversible}
       consequences={consequences}
       confirmLabel={confirmLabel ?? tr('Trotzdem ausführen', 'Run anyway')}
+      secondaryActionLabel={secondaryActionLabel}
       cancelLabel={cancelLabel}
       onConfirm={onConfirm}
+      onSecondaryAction={onSecondaryAction}
       onCancel={onCancel}
       confirmVariant="danger"
+      secondaryActionVariant={secondaryActionVariant}
     />
   );
 };

src/components/DialogFrame.tsx

@@ -7,11 +7,14 @@ interface DialogFrameProps {
   title: string;
   onClose: () => void;
   onConfirm?: () => void;
+  onSecondaryAction?: () => void;
   onEnter?: () => void;
   confirmLabel?: string;
+  secondaryActionLabel?: string;
   cancelLabel?: string;
   confirmDisabled?: boolean;
   confirmVariant?: 'default' | 'danger';
+  secondaryActionVariant?: 'default' | 'danger';
   closeOnBackdrop?: boolean;
   initialFocusRef?: React.RefObject<HTMLElement | null>;
   children: React.ReactNode;
@@ -31,11 +34,14 @@ export const DialogFrame: React.FC<DialogFrameProps> = ({
   title,
   onClose,
   onConfirm,
+  onSecondaryAction,
   onEnter,
   confirmLabel,
+  secondaryActionLabel,
   cancelLabel,
   confirmDisabled = false,
   confirmVariant = 'default',
+  secondaryActionVariant = 'default',
   closeOnBackdrop = true,
   initialFocusRef,
   children,
@@ -134,6 +140,14 @@ export const DialogFrame: React.FC<DialogFrameProps> = ({
           <button className="dialog-btn dialog-btn-secondary" onClick={onClose}>
             {cancelLabel ?? tr('Abbrechen', 'Cancel')}
           </button>
+          {onSecondaryAction && (
+            <button
+              className={`dialog-btn ${secondaryActionVariant === 'danger' ? 'dialog-btn-danger' : 'dialog-btn-primary'}`}
+              onClick={onSecondaryAction}
+            >
+              {secondaryActionLabel ?? tr('Alternative ausfuehren', 'Run alternative')}
+            </button>
+          )}
           {onConfirm && (
             <button
               className={`dialog-btn ${confirmVariant === 'danger' ? 'dialog-btn-danger' : 'dialog-btn-primary'}`}