Refactor frontend components and dependencies

- Update ESLint configuration for frontend
- Refactor dialog components (ActivateJail, CreateAction, CreateFilter, CreateJail)
- Update JailsTab and RegexTesterTab components
- Refactor TopCountriesPieChart component
- Update package.json dependencies
- Update documentation (Tasks.md)
- Refactor CodeList component for jail page

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/components/TopCountriesPieChart.tsx

@@ -188,9 +188,9 @@ export const TopCountriesPieChart = memo(function TopCountriesPieChart({
             }}
             labelLine={false}
           >
-            {slices.map((slice, index) => (
+            {slices.map((slice) => (
               // eslint-disable-next-line @typescript-eslint/no-deprecated
-              <Cell key={index} fill={slice.fill} />
+              <Cell key={slice.name} fill={slice.fill} />
             ))}
           </Pie>
           <Tooltip content={PieTooltip} />

frontend/src/components/config/ActivateJailDialog.tsx

@@ -227,7 +227,7 @@ export function ActivateJailDialog({
                   <strong>Configuration errors detected:</strong>
                   <ul style={{ margin: `${tokens.spacingVerticalXS} 0 0 0`, paddingLeft: "1.2em" }}>
                     {blockingIssues.map((issue, idx) => (
-                      <li key={idx}><em>{issue.field}:</em> {issue.message}</li>
+                      <li key={issue.field + "-" + String(idx)}><em>{issue.field}:</em> {issue.message}</li>
                     ))}
                   </ul>
                 </MessageBarBody>
@@ -242,7 +242,7 @@ export function ActivateJailDialog({
                   <strong>Advisory warnings:</strong>
                   <ul style={{ margin: `${tokens.spacingVerticalXS} 0 0 0`, paddingLeft: "1.2em" }}>
                     {advisoryIssues.map((issue, idx) => (
-                      <li key={idx}><em>{issue.field}:</em> {issue.message}</li>
+                      <li key={issue.field + "-" + String(idx)}><em>{issue.field}:</em> {issue.message}</li>
                     ))}
                   </ul>
                 </MessageBarBody>
@@ -257,16 +257,12 @@ export function ActivateJailDialog({
                   <strong>Post-activation warnings:</strong>
                   <ul style={{ margin: `${tokens.spacingVerticalXS} 0 0 0`, paddingLeft: "1.2em" }}>
                     {validationWarnings.map((w, idx) => (
-                      <li key={idx}>{w}</li>
+                      <li key={w + "-" + String(idx)}>{w}</li>
                     ))}
                   </ul>
                 </MessageBarBody>
               </MessageBar>
             )}
-
-            <Text block weight="semibold" style={{ marginBottom: tokens.spacingVerticalS }}>
-              Override values (leave blank to use config defaults)
-            </Text>
             <div
               style={{
                 display: "grid",

frontend/src/components/config/CreateActionDialog.tsx

@@ -114,7 +114,7 @@ export function CreateActionDialog({
       .finally(() => {
         setSubmitting(false);
       });
-  }, [name, actionban, actionunban, submitting, onCreate]);
+  }, [name, actionban, actionunban, submitting, onCreate, onCreateAction]);
 
   const canConfirm = name.trim() !== "" && !submitting;
 

frontend/src/components/config/CreateFilterDialog.tsx

@@ -123,7 +123,7 @@ export function CreateFilterDialog({
       .finally(() => {
         setSubmitting(false);
       });
-  }, [name, failregex, ignoreregex, submitting, onCreate]);
+  }, [name, failregex, ignoreregex, submitting, onCreate, onCreateFilter]);
 
   const canConfirm = name.trim() !== "" && !submitting;
 

frontend/src/components/config/CreateJailDialog.tsx

@@ -101,7 +101,7 @@ export function CreateJailDialog({
       .finally(() => {
         setSubmitting(false);
       });
-  }, [name, submitting, onCreated]);
+  }, [name, submitting, onCreated, onCreateJail]);
 
   const canConfirm = name.trim() !== "" && !submitting;
 

frontend/src/components/config/JailsTab.tsx

@@ -714,7 +714,7 @@ function InactiveJailDetail({
                 <strong>Errors:</strong>
                 <ul style={{ margin: `4px 0 0 0`, paddingLeft: "1.2em" }}>
                   {blockingIssues.map((issue, idx) => (
-                    <li key={idx}><em>{issue.field}:</em> {issue.message}</li>
+                    <li key={`${issue.field}-${String(idx)}`}><em>{issue.field}:</em> {issue.message}</li>
                   ))}
                 </ul>
               </MessageBarBody>
@@ -726,7 +726,7 @@ function InactiveJailDetail({
                 <strong>Warnings:</strong>
                 <ul style={{ margin: `4px 0 0 0`, paddingLeft: "1.2em" }}>
                   {advisoryIssues.map((issue, idx) => (
-                    <li key={idx}><em>{issue.field}:</em> {issue.message}</li>
+                    <li key={`${issue.field}-${String(idx)}`}><em>{issue.field}:</em> {issue.message}</li>
                   ))}
                 </ul>
               </MessageBarBody>
@@ -814,7 +814,6 @@ export function JailsTab({ initialJail }: JailsTabProps): React.JSX.Element {
     refreshInactiveJails();
   }, [refresh, refreshInactiveJails]);
 
-  /** Unified list items: active jails first (from useJailConfigs), then inactive. */
   const listItems = useMemo<Array<{ name: string; kind: "active" | "inactive" }>>(() => {
     const activeItems = jails.map((j) => ({ name: j.name, kind: "active" as const }));
     const activeNames = new Set(jails.map((j) => j.name));
@@ -913,7 +912,7 @@ export function JailsTab({ initialJail }: JailsTabProps): React.JSX.Element {
               key={selectedActiveJail.name}
               jail={selectedActiveJail}
               onSave={updateJail}
-              onDeactivate={() => { handleDeactivate(selectedActiveJail.name); }}
+              onDeactivate={() => { void handleDeactivate(selectedActiveJail.name); }}
             />
           ) : selectedInactiveJail !== undefined ? (
             <InactiveJailDetail
@@ -922,10 +921,10 @@ export function JailsTab({ initialJail }: JailsTabProps): React.JSX.Element {
               onActivate={() => { setActivateTarget(selectedInactiveJail); }}
               onDeactivate={
                 selectedInactiveJail.has_local_override
-                  ? (): void => { handleDeactivateInactive(selectedInactiveJail.name); }
+                  ? (): void => { void handleDeactivateInactive(selectedInactiveJail.name); }
                   : undefined
               }
-              onValidate={() => validateJailConfig(selectedInactiveJail.name)}
+              onValidate={() => { void validateJailConfig(selectedInactiveJail.name); }}
             />
           ) : null}
         </ConfigListDetail>

frontend/src/components/config/RegexTesterTab.tsx

@@ -134,7 +134,7 @@ export function RegexTesterTab(): React.JSX.Element {
                   </Text>
                   {result.groups.map((g, i) => (
                     <Badge
-                      key={i}
+                      key={`${g}-${String(i)}`}
                       appearance="tint"
                       color="informative"
                       style={{ marginLeft: tokens.spacingHorizontalXS }}
@@ -206,7 +206,7 @@ export function RegexTesterTab(): React.JSX.Element {
                 <div className={styles.previewArea}>
                   {preview.lines.map((ln, idx) => (
                     <div
-                      key={idx}
+                      key={ln.line + "-" + String(idx)}
                       className={`${styles.logLine} ${ln.matched ? styles.matched : styles.notMatched}`}
                     >
                       {ln.line}

frontend/src/pages/jail/CodeList.tsx

@@ -15,7 +15,7 @@ export function CodeList({ items, empty }: CodeListProps): React.JSX.Element {
   return (
     <div className={styles.codeList}>
       {items.map((item, i) => (
-        <span key={i} className={styles.codeItem}>
+        <span key={`${item}-${String(i)}`} className={styles.codeItem}>
           {item}
         </span>
       ))}