From 86547bdf0d7b0a856ace63168466ce9e3e113f17 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Fri, 6 Feb 2026 10:31:37 +0100
Subject: [PATCH] style: relocate search bar to top toolbar for better
 visibility

---
 components/DataGrid.tsx | 102 +++++++++++++++++++++-------------------
 1 file changed, 53 insertions(+), 49 deletions(-)

diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 433d9dd..de301c1 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -813,9 +813,59 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
             <div className="bg-surface border border-border rounded-xl shadow-lg flex flex-col">
 
                 {/* Toolbar */}
-                <div className="p-4 border-b border-border bg-slate-900/50 flex flex-col lg:flex-row gap-4 justify-between items-start lg:items-center rounded-t-xl">
+                <div className="p-4 border-b border-border bg-slate-900/50 flex flex-col xl:flex-row gap-4 justify-between items-start xl:items-center rounded-t-xl">
+
+                    <div className="flex flex-wrap items-center gap-3 w-full xl:w-auto">
+                        {/* Search Bar */}
+                        <div className="flex items-center gap-2 mr-2">
+                            <div className="relative w-full sm:w-64 lg:w-80">
+                                {showBulkSearch ? (
+                                    <textarea
+                                        placeholder="Bulk Search (ASINs/SKUs)..."
+                                        value={searchTerm}
+                                        onChange={(e) => setSearchTerm(e.target.value)}
+                                        className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all min-h-[40px] max-h-[120px] font-mono leading-tight"
+                                        rows={1}
+                                    />
+                                ) : (
+                                    <>
+                                        <input
+                                            type="text"
+                                            placeholder="Search SKU, ASIN..."
+                                            value={searchTerm}
+                                            onChange={(e) => setSearchTerm(e.target.value)}
+                                            className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10"
+                                        />
+                                        <svg className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                        </svg>
+                                    </>
+                                )}
+                                {searchTerm && (
+                                    <button
+                                        onClick={() => setSearchTerm('')}
+                                        className={`absolute right-3 ${showBulkSearch ? 'top-2' : 'top-2.5'} text-slate-500 hover:text-white`}
+                                    >
+                                        <CloseIcon />
+                                    </button>
+                                )}
+                            </div>
+                            <button
+                                onClick={() => setShowBulkSearch(!showBulkSearch)}
+                                className={`p-2 rounded-lg border transition-all flex items-center justify-center ${showBulkSearch
+                                    ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.2)]'
+                                    : 'bg-slate-800/50 border-white/5 text-slate-400 hover:text-slate-200 hover:border-white/10'
+                                    }`}
+                                title={showBulkSearch ? "Switch to Single Search" : "Enable Bulk Search"}
+                            >
+                                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        <div className="h-6 w-px bg-white/10 hidden xl:block mx-1" />
 
-                    <div className="flex flex-wrap items-center gap-3 w-full lg:w-auto">
                         {/* Dimensions Selector */}
                         <div className="relative z-30" ref={dimensionRef}>
                             <button
@@ -1350,55 +1400,9 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
                 </table>
             </div>
 
-            {/* Pagination and Search */}
+            {/* Pagination and Info */}
             <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-slate-900/50 p-4 rounded-xl border border-white/5 shadow-lg">
                 <div className="flex flex-wrap items-center gap-4 w-full md:w-auto">
-                    {/* Search Bar */}
-                    <div className="flex flex-col gap-2 w-full md:w-auto">
-                        <div className="relative w-full md:w-80">
-                            {showBulkSearch ? (
-                                <textarea
-                                    placeholder="Paste ASINs or SKUs (separated by commas or newlines)..."
-                                    value={searchTerm}
-                                    onChange={(e) => setSearchTerm(e.target.value)}
-                                    className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all min-h-[100px] font-mono"
-                                />
-                            ) : (
-                                <>
-                                    <input
-                                        type="text"
-                                        placeholder="Search SKU, Title, or ASIN..."
-                                        value={searchTerm}
-                                        onChange={(e) => setSearchTerm(e.target.value)}
-                                        className="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all pl-10"
-                                    />
-                                    <svg className="absolute left-3 top-2.5 w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                    </svg>
-                                </>
-                            )}
-                            {searchTerm && (
-                                <button
-                                    onClick={() => setSearchTerm('')}
-                                    className={`absolute right-3 ${showBulkSearch ? 'top-2' : 'top-2.5'} text-slate-500 hover:text-white`}
-                                >
-                                    <CloseIcon />
-                                </button>
-                            )}
-                        </div>
-                        <button
-                            onClick={() => setShowBulkSearch(!showBulkSearch)}
-                            className={`text-[10px] uppercase tracking-wider font-bold px-3 py-1 rounded-lg border transition-all self-start ${showBulkSearch
-                                    ? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.2)]'
-                                    : 'bg-slate-800/50 border-white/5 text-slate-400 hover:text-slate-200 hover:border-white/10'
-                                }`}
-                        >
-                            {showBulkSearch ? '← Back to Single Search' : 'Bulk Search Mode'}
-                        </button>
-                    </div>
-
-                    <div className="h-8 w-px bg-white/10 hidden md:block" />
-
                     <button
                         onClick={handleExport}
                         className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl text-sm font-black uppercase tracking-widest transition-all shadow-lg active:scale-95 border border-emerald-500/50"