feat: P4 ChannelAnalytics tab; P5 FromUrlModal + URL→draft in ChannelView
This commit is contained in:
Nik (Claude)
@@ -0,0 +1,191 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* FromUrlModal — модальное окно «URL → черновик».
|
||||
* Props:
|
||||
* open — bool
|
||||
* channelId — number
|
||||
* onClose()
|
||||
* onApply({ content, imageUrl, title }) — вызывается с результатом
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { X, Link2, Loader2, Youtube, Globe, Send, AlertCircle } from 'lucide-react';
|
||||
|
||||
function detectSource(url) {
|
||||
try {
|
||||
const u = new URL(url);
|
||||
if (u.hostname.includes('youtube.com') || u.hostname.includes('youtu.be')) return 'youtube';
|
||||
if (u.hostname === 't.me') return 'telegram';
|
||||
return 'web';
|
||||
} catch { return 'web'; }
|
||||
}
|
||||
|
||||
const SOURCE_ICONS = {
|
||||
youtube: { Icon: Youtube, label: 'YouTube', color: 'text-red-400' },
|
||||
telegram: { Icon: Send, label: 'Telegram', color: 'text-blue-400' },
|
||||
web: { Icon: Globe, label: 'Сайт', color: 'text-text-mute' },
|
||||
};
|
||||
|
||||
export default function FromUrlModal({ open, channelId, onClose, onApply }) {
|
||||
const [url, setUrl] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [result, setResult] = useState(null);
|
||||
const [edited, setEdited] = useState('');
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const source = detectSource(url);
|
||||
const { Icon: SrcIcon, label: srcLabel, color: srcColor } = SOURCE_ICONS[source] || SOURCE_ICONS.web;
|
||||
|
||||
async function generate() {
|
||||
if (!url.trim()) return;
|
||||
setLoading(true);
|
||||
setError('');
|
||||
setResult(null);
|
||||
try {
|
||||
const res = await fetch('/api/generate/from-url', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ channelId, url: url.trim() }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || 'Ошибка генерации');
|
||||
setResult(data);
|
||||
setEdited(data.content);
|
||||
} catch (e) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function apply() {
|
||||
if (!edited.trim()) return;
|
||||
onApply({
|
||||
content: edited,
|
||||
imageUrl: result?.imageUrl || null,
|
||||
title: result?.title || '',
|
||||
});
|
||||
handleClose();
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
setUrl('');
|
||||
setResult(null);
|
||||
setEdited('');
|
||||
setError('');
|
||||
onClose();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
|
||||
<div className="w-full max-w-lg rounded-2xl bg-surface border border-border shadow-2xl flex flex-col max-h-[90vh]">
|
||||
|
||||
{/* Шапка */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-border shrink-0">
|
||||
<h2 className="font-semibold flex items-center gap-2">
|
||||
<Link2 className="w-4 h-4 text-accent" />
|
||||
URL → черновик
|
||||
</h2>
|
||||
<button onClick={handleClose} className="btn-ghost p-1.5 rounded-lg">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Контент */}
|
||||
<div className="flex flex-col gap-4 p-5 overflow-y-auto">
|
||||
|
||||
{/* Инпут URL */}
|
||||
<div>
|
||||
<label className="label">Ссылка на статью, YouTube-видео или Telegram-пост</label>
|
||||
<div className="relative">
|
||||
<div className={`absolute left-3 top-1/2 -translate-y-1/2 ${srcColor}`}>
|
||||
<SrcIcon className="w-4 h-4" />
|
||||
</div>
|
||||
<input
|
||||
type="url"
|
||||
className="input pl-9 pr-3"
|
||||
placeholder="https://..."
|
||||
value={url}
|
||||
onChange={e => { setUrl(e.target.value); setResult(null); setError(''); }}
|
||||
disabled={loading}
|
||||
onKeyDown={e => e.key === 'Enter' && !loading && generate()}
|
||||
/>
|
||||
</div>
|
||||
{url && (
|
||||
<p className="hint mt-1">Источник: {srcLabel}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Кнопка генерации */}
|
||||
{!result && (
|
||||
<button
|
||||
onClick={generate}
|
||||
disabled={loading || !url.trim()}
|
||||
className="btn-primary w-full"
|
||||
>
|
||||
{loading ? (
|
||||
<><Loader2 className="w-4 h-4 animate-spin" /> Читаю и генерирую…</>
|
||||
) : (
|
||||
<><Link2 className="w-4 h-4" /> Сгенерировать пост</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Ошибка */}
|
||||
{error && (
|
||||
<div className="card p-3 text-sm text-red-400 flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4 shrink-0" /> {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Результат */}
|
||||
{result && (
|
||||
<>
|
||||
{result.title && (
|
||||
<div className="text-xs text-text-mute border-l-2 border-accent/40 pl-3 py-1">
|
||||
Источник: {result.title}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="label">Черновик поста — отредактируй и применяй</label>
|
||||
<textarea
|
||||
className="input min-h-[180px] text-sm leading-relaxed"
|
||||
value={edited}
|
||||
onChange={e => setEdited(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
<p className="hint">{edited.length} символов</p>
|
||||
</div>
|
||||
|
||||
{result.imageUrl && (
|
||||
<div>
|
||||
<label className="label">Обложка из источника</label>
|
||||
<img
|
||||
src={result.imageUrl}
|
||||
alt=""
|
||||
className="w-full rounded-lg max-h-40 object-cover"
|
||||
referrerPolicy="no-referrer"
|
||||
onError={e => { e.target.style.display = 'none'; }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button onClick={apply} className="btn-primary flex-1">
|
||||
Применить в редактор
|
||||
</button>
|
||||
<button onClick={() => { setResult(null); setEdited(''); }} className="btn-ghost">
|
||||
Заново
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user