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

src/components/leaderboard/MinerSearchInput.tsx

@@ -0,0 +1,61 @@
+import { InputAdornment, TextField } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import { ClearSearchAdornment } from '../common';
+import { DebouncedSearchInput } from '../common/DebouncedSearchInput';
+
+export interface MinerSearchInputProps {
+  initialValue: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function MinerSearchInput({
+  initialValue,
+  onChange,
+  placeholder = 'Search by GitHub ID',
+}: MinerSearchInputProps): JSX.Element {
+  return (
+    <DebouncedSearchInput
+      initialDraft={initialValue}
+      onDebouncedChange={onChange}
+    >
+      {({ draftValue, setDraftValue }) => (
+        <TextField
+          placeholder={placeholder}
+          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('');
+                  onChange('');
+                }}
+              />
+            ),
+          }}
+          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>
+  );
+}

src/components/leaderboard/TopMinersTable.tsx

@@ -25,6 +25,7 @@ import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import ViewListIcon from '@mui/icons-material/ViewList';
 import { MinerCard } from './MinerCard';
 import { MinersList } from './MinersList';
+import { MinerSearchInput } from './MinerSearchInput';
 import theme, { STATUS_COLORS } from '../../theme';
 import { useDataTableParams } from '../../hooks/useDataTableParams';
 import {
@@ -298,6 +299,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 +501,49 @@ const TopMinersTable: React.FC<TopMinersTableProps> = ({
 
   const usePortal = portalTarget && isLargeScreen;
 
+  const searchInput = (
+    <MinerSearchInput
+      initialValue={searchQuery}
+      onChange={handleSearchChange}
+    />
+  );
+
   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}