thalla/lomavuokraus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Hide manual AI translation behind expander

Browse source
This commit is contained in:
Tero Halla-aho 2025-12-06 22:55:56 +02:00
parent 0f9699a0ec
commit b172250551
1 changed files with 42 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
app/listings/new/page.tsx
View file

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