update: new style for search toolbox

app/routes/form-responses.tsx

@@ -129,7 +129,6 @@ export default function FormResponsesPage() {
             Back to form
           </Link>
 
-          {/* Header */}
           <div className="mb-8 rounded-xl border border-border bg-card shadow-sm animate-float-in">
             <div className="h-2 rounded-t-xl bg-primary" />
             <div className="p-6">
@@ -152,7 +151,6 @@ export default function FormResponsesPage() {
                 </div>
               </div>
 
-              {/* Stats */}
               <div className="mt-5 grid grid-cols-2 gap-4 border-t border-border pt-5 sm:grid-cols-4">
                 <StatCard
                   icon={<Users className="h-4 w-4 text-primary" />}
@@ -182,7 +180,6 @@ export default function FormResponsesPage() {
             </div>
           </div>
 
-          {/* Tabs */}
           <div className="mb-6 flex gap-1 rounded-lg border border-border bg-card p-1 animate-fade-in-up" style={{ animationDelay: '0.15s' }}>
             <button
               onClick={() => setActiveTab("summary")}
@@ -578,7 +575,6 @@ function IndividualTab({
 
   return (
     <div className="flex flex-col gap-6">
-      {/* Navigation */}
       <div className="flex items-center justify-between rounded-xl border border-border bg-card p-4 shadow-sm">
         <button
           onClick={() => setSelectedIndex((i) => Math.max(0, i - 1))}
@@ -606,7 +602,6 @@ function IndividualTab({
         </button>
       </div>
 
-      {/* Answers */}
       <div className="flex flex-col gap-4">
         {form.questions.map((question, index) => {
           const answer = current.answers.find(

app/routes/form.tsx

@@ -206,7 +206,7 @@ export default function FormPreviewPage() {
       {showDeleteConfirm && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
           <div className="mx-4 w-full max-w-sm rounded-xl border border-border bg-card p-6 shadow-lg">
-            <h2 className="text-lg font-semibold text-foreground">Delete Form</h2>
+            <h2 className="text-lg font-semibold text-card-foreground">Delete Form</h2>
             <p className="mt-2 text-sm text-muted-foreground">
               Are you sure you want to delete this form? This action cannot be
               undone.

app/routes/forms.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect, useRef, useCallback } from "react"
 import { useNavigate, Link } from "react-router"
-import { Plus, Search, Filter, ArrowUpDown, Loader2 } from "lucide-react"
+import { Plus, Loader2 } from "lucide-react"
 import { Navbar } from "@/components/shared/navbar"
 import { Footer } from "@/components/shared/footer"
-import { FormInput } from "@/components/shared/form-input"
 import { FormButton } from "@/components/shared/form-button"
 import { FormCard } from "@/components/forms/form-card"
+import { FormsToolbar } from "@/components/forms/forms-toolbar"
 import { useAuth } from "@/app/context/auth-context"
 import { getForms } from "@/lib/api"
 import type { FormSummary } from "@/lib/types"
@@ -122,54 +122,17 @@ export default function FormsPage() {
             </Link>
           </div>
 
-          <div className="mb-6 flex flex-col gap-3">
-            <div className="relative w-full sm:max-w-md">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <FormInput
-                placeholder="Search forms by title..."
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                className="pl-9"
-              />
-            </div>
-
-            <div className="grid grid-cols-2 gap-2 sm:flex sm:items-center sm:gap-2">
-              <div className="relative col-span-2 sm:col-span-1">
-                <Filter className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-                <select
-                  value={statusFilter}
-                  onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
-                  className="h-10 w-full appearance-none rounded-lg border border-border bg-card pl-8 pr-8 text-sm text-foreground shadow-sm focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30"
-                >
-                  <option value="all">All Status</option>
-                  <option value="has_responses">Has Responses</option>
-                  <option value="no_responses">No Responses</option>
-                </select>
-              </div>
-
-              <div className="relative">
-                <ArrowUpDown className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
-                <select
-                  value={sortBy}
-                  onChange={(e) => setSortBy(e.target.value as SortBy)}
-                  className="h-10 w-full appearance-none rounded-lg border border-border bg-card pl-8 pr-8 text-sm text-foreground shadow-sm focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30"
-                >
-                  <option value="created_at">Sort: Created</option>
-                  <option value="updated_at">Sort: Updated</option>
-                </select>
-              </div>
-
-              <div className="relative">
-                <select
-                  value={sortDir}
-                  onChange={(e) => setSortDir(e.target.value as SortDir)}
-                  className="h-10 w-full appearance-none rounded-lg border border-border bg-card pl-8 pr-8 text-sm text-foreground shadow-sm focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30"
-                >
-                  <option value="newest">Newest first</option>
-                  <option value="oldest">Oldest first</option>
-                </select>
-              </div>
-            </div>
+          <div className="mb-6">
+            <FormsToolbar
+              search={search}
+              status={statusFilter}
+              sortBy={sortBy}
+              sortDir={sortDir}
+              onSearchChange={setSearch}
+              onStatusChange={setStatusFilter}
+              onSortChange={setSortBy}
+              onOrderChange={setSortDir}
+            />
           </div>
 
           <div className="mb-4 flex items-center justify-between">