From f279f8198e4058fb03045346772784a23772e721 Mon Sep 17 00:00:00 2001
From: bittoby <218712309+bittoby@users.noreply.github.com>
Date: Tue, 19 May 2026 19:52:36 +0200
Subject: [PATCH 1/2] feat(miners): add search input to repository miner list

---
 .../leaderboard/MinerSearchInput.tsx          | 61 +++++++++++++++++++
 src/components/leaderboard/TopMinersTable.tsx | 54 ++++++++++------
 2 files changed, 98 insertions(+), 17 deletions(-)
 create mode 100644 src/components/leaderboard/MinerSearchInput.tsx

diff --git a/src/components/leaderboard/MinerSearchInput.tsx b/src/components/leaderboard/MinerSearchInput.tsx
new file mode 100644
index 00000000..90a826c2
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/leaderboard/TopMinersTable.tsx b/src/components/leaderboard/TopMinersTable.tsx
index dacf92ce..338b3be7 100644
--- a/src/components/leaderboard/TopMinersTable.tsx
+++ b/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}

From f52c8e005b8ff249849402fc2c5372f4c948d58e Mon Sep 17 00:00:00 2001
From: bittoby <218712309+bittoby@users.noreply.github.com>
Date: Fri, 22 May 2026 23:36:52 +0200
Subject: [PATCH 2/2] refactor(miners): inline search input in TopMinersTable

---
 .../leaderboard/MinerSearchInput.tsx          | 61 -------------------
 src/components/leaderboard/TopMinersTable.tsx | 52 ++++++++++++++--
 2 files changed, 47 insertions(+), 66 deletions(-)
 delete mode 100644 src/components/leaderboard/MinerSearchInput.tsx

diff --git a/src/components/leaderboard/MinerSearchInput.tsx b/src/components/leaderboard/MinerSearchInput.tsx
deleted file mode 100644
index 90a826c2..00000000
--- a/src/components/leaderboard/MinerSearchInput.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-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>
-  );
-}
diff --git a/src/components/leaderboard/TopMinersTable.tsx b/src/components/leaderboard/TopMinersTable.tsx
index 338b3be7..305170a4 100644
--- a/src/components/leaderboard/TopMinersTable.tsx
+++ b/src/components/leaderboard/TopMinersTable.tsx
@@ -12,6 +12,8 @@ import {
   CircularProgress,
   Collapse,
   Grid,
+  InputAdornment,
+  TextField,
   Tooltip,
   Popover,
   Portal,
@@ -21,11 +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 { MinerSearchInput } from './MinerSearchInput';
+import { ClearSearchAdornment } from '../common';
+import { DebouncedSearchInput } from '../common/DebouncedSearchInput';
 import theme, { STATUS_COLORS } from '../../theme';
 import { useDataTableParams } from '../../hooks/useDataTableParams';
 import {
@@ -502,10 +506,48 @@ const TopMinersTable: React.FC<TopMinersTableProps> = ({
   const usePortal = portalTarget && isLargeScreen;
 
   const searchInput = (
-    <MinerSearchInput
-      initialValue={searchQuery}
-      onChange={handleSearchChange}
-    />
+    <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 (