Made manual cv search form collapsible

src/client/components/ComicDetail/ComicVineSearchForm.tsx

@@ -43,52 +43,46 @@ export const ComicVineSearchForm = (props: ComicVineSearchFormProps) => {
       validate={validate}
       render={({ handleSubmit }) => (
         <form onSubmit={handleSubmit}>
-          <span className="flex items-center">
+          <label className="block py-1 text-slate-700 dark:text-slate-200">Issue Name</label>
-            <span className="text-md text-slate-500 dark:text-slate-500 pr-5">
-              Override Search Query
-            </span>
-            <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
-          </span>
-          <label className="block py-1">Issue Name</label>
           <Field name="issueName">
             {(props) => (
               <input
                 {...props.input}
-                className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-full rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                className="appearance-none bg-slate-100 dark:bg-slate-700 h-10 w-full rounded-md border border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-300"
                 placeholder="Type the issue name"
               />
             )}
           </Field>
-          <div className="flex flex-row gap-4">
+          <div className="flex flex-row gap-4 mt-2">
             <div>
-              <label className="block py-1">Number</label>
+              <label className="block py-1 text-slate-700 dark:text-slate-200">Number</label>
               <Field name="issueNumber">
                 {(props) => (
                   <input
                     {...props.input}
-                    className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-14 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                    className="appearance-none bg-slate-100 dark:bg-slate-700 h-10 w-14 rounded-md border border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100 py-1 pr-2 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-300"
                     placeholder="#"
                   />
                 )}
               </Field>
             </div>
             <div>
-              <label className="block py-1">Year</label>
+              <label className="block py-1 text-slate-700 dark:text-slate-200">Year</label>
               <Field name="issueYear">
                 {(props) => (
                   <input
                     {...props.input}
-                    className="appearance-none dark:bg-slate-100 bg-slate-100 h-10 w-20 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                    className="appearance-none bg-slate-100 dark:bg-slate-700 h-10 w-20 rounded-md border border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100 py-1 pr-2 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-300"
                     placeholder="1984"
                   />
                 )}
               </Field>
             </div>
 
-            <div className="flex justify-end mt-5">
+            <div className="flex items-end">
               <button
                 type="submit"
-                className="flex h-10 sm:mt-3 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-red-600 focus:outline-none focus:ring active:text-indigo-500"
+                className="flex h-10 items-center rounded-lg border border-green-500 dark:border-green-400 bg-green-500 dark:bg-green-600 px-4 py-2 text-white font-medium hover:bg-green-600 dark:hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 active:bg-green-700"
               >
                 Search
               </button>

src/client/components/ComicDetail/SlidingPanelContent.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { ComicVineSearchForm } from "./ComicVineSearchForm";
 import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
 import { EditMetadataPanel } from "./EditMetadataPanel";
@@ -13,6 +13,47 @@ interface CVMatchesPanelProps {
   onMatchApplied: () => void;
 };
 
+/**
+ * Collapsible container for manual ComicVine search form.
+ * Allows users to manually search when auto-match doesn't yield results.
+ */
+const CollapsibleSearchForm: React.FC<{ rawFileDetails?: RawFileDetails }> = ({
+  rawFileDetails,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className="border border-slate-300 dark:border-slate-600 rounded-lg overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between px-4 py-3 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors text-left"
+        aria-expanded={isExpanded}
+      >
+        <span className="flex items-center gap-2 text-slate-700 dark:text-slate-200 font-medium">
+          <svg
+            className={`w-4 h-4 transition-transform ${isExpanded ? "rotate-90" : ""}`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+          Manual Search
+        </span>
+        <span className="text-sm text-slate-500 dark:text-slate-400">
+          {isExpanded ? "Click to collapse" : "No results? Search manually"}
+        </span>
+      </button>
+      {isExpanded && (
+        <div className="p-4 bg-white dark:bg-slate-800">
+          <ComicVineSearchForm rawFileDetails={rawFileDetails} />
+        </div>
+      )}
+    </div>
+  );
+};
+
 /**
  * Sliding panel content for ComicVine match search.
  *
@@ -32,19 +73,18 @@ export const CVMatchesPanel: React.FC<CVMatchesPanelProps> = ({
   onMatchApplied,
 }) => (
   <>
-    <div>
+    <div className="border-slate-500 border rounded-lg p-2 mb-3">
-      <ComicVineSearchForm rawFileDetails={rawFileDetails} />
+      <p className="text-slate-600 dark:text-slate-300">Searching for:</p>
-    </div>
-
-    <div className="border-slate-500 border rounded-lg p-2 mt-3">
-      <p className="">Searching for:</p>
       {inferredMetadata.issue ? (
         <>
-          <span className="">{inferredMetadata.issue?.name} </span>
+          <span className="text-slate-800 dark:text-slate-100 font-medium">{inferredMetadata.issue?.name} </span>
-          <span className=""> # {inferredMetadata.issue?.number} </span>
+          <span className="text-slate-600 dark:text-slate-300"> # {inferredMetadata.issue?.number} </span>
         </>
       ) : null}
     </div>
+
+    <CollapsibleSearchForm rawFileDetails={rawFileDetails} />
+
     <ComicVineMatchPanel
       props={{
         comicVineMatches,