feat(waf): add search and filter in ip group view dialog

frontend/app/(main)/waf/components/ip-group-view-dialog.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { Loader2, Trash2 } from 'lucide-react';
+import { Loader2, Search, Trash2, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import {
   AlertDialog,
@@ -24,6 +24,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { Input } from '@/components/ui/input';
 import {
   Table,
   TableBody,
@@ -59,6 +60,14 @@ export function IPGroupViewDialog({
   const [deleteTarget, setDeleteTarget] = useState<IPGroupViewEntry | null>(
     null,
   );
+  const [searchKeyword, setSearchKeyword] = useState('');
+
+  useEffect(() => {
+    if (!open) {
+      setSearchKeyword('');
+      setDeleteTarget(null);
+    }
+  }, [open]);
 
   const entries = useMemo(
     () =>
@@ -68,6 +77,13 @@ export function IPGroupViewDialog({
     [group, t],
   );
 
+  const trimmedKeyword = searchKeyword.trim().toLowerCase();
+
+  const filteredEntries = useMemo(() => {
+    if (!trimmedKeyword) return entries;
+    return entries.filter((e) => e.ip.toLowerCase().includes(trimmedKeyword));
+  }, [entries, trimmedKeyword]);
+
   const showAutomaticMeta = group?.type === 'automatic';
 
   return (
@@ -78,6 +94,7 @@ export function IPGroupViewDialog({
           onOpenChange(nextOpen);
           if (!nextOpen) {
             setDeleteTarget(null);
+            setSearchKeyword('');
           }
         }}
       >
@@ -90,10 +107,16 @@ export function IPGroupViewDialog({
             </DialogTitle>
             <DialogDescription>
               {group
-                ? t('viewDialog.summary', {
-                    type: t(`types.${group.type}`),
-                    count: entries.length,
-                  })
+                ? trimmedKeyword
+                  ? t('viewDialog.summaryFiltered', {
+                      type: t(`types.${group.type}`),
+                      count: entries.length,
+                      matched: filteredEntries.length,
+                    })
+                  : t('viewDialog.summary', {
+                      type: t(`types.${group.type}`),
+                      count: entries.length,
+                    })
                 : t('viewDialog.fallbackDesc')}
             </DialogDescription>
           </DialogHeader>
@@ -122,64 +145,95 @@ export function IPGroupViewDialog({
                   {t('viewDialog.subscriptionHint')}
                 </p>
               ) : null}
-              <div className='rounded-lg border border-dashed'>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>{t('viewDialog.ipAddress')}</TableHead>
-                      {showAutomaticMeta ? (
-                        <>
-                          <TableHead>{t('viewDialog.capturedAt')}</TableHead>
-                          <TableHead>{t('viewDialog.banRemaining')}</TableHead>
-                        </>
-                      ) : null}
-                      <TableHead className='w-[80px] text-right'>
-                        {t('viewDialog.actions')}
-                      </TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {entries.map((entry) => (
-                      <TableRow key={entry.ip}>
-                        <TableCell className='font-mono text-sm'>
-                          {entry.ip}
-                        </TableCell>
+              <div className='relative'>
+                <Search className='pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground' />
+                <Input
+                  value={searchKeyword}
+                  onChange={(e) => setSearchKeyword(e.target.value)}
+                  placeholder={t('viewDialog.searchPlaceholder')}
+                  className='pl-8 pr-8'
+                />
+                {searchKeyword ? (
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    size='icon'
+                    className='absolute right-1 top-1/2 size-7 -translate-y-1/2 text-muted-foreground hover:text-foreground'
+                    onClick={() => setSearchKeyword('')}
+                  >
+                    <X className='size-3.5' />
+                    <span className='sr-only'>
+                      {t('viewDialog.clearSearch')}
+                    </span>
+                  </Button>
+                ) : null}
+              </div>
+              {filteredEntries.length === 0 ? (
+                <EmptyStateWithBorder
+                  description={t('viewDialog.noSearchResult')}
+                />
+              ) : (
+                <div className='rounded-lg border border-dashed'>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>{t('viewDialog.ipAddress')}</TableHead>
                         {showAutomaticMeta ? (
                           <>
-                            <TableCell className='text-sm text-muted-foreground'>
-                              {entry.capturedAt
-                                ? formatDateTime(entry.capturedAt)
-                                : '—'}
-                            </TableCell>
-                            <TableCell className='text-sm'>
-                              {entry.banRemaining ?? '—'}
-                            </TableCell>
+                            <TableHead>{t('viewDialog.capturedAt')}</TableHead>
+                            <TableHead>
+                              {t('viewDialog.banRemaining')}
+                            </TableHead>
                           </>
                         ) : null}
-                        <TableCell className='text-right'>
-                          <Button
-                            type='button'
-                            variant='ghost'
-                            size='icon'
-                            className='size-8 text-destructive hover:text-destructive'
-                            disabled={removingIp === entry.ip}
-                            onClick={() => setDeleteTarget(entry)}
-                          >
-                            {removingIp === entry.ip ? (
-                              <Loader2 className='size-4 animate-spin' />
-                            ) : (
-                              <Trash2 className='size-4' />
-                            )}
-                            <span className='sr-only'>
-                              {t('viewDialog.deleteIp', { ip: entry.ip })}
-                            </span>
-                          </Button>
-                        </TableCell>
+                        <TableHead className='w-[80px] text-right'>
+                          {t('viewDialog.actions')}
+                        </TableHead>
                       </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </div>
+                    </TableHeader>
+                    <TableBody>
+                      {filteredEntries.map((entry) => (
+                        <TableRow key={entry.ip}>
+                          <TableCell className='font-mono text-sm'>
+                            {entry.ip}
+                          </TableCell>
+                          {showAutomaticMeta ? (
+                            <>
+                              <TableCell className='text-sm text-muted-foreground'>
+                                {entry.capturedAt
+                                  ? formatDateTime(entry.capturedAt)
+                                  : '—'}
+                              </TableCell>
+                              <TableCell className='text-sm'>
+                                {entry.banRemaining ?? '—'}
+                              </TableCell>
+                            </>
+                          ) : null}
+                          <TableCell className='text-right'>
+                            <Button
+                              type='button'
+                              variant='ghost'
+                              size='icon'
+                              className='size-8 text-destructive hover:text-destructive'
+                              disabled={removingIp === entry.ip}
+                              onClick={() => setDeleteTarget(entry)}
+                            >
+                              {removingIp === entry.ip ? (
+                                <Loader2 className='size-4 animate-spin' />
+                              ) : (
+                                <Trash2 className='size-4' />
+                              )}
+                              <span className='sr-only'>
+                                {t('viewDialog.deleteIp', { ip: entry.ip })}
+                              </span>
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
             </div>
           )}
 

frontend/messages/fragments/security.en.json

@@ -257,6 +257,10 @@
       "titleNamed": "View {name}",
       "title": "View IP group",
       "summary": "{type} · {count} IPs",
+      "summaryFiltered": "{type} · {count} IPs ({matched} matched)",
+      "searchPlaceholder": "Search IP addresses...",
+      "clearSearch": "Clear search",
+      "noSearchResult": "No matching IP addresses found.",
       "fallbackDesc": "View IPs in this group and remove entries you no longer need.",
       "loading": "Loading IP list...",
       "noGroup": "No IP group selected.",

frontend/messages/fragments/security.zh-CN.json

@@ -257,6 +257,10 @@
       "titleNamed": "查看 {name}",
       "title": "查看 IP 组",
       "summary": "{type} · 共 {count} 条 IP",
+      "summaryFiltered": "{type} · 共 {count} 条 IP（匹配 {matched} 条）",
+      "searchPlaceholder": "搜索 IP 地址...",
+      "clearSearch": "清空搜索",
+      "noSearchResult": "未找到匹配的 IP 地址。",
       "fallbackDesc": "查看当前 IP 组中的 IP 列表，并可移除不需要的条目。",
       "loading": "加载 IP 列表...",
       "noGroup": "未选择 IP 组。",