feat(i18n): add new localization strings for settings and two-step login across multiple languages

style: adjust grid layout for app main and add responsive styles for settings category

style: enhance management styles with new settings category layout and tabs

style: improve responsive design for settings modules and submodules

webapp/src/components/ConfirmDialog.tsx

@@ -1,7 +1,7 @@
 import { createPortal } from 'preact/compat';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import type { ComponentChildren } from 'preact';
-import { TriangleAlert } from 'lucide-preact';
+import { TriangleAlert, X } from 'lucide-preact';
 import { t } from '@/lib/i18n';
 
 interface ConfirmDialogProps {
@@ -14,6 +14,8 @@ interface ConfirmDialogProps {
   cancelText?: string;
   danger?: boolean;
   hideCancel?: boolean;
+  hideConfirm?: boolean;
+  closeButton?: boolean;
   confirmDisabled?: boolean;
   cancelDisabled?: boolean;
   onConfirm: () => void;
@@ -211,17 +213,33 @@ export default function ConfirmDialog(props: ConfirmDialogProps) {
             </div>
           </>
         ) : null}
+        {props.closeButton && (
+          <button
+            type="button"
+            className="dialog-close-btn"
+            aria-label={t('txt_close')}
+            disabled={props.cancelDisabled}
+            onClick={() => {
+              if (props.cancelDisabled) return;
+              props.onCancel();
+            }}
+          >
+            <X size={18} />
+          </button>
+        )}
         <h3 id={titleId} className="dialog-title">{props.title}</h3>
         <div id={messageId} className={`dialog-message ${props.variant === 'warning' ? 'warning' : ''}`}>{props.message}</div>
         {props.children}
-        <button
-          type="submit"
-          className={`btn ${props.danger ? 'btn-danger' : 'btn-primary'} dialog-btn`}
-          disabled={props.confirmDisabled}
-          data-dialog-confirm="true"
-        >
-          {props.confirmText || t('txt_yes')}
-        </button>
+        {!props.hideConfirm && (
+          <button
+            type="submit"
+            className={`btn ${props.danger ? 'btn-danger' : 'btn-primary'} dialog-btn`}
+            disabled={props.confirmDisabled}
+            data-dialog-confirm="true"
+          >
+            {props.confirmText || t('txt_yes')}
+          </button>
+        )}
         {!props.hideCancel && (
           <button
             type="button"