feat(s3-storage, notification): add consistent search filters

src/app/notifications/components/NotificationsSettingsPanel.tsx

@@ -22,6 +22,7 @@ import {
   type LucideIcon,
 } from "lucide-react";
 import TablePagination from "@/components/TablePagination";
+import SearchField from "@/components/SearchField";
 import {
   FieldLabel,
   Toggle,
@@ -297,13 +298,19 @@ export default function NotificationsSettingsPanel({
   const [draft, setDraft] = useState<NotificationProviderItem | null>(null);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
+  const [search, setSearch] = useState("");
 
   const providers = settings.notifications.providers;
-  const totalItems = providers.length;
+  const filteredProviders = providers.filter((provider) => {
+    const query = search.trim().toLowerCase();
+    return !query || [provider.name, provider.type, provider.channel, ...provider.actions]
+      .filter(Boolean).some((value) => value.toLowerCase().includes(query));
+  });
+  const totalItems = filteredProviders.length;
   const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
   const safePage = Math.min(currentPage, totalPages);
   const startIndex = (safePage - 1) * PAGE_SIZE;
-  const pagedProviders = providers.slice(startIndex, startIndex + PAGE_SIZE);
+  const pagedProviders = filteredProviders.slice(startIndex, startIndex + PAGE_SIZE);
   const startItem = totalItems === 0 ? 0 : startIndex + 1;
   const endItem = totalItems === 0 ? 0 : startIndex + pagedProviders.length;
 
@@ -376,6 +383,10 @@ export default function NotificationsSettingsPanel({
           </button>
         </div>
 
+        <div style={{ padding: "12px 20px", borderBottom: "1px solid var(--border)" }}>
+          <SearchField placeholder="Search providers..." value={search} onChange={(event) => { setSearch(event.target.value); setCurrentPage(1); }} containerStyle={{ minWidth: 0 }} />
+        </div>
+
         {totalItems === 0 ? (
           <div style={{ padding: 48, textAlign: "center" }}>
             <Bell

src/app/s3-storage/components/S3StorageSettingsPanel.tsx

@@ -17,6 +17,7 @@ import {
   type LucideIcon,
 } from "lucide-react";
 import TablePagination from "@/components/TablePagination";
+import SearchField from "@/components/SearchField";
 import { FieldLabel } from "@/app/settings/components/SettingsPrimitives";
 import type {
   S3StorageDestinationInput,
@@ -213,12 +214,17 @@ export default function S3StorageSettingsPanel({
   const [draft, setDraft] = useState<DestinationDraft | null>(null);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
+  const [search, setSearch] = useState("");
 
-  const totalItems = destinations.length;
+  const filteredDestinations = destinations.filter((destination) => {
+    const query = search.trim().toLowerCase();
+    return !query || [destination.name, destination.provider, destination.bucket, destination.region, destination.endpoint ?? "", destination.server?.name ?? ""].some((value) => value.toLowerCase().includes(query));
+  });
+  const totalItems = filteredDestinations.length;
   const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
   const safePage = Math.min(currentPage, totalPages);
   const startIndex = (safePage - 1) * PAGE_SIZE;
-  const pagedDestinations = destinations.slice(
+  const pagedDestinations = filteredDestinations.slice(
     startIndex,
     startIndex + PAGE_SIZE,
   );
@@ -329,6 +335,10 @@ export default function S3StorageSettingsPanel({
           </button>
         </div>
 
+        <div style={{ padding: "12px 20px", borderBottom: "1px solid var(--border)" }}>
+          <SearchField placeholder="Search destinations..." value={search} onChange={(event) => { setSearch(event.target.value); setCurrentPage(1); }} containerStyle={{ minWidth: 0 }} />
+        </div>
+
         {destinations.length === 0 ? (
           <div style={{ padding: 24 }}>
             <div