From b17225055132e1b57e4e78ab4027fe9948958873 Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sat, 6 Dec 2025 22:55:56 +0200
Subject: [PATCH] Hide manual AI translation behind expander

---
 app/listings/new/page.tsx | 77 +++++++++++++++++++++------------------
 1 file changed, 42 insertions(+), 35 deletions(-)

diff --git a/app/listings/new/page.tsx b/app/listings/new/page.tsx
index 0d9e132..df542eb 100644
--- a/app/listings/new/page.tsx
+++ b/app/listings/new/page.tsx
@@ -64,6 +64,7 @@ export default function NewListingPage() {
   const [aiResponse, setAiResponse] = useState('');
   const [copyStatus, setCopyStatus] = useState<'idle' | 'copied' | 'error'>('idle');
   const [aiLoading, setAiLoading] = useState(false);
+  const [showManualAi, setShowManualAi] = useState(false);
   const [slugStatus, setSlugStatus] = useState<'idle' | 'checking' | 'available' | 'taken' | 'error'>('idle');
   const [suggestedSlugs, setSuggestedSlugs] = useState<Record<Locale, string>>({ en: '', fi: '', sv: '' });
 
@@ -216,8 +217,10 @@ export default function NewListingPage() {
         return next;
       });
       setMessage(t('aiAutoSuccess'));
+      setShowManualAi(false);
     } catch (err) {
       setError(t('aiAutoError'));
+      setShowManualAi(true);
     } finally {
       setAiLoading(false);
     }
@@ -513,44 +516,48 @@ export default function NewListingPage() {
               </button>
               <span style={{ color: '#cbd5e1', fontSize: 13 }}>{t('aiHelperNote')}</span>
             </div>
-            <div style={{ marginTop: 12, display: 'grid', gap: 6 }}>
-              <strong>{t('aiManualLead')}</strong>
-              <div style={{ display: 'grid', gap: 6 }}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' }}>
-                  <span>{t('aiPromptLabel')}</span>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                    {copyStatus === 'copied' ? (
-                      <span style={{ color: '#34d399', fontSize: 13 }}>{t('aiPromptCopied')}</span>
-                    ) : null}
-                    {copyStatus === 'error' ? <span style={{ color: '#f87171', fontSize: 13 }}>{t('aiCopyError')}</span> : null}
-                    <button
-                      type="button"
-                      className="button secondary"
-                      onClick={copyAiPrompt}
-                      style={{ minHeight: 0, padding: '8px 12px' }}
-                    >
-                      {t('aiCopyPrompt')}
-                    </button>
+            <details open={showManualAi} style={{ marginTop: 12 }}>
+              <summary style={{ cursor: 'pointer', color: '#cbd5e1' }}>
+                {showManualAi ? t('aiManualLead') : t('aiManualLead')}
+              </summary>
+              <div style={{ marginTop: 8, display: 'grid', gap: 6 }}>
+                <div style={{ display: 'grid', gap: 6 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' }}>
+                    <span>{t('aiPromptLabel')}</span>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                      {copyStatus === 'copied' ? (
+                        <span style={{ color: '#34d399', fontSize: 13 }}>{t('aiPromptCopied')}</span>
+                      ) : null}
+                      {copyStatus === 'error' ? <span style={{ color: '#f87171', fontSize: 13 }}>{t('aiCopyError')}</span> : null}
+                      <button
+                        type="button"
+                        className="button secondary"
+                        onClick={copyAiPrompt}
+                        style={{ minHeight: 0, padding: '8px 12px' }}
+                      >
+                        {t('aiCopyPrompt')}
+                      </button>
+                    </div>
                   </div>
+                  <textarea value={aiPrompt} readOnly rows={10} style={{ fontFamily: 'monospace' }} />
+                </div>
+                <label style={{ display: 'grid', gap: 6 }}>
+                  <span>{t('aiResponseLabel')}</span>
+                  <textarea
+                    value={aiResponse}
+                    onChange={(e) => setAiResponse(e.target.value)}
+                    rows={6}
+                    placeholder='{"locales":{"fi":{"title":"..."}}}'
+                    style={{ fontFamily: 'monospace' }}
+                  />
+                </label>
+                <div style={{ display: 'flex', gap: 10, marginTop: 4, flexWrap: 'wrap' }}>
+                  <button type="button" className="button secondary" onClick={() => applyAiResponse()}>
+                    {t('aiApply')}
+                  </button>
                 </div>
-                <textarea value={aiPrompt} readOnly rows={10} style={{ fontFamily: 'monospace' }} />
               </div>
-              <label style={{ display: 'grid', gap: 6 }}>
-                <span>{t('aiResponseLabel')}</span>
-                <textarea
-                  value={aiResponse}
-                  onChange={(e) => setAiResponse(e.target.value)}
-                  rows={6}
-                  placeholder='{"locales":{"fi":{"title":"..."}}}'
-                  style={{ fontFamily: 'monospace' }}
-                />
-              </label>
-              <div style={{ display: 'flex', gap: 10, marginTop: 4, flexWrap: 'wrap' }}>
-                <button type="button" className="button secondary" onClick={() => applyAiResponse()}>
-                  {t('aiApply')}
-                </button>
-              </div>
-            </div>
+            </details>
           </div>
         </div>
         <div style={{ display: 'grid', gap: 8, gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))' }}>