From 82a4738d95cb8da7c9ac45789b4878ab03b778f4 Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sat, 29 Nov 2025 19:42:21 +0200
Subject: [PATCH] Improve localization AI helper layout

---
 app/listings/new/page.tsx | 110 ++++++++++++++++++++++++++------------
 lib/i18n.ts               |   9 ++++
 2 files changed, 84 insertions(+), 35 deletions(-)

diff --git a/app/listings/new/page.tsx b/app/listings/new/page.tsx
index a3277be..3f72b02 100644
--- a/app/listings/new/page.tsx
+++ b/app/listings/new/page.tsx
@@ -59,6 +59,7 @@ export default function NewListingPage() {
   const [loading, setLoading] = useState(false);
   const [isAuthed, setIsAuthed] = useState(false);
   const [aiResponse, setAiResponse] = useState('');
+  const [copyStatus, setCopyStatus] = useState<'idle' | 'copied' | 'error'>('idle');
 
   useEffect(() => {
     setCurrentLocale(uiLocale as Locale);
@@ -192,6 +193,18 @@ export default function NewListingPage() {
     }
   }
 
+  async function copyAiPrompt() {
+    try {
+      if (!navigator?.clipboard) throw new Error('clipboard unavailable');
+      await navigator.clipboard.writeText(aiPrompt);
+      setCopyStatus('copied');
+      setTimeout(() => setCopyStatus('idle'), 1500);
+    } catch (err) {
+      setCopyStatus('error');
+      setTimeout(() => setCopyStatus('idle'), 2000);
+    }
+  }
+
   function parseImages(): ImageInput[] {
     return selectedImages.map((img) => ({
       data: img.dataUrl,
@@ -306,7 +319,7 @@ export default function NewListingPage() {
   }
 
   return (
-    <main className="panel" style={{ maxWidth: 720, margin: '40px auto' }}>
+    <main className="panel" style={{ maxWidth: 1100, margin: '40px auto' }}>
       <h1>{t('createListingTitle')}</h1>
       <form onSubmit={onSubmit} style={{ display: 'grid', gap: 10 }}>
         <label>
@@ -337,40 +350,67 @@ export default function NewListingPage() {
             })}
           </div>
         </div>
-        <label>
-          {t('titleLabel')}
-          <input value={translations[currentLocale].title} onChange={(e) => updateTranslation(currentLocale, 'title', e.target.value)} required />
-        </label>
-        <label>
-          {t('descriptionLabel')}
-          <textarea value={translations[currentLocale].description} onChange={(e) => updateTranslation(currentLocale, 'description', e.target.value)} required rows={4} />
-        </label>
-        <label>
-          {t('teaserLabel')}
-          <input value={translations[currentLocale].teaser} onChange={(e) => updateTranslation(currentLocale, 'teaser', e.target.value)} />
-        </label>
-        <div className="panel" style={{ border: '1px solid rgba(148,163,184,0.3)', background: 'rgba(255,255,255,0.02)' }}>
-          <h3 style={{ marginTop: 0 }}>{t('aiHelperTitle')}</h3>
-          <p style={{ color: '#cbd5e1', marginTop: 4 }}>{t('aiHelperLead')}</p>
-          <label style={{ display: 'grid', gap: 6, marginTop: 8 }}>
-            <span>{t('aiPromptLabel')}</span>
-            <textarea value={aiPrompt} readOnly rows={10} style={{ fontFamily: 'monospace' }} />
-          </label>
-          <label style={{ display: 'grid', gap: 6, marginTop: 8 }}>
-            <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: 8, flexWrap: 'wrap' }}>
-            <button type="button" className="button secondary" onClick={() => applyAiResponse()}>
-              {t('aiApply')}
-            </button>
-            <span style={{ color: '#cbd5e1', fontSize: 13 }}>{t('aiHelperNote')}</span>
+        <div
+          style={{
+            display: 'grid',
+            gap: 12,
+            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
+            alignItems: 'start',
+          }}
+        >
+          <div style={{ display: 'grid', gap: 8 }}>
+            <label>
+              {t('titleLabel')}
+              <input value={translations[currentLocale].title} onChange={(e) => updateTranslation(currentLocale, 'title', e.target.value)} required />
+            </label>
+            <label>
+              {t('descriptionLabel')}
+              <textarea value={translations[currentLocale].description} onChange={(e) => updateTranslation(currentLocale, 'description', e.target.value)} required rows={4} />
+            </label>
+            <label>
+              {t('teaserLabel')}
+              <input value={translations[currentLocale].teaser} onChange={(e) => updateTranslation(currentLocale, 'teaser', e.target.value)} />
+            </label>
+          </div>
+          <div className="panel" style={{ border: '1px solid rgba(148,163,184,0.3)', background: 'rgba(255,255,255,0.02)' }}>
+            <h3 style={{ marginTop: 0 }}>{t('aiHelperTitle')}</h3>
+            <p style={{ color: '#cbd5e1', marginTop: 4 }}>{t('aiHelperLead')}</p>
+            <div style={{ display: 'grid', gap: 6, marginTop: 8 }}>
+              <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, marginTop: 8 }}>
+              <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: 8, flexWrap: 'wrap' }}>
+              <button type="button" className="button secondary" onClick={() => applyAiResponse()}>
+                {t('aiApply')}
+              </button>
+              <span style={{ color: '#cbd5e1', fontSize: 13 }}>{t('aiHelperNote')}</span>
+            </div>
           </div>
         </div>
         <div style={{ display: 'grid', gap: 8, gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))' }}>
diff --git a/lib/i18n.ts b/lib/i18n.ts
index 2457069..a531caf 100644
--- a/lib/i18n.ts
+++ b/lib/i18n.ts
@@ -143,6 +143,9 @@ const baseMessages = {
     aiHelperTitle: 'AI translation helper',
     aiHelperLead: 'Copy the prompt to your AI assistant, let it translate missing locales, and paste the JSON reply back.',
     aiPromptLabel: 'Prompt to send to AI',
+    aiCopyPrompt: 'Copy prompt',
+    aiPromptCopied: 'Copied',
+    aiCopyError: 'Copy failed',
     aiResponseLabel: 'Paste AI response (JSON)',
     aiApply: 'Apply AI response',
     aiApplyError: 'Could not read AI response. Please ensure it is valid JSON with a locales object.',
@@ -287,6 +290,9 @@ const baseMessages = {
     aiHelperTitle: 'AI-käännösapu',
     aiHelperLead: 'Kopioi prompti tekoälylle, käännä puuttuvat kielet ja liitä JSON-vastaus takaisin.',
     aiPromptLabel: 'Prompti tekoälylle',
+    aiCopyPrompt: 'Kopioi prompti',
+    aiPromptCopied: 'Kopioitu',
+    aiCopyError: 'Kopiointi epäonnistui',
     aiResponseLabel: 'Liitä tekoälyn vastaus (JSON)',
     aiApply: 'Käytä AI-vastausta',
     aiApplyError: 'Vastausta ei voitu lukea. Varmista, että se on kelvollista JSONia ja sisältää locales-avaimen.',
@@ -552,6 +558,9 @@ const svMessages: Record<keyof typeof baseMessages.en, string> = {
   aiHelperTitle: 'AI-översättningshjälp',
   aiHelperLead: 'Kopiera prompten till din AI-assistent, låt den översätta saknade språk och klistra in JSON-svaret här.',
   aiPromptLabel: 'Prompt till AI',
+  aiCopyPrompt: 'Kopiera prompt',
+  aiPromptCopied: 'Kopierad',
+  aiCopyError: 'Kopiering misslyckades',
   aiResponseLabel: 'Klistra in AI-svar (JSON)',
   aiApply: 'Använd AI-svar',
   aiApplyError: 'Kunde inte läsa AI-svaret. Kontrollera att det är giltig JSON med locales-nyckeln.',