misc

src/components/req/ReqForm.jsx

@@ -17,15 +17,17 @@ export default function ReqForm() {
     const [suggestions, setSuggestions] = useState([]);
 
     useEffect(() => {
-        if (title !== selectedTitle && selectedOverview) {
-            setSelectedOverview("");
-            setSelectedTitle("");
+        if (title !== selectedTitle) {
+            if (selectedOverview) setSelectedOverview("");
+            if (selectedItem) setSelectedItem(null);
+            if (type) setType("");
+            if (selectedTitle) setSelectedTitle("");
         }
-    }, [title, selectedTitle, selectedOverview]);
+    }, [title, selectedTitle, selectedOverview, selectedItem, type]);
 
     const searchTitles = async (event) => {
         const query = event.query;
-        if (query.length < 3) {
+        if (query.length < 2) {
             setSuggestions([]);
             return;
         }
@@ -103,6 +105,15 @@ export default function ReqForm() {
         }, 0);
     };
 
+    const formatMediaType = (mediaTypeValue) => {
+        if (!mediaTypeValue) return "";
+        if (mediaTypeValue === "tv") return "TV Series";
+        if (mediaTypeValue === "movie") return "Movie";
+        return mediaTypeValue.charAt(0).toUpperCase() + mediaTypeValue.slice(1);
+    };
+
+    const selectedTypeLabel = formatMediaType(selectedItem?.mediaType || type);
+
     return (
         <div className="flex items-center justify-center min-h-[60vh] p-4">
             <div className="w-full max-w-lg p-8 bg-white dark:bg-[#1E1E1E] rounded-3xl shadow-2xl border border-gray-200 dark:border-gray-700">
@@ -124,6 +135,7 @@ export default function ReqForm() {
                             value={title}
                             suggestions={suggestions}
                             completeMethod={searchTitles}
+                            minLength={2}
                             onChange={(e) => setTitle(typeof e.value === 'string' ? e.value : e.value.label)}
                             onSelect={(e) => {
                                 setType(e.value.mediaType === 'tv' ? 'tv' : 'movie');
@@ -148,6 +160,11 @@ export default function ReqForm() {
                                 </div>
                             )}
                         />
+                        {selectedItem && selectedTypeLabel && (
+                            <div className="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">
+                                Selected type: {selectedTypeLabel}
+                            </div>
+                        )}
                     </div>
 
                     {selectedOverview && (