Collapse request discovery after selecting a title

frontend/app/new-requests/NewRequestClient.tsx

@@ -124,6 +124,21 @@ export default function NewRequestClient() {
     if (!getToken()) router.push('/login')
   }, [router])
 
+  const selectedTitleId = selected?.tmdbId
+  useEffect(() => {
+    if (selectedTitleId) configureSectionRef.current?.focus()
+  }, [selectedTitleId])
+
+  const changeTitle = () => {
+    setSelected(null)
+    setOptions(null)
+    setSelectedSeasons([])
+    setOperation(null)
+    setError(null)
+    setSuccess(null)
+    window.requestAnimationFrame(() => document.getElementById('request-title-search')?.focus())
+  }
+
   const resetAfterType = (nextType: MediaType) => {
     setMediaType(nextType)
     setQuery('')
@@ -197,7 +212,6 @@ export default function NewRequestClient() {
     setError(null)
     setSuccess(null)
     if (item.requestId) {
-      window.setTimeout(() => configureSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 80)
       return
     }
 
@@ -236,7 +250,6 @@ export default function NewRequestClient() {
       setError(caught instanceof Error ? caught.message : 'Could not load request options.')
     } finally {
       setLoadingOptions(false)
-      window.setTimeout(() => configureSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 80)
     }
   }
 
@@ -332,7 +345,7 @@ export default function NewRequestClient() {
       {error && <div className="error-banner request-flow-alert">{error}</div>}
       {success && <div className="status-banner request-flow-alert">{success}</div>}
 
-      <section className="request-flow-stage is-current">
+      {!selected && <section className="request-flow-stage is-current">
         <div className="request-flow-heading">
           <span className="request-flow-number">01</span>
           <div><span>Start here</span><h2>What are you looking for?</h2></div>
@@ -360,9 +373,9 @@ export default function NewRequestClient() {
             </button>
           ))}
         </div>
-      </section>
+      </section>}
 
-      {mediaType && (
+      {mediaType && !selected && (
         <section ref={searchSectionRef} className="request-flow-stage is-current">
           <div className="request-flow-heading">
             <span className="request-flow-number">02</span>
@@ -384,7 +397,7 @@ export default function NewRequestClient() {
         </section>
       )}
 
-      {mediaType && searchAttempted && !searching && (
+      {mediaType && !selected && searchAttempted && !searching && (
         <section ref={resultsSectionRef} className="request-flow-stage is-current">
           <div className="request-flow-heading">
             <span className="request-flow-number">03</span>
@@ -399,12 +412,11 @@ export default function NewRequestClient() {
             <div className="request-result-grid">
               {results.map((item) => {
                 const poster = artworkUrl(item.posterPath)
-                const isSelected = selected?.tmdbId === item.tmdbId && selected.type === item.type
                 return (
                   <button
                     key={`${item.type}:${item.tmdbId}`}
                     type="button"
-                    className={`request-result-card ${isSelected ? 'is-selected' : ''}`}
+                    className="request-result-card"
                     onClick={() => void selectResult(item)}
                   >
                     <span className="request-result-poster">
@@ -414,7 +426,7 @@ export default function NewRequestClient() {
                       <small>{item.type === 'tv' ? 'TV show' : 'Movie'}{item.year ? ` · ${item.year}` : ''}</small>
                       <strong>{item.title}</strong>
                       <p>{item.overview || 'Select this title to view the available request options.'}</p>
-                      <b>{item.requestId ? item.statusLabel || 'Already requested' : isSelected ? 'Selected' : 'Select title'}</b>
+                      <b>{item.requestId ? item.statusLabel || 'Already requested' : 'Select title'}</b>
                     </span>
                   </button>
                 )
@@ -425,12 +437,14 @@ export default function NewRequestClient() {
       )}
 
       {selected && (
-        <section ref={configureSectionRef} className="request-flow-stage is-current request-configure-stage">
+        <section ref={configureSectionRef} tabIndex={-1} aria-labelledby="request-configure-title" className="request-flow-stage is-current request-configure-stage">
           <div className="request-flow-heading">
             <span className="request-flow-number">04</span>
-            <div><span>Final step</span><h2>{selected.requestId ? 'This title is already in the pipeline' : 'Configure your request'}</h2></div>
+            <div><span>Final step</span><h2 id="request-configure-title">{selected.requestId ? 'This title is already in the pipeline' : selected.type === 'tv' ? 'Choose seasons and request' : 'Review and request'}</h2></div>
           </div>
 
+          <button type="button" className="ghost-button" onClick={changeTitle} disabled={loadingOptions || submitting}>Change title</button>
+
           <div className="request-selection-summary">
             <span className="request-selection-poster">
               {selectedPoster ? <img src={selectedPoster} alt="" /> : <i>No artwork</i>}
@@ -448,7 +462,7 @@ export default function NewRequestClient() {
               <button type="button" onClick={() => router.push(`/requests/${selected.requestId}`)}>Open request</button>
             </div>
           ) : loadingOptions ? (
-            <div className="request-flow-empty"><strong>Checking Seerr and {selected.type === 'tv' ? 'Sonarr' : 'Radarr'}…</strong><p>Loading valid profiles and request choices.</p></div>
+            <div className="request-flow-empty"><strong>Checking Seerr and {selected.type === 'tv' ? 'Sonarr' : 'Radarr'}…</strong><p>Preparing your request options.</p></div>
           ) : options ? (
             <div className="request-options-layout">
               {selected.type === 'tv' && (