cleanup 1

frontend/src/pages/AdminLogsPage.tsx

@@ -1,27 +1,20 @@
-import { useState, useEffect, FormEvent } from 'react';
+import { SyntheticEvent } from 'react';
 import { useGetLogs } from '../generated/anthoLumeAPIV1';
-import type { LogsResponse } from '../generated/model';
 import { Button } from '../components/Button';
-import { LoadingState } from '../components';
-import { useDebounce } from '../hooks/useDebounce';
+import { LoadingState, TextInput } from '../components';
+import { useDebouncedState } from '../hooks/useDebouncedState';
 import { Search2Icon } from '../icons';
 
 export default function AdminLogsPage() {
-  const [filter, setFilter] = useState('');
-  const [activeFilter, setActiveFilter] = useState('');
-  const debouncedFilter = useDebounce(filter, 300);
-
-  useEffect(() => {
-    setActiveFilter(debouncedFilter);
-  }, [debouncedFilter]);
+  const [filter, setFilter, activeFilter, flushFilter] = useDebouncedState('', 300);
 
   const { data: logsData, isLoading } = useGetLogs(activeFilter ? { filter: activeFilter } : {});
 
-  const logs = logsData?.status === 200 ? ((logsData.data as LogsResponse).logs ?? []) : [];
+  const logs = logsData?.status === 200 ? (logsData.data.logs ?? []) : [];
 
-  const handleFilterSubmit = (e: FormEvent) => {
+  const handleFilterSubmit = (e: SyntheticEvent) => {
     e.preventDefault();
-    setActiveFilter(filter);
+    flushFilter();
   };
 
   return (
@@ -33,11 +26,11 @@ export default function AdminLogsPage() {
               <span className="inline-flex items-center border-y border-l border-border bg-surface px-3 text-sm text-content-muted shadow-xs">
                 <Search2Icon size={15} hoverable={false} />
               </span>
-              <input
+              <TextInput
                 type="text"
                 value={filter}
                 onChange={e => setFilter(e.target.value)}
-                className="w-full flex-1 appearance-none rounded-none border border-border bg-surface p-2 text-base text-content shadow-xs placeholder:text-content-subtle focus:border-transparent focus:outline-hidden focus:ring-2 focus:ring-primary-600"
+                className="p-2"
                 placeholder="JQ Filter"
               />
             </div>
@@ -50,13 +43,11 @@ export default function AdminLogsPage() {
         </form>
       </div>
 
-      <div
-        className="flex w-full flex-col-reverse overflow-scroll text-content"
-        style={{ fontFamily: 'monospace' }}
-      >
+      <div className="flex w-full flex-col-reverse overflow-scroll font-mono text-content">
         {isLoading ? (
           <LoadingState className="min-h-40 w-full" />
         ) : (
+          // Key By Index - Log lines have no stable id and can repeat; this list is append-only and fully replaced on refetch.
           logs.map((log, index) => (
             <span key={index} className="whitespace-nowrap hover:whitespace-pre">
               {typeof log === 'string' ? log : JSON.stringify(log)}