update: new style for search toolbox

app/app.css

@@ -19,7 +19,7 @@
   --accent: oklch(0.96 0.005 285);
   --accent-foreground: oklch(0.30 0.05 300);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.99 0 0);
   --border: oklch(0.91 0.005 285);
   --input: oklch(0.91 0.005 285);
   --ring: oklch(0.30 0.05 300);
@@ -124,8 +124,6 @@
   }
 }
 
-/* ── Animation keyframes ── */
-
 @keyframes fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
@@ -172,8 +170,6 @@
   50% { opacity: 0.7; }
 }
 
-/* ── Utility classes ── */
-
 .animate-fade-in {
   animation: fade-in 0.5s ease-out both;
 }
@@ -212,7 +208,6 @@
   animation: pulse-soft 2s ease-in-out infinite;
 }
 
-/* Stagger delays for children */
 .stagger-1 { animation-delay: 0.05s; }
 .stagger-2 { animation-delay: 0.1s; }
 .stagger-3 { animation-delay: 0.15s; }
@@ -222,7 +217,6 @@
 .stagger-7 { animation-delay: 0.35s; }
 .stagger-8 { animation-delay: 0.4s; }
 
-/* Button press effect */
 .btn-press {
   transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
@@ -235,7 +229,6 @@
   box-shadow: none;
 }
 
-/* Card hover lift */
 .card-hover {
   transition: transform 0.25s ease, box-shadow 0.25s ease;
 }
@@ -244,7 +237,6 @@
   box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12);
 }
 
-/* Smooth loading skeleton */
 .skeleton {
   background: linear-gradient(90deg, var(--muted) 25%, var(--accent) 50%, var(--muted) 75%);
   background-size: 200% 100%;
@@ -252,7 +244,6 @@
   border-radius: 0.5rem;
 }
 
-/* Reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
   .animate-fade-in,
   .animate-fade-in-up,

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">