feat(miners): add search input to repository miner list

src/components/leaderboard/TopMinersTable.tsx

@@ -12,6 +12,8 @@ import {
   CircularProgress,
   Collapse,
   Grid,
+  InputAdornment,
+  TextField,
   Tooltip,
   Popover,
   Portal,
@@ -21,10 +23,13 @@ import {
 import { alpha } from '@mui/material/styles';
 import TuneOutlinedIcon from '@mui/icons-material/TuneOutlined';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import SearchIcon from '@mui/icons-material/Search';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import ViewListIcon from '@mui/icons-material/ViewList';
 import { MinerCard } from './MinerCard';
 import { MinersList } from './MinersList';
+import { ClearSearchAdornment } from '../common';
+import { DebouncedSearchInput } from '../common/DebouncedSearchInput';
 import theme, { STATUS_COLORS } from '../../theme';
 import { useDataTableParams } from '../../hooks/useDataTableParams';
 import {
@@ -298,6 +303,11 @@ const TopMinersTable: React.FC<TopMinersTableProps> = ({
       ? MINERS_PAGE_SIZE
       : storedVisibleCount;
 
+  const handleSearchChange = useCallback(
+    (value: string) => setFilter('search', value),
+    [setFilter],
+  );
+
   const handleViewModeChange = useCallback(
     (nextMode: ViewMode) => {
       // Persist the user's choice BEFORE updating the URL. When the serializer
@@ -495,35 +505,87 @@ const TopMinersTable: React.FC<TopMinersTableProps> = ({
 
   const usePortal = portalTarget && isLargeScreen;
 
+  const searchInput = (
+    <DebouncedSearchInput
+      initialDraft={searchQuery}
+      onDebouncedChange={handleSearchChange}
+    >
+      {({ draftValue, setDraftValue }) => (
+        <TextField
+          placeholder="Search by GitHub ID"
+          size="small"
+          value={draftValue}
+          onChange={(e) => setDraftValue(e.target.value)}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <SearchIcon sx={{ color: 'text.tertiary', fontSize: '1rem' }} />
+              </InputAdornment>
+            ),
+            endAdornment: (
+              <ClearSearchAdornment
+                visible={Boolean(draftValue)}
+                onClear={() => {
+                  setDraftValue('');
+                  handleSearchChange('');
+                }}
+              />
+            ),
+          }}
+          sx={{
+            width: { xs: '100%', sm: 260 },
+            '& .MuiOutlinedInput-root': {
+              color: 'text.primary',
+              backgroundColor: 'background.default',
+              fontSize: '0.8rem',
+              height: '36px',
+              borderRadius: 2,
+              '& fieldset': { borderColor: 'border.light' },
+              '&:hover fieldset': { borderColor: 'border.medium' },
+              '&.Mui-focused fieldset': { borderColor: 'primary.main' },
+            },
+          }}
+        />
+      )}
+    </DebouncedSearchInput>
+  );
+
   return (
     <Box sx={{ pt: 2 }}>
       {/* On large screens: render controls expanded in the sidebar */}
       {usePortal ? (
-        <Portal container={portalTarget}>
-          <ToolbarSidebarPanel
-            sortOption={sortOption}
-            sortDirection={sortDirection}
-            onSortChange={handleSortChange}
-            variant={variant}
-            viewMode={viewMode}
-            onViewModeChange={handleViewModeChange}
-            eligibleOssFilter={eligibleOssFilter}
-            eligibleDiscoveryFilter={eligibleDiscoveryFilter}
-            onEligibleOssChange={handleEligibleOssChange}
-            onEligibleDiscoveryChange={handleEligibleDiscoveryChange}
-            open={filtersOpen}
-            onOpenChange={handleFiltersOpenChange}
-          />
-        </Portal>
+        <>
+          <Portal container={portalTarget}>
+            <ToolbarSidebarPanel
+              sortOption={sortOption}
+              sortDirection={sortDirection}
+              onSortChange={handleSortChange}
+              variant={variant}
+              viewMode={viewMode}
+              onViewModeChange={handleViewModeChange}
+              eligibleOssFilter={eligibleOssFilter}
+              eligibleDiscoveryFilter={eligibleDiscoveryFilter}
+              onEligibleOssChange={handleEligibleOssChange}
+              onEligibleDiscoveryChange={handleEligibleDiscoveryChange}
+              open={filtersOpen}
+              onOpenChange={handleFiltersOpenChange}
+            />
+          </Portal>
+          <Box sx={{ mb: 1.5, px: 2 }}>{searchInput}</Box>
+        </>
       ) : (
         <Box
           sx={{
             mb: 1.5,
             px: 2,
             display: 'flex',
-            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: 1.5,
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
           }}
         >
+          {searchInput}
           <ToolbarPopover
             sortOption={sortOption}
             sortDirection={sortDirection}