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 [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))' }}>