feat: spaces redesign, model selector, auth fixes
Spaces: - Perplexity-like UI with collaboration features - Space detail page with threads/members tabs - Invite members via email, role management - New space creation with icon/color picker Model selector: - Added Ollama client for free Auto model - GooSeek 1.0 via Timeweb (tariff-based) - Frontend model dropdown in ChatInput Auth & Infrastructure: - Fixed auth-svc missing from Dockerfile.all - Removed duplicate ratelimit_tiered.go (conflict) - Added Redis to api-gateway for rate limiting - Fixed Next.js proxy for local development UI improvements: - Redesigned login button in sidebar (gradient) - Settings page with tabs (account/billing/prefs) - Auth pages visual refresh Made-with: Cursor
This commit is contained in:
home
@@ -2,32 +2,61 @@
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
import { ForgotPasswordForm } from '@/components/auth';
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-base flex flex-col">
|
||||
<header className="p-4">
|
||||
<Link href="/" className="inline-flex items-center gap-2 text-lg font-semibold text-primary">
|
||||
<div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center">
|
||||
<span className="text-accent font-bold">G</span>
|
||||
<div className="min-h-screen bg-gradient-main flex flex-col relative overflow-hidden">
|
||||
{/* Background decorations */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/4 -left-32 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-accent-secondary/5 rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent/3 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="relative z-10 p-6">
|
||||
<Link href="/" className="inline-flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-xl icon-gradient flex items-center justify-center">
|
||||
<Sparkles className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
GooSeek
|
||||
<span className="font-black italic text-primary tracking-tight text-2xl group-hover:text-gradient transition-all duration-300">
|
||||
GooSeek
|
||||
</span>
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex items-center justify-center px-4 py-8">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-elevated border border-border rounded-2xl p-8 shadow-xl">
|
||||
<ForgotPasswordForm
|
||||
showTitle
|
||||
onBack={() => router.push('/login')}
|
||||
/>
|
||||
{/* Main content */}
|
||||
<main className="relative z-10 flex-1 flex items-center justify-center px-4 py-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: 'easeOut' }}
|
||||
className="w-full max-w-md"
|
||||
>
|
||||
{/* Card with gradient border */}
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-[1px] bg-gradient-to-r from-accent/30 via-accent-secondary/20 to-accent/30 rounded-2xl blur-sm" />
|
||||
<div className="relative bg-elevated/95 backdrop-blur-xl border border-border/50 rounded-2xl p-8 shadow-2xl">
|
||||
<ForgotPasswordForm
|
||||
showTitle
|
||||
onBack={() => router.push('/login')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="relative z-10 p-6 text-center">
|
||||
<p className="text-xs text-faint">
|
||||
© 2026 GooSeek. Все права защищены.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
import { LoginForm } from '@/components/auth';
|
||||
import { useAuth } from '@/lib/contexts/AuthContext';
|
||||
|
||||
@@ -18,45 +20,78 @@ export default function LoginPage() {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-base flex items-center justify-center">
|
||||
<div className="min-h-screen bg-gradient-main flex items-center justify-center">
|
||||
<div className="w-8 h-8 border-2 border-accent border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-base flex flex-col">
|
||||
<header className="p-4">
|
||||
<Link href="/" className="inline-flex items-center gap-2 text-lg font-semibold text-primary">
|
||||
<div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center">
|
||||
<span className="text-accent font-bold">G</span>
|
||||
<div className="min-h-screen bg-gradient-main flex flex-col relative overflow-hidden">
|
||||
{/* Background decorations */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/4 -left-32 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-accent-secondary/5 rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent/3 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="relative z-10 p-6">
|
||||
<Link href="/" className="inline-flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-xl icon-gradient flex items-center justify-center">
|
||||
<Sparkles className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
GooSeek
|
||||
<span className="font-black italic text-primary tracking-tight text-2xl group-hover:text-gradient transition-all duration-300">
|
||||
GooSeek
|
||||
</span>
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex items-center justify-center px-4 py-8">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-elevated border border-border rounded-2xl p-8 shadow-xl">
|
||||
<LoginForm
|
||||
showTitle
|
||||
onSuccess={() => router.push('/')}
|
||||
onSwitchToRegister={() => router.push('/register')}
|
||||
/>
|
||||
{/* Main content */}
|
||||
<main className="relative z-10 flex-1 flex items-center justify-center px-4 py-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: 'easeOut' }}
|
||||
className="w-full max-w-md"
|
||||
>
|
||||
{/* Card with gradient border */}
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-[1px] bg-gradient-to-r from-accent/30 via-accent-secondary/20 to-accent/30 rounded-2xl blur-sm" />
|
||||
<div className="relative bg-elevated/95 backdrop-blur-xl border border-border/50 rounded-2xl p-8 shadow-2xl">
|
||||
<LoginForm
|
||||
showTitle
|
||||
onSuccess={() => router.push('/')}
|
||||
onSwitchToRegister={() => router.push('/register')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-muted mt-6">
|
||||
{/* Footer text */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.2, duration: 0.4 }}
|
||||
className="text-center text-sm text-muted mt-6"
|
||||
>
|
||||
Продолжая, вы соглашаетесь с{' '}
|
||||
<Link href="/terms" className="text-accent hover:text-accent-hover">
|
||||
<Link href="/terms" className="text-accent hover:text-accent-hover transition-colors">
|
||||
условиями
|
||||
</Link>{' '}
|
||||
и{' '}
|
||||
<Link href="/privacy" className="text-accent hover:text-accent-hover">
|
||||
<Link href="/privacy" className="text-accent hover:text-accent-hover transition-colors">
|
||||
политикой конфиденциальности
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="relative z-10 p-6 text-center">
|
||||
<p className="text-xs text-faint">
|
||||
© 2026 GooSeek. Все права защищены.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Sparkles } from 'lucide-react';
|
||||
import { RegisterForm } from '@/components/auth';
|
||||
import { useAuth } from '@/lib/contexts/AuthContext';
|
||||
|
||||
@@ -18,41 +20,74 @@ export default function RegisterPage() {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-base flex items-center justify-center">
|
||||
<div className="min-h-screen bg-gradient-main flex items-center justify-center">
|
||||
<div className="w-8 h-8 border-2 border-accent border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-base flex flex-col">
|
||||
<header className="p-4">
|
||||
<Link href="/" className="inline-flex items-center gap-2 text-lg font-semibold text-primary">
|
||||
<div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center">
|
||||
<span className="text-accent font-bold">G</span>
|
||||
<div className="min-h-screen bg-gradient-main flex flex-col relative overflow-hidden">
|
||||
{/* Background decorations */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/4 -left-32 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-accent-secondary/5 rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent/3 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="relative z-10 p-6">
|
||||
<Link href="/" className="inline-flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-xl icon-gradient flex items-center justify-center">
|
||||
<Sparkles className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
GooSeek
|
||||
<span className="font-black italic text-primary tracking-tight text-2xl group-hover:text-gradient transition-all duration-300">
|
||||
GooSeek
|
||||
</span>
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex items-center justify-center px-4 py-8">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-elevated border border-border rounded-2xl p-8 shadow-xl">
|
||||
<RegisterForm
|
||||
showTitle
|
||||
onSuccess={() => router.push('/')}
|
||||
onSwitchToLogin={() => router.push('/login')}
|
||||
/>
|
||||
{/* Main content */}
|
||||
<main className="relative z-10 flex-1 flex items-center justify-center px-4 py-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: 'easeOut' }}
|
||||
className="w-full max-w-md"
|
||||
>
|
||||
{/* Card with gradient border */}
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-[1px] bg-gradient-to-r from-accent/30 via-accent-secondary/20 to-accent/30 rounded-2xl blur-sm" />
|
||||
<div className="relative bg-elevated/95 backdrop-blur-xl border border-border/50 rounded-2xl p-8 shadow-2xl">
|
||||
<RegisterForm
|
||||
showTitle
|
||||
onSuccess={() => router.push('/')}
|
||||
onSwitchToLogin={() => router.push('/login')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-muted mt-6">
|
||||
{/* Footer text */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.2, duration: 0.4 }}
|
||||
className="text-center text-sm text-muted mt-6"
|
||||
>
|
||||
Уже есть аккаунт?{' '}
|
||||
<Link href="/login" className="text-accent hover:text-accent-hover font-medium">
|
||||
<Link href="/login" className="text-accent hover:text-accent-hover font-medium transition-colors">
|
||||
Войти
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="relative z-10 p-6 text-center">
|
||||
<p className="text-xs text-faint">
|
||||
© 2026 GooSeek. Все права защищены.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
import { useState, FormEvent, Suspense } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { Lock, Loader2, Eye, EyeOff, CheckCircle, AlertCircle } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Lock, Loader2, Eye, EyeOff, CheckCircle, AlertCircle, Sparkles, Check, X } from 'lucide-react';
|
||||
import { resetPassword } from '@/lib/auth';
|
||||
|
||||
function ResetPasswordContent() {
|
||||
@@ -18,6 +19,13 @@ function ResetPasswordContent() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
|
||||
const passwordRequirements = [
|
||||
{ met: password.length >= 8, text: 'Минимум 8 символов' },
|
||||
{ met: /[A-Z]/.test(password), text: 'Заглавная буква' },
|
||||
{ met: /[a-z]/.test(password), text: 'Строчная буква' },
|
||||
{ met: /[0-9]/.test(password), text: 'Цифра' },
|
||||
];
|
||||
|
||||
const isPasswordValid = password.length >= 8;
|
||||
const doPasswordsMatch = password === confirmPassword && confirmPassword.length > 0;
|
||||
|
||||
@@ -64,7 +72,7 @@ function ResetPasswordContent() {
|
||||
</p>
|
||||
<Link
|
||||
href="/forgot-password"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-accent hover:bg-accent-hover text-white font-medium rounded-xl transition-colors"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-accent hover:bg-accent-hover text-white font-medium rounded-xl transition-all duration-200"
|
||||
>
|
||||
Запросить новую ссылку
|
||||
</Link>
|
||||
@@ -74,7 +82,12 @@ function ResetPasswordContent() {
|
||||
|
||||
if (isSuccess) {
|
||||
return (
|
||||
<div className="text-center py-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="text-center py-6"
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-success/10 flex items-center justify-center">
|
||||
<CheckCircle className="w-8 h-8 text-success" />
|
||||
</div>
|
||||
@@ -84,11 +97,11 @@ function ResetPasswordContent() {
|
||||
</p>
|
||||
<button
|
||||
onClick={() => router.push('/login')}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-accent hover:bg-accent-hover text-white font-medium rounded-xl transition-colors"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-accent hover:bg-accent-hover text-white font-medium rounded-xl transition-all duration-200"
|
||||
>
|
||||
Войти
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -100,9 +113,13 @@ function ResetPasswordContent() {
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 rounded-xl bg-error/10 border border-error/30 text-error text-sm">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="p-3 rounded-xl bg-error/10 border border-error/30 text-error text-sm"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
@@ -133,6 +150,22 @@ function ResetPasswordContent() {
|
||||
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{password.length > 0 && (
|
||||
<div className="mt-2 grid grid-cols-2 gap-1">
|
||||
{passwordRequirements.map((req, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex items-center gap-1.5 text-xs ${
|
||||
req.met ? 'text-success' : 'text-muted'
|
||||
}`}
|
||||
>
|
||||
{req.met ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
|
||||
{req.text}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@@ -149,11 +182,26 @@ function ResetPasswordContent() {
|
||||
placeholder="••••••••"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
className="w-full pl-11 pr-4 py-3 bg-surface/50 border border-border rounded-xl
|
||||
className={`w-full pl-11 pr-11 py-3 bg-surface/50 border rounded-xl
|
||||
text-primary placeholder:text-muted
|
||||
focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/20
|
||||
transition-all duration-200"
|
||||
focus:outline-none focus:ring-1 transition-all duration-200
|
||||
${
|
||||
confirmPassword.length > 0
|
||||
? doPasswordsMatch
|
||||
? 'border-success/50 focus:border-success/50 focus:ring-success/20'
|
||||
: 'border-error/50 focus:border-error/50 focus:ring-error/20'
|
||||
: 'border-border focus:border-accent/50 focus:ring-accent/20'
|
||||
}`}
|
||||
/>
|
||||
{confirmPassword.length > 0 && (
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2">
|
||||
{doPasswordsMatch ? (
|
||||
<Check className="w-5 h-5 text-success" />
|
||||
) : (
|
||||
<X className="w-5 h-5 text-error" />
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,29 +228,56 @@ function ResetPasswordContent() {
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-base flex flex-col">
|
||||
<header className="p-4">
|
||||
<Link href="/" className="inline-flex items-center gap-2 text-lg font-semibold text-primary">
|
||||
<div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center">
|
||||
<span className="text-accent font-bold">G</span>
|
||||
<div className="min-h-screen bg-gradient-main flex flex-col relative overflow-hidden">
|
||||
{/* Background decorations */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/4 -left-32 w-96 h-96 bg-accent/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-accent-secondary/5 rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent/3 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="relative z-10 p-6">
|
||||
<Link href="/" className="inline-flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-xl icon-gradient flex items-center justify-center">
|
||||
<Sparkles className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
GooSeek
|
||||
<span className="font-black italic text-primary tracking-tight text-2xl group-hover:text-gradient transition-all duration-300">
|
||||
GooSeek
|
||||
</span>
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex items-center justify-center px-4 py-8">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-elevated border border-border rounded-2xl p-8 shadow-xl">
|
||||
<Suspense fallback={
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-accent" />
|
||||
</div>
|
||||
}>
|
||||
<ResetPasswordContent />
|
||||
</Suspense>
|
||||
{/* Main content */}
|
||||
<main className="relative z-10 flex-1 flex items-center justify-center px-4 py-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: 'easeOut' }}
|
||||
className="w-full max-w-md"
|
||||
>
|
||||
{/* Card with gradient border */}
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-[1px] bg-gradient-to-r from-accent/30 via-accent-secondary/20 to-accent/30 rounded-2xl blur-sm" />
|
||||
<div className="relative bg-elevated/95 backdrop-blur-xl border border-border/50 rounded-2xl p-8 shadow-2xl">
|
||||
<Suspense fallback={
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-accent" />
|
||||
</div>
|
||||
}>
|
||||
<ResetPasswordContent />
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="relative z-10 p-6 text-center">
|
||||
<p className="text-xs text-faint">
|
||||
© 2026 GooSeek. Все права защищены.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -60,11 +60,11 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
className="fixed inset-0 z-40 bg-base/80 backdrop-blur-sm"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ x: -280 }}
|
||||
initial={{ x: -240 }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: -280 }}
|
||||
exit={{ x: -240 }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
|
||||
className="fixed left-0 top-0 bottom-0 z-50 w-[280px]"
|
||||
className="fixed left-0 top-0 bottom-0 z-50 w-[240px]"
|
||||
>
|
||||
<Sidebar onClose={() => setSidebarOpen(false)} />
|
||||
</motion.div>
|
||||
|
||||
@@ -1,209 +1,124 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSearchParams, useRouter } from 'next/navigation';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Shield, Zap, Scale, Sparkles, Download, Trash2, Bell, Eye, Languages, Plug, ChevronDown } from 'lucide-react';
|
||||
import * as Switch from '@radix-ui/react-switch';
|
||||
import { useLanguage, SupportedLanguage } from '@/lib/contexts/LanguageContext';
|
||||
import { ConnectorsSettings } from '@/components/settings/ConnectorsSettings';
|
||||
import { User, CreditCard, Settings, LogIn } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/contexts/AuthContext';
|
||||
import { AccountTab } from '@/components/settings/AccountTab';
|
||||
import { BillingTab } from '@/components/settings/BillingTab';
|
||||
import { PreferencesTab } from '@/components/settings/PreferencesTab';
|
||||
|
||||
type TabId = 'account' | 'billing' | 'preferences';
|
||||
|
||||
interface Tab {
|
||||
id: TabId;
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
requiresAuth: boolean;
|
||||
}
|
||||
|
||||
const tabs: Tab[] = [
|
||||
{ id: 'account', label: 'Аккаунт', icon: User, requiresAuth: true },
|
||||
{ id: 'billing', label: 'Оплата', icon: CreditCard, requiresAuth: true },
|
||||
{ id: 'preferences', label: 'Настройки', icon: Settings, requiresAuth: false },
|
||||
];
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [mode, setMode] = useState('balanced');
|
||||
const [saveHistory, setSaveHistory] = useState(true);
|
||||
const [personalization, setPersonalization] = useState(true);
|
||||
const [notifications, setNotifications] = useState(false);
|
||||
const [showConnectors, setShowConnectors] = useState(false);
|
||||
const { language, setLanguage } = useLanguage();
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const { user, isAuthenticated, isLoading, showAuthModal } = useAuth();
|
||||
|
||||
const tabParam = searchParams.get('tab') as TabId | null;
|
||||
const [activeTab, setActiveTab] = useState<TabId>(tabParam && tabs.some(t => t.id === tabParam) ? tabParam : 'preferences');
|
||||
|
||||
useEffect(() => {
|
||||
if (tabParam && tabs.some(t => t.id === tabParam)) {
|
||||
setActiveTab(tabParam);
|
||||
}
|
||||
}, [tabParam]);
|
||||
|
||||
const handleTabChange = (tabId: TabId) => {
|
||||
const tab = tabs.find(t => t.id === tabId);
|
||||
if (tab?.requiresAuth && !isAuthenticated) {
|
||||
showAuthModal('login');
|
||||
return;
|
||||
}
|
||||
setActiveTab(tabId);
|
||||
router.push(`/settings?tab=${tabId}`, { scroll: false });
|
||||
};
|
||||
|
||||
const currentTab = tabs.find(t => t.id === activeTab);
|
||||
const showAuthPrompt = currentTab?.requiresAuth && !isAuthenticated && !isLoading;
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="max-w-xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
|
||||
<div className="max-w-2xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
|
||||
{/* Header */}
|
||||
<div className="mb-6 sm:mb-8">
|
||||
<h1 className="text-xl sm:text-2xl font-semibold text-primary mb-1 sm:mb-2">Настройки</h1>
|
||||
<p className="text-sm text-secondary">Персонализируйте ваш опыт</p>
|
||||
<div className="mb-6">
|
||||
<h1 className="text-xl sm:text-2xl font-semibold text-primary mb-1">
|
||||
{activeTab === 'account' ? 'Аккаунт' : activeTab === 'billing' ? 'Оплата' : 'Настройки'}
|
||||
</h1>
|
||||
<p className="text-sm text-secondary">
|
||||
{activeTab === 'account'
|
||||
? 'Управление профилем и безопасностью'
|
||||
: activeTab === 'billing'
|
||||
? 'Баланс, тарифы и история платежей'
|
||||
: 'Персонализируйте ваш опыт'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
{/* Default Mode */}
|
||||
<Section title="Режим по умолчанию" icon={Zap}>
|
||||
<div className="grid grid-cols-3 gap-2 sm:gap-3">
|
||||
{[
|
||||
{ id: 'speed', label: 'Быстрый', icon: Zap, desc: '~10 сек' },
|
||||
{ id: 'balanced', label: 'Баланс', icon: Scale, desc: '~30 сек' },
|
||||
{ id: 'quality', label: 'Качество', icon: Sparkles, desc: '~60 сек' },
|
||||
].map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => setMode(m.id)}
|
||||
className={`flex flex-col items-center gap-1 sm:gap-2 p-3 sm:p-4 rounded-xl border transition-all ${
|
||||
mode === m.id
|
||||
? 'active-gradient text-primary'
|
||||
: 'bg-surface/30 border-border/30 text-muted hover:border-border hover:text-secondary'
|
||||
}`}
|
||||
>
|
||||
<m.icon className={`w-4 h-4 sm:w-5 sm:h-5 ${mode === m.id ? 'text-gradient' : ''}`} />
|
||||
<span className="text-xs sm:text-sm font-medium">{m.label}</span>
|
||||
<span className="text-[10px] sm:text-xs text-faint">{m.desc}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 p-1 bg-surface/30 border border-border/30 rounded-xl mb-6">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => handleTabChange(tab.id)}
|
||||
className={`flex-1 flex items-center justify-center gap-2 py-2.5 px-3 rounded-lg text-sm font-medium transition-all ${
|
||||
activeTab === tab.id
|
||||
? 'bg-base text-primary shadow-sm'
|
||||
: 'text-muted hover:text-secondary'
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">{tab.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Privacy & Data */}
|
||||
<Section title="Приватность" icon={Shield}>
|
||||
<div className="space-y-3">
|
||||
<ToggleRow
|
||||
icon={Eye}
|
||||
label="Сохранять историю"
|
||||
description="Автоматическое сохранение сессий"
|
||||
checked={saveHistory}
|
||||
onChange={setSaveHistory}
|
||||
/>
|
||||
<ToggleRow
|
||||
icon={Sparkles}
|
||||
label="Персонализация"
|
||||
description="Улучшение на основе истории"
|
||||
checked={personalization}
|
||||
onChange={setPersonalization}
|
||||
/>
|
||||
<ToggleRow
|
||||
icon={Bell}
|
||||
label="Уведомления"
|
||||
description="Уведомления об обновлениях"
|
||||
checked={notifications}
|
||||
onChange={setNotifications}
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Language */}
|
||||
<Section title="Язык интерфейса" icon={Languages}>
|
||||
<div className="grid grid-cols-2 gap-2 sm:gap-3">
|
||||
{[
|
||||
{ id: 'ru', label: 'Русский', flag: '🇷🇺' },
|
||||
{ id: 'en', label: 'English', flag: '🇺🇸' },
|
||||
].map((lang) => (
|
||||
<button
|
||||
key={lang.id}
|
||||
onClick={() => setLanguage(lang.id as SupportedLanguage)}
|
||||
className={`flex items-center gap-3 p-3 sm:p-4 rounded-xl border transition-all ${
|
||||
language === lang.id
|
||||
? 'active-gradient text-primary'
|
||||
: 'bg-surface/30 border-border/30 text-muted hover:border-border hover:text-secondary'
|
||||
}`}
|
||||
>
|
||||
<span className="text-lg">{lang.flag}</span>
|
||||
<span className="text-sm font-medium">{lang.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Connectors */}
|
||||
<Section title="Коннекторы" icon={Plug}>
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-muted">
|
||||
Подключите источники данных и каналы уведомлений для автономных задач в Лаптопе.
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{showAuthPrompt ? (
|
||||
<div className="flex flex-col items-center justify-center py-16">
|
||||
<div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mb-4">
|
||||
<LogIn className="w-8 h-8 text-accent" />
|
||||
</div>
|
||||
<h2 className="text-lg font-medium text-primary mb-2">Требуется авторизация</h2>
|
||||
<p className="text-sm text-muted text-center mb-6 max-w-sm">
|
||||
Войдите в аккаунт, чтобы получить доступ к {activeTab === 'account' ? 'настройкам профиля' : 'платежам и балансу'}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowConnectors(!showConnectors)}
|
||||
className="w-full flex items-center justify-between p-3 sm:p-4 bg-elevated/40 border border-border/40 rounded-xl hover:bg-elevated/60 hover:border-border transition-all"
|
||||
onClick={() => showAuthModal('login')}
|
||||
className="flex items-center gap-2 px-6 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-all text-sm font-medium"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center">
|
||||
<Plug className="w-5 h-5 text-indigo-400" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-sm font-medium text-primary">Настроить коннекторы</p>
|
||||
<p className="text-xs text-muted">Поиск, данные, финансы, уведомления</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDown className={`w-5 h-5 text-muted transition-transform ${showConnectors ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{showConnectors && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
className="pt-2"
|
||||
>
|
||||
<ConnectorsSettings />
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Data Management */}
|
||||
<Section title="Управление данными" icon={Download}>
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<button className="flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm bg-surface/40 border border-border/50 text-secondary rounded-xl hover:bg-surface/60 hover:border-border hover:text-primary transition-all">
|
||||
<Download className="w-4 h-4" />
|
||||
Экспорт данных
|
||||
</button>
|
||||
<button className="flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm bg-error/5 border border-error/20 text-error rounded-xl hover:bg-error/10 hover:border-error/30 transition-all">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
Удалить всё
|
||||
<LogIn className="w-4 h-4" />
|
||||
Войти
|
||||
</button>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* About */}
|
||||
<div className="pt-6 border-t border-border/30">
|
||||
<div className="text-center text-faint text-xs">
|
||||
<p className="mb-1">GooSeek v1.0.0</p>
|
||||
<p>AI-поиск нового поколения</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{activeTab === 'account' && <AccountTab />}
|
||||
{activeTab === 'billing' && <BillingTab />}
|
||||
{activeTab === 'preferences' && <PreferencesTab />}
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ title, icon: Icon, children }: { title: string; icon: React.ElementType; children: React.ReactNode }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="space-y-3 sm:space-y-4"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className="w-4 h-4 text-muted" />
|
||||
<h2 className="text-xs font-semibold text-muted uppercase tracking-wider">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ToggleRowProps {
|
||||
icon: React.ElementType;
|
||||
label: string;
|
||||
description: string;
|
||||
checked: boolean;
|
||||
onChange: (v: boolean) => void;
|
||||
}
|
||||
|
||||
function ToggleRow({ icon: Icon, label, description, checked, onChange }: ToggleRowProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-elevated/40 border border-border/40 rounded-xl">
|
||||
<div className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-surface/60 flex items-center justify-center flex-shrink-0">
|
||||
<Icon className="w-4 h-4 text-secondary" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-primary truncate">{label}</p>
|
||||
<p className="text-xs text-muted mt-0.5 truncate">{description}</p>
|
||||
</div>
|
||||
<Switch.Root
|
||||
checked={checked}
|
||||
onCheckedChange={onChange}
|
||||
className="w-10 h-[22px] sm:w-11 sm:h-6 bg-surface/80 rounded-full relative transition-colors data-[state=checked]:active-gradient border border-border flex-shrink-0"
|
||||
>
|
||||
<Switch.Thumb className="block w-[18px] h-[18px] sm:w-5 sm:h-5 bg-secondary rounded-full transition-transform translate-x-0.5 data-[state=checked]:translate-x-[18px] sm:data-[state=checked]:translate-x-[22px] data-[state=checked]:progress-gradient" />
|
||||
</Switch.Root>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
466
backend/webui/src/app/(main)/spaces/[id]/page.tsx
Normal file
466
backend/webui/src/app/(main)/spaces/[id]/page.tsx
Normal file
@@ -0,0 +1,466 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
ArrowLeft,
|
||||
FolderOpen,
|
||||
Plus,
|
||||
Users,
|
||||
MessageSquare,
|
||||
Settings,
|
||||
UserPlus,
|
||||
Loader2,
|
||||
Clock,
|
||||
MoreHorizontal,
|
||||
Trash2,
|
||||
Crown,
|
||||
Shield,
|
||||
User,
|
||||
Copy,
|
||||
Check,
|
||||
X,
|
||||
Send,
|
||||
} from 'lucide-react';
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { fetchSpace, fetchSpaceMembers, fetchSpaceThreads, inviteToSpace, removeSpaceMember } from '@/lib/api';
|
||||
import type { Space, SpaceMember, Thread } from '@/lib/types';
|
||||
import { useAuth } from '@/lib/contexts/AuthContext';
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (days === 0) return 'Сегодня';
|
||||
if (days === 1) return 'Вчера';
|
||||
if (days < 7) return `${days} дн. назад`;
|
||||
|
||||
return date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' });
|
||||
}
|
||||
|
||||
function getRoleIcon(role: string) {
|
||||
switch (role) {
|
||||
case 'owner': return Crown;
|
||||
case 'admin': return Shield;
|
||||
default: return User;
|
||||
}
|
||||
}
|
||||
|
||||
function getRoleLabel(role: string) {
|
||||
switch (role) {
|
||||
case 'owner': return 'Владелец';
|
||||
case 'admin': return 'Админ';
|
||||
default: return 'Участник';
|
||||
}
|
||||
}
|
||||
|
||||
export default function SpaceDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const spaceId = params.id as string;
|
||||
|
||||
const [space, setSpace] = useState<Space | null>(null);
|
||||
const [members, setMembers] = useState<SpaceMember[]>([]);
|
||||
const [threads, setThreads] = useState<Thread[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState<'threads' | 'members'>('threads');
|
||||
const [showInviteModal, setShowInviteModal] = useState(false);
|
||||
const [inviteEmail, setInviteEmail] = useState('');
|
||||
const [inviteLoading, setInviteLoading] = useState(false);
|
||||
const [inviteError, setInviteError] = useState('');
|
||||
const [inviteSuccess, setInviteSuccess] = useState('');
|
||||
|
||||
const isOwner = space?.userId === user?.id;
|
||||
const currentMember = members.find(m => m.userId === user?.id);
|
||||
const isAdmin = isOwner || currentMember?.role === 'admin';
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const [spaceData, membersData, threadsData] = await Promise.all([
|
||||
fetchSpace(spaceId),
|
||||
fetchSpaceMembers(spaceId),
|
||||
fetchSpaceThreads(spaceId),
|
||||
]);
|
||||
setSpace(spaceData);
|
||||
setMembers(membersData);
|
||||
setThreads(threadsData);
|
||||
} catch (err) {
|
||||
console.error('Failed to load space:', err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [spaceId]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
const handleInvite = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!inviteEmail.trim() || inviteLoading) return;
|
||||
|
||||
setInviteLoading(true);
|
||||
setInviteError('');
|
||||
setInviteSuccess('');
|
||||
|
||||
try {
|
||||
await inviteToSpace(spaceId, inviteEmail.trim());
|
||||
setInviteSuccess(`Приглашение отправлено на ${inviteEmail}`);
|
||||
setInviteEmail('');
|
||||
setTimeout(() => setShowInviteModal(false), 2000);
|
||||
} catch (err) {
|
||||
setInviteError(err instanceof Error ? err.message : 'Не удалось отправить приглашение');
|
||||
} finally {
|
||||
setInviteLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveMember = async (memberId: string, userId: string) => {
|
||||
if (!confirm('Удалить участника из пространства?')) return;
|
||||
|
||||
try {
|
||||
await removeSpaceMember(spaceId, userId);
|
||||
setMembers(prev => prev.filter(m => m.id !== memberId));
|
||||
} catch (err) {
|
||||
console.error('Failed to remove member:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const startNewThread = () => {
|
||||
router.push(`/?space=${spaceId}`);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[60vh]">
|
||||
<Loader2 className="w-8 h-8 animate-spin loader-gradient" />
|
||||
<p className="text-sm text-muted mt-4">Загрузка пространства...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!space) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[60vh]">
|
||||
<FolderOpen className="w-12 h-12 text-muted mb-4" />
|
||||
<h2 className="text-xl font-semibold text-primary mb-2">Пространство не найдено</h2>
|
||||
<p className="text-secondary mb-6">Возможно, оно было удалено или у вас нет доступа</p>
|
||||
<Link href="/spaces" className="btn-gradient px-5 py-2.5">
|
||||
<span className="btn-gradient-text">К списку пространств</span>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-start gap-4 mb-8">
|
||||
<Link
|
||||
href="/spaces"
|
||||
className="w-10 h-10 flex items-center justify-center rounded-xl text-secondary hover:text-primary hover:bg-surface/50 transition-all flex-shrink-0"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</Link>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-primary mb-2">{space.name}</h1>
|
||||
{space.description && (
|
||||
<p className="text-secondary">{space.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setShowInviteModal(true)}
|
||||
className="flex items-center gap-2 px-4 py-2.5 text-sm btn-gradient"
|
||||
>
|
||||
<UserPlus className="w-4 h-4 btn-gradient-text" />
|
||||
<span className="btn-gradient-text hidden sm:inline">Пригласить</span>
|
||||
</button>
|
||||
)}
|
||||
<Link
|
||||
href={`/spaces/${spaceId}/edit`}
|
||||
className="p-2.5 rounded-xl text-secondary hover:text-primary hover:bg-surface/50 transition-all"
|
||||
>
|
||||
<Settings className="w-5 h-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex items-center gap-6 mt-4">
|
||||
<div className="flex items-center gap-2 text-sm text-muted">
|
||||
<Users className="w-4 h-4" />
|
||||
<span>{members.length} участник{members.length === 1 ? '' : members.length < 5 ? 'а' : 'ов'}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-muted">
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
<span>{threads.length} тред{threads.length === 1 ? '' : threads.length < 5 ? 'а' : 'ов'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex items-center gap-1 p-1 bg-surface/40 rounded-xl mb-6 w-fit">
|
||||
<button
|
||||
onClick={() => setActiveTab('threads')}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-lg transition-all ${
|
||||
activeTab === 'threads'
|
||||
? 'bg-accent/20 text-accent'
|
||||
: 'text-secondary hover:text-primary'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
Треды
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('members')}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-lg transition-all ${
|
||||
activeTab === 'members'
|
||||
? 'bg-accent/20 text-accent'
|
||||
: 'text-secondary hover:text-primary'
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<Users className="w-4 h-4" />
|
||||
Участники
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<AnimatePresence mode="wait">
|
||||
{activeTab === 'threads' ? (
|
||||
<motion.div
|
||||
key="threads"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
>
|
||||
{/* New Thread Button */}
|
||||
<button
|
||||
onClick={startNewThread}
|
||||
className="w-full p-4 mb-4 border-2 border-dashed border-border/50 rounded-xl text-secondary hover:text-primary hover:border-accent/30 hover:bg-accent/5 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
<span>Начать новый тред</span>
|
||||
</button>
|
||||
|
||||
{/* Threads List */}
|
||||
{threads.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{threads.map((thread, i) => (
|
||||
<motion.div
|
||||
key={thread.id}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.03 }}
|
||||
>
|
||||
<Link
|
||||
href={`/thread/${thread.id}`}
|
||||
className="block p-4 bg-elevated/40 border border-border/40 rounded-xl hover:bg-elevated/60 hover:border-border transition-all group"
|
||||
>
|
||||
<h3 className="font-medium text-primary group-hover:text-gradient transition-colors line-clamp-1 mb-2">
|
||||
{thread.title || 'Без названия'}
|
||||
</h3>
|
||||
<div className="flex items-center gap-4 text-xs text-muted">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
{formatDate(thread.updatedAt)}
|
||||
</span>
|
||||
<span>{thread.messages?.length || 0} сообщений</span>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<MessageSquare className="w-12 h-12 mx-auto mb-4 text-muted" />
|
||||
<p className="text-secondary mb-2">Пока нет тредов</p>
|
||||
<p className="text-sm text-muted">Начните новый тред для обсуждения</p>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="members"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
>
|
||||
{/* Members List */}
|
||||
<div className="space-y-2">
|
||||
{members.map((member, i) => {
|
||||
const RoleIcon = getRoleIcon(member.role);
|
||||
const canRemove = isAdmin && member.userId !== user?.id && member.role !== 'owner';
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.03 }}
|
||||
className="flex items-center gap-4 p-4 bg-elevated/40 border border-border/40 rounded-xl"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
|
||||
{member.avatar ? (
|
||||
<img src={member.avatar} alt="" className="w-full h-full rounded-full object-cover" />
|
||||
) : (
|
||||
<span className="text-sm font-semibold text-accent">
|
||||
{(member.name || member.email || '?').charAt(0).toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-primary truncate">
|
||||
{member.name || member.email}
|
||||
</span>
|
||||
<span className={`flex items-center gap-1 text-xs px-2 py-0.5 rounded-full ${
|
||||
member.role === 'owner'
|
||||
? 'bg-amber-500/20 text-amber-400'
|
||||
: member.role === 'admin'
|
||||
? 'bg-accent/20 text-accent'
|
||||
: 'bg-surface text-muted'
|
||||
}`}>
|
||||
<RoleIcon className="w-3 h-3" />
|
||||
{getRoleLabel(member.role)}
|
||||
</span>
|
||||
</div>
|
||||
{member.email && member.name && (
|
||||
<p className="text-sm text-muted truncate">{member.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{canRemove && (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button className="p-2 hover:bg-surface/60 rounded-lg transition-all">
|
||||
<MoreHorizontal className="w-4 h-4 text-secondary" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[140px] bg-surface/95 backdrop-blur-xl border border-border rounded-xl p-1.5 shadow-dropdown z-50"
|
||||
sideOffset={5}
|
||||
>
|
||||
<DropdownMenu.Item
|
||||
onClick={() => handleRemoveMember(member.id, member.userId)}
|
||||
className="flex items-center gap-2 px-3 py-2.5 text-sm text-error rounded-lg cursor-pointer hover:bg-error/10 outline-none transition-colors"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
Удалить
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Invite Button */}
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => setShowInviteModal(true)}
|
||||
className="w-full mt-4 p-4 border-2 border-dashed border-border/50 rounded-xl text-secondary hover:text-primary hover:border-accent/30 hover:bg-accent/5 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<UserPlus className="w-5 h-5" />
|
||||
<span>Пригласить участника</span>
|
||||
</button>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Invite Modal */}
|
||||
<Dialog.Root open={showInviteModal} onOpenChange={setShowInviteModal}>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50" />
|
||||
<Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-elevated border border-border rounded-2xl p-6 z-50 shadow-2xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<Dialog.Title className="text-lg font-semibold text-primary">
|
||||
Пригласить участника
|
||||
</Dialog.Title>
|
||||
<Dialog.Close className="p-2 text-muted hover:text-secondary rounded-lg hover:bg-surface/50 transition-colors">
|
||||
<X className="w-5 h-5" />
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleInvite}>
|
||||
<p className="text-sm text-secondary mb-4">
|
||||
Введите email пользователя, которого хотите пригласить в пространство
|
||||
</p>
|
||||
|
||||
{inviteError && (
|
||||
<div className="mb-4 p-3 bg-error/10 border border-error/30 rounded-xl text-sm text-error">
|
||||
{inviteError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{inviteSuccess && (
|
||||
<div className="mb-4 p-3 bg-success/10 border border-success/30 rounded-xl text-sm text-success flex items-center gap-2">
|
||||
<Check className="w-4 h-4" />
|
||||
{inviteSuccess}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative mb-6">
|
||||
<input
|
||||
type="email"
|
||||
value={inviteEmail}
|
||||
onChange={(e) => setInviteEmail(e.target.value)}
|
||||
placeholder="email@example.com"
|
||||
className="w-full px-4 py-3 bg-surface/50 border border-border rounded-xl text-primary placeholder:text-muted focus:outline-none input-gradient transition-colors"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Dialog.Close asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-1 px-4 py-3 text-sm text-secondary hover:text-primary bg-surface/40 border border-border/50 rounded-xl transition-all"
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
</Dialog.Close>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!inviteEmail.trim() || inviteLoading}
|
||||
className="flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm btn-gradient disabled:opacity-50"
|
||||
>
|
||||
{inviteLoading ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin btn-gradient-text" />
|
||||
) : (
|
||||
<Send className="w-4 h-4 btn-gradient-text" />
|
||||
)}
|
||||
<span className="btn-gradient-text">Отправить</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,19 +3,28 @@
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { ArrowLeft, Loader2, Globe, BookOpen, Code2, Newspaper, TrendingUp, Youtube } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Loader2,
|
||||
Globe,
|
||||
Lock,
|
||||
FolderOpen,
|
||||
Palette,
|
||||
} from 'lucide-react';
|
||||
import { createSpace } from '@/lib/api';
|
||||
import type { FocusMode } from '@/lib/types';
|
||||
|
||||
const focusModes: { value: FocusMode; label: string; icon: React.ElementType }[] = [
|
||||
{ value: 'all', label: 'Все источники', icon: Globe },
|
||||
{ value: 'academic', label: 'Академический', icon: BookOpen },
|
||||
{ value: 'code', label: 'Код', icon: Code2 },
|
||||
{ value: 'news', label: 'Новости', icon: Newspaper },
|
||||
{ value: 'finance', label: 'Финансы', icon: TrendingUp },
|
||||
{ value: 'youtube', label: 'YouTube', icon: Youtube },
|
||||
const spaceColors = [
|
||||
{ id: 'violet', class: 'bg-violet-500', label: 'Фиолетовый' },
|
||||
{ id: 'blue', class: 'bg-blue-500', label: 'Синий' },
|
||||
{ id: 'emerald', class: 'bg-emerald-500', label: 'Изумрудный' },
|
||||
{ id: 'orange', class: 'bg-orange-500', label: 'Оранжевый' },
|
||||
{ id: 'pink', class: 'bg-pink-500', label: 'Розовый' },
|
||||
{ id: 'indigo', class: 'bg-indigo-500', label: 'Индиго' },
|
||||
];
|
||||
|
||||
const spaceIcons = ['📁', '🔬', '💡', '📊', '🎯', '🚀', '💼', '📚'];
|
||||
|
||||
export default function NewSpacePage() {
|
||||
const router = useRouter();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
@@ -25,7 +34,9 @@ export default function NewSpacePage() {
|
||||
name: '',
|
||||
description: '',
|
||||
instructions: '',
|
||||
focusMode: 'all' as FocusMode,
|
||||
icon: '📁',
|
||||
color: 'violet',
|
||||
isPublic: false,
|
||||
});
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
@@ -36,13 +47,12 @@ export default function NewSpacePage() {
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
await createSpace({
|
||||
const space = await createSpace({
|
||||
name: formData.name.trim(),
|
||||
description: formData.description.trim() || undefined,
|
||||
instructions: formData.instructions.trim() || undefined,
|
||||
focusMode: formData.focusMode,
|
||||
});
|
||||
router.push('/spaces');
|
||||
router.push(`/spaces/${space.id}`);
|
||||
} catch (err) {
|
||||
console.error('Failed to create space:', err);
|
||||
setError('Не удалось создать пространство. Попробуйте позже.');
|
||||
@@ -53,9 +63,9 @@ export default function NewSpacePage() {
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="max-w-lg mx-auto px-4 sm:px-6 py-6 sm:py-8">
|
||||
<div className="max-w-xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mb-6 sm:mb-8">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<Link
|
||||
href="/spaces"
|
||||
className="w-10 h-10 flex items-center justify-center rounded-xl text-secondary hover:text-primary hover:bg-surface/50 transition-all"
|
||||
@@ -63,19 +73,53 @@ export default function NewSpacePage() {
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-xl sm:text-2xl font-semibold text-primary">Новое пространство</h1>
|
||||
<p className="text-sm text-secondary mt-0.5 hidden sm:block">Организуйте исследования по темам</p>
|
||||
<h1 className="text-2xl font-bold text-primary">Новое пространство</h1>
|
||||
<p className="text-sm text-secondary mt-0.5">Создайте место для исследований и коллаборации</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-error/10 border border-error/30 rounded-xl text-sm text-error">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-6 p-4 bg-error/10 border border-error/30 rounded-xl text-sm text-error"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleCreate} className="space-y-5">
|
||||
<form onSubmit={handleCreate} className="space-y-6">
|
||||
{/* Preview Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className={`
|
||||
p-6 rounded-2xl border bg-gradient-to-br
|
||||
${formData.color === 'violet' ? 'from-violet-500/20 to-purple-500/20 border-violet-500/30' : ''}
|
||||
${formData.color === 'blue' ? 'from-blue-500/20 to-cyan-500/20 border-blue-500/30' : ''}
|
||||
${formData.color === 'emerald' ? 'from-emerald-500/20 to-teal-500/20 border-emerald-500/30' : ''}
|
||||
${formData.color === 'orange' ? 'from-orange-500/20 to-amber-500/20 border-orange-500/30' : ''}
|
||||
${formData.color === 'pink' ? 'from-pink-500/20 to-rose-500/20 border-pink-500/30' : ''}
|
||||
${formData.color === 'indigo' ? 'from-indigo-500/20 to-blue-500/20 border-indigo-500/30' : ''}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-14 h-14 rounded-xl bg-white/10 backdrop-blur-sm flex items-center justify-center text-2xl">
|
||||
{formData.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-primary">
|
||||
{formData.name || 'Название пространства'}
|
||||
</h3>
|
||||
<p className="text-sm text-secondary">
|
||||
{formData.description || 'Описание пространства'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Name */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary mb-2">
|
||||
Название <span className="text-error">*</span>
|
||||
@@ -83,12 +127,13 @@ export default function NewSpacePage() {
|
||||
<input
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData((f) => ({ ...f, name: e.target.value }))}
|
||||
placeholder="Например: Исследование рынка"
|
||||
className="w-full px-4 py-3 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted focus:outline-none input-gradient transition-colors"
|
||||
placeholder="Например: Исследование рынка AI"
|
||||
className="w-full px-4 py-3.5 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted focus:outline-none input-gradient transition-colors"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary mb-2">
|
||||
Описание
|
||||
@@ -96,12 +141,58 @@ export default function NewSpacePage() {
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData((f) => ({ ...f, description: e.target.value }))}
|
||||
placeholder="Краткое описание пространства"
|
||||
rows={2}
|
||||
className="w-full px-4 py-3 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted resize-none focus:outline-none input-gradient transition-colors"
|
||||
placeholder="О чём это пространство? Какие цели преследует?"
|
||||
rows={3}
|
||||
className="w-full px-4 py-3.5 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted resize-none focus:outline-none input-gradient transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Icon Selector */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary mb-3">
|
||||
Иконка
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{spaceIcons.map((icon) => (
|
||||
<button
|
||||
key={icon}
|
||||
type="button"
|
||||
onClick={() => setFormData((f) => ({ ...f, icon }))}
|
||||
className={`w-10 h-10 rounded-xl text-lg flex items-center justify-center transition-all ${
|
||||
formData.icon === icon
|
||||
? 'bg-accent/20 ring-2 ring-accent'
|
||||
: 'bg-surface/40 hover:bg-surface/60'
|
||||
}`}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color Selector */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary mb-3">
|
||||
Цвет
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{spaceColors.map((color) => (
|
||||
<button
|
||||
key={color.id}
|
||||
type="button"
|
||||
onClick={() => setFormData((f) => ({ ...f, color: color.id }))}
|
||||
className={`w-10 h-10 rounded-xl ${color.class} transition-all ${
|
||||
formData.color === color.id
|
||||
? 'ring-2 ring-white ring-offset-2 ring-offset-base'
|
||||
: 'opacity-60 hover:opacity-100'
|
||||
}`}
|
||||
title={color.label}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Instructions */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary mb-2">
|
||||
AI инструкции
|
||||
@@ -109,32 +200,48 @@ export default function NewSpacePage() {
|
||||
<textarea
|
||||
value={formData.instructions}
|
||||
onChange={(e) => setFormData((f) => ({ ...f, instructions: e.target.value }))}
|
||||
placeholder="Специальные инструкции для AI в этом пространстве"
|
||||
placeholder="Дополнительные инструкции для AI при работе в этом пространстве"
|
||||
rows={3}
|
||||
className="w-full px-4 py-3 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted resize-none focus:outline-none input-gradient transition-colors"
|
||||
className="w-full px-4 py-3.5 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted resize-none focus:outline-none input-gradient transition-colors"
|
||||
/>
|
||||
<p className="text-xs text-muted mt-2">
|
||||
AI будет учитывать эти инструкции при генерации ответов в тредах этого пространства
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary mb-3">
|
||||
Режим фокуса
|
||||
</label>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
{focusModes.map((mode) => (
|
||||
<button
|
||||
key={mode.value}
|
||||
type="button"
|
||||
onClick={() => setFormData((f) => ({ ...f, focusMode: mode.value }))}
|
||||
className={`flex flex-col items-center gap-2 p-3 rounded-xl border transition-all ${
|
||||
formData.focusMode === mode.value
|
||||
? 'active-gradient text-primary'
|
||||
: 'bg-elevated/40 border-border/50 text-muted hover:border-border hover:text-secondary'
|
||||
{/* Privacy */}
|
||||
<div className="p-4 bg-elevated/40 border border-border/50 rounded-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{formData.isPublic ? (
|
||||
<Globe className="w-5 h-5 text-accent" />
|
||||
) : (
|
||||
<Lock className="w-5 h-5 text-muted" />
|
||||
)}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-primary">
|
||||
{formData.isPublic ? 'Публичное' : 'Приватное'}
|
||||
</h4>
|
||||
<p className="text-xs text-muted">
|
||||
{formData.isPublic
|
||||
? 'Все могут найти и присоединиться'
|
||||
: 'Только по приглашению'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormData((f) => ({ ...f, isPublic: !f.isPublic }))}
|
||||
className={`w-12 h-7 rounded-full transition-colors relative ${
|
||||
formData.isPublic ? 'bg-accent' : 'bg-surface'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform ${
|
||||
formData.isPublic ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
>
|
||||
<mode.icon className={`w-4 h-4 ${formData.focusMode === mode.value ? 'text-gradient' : ''}`} />
|
||||
<span className="text-xs text-center">{mode.label}</span>
|
||||
</button>
|
||||
))}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -142,17 +249,21 @@ export default function NewSpacePage() {
|
||||
<div className="flex flex-col-reverse sm:flex-row gap-3 pt-4">
|
||||
<Link
|
||||
href="/spaces"
|
||||
className="flex-1 px-4 py-3 text-sm text-center text-secondary hover:text-primary bg-surface/40 border border-border/50 rounded-xl transition-all"
|
||||
className="flex-1 px-4 py-3.5 text-sm text-center text-secondary hover:text-primary bg-surface/40 border border-border/50 rounded-xl transition-all"
|
||||
>
|
||||
Отмена
|
||||
</Link>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!formData.name.trim() || isSubmitting}
|
||||
className="flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm btn-gradient disabled:opacity-50"
|
||||
className="flex-1 flex items-center justify-center gap-2 px-4 py-3.5 text-sm btn-gradient disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting && <Loader2 className="w-4 h-4 animate-spin btn-gradient-text" />}
|
||||
<span className="btn-gradient-text">Создать пространство</span>
|
||||
{isSubmitting ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin btn-gradient-text" />
|
||||
) : (
|
||||
<FolderOpen className="w-4 h-4 btn-gradient-text" />
|
||||
)}
|
||||
<span className="btn-gradient-text font-medium">Создать пространство</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -4,27 +4,50 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { FolderOpen, Plus, MoreHorizontal, Search, Trash2, Loader2, Settings, RefreshCw, Globe, BookOpen, Code2, TrendingUp, Newspaper, Youtube } from 'lucide-react';
|
||||
import {
|
||||
FolderOpen,
|
||||
Plus,
|
||||
Search,
|
||||
Loader2,
|
||||
Users,
|
||||
MessageSquare,
|
||||
Lock,
|
||||
Globe,
|
||||
MoreHorizontal,
|
||||
Trash2,
|
||||
Settings,
|
||||
UserPlus,
|
||||
} from 'lucide-react';
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { fetchSpaces, deleteSpace } from '@/lib/api';
|
||||
import type { Space, FocusMode } from '@/lib/types';
|
||||
import type { Space } from '@/lib/types';
|
||||
import { useAuth } from '@/lib/contexts/AuthContext';
|
||||
|
||||
const focusModes: { value: FocusMode; label: string; icon: React.ElementType }[] = [
|
||||
{ value: 'all', label: 'Все источники', icon: Globe },
|
||||
{ value: 'academic', label: 'Академический', icon: BookOpen },
|
||||
{ value: 'code', label: 'Код', icon: Code2 },
|
||||
{ value: 'news', label: 'Новости', icon: Newspaper },
|
||||
{ value: 'finance', label: 'Финансы', icon: TrendingUp },
|
||||
{ value: 'youtube', label: 'YouTube', icon: Youtube },
|
||||
const spaceColors = [
|
||||
'from-violet-500/20 to-purple-500/20 border-violet-500/30',
|
||||
'from-blue-500/20 to-cyan-500/20 border-blue-500/30',
|
||||
'from-emerald-500/20 to-teal-500/20 border-emerald-500/30',
|
||||
'from-orange-500/20 to-amber-500/20 border-orange-500/30',
|
||||
'from-pink-500/20 to-rose-500/20 border-pink-500/30',
|
||||
'from-indigo-500/20 to-blue-500/20 border-indigo-500/30',
|
||||
];
|
||||
|
||||
function getSpaceColor(index: number): string {
|
||||
return spaceColors[index % spaceColors.length];
|
||||
}
|
||||
|
||||
export default function SpacesPage() {
|
||||
const router = useRouter();
|
||||
const { user, isAuthenticated, showAuthModal } = useAuth();
|
||||
const [spaces, setSpaces] = useState<Space[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!isAuthenticated) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await fetchSpaces();
|
||||
@@ -35,14 +58,15 @@ export default function SpacesPage() {
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
}, [isAuthenticated]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Удалить пространство? Все связанные треды останутся в истории.')) return;
|
||||
const handleDelete = async (e: React.MouseEvent, id: string) => {
|
||||
e.stopPropagation();
|
||||
if (!confirm('Удалить пространство? Все связанные треды будут удалены.')) return;
|
||||
|
||||
try {
|
||||
await deleteSpace(id);
|
||||
@@ -60,143 +84,204 @@ export default function SpacesPage() {
|
||||
);
|
||||
}, [spaces, search]);
|
||||
|
||||
const openSpace = (id: string) => {
|
||||
router.push(`/?space=${id}`);
|
||||
};
|
||||
|
||||
const getFocusModeIcon = (mode: FocusMode) => {
|
||||
const found = focusModes.find((m) => m.value === mode);
|
||||
return found?.icon || Globe;
|
||||
};
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="flex flex-col items-center justify-center min-h-[60vh] px-4">
|
||||
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-accent/20 to-accent/5 flex items-center justify-center mb-6">
|
||||
<FolderOpen className="w-8 h-8 text-accent" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-semibold text-primary mb-2">Пространства</h1>
|
||||
<p className="text-secondary text-center max-w-md mb-6">
|
||||
Создавайте пространства для организации исследований и совместной работы с командой
|
||||
</p>
|
||||
<button
|
||||
onClick={() => showAuthModal('login')}
|
||||
className="btn-gradient px-6 py-3"
|
||||
>
|
||||
<span className="btn-gradient-text">Войти для доступа</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto">
|
||||
<div className="max-w-2xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 sm:mb-8">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h1 className="text-xl sm:text-2xl font-semibold text-primary mb-1 sm:mb-2">Пространства</h1>
|
||||
<p className="text-sm text-secondary">Организуйте исследования по темам</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={load}
|
||||
disabled={isLoading}
|
||||
className="flex items-center gap-2 px-3 py-2.5 text-sm text-secondary hover:text-primary bg-surface/40 border border-border/50 hover-gradient rounded-xl transition-all"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
<Link
|
||||
href="/spaces/new"
|
||||
className="flex items-center gap-2 px-4 py-2.5 text-sm btn-gradient"
|
||||
>
|
||||
<Plus className="w-4 h-4 btn-gradient-text" />
|
||||
<span className="hidden sm:inline btn-gradient-text">Создать</span>
|
||||
</Link>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-primary mb-1">Пространства</h1>
|
||||
<p className="text-secondary">Организуйте исследования и работайте вместе с командой</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/spaces/new"
|
||||
className="flex items-center gap-2 px-5 py-2.5 btn-gradient"
|
||||
>
|
||||
<Plus className="w-4 h-4 btn-gradient-text" />
|
||||
<span className="btn-gradient-text font-medium">Создать</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative mb-6">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-muted" />
|
||||
<div className="relative mb-8">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted" />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Поиск пространств..."
|
||||
className="w-full pl-11 pr-4 py-3 text-sm bg-elevated/40 border border-border/50 rounded-xl text-primary placeholder:text-muted focus:outline-none input-gradient transition-colors"
|
||||
className="w-full pl-12 pr-4 py-3.5 text-sm bg-elevated/40 border border-border/50 rounded-xl text-primary placeholder:text-muted focus:outline-none input-gradient transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 sm:py-20">
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<Loader2 className="w-8 h-8 animate-spin loader-gradient" />
|
||||
<p className="text-sm text-muted mt-4">Загрузка пространств...</p>
|
||||
</div>
|
||||
) : filtered.length > 0 ? (
|
||||
<div className="grid gap-3">
|
||||
{filtered.map((space, i) => {
|
||||
const FocusIcon = getFocusModeIcon(space.focusMode || 'all');
|
||||
return (
|
||||
<motion.div
|
||||
key={space.id}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.05 }}
|
||||
onClick={() => openSpace(space.id)}
|
||||
className="group flex items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-elevated/40 border border-border/40 rounded-xl hover:bg-elevated/60 hover-gradient cursor-pointer transition-all duration-200"
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filtered.map((space, i) => (
|
||||
<motion.div
|
||||
key={space.id}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.05 }}
|
||||
>
|
||||
<Link
|
||||
href={`/spaces/${space.id}`}
|
||||
className={`
|
||||
group block p-5 rounded-2xl border bg-gradient-to-br
|
||||
${getSpaceColor(i)}
|
||||
hover:scale-[1.02] transition-all duration-200
|
||||
`}
|
||||
>
|
||||
<div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl icon-gradient flex items-center justify-center flex-shrink-0">
|
||||
<FolderOpen className="w-4 h-4 sm:w-5 sm:h-5 text-gradient" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-sm font-medium text-primary group-hover:text-gradient transition-colors truncate">
|
||||
{space.name}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<FocusIcon className="w-3 h-3 text-muted flex-shrink-0" />
|
||||
<span className="text-xs text-muted truncate">
|
||||
{space.description || focusModes.find((m) => m.value === space.focusMode)?.label || 'Все источники'}
|
||||
</span>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-white/10 backdrop-blur-sm flex items-center justify-center">
|
||||
<FolderOpen className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{space.isPublic ? (
|
||||
<Globe className="w-4 h-4 text-muted" />
|
||||
) : (
|
||||
<Lock className="w-4 h-4 text-muted" />
|
||||
)}
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button
|
||||
onClick={(e) => e.preventDefault()}
|
||||
className="p-1.5 hover:bg-white/10 rounded-lg transition-colors opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<MoreHorizontal className="w-4 h-4 text-secondary" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[160px] bg-surface/95 backdrop-blur-xl border border-border rounded-xl p-1.5 shadow-dropdown z-50"
|
||||
sideOffset={5}
|
||||
>
|
||||
<DropdownMenu.Item asChild>
|
||||
<Link
|
||||
href={`/spaces/${space.id}/edit`}
|
||||
className="flex items-center gap-2 px-3 py-2.5 text-sm text-secondary rounded-lg cursor-pointer hover:bg-elevated/80 hover:text-primary outline-none transition-colors"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
Настройки
|
||||
</Link>
|
||||
</DropdownMenu.Item>
|
||||
{space.userId === user?.id && (
|
||||
<DropdownMenu.Item
|
||||
onClick={(e) => handleDelete(e as unknown as React.MouseEvent, space.id)}
|
||||
className="flex items-center gap-2 px-3 py-2.5 text-sm text-error rounded-lg cursor-pointer hover:bg-error/10 outline-none transition-colors"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
Удалить
|
||||
</DropdownMenu.Item>
|
||||
)}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
</div>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="p-2 hover:bg-surface/60 rounded-lg transition-all sm:opacity-0 sm:group-hover:opacity-100"
|
||||
>
|
||||
<MoreHorizontal className="w-4 h-4 text-secondary" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[160px] bg-surface/95 backdrop-blur-xl border border-border rounded-xl p-1.5 shadow-dropdown z-50"
|
||||
sideOffset={5}
|
||||
>
|
||||
<DropdownMenu.Item asChild>
|
||||
<Link
|
||||
href={`/spaces/${space.id}/edit`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex items-center gap-2 px-3 py-2.5 text-sm text-secondary rounded-lg cursor-pointer hover:bg-elevated/80 hover:text-primary outline-none transition-colors"
|
||||
|
||||
{/* Title & Description */}
|
||||
<h3 className="text-lg font-semibold text-primary mb-1 group-hover:text-gradient transition-colors">
|
||||
{space.name}
|
||||
</h3>
|
||||
<p className="text-sm text-secondary line-clamp-2 mb-4 min-h-[40px]">
|
||||
{space.description || 'Без описания'}
|
||||
</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex items-center gap-4 text-xs text-muted">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Users className="w-3.5 h-3.5" />
|
||||
<span>{space.memberCount || 1}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<MessageSquare className="w-3.5 h-3.5" />
|
||||
<span>{space.threadCount || 0} тредов</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Members avatars */}
|
||||
{space.members && space.members.length > 0 && (
|
||||
<div className="flex items-center gap-1 mt-4 pt-4 border-t border-white/10">
|
||||
<div className="flex -space-x-2">
|
||||
{space.members.slice(0, 4).map((member, idx) => (
|
||||
<div
|
||||
key={member.id}
|
||||
className="w-7 h-7 rounded-full bg-surface border-2 border-base flex items-center justify-center"
|
||||
title={member.name || member.email}
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
Редактировать
|
||||
</Link>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDelete(space.id);
|
||||
}}
|
||||
className="flex items-center gap-2 px-3 py-2.5 text-sm text-error rounded-lg cursor-pointer hover:bg-error/10 outline-none transition-colors"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
Удалить
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
{member.avatar ? (
|
||||
<img src={member.avatar} alt="" className="w-full h-full rounded-full object-cover" />
|
||||
) : (
|
||||
<span className="text-[10px] font-medium text-secondary">
|
||||
{(member.name || member.email || '?').charAt(0).toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{(space.memberCount || 0) > 4 && (
|
||||
<div className="w-7 h-7 rounded-full bg-surface border-2 border-base flex items-center justify-center">
|
||||
<span className="text-[10px] font-medium text-muted">
|
||||
+{(space.memberCount || 0) - 4}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-16 sm:py-20">
|
||||
<FolderOpen className="w-12 h-12 mx-auto mb-4 text-muted" />
|
||||
<p className="text-secondary mb-1">
|
||||
<div className="text-center py-20">
|
||||
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-accent/20 to-accent/5 flex items-center justify-center mx-auto mb-6">
|
||||
<FolderOpen className="w-10 h-10 text-accent" />
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-primary mb-2">
|
||||
{search ? 'Ничего не найдено' : 'Нет пространств'}
|
||||
</h2>
|
||||
<p className="text-secondary mb-8 max-w-md mx-auto">
|
||||
{search
|
||||
? 'Попробуйте изменить поисковый запрос'
|
||||
: 'Создайте первое пространство для организации ваших исследований и совместной работы'}
|
||||
</p>
|
||||
<p className="text-sm text-muted mb-6">
|
||||
Создайте пространство для организации исследований
|
||||
</p>
|
||||
<Link
|
||||
href="/spaces/new"
|
||||
className="inline-flex items-center gap-2 px-4 py-2.5 text-sm btn-gradient"
|
||||
>
|
||||
<Plus className="w-4 h-4 btn-gradient-text" />
|
||||
<span className="btn-gradient-text">Создать пространство</span>
|
||||
</Link>
|
||||
{!search && (
|
||||
<Link
|
||||
href="/spaces/new"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 btn-gradient"
|
||||
>
|
||||
<Plus className="w-5 h-5 btn-gradient-text" />
|
||||
<span className="btn-gradient-text font-medium">Создать пространство</span>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -16,10 +16,13 @@ import {
|
||||
X,
|
||||
FileText,
|
||||
File,
|
||||
Bot,
|
||||
Cpu,
|
||||
} from 'lucide-react';
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
|
||||
type Mode = 'speed' | 'balanced' | 'quality';
|
||||
type ModelID = 'auto' | 'gooseek-1.0';
|
||||
|
||||
export interface ChatAttachment {
|
||||
id: string;
|
||||
@@ -28,10 +31,16 @@ export interface ChatAttachment {
|
||||
preview?: string;
|
||||
}
|
||||
|
||||
export interface ChatModel {
|
||||
providerId: string;
|
||||
key: string;
|
||||
}
|
||||
|
||||
export interface SendOptions {
|
||||
mode: Mode;
|
||||
webSearch: boolean;
|
||||
attachments: ChatAttachment[];
|
||||
model: ChatModel;
|
||||
}
|
||||
|
||||
interface ChatInputProps {
|
||||
@@ -50,9 +59,15 @@ const modes: { value: Mode; label: string; icon: typeof Zap; desc: string }[] =
|
||||
{ value: 'quality', label: 'Качество', icon: Sparkles, desc: '~60 сек' },
|
||||
];
|
||||
|
||||
const models: { id: ModelID; label: string; icon: typeof Bot; desc: string; providerId: string; key: string }[] = [
|
||||
{ id: 'auto', label: 'Auto', icon: Cpu, desc: 'Бесплатно', providerId: 'ollama', key: '' },
|
||||
{ id: 'gooseek-1.0', label: 'GooSeek 1.0', icon: Bot, desc: 'По тарифу', providerId: 'timeweb', key: 'gpt-4o' },
|
||||
];
|
||||
|
||||
export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, value: externalValue, onChange: externalOnChange }: ChatInputProps) {
|
||||
const [internalMessage, setInternalMessage] = useState('');
|
||||
const [mode, setMode] = useState<Mode>('balanced');
|
||||
const [modelId, setModelId] = useState<ModelID>('auto');
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const [webSearchEnabled, setWebSearchEnabled] = useState(false);
|
||||
const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
|
||||
@@ -73,10 +88,15 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
if ((message.trim() || attachments.length > 0) && !isLoading) {
|
||||
const selectedModel = models.find(m => m.id === modelId) || models[0];
|
||||
onSend(message.trim(), {
|
||||
mode,
|
||||
webSearch: webSearchEnabled,
|
||||
attachments,
|
||||
model: {
|
||||
providerId: selectedModel.providerId,
|
||||
key: selectedModel.key,
|
||||
},
|
||||
});
|
||||
if (isControlled && externalOnChange) {
|
||||
externalOnChange('');
|
||||
@@ -88,7 +108,7 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
|
||||
textareaRef.current.style.height = 'auto';
|
||||
}
|
||||
}
|
||||
}, [message, mode, webSearchEnabled, attachments, isLoading, onSend, isControlled, externalOnChange]);
|
||||
}, [message, mode, modelId, webSearchEnabled, attachments, isLoading, onSend, isControlled, externalOnChange]);
|
||||
|
||||
const handleFileSelect = useCallback((e: ChangeEvent<HTMLInputElement>, type: 'file' | 'image') => {
|
||||
const files = e.target.files;
|
||||
@@ -142,6 +162,7 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
|
||||
};
|
||||
|
||||
const currentMode = modes.find((m) => m.value === mode)!;
|
||||
const currentModel = models.find((m) => m.id === modelId) || models[0];
|
||||
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
@@ -162,32 +183,32 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
|
||||
{attachments.map((attachment) => (
|
||||
<div
|
||||
key={attachment.id}
|
||||
className="relative group flex items-center gap-2 bg-surface/80 border border-border/50 rounded-lg px-3 py-2"
|
||||
className="relative group flex items-center gap-1.5 bg-surface/80 border border-border/50 rounded-lg px-2 py-1"
|
||||
>
|
||||
{attachment.type === 'image' && attachment.preview ? (
|
||||
<img
|
||||
src={attachment.preview}
|
||||
alt={attachment.file.name}
|
||||
className="w-8 h-8 object-cover rounded"
|
||||
className="w-6 h-6 object-cover rounded"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 flex items-center justify-center bg-accent/10 rounded">
|
||||
<div className="w-6 h-6 flex items-center justify-center bg-accent/10 rounded">
|
||||
{attachment.file.type.includes('pdf') ? (
|
||||
<FileText className="w-4 h-4 text-accent" />
|
||||
<FileText className="w-3.5 h-3.5 text-accent" />
|
||||
) : (
|
||||
<File className="w-4 h-4 text-accent" />
|
||||
<File className="w-3.5 h-3.5 text-accent" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<span className="text-xs text-secondary max-w-[120px] truncate">
|
||||
<span className="text-xs text-secondary max-w-[140px] truncate">
|
||||
{attachment.file.name}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeAttachment(attachment.id)}
|
||||
className="ml-1 p-0.5 rounded-full hover:bg-error/20 text-muted hover:text-error transition-colors"
|
||||
className="p-0.5 rounded-full hover:bg-error/20 text-muted hover:text-error transition-colors"
|
||||
title="Удалить"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
@@ -227,12 +248,12 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
|
||||
className={`
|
||||
w-10 h-10 flex items-center justify-center rounded-xl transition-all duration-200
|
||||
${(message.trim() || attachments.length > 0)
|
||||
? 'btn-gradient'
|
||||
? 'btn-gradient text-accent'
|
||||
: 'bg-surface/50 text-muted border border-border/50'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<ArrowUp className={`w-5 h-5 ${(message.trim() || attachments.length > 0) ? 'btn-gradient-text' : ''}`} />
|
||||
<ArrowUp className="w-5 h-5 flex-shrink-0" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -276,6 +297,41 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
{/* Model Selector */}
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button className="flex items-center gap-2 h-8 px-3 text-xs text-secondary hover:text-primary rounded-lg hover:bg-surface/50 transition-all">
|
||||
<currentModel.icon className="w-4 h-4 text-gradient" />
|
||||
<span className="font-medium">{currentModel.label}</span>
|
||||
<ChevronDown className="w-3.5 h-3.5 opacity-50" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[180px] bg-surface/95 backdrop-blur-xl border border-border rounded-xl p-1.5 shadow-dropdown z-50"
|
||||
sideOffset={8}
|
||||
>
|
||||
{models.map((m) => (
|
||||
<DropdownMenu.Item
|
||||
key={m.id}
|
||||
onClick={() => setModelId(m.id)}
|
||||
className={`
|
||||
flex items-center gap-3 px-3 py-2.5 text-sm rounded-lg cursor-pointer outline-none transition-colors
|
||||
${modelId === m.id
|
||||
? 'active-gradient text-primary'
|
||||
: 'text-secondary hover:bg-elevated/80 hover:text-primary'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<m.icon className={`w-4 h-4 ${modelId === m.id ? 'text-gradient' : 'text-muted'}`} />
|
||||
<span className={`flex-1 font-medium ${modelId === m.id ? 'text-gradient' : ''}`}>{m.label}</span>
|
||||
<span className={`text-xs ${m.id === 'auto' ? 'text-success' : 'text-muted'}`}>{m.desc}</span>
|
||||
</DropdownMenu.Item>
|
||||
))}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
{/* Separator */}
|
||||
<div className="w-px h-5 bg-border/50 mx-1" />
|
||||
|
||||
@@ -324,11 +380,6 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-faint">
|
||||
Enter для отправки · Shift+Enter для новой строки
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
Compass,
|
||||
FolderOpen,
|
||||
Clock,
|
||||
Settings,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
TrendingUp,
|
||||
@@ -19,7 +18,8 @@ import {
|
||||
X,
|
||||
Shield,
|
||||
LogIn,
|
||||
UserPlus,
|
||||
Wallet,
|
||||
ChevronRight as ChevronRightIcon,
|
||||
} from 'lucide-react';
|
||||
import { filterMenuItems } from '@/lib/config/menu';
|
||||
import { useAuth } from '@/lib/contexts/AuthContext';
|
||||
@@ -65,12 +65,12 @@ export function Sidebar({ onClose }: SidebarProps) {
|
||||
return (
|
||||
<motion.aside
|
||||
initial={false}
|
||||
animate={{ width: isMobile ? 280 : collapsed ? 68 : 260 }}
|
||||
animate={{ width: isMobile ? 240 : collapsed ? 56 : 200 }}
|
||||
transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
|
||||
className="h-full flex flex-col bg-base border-r border-border/50"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="h-16 px-4 flex items-center justify-between">
|
||||
<div className="h-12 px-3 flex items-center justify-between">
|
||||
<AnimatePresence mode="wait">
|
||||
{(isMobile || !collapsed) && (
|
||||
<motion.div
|
||||
@@ -79,7 +79,7 @@ export function Sidebar({ onClose }: SidebarProps) {
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<span className="font-black italic text-primary tracking-tight text-3xl">GooSeek</span>
|
||||
<span className="font-black italic text-primary tracking-tight text-xl">GooSeek</span>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
@@ -87,26 +87,26 @@ export function Sidebar({ onClose }: SidebarProps) {
|
||||
{isMobile ? (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-9 h-9 flex items-center justify-center rounded-xl text-muted hover:text-primary hover:bg-surface/50 transition-all"
|
||||
className="w-7 h-7 flex items-center justify-center rounded-lg text-muted hover:text-primary hover:bg-surface/50 transition-all"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={toggleCollapse}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-muted hover:text-secondary hover:bg-surface/50 transition-all"
|
||||
className="w-6 h-6 flex items-center justify-center rounded text-muted hover:text-secondary hover:bg-surface/50 transition-all"
|
||||
>
|
||||
{collapsed ? (
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<ChevronRight className="w-3.5 h-3.5" />
|
||||
) : (
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
<ChevronLeft className="w-3.5 h-3.5" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
|
||||
<nav className="flex-1 px-2 py-2 space-y-0.5 overflow-y-auto">
|
||||
{navItems.map((item) => (
|
||||
<NavLink
|
||||
key={item.href}
|
||||
@@ -120,13 +120,13 @@ export function Sidebar({ onClose }: SidebarProps) {
|
||||
))}
|
||||
|
||||
{/* Tools Section */}
|
||||
<div className="pt-6 pb-2">
|
||||
<div className="pt-4 pb-1">
|
||||
{(isMobile || !collapsed) && (
|
||||
<span className="px-3 text-[11px] font-semibold text-muted uppercase tracking-wider">
|
||||
<span className="px-2 text-[10px] font-semibold text-muted uppercase tracking-wider">
|
||||
Инструменты
|
||||
</span>
|
||||
)}
|
||||
{!isMobile && collapsed && <div className="h-px bg-border/30 mx-2" />}
|
||||
{!isMobile && collapsed && <div className="h-px bg-border/30 mx-1" />}
|
||||
</div>
|
||||
|
||||
{toolItems.map((item) => (
|
||||
@@ -142,8 +142,8 @@ export function Sidebar({ onClose }: SidebarProps) {
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-3 border-t border-border/30 space-y-1">
|
||||
{/* Footer - Profile Block */}
|
||||
<div className="p-2 border-t border-border/30">
|
||||
{isAdmin && (
|
||||
<NavLink
|
||||
href="/admin"
|
||||
@@ -154,83 +154,86 @@ export function Sidebar({ onClose }: SidebarProps) {
|
||||
onClick={handleNavClick}
|
||||
/>
|
||||
)}
|
||||
<NavLink
|
||||
href="/settings"
|
||||
icon={Settings}
|
||||
label="Настройки"
|
||||
collapsed={!isMobile && collapsed}
|
||||
active={pathname === '/settings'}
|
||||
onClick={handleNavClick}
|
||||
/>
|
||||
|
||||
{/* Auth buttons for non-authenticated users */}
|
||||
{/* Guest - Login button */}
|
||||
{!isAuthenticated && (
|
||||
<div className={`pt-2 ${collapsed && !isMobile ? 'px-0' : ''}`}>
|
||||
<div className={`${isAdmin ? 'mt-1' : ''}`}>
|
||||
{collapsed && !isMobile ? (
|
||||
<button
|
||||
onClick={() => showAuthModal('login')}
|
||||
className="w-full h-10 flex items-center justify-center rounded-xl bg-accent/10 text-accent hover:bg-accent/20 transition-all"
|
||||
className="btn-gradient w-full h-9 flex items-center justify-center"
|
||||
>
|
||||
<LogIn className="w-[18px] h-[18px]" />
|
||||
<LogIn className="w-4 h-4 btn-gradient-text" />
|
||||
</button>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
onClick={() => { showAuthModal('login'); handleNavClick(); }}
|
||||
className="w-full h-10 flex items-center justify-center gap-2 rounded-xl bg-surface/50 text-secondary hover:text-primary hover:bg-surface transition-all text-sm font-medium"
|
||||
>
|
||||
<LogIn className="w-4 h-4" />
|
||||
Войти
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { showAuthModal('register'); handleNavClick(); }}
|
||||
className="w-full h-10 flex items-center justify-center gap-2 rounded-xl bg-accent text-white hover:bg-accent-hover transition-all text-sm font-medium"
|
||||
>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
Регистрация
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { showAuthModal('login'); handleNavClick(); }}
|
||||
className="btn-gradient w-full h-9 flex items-center justify-center gap-2"
|
||||
>
|
||||
<LogIn className="w-3.5 h-3.5 btn-gradient-text" />
|
||||
<span className="btn-gradient-text text-xs font-medium">Войти</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* User info for authenticated users */}
|
||||
{/* Authenticated - Profile with balance */}
|
||||
{isAuthenticated && user && (
|
||||
<div className={`pt-2 ${collapsed && !isMobile ? 'justify-center' : ''}`}>
|
||||
<div className={`${isAdmin ? 'mt-1' : ''}`}>
|
||||
{collapsed && !isMobile ? (
|
||||
<Link
|
||||
href="/settings"
|
||||
className="w-full h-10 flex items-center justify-center rounded-xl hover:bg-surface/50 transition-all"
|
||||
onClick={handleNavClick}
|
||||
className="w-full flex flex-col items-center gap-1"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center">
|
||||
<div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center hover:bg-accent/30 transition-all">
|
||||
{user.avatar ? (
|
||||
<img src={user.avatar} alt={user.name} className="w-full h-full rounded-full object-cover" />
|
||||
) : (
|
||||
<span className="text-sm font-medium text-accent">
|
||||
<span className="text-xs font-semibold text-accent">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-0.5 px-1.5 py-0.5 rounded bg-surface/50">
|
||||
<Wallet className="w-2.5 h-2.5 text-accent" />
|
||||
<span className="text-[10px] font-medium text-primary">{user.balance ?? 0}</span>
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
href="/settings"
|
||||
onClick={handleNavClick}
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-xl hover:bg-surface/50 transition-all"
|
||||
className="flex items-center gap-2 p-1.5 rounded-lg bg-surface/30 hover:bg-surface/50 border border-border/30 hover:border-border/50 transition-all group"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
|
||||
{user.avatar ? (
|
||||
<img src={user.avatar} alt={user.name} className="w-full h-full rounded-full object-cover" />
|
||||
) : (
|
||||
<span className="text-sm font-medium text-accent">
|
||||
<span className="text-xs font-semibold text-accent">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-primary truncate">{user.name}</div>
|
||||
<div className="text-xs text-muted truncate">{user.email}</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs font-medium text-primary truncate">{user.name}</span>
|
||||
<span className={`text-[9px] font-medium px-1 py-0.5 rounded ${
|
||||
user.tier === 'business'
|
||||
? 'bg-amber-500/20 text-amber-400'
|
||||
: user.tier === 'pro'
|
||||
? 'bg-accent/20 text-accent'
|
||||
: 'bg-surface text-muted'
|
||||
}`}>
|
||||
{user.tier === 'business' ? 'Biz' : user.tier === 'pro' ? 'Pro' : 'Free'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 mt-0.5">
|
||||
<Wallet className="w-2.5 h-2.5 text-accent" />
|
||||
<span className="text-[10px] font-medium text-secondary">{(user.balance ?? 0).toLocaleString('ru-RU')} ₽</span>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRightIcon className="w-3.5 h-3.5 text-muted group-hover:text-secondary transition-colors" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
@@ -255,17 +258,17 @@ function NavLink({ href, icon: Icon, label, collapsed, active, onClick }: NavLin
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
className={`
|
||||
flex items-center gap-3 h-11 rounded-xl transition-all duration-150
|
||||
${collapsed ? 'justify-center px-0' : 'px-3'}
|
||||
flex items-center gap-2 h-9 rounded-lg transition-all duration-150
|
||||
${collapsed ? 'justify-center px-0' : 'px-2'}
|
||||
${active
|
||||
? 'active-gradient text-primary border-l-gradient ml-0'
|
||||
: 'text-secondary hover:text-primary hover:bg-surface/50'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Icon className={`w-[18px] h-[18px] flex-shrink-0 ${active ? 'text-gradient' : ''}`} />
|
||||
<Icon className={`w-4 h-4 flex-shrink-0 ${active ? 'text-gradient' : ''}`} />
|
||||
{!collapsed && (
|
||||
<span className={`text-sm font-medium truncate ${active ? 'text-gradient' : ''}`}>{label}</span>
|
||||
<span className={`text-xs font-medium truncate ${active ? 'text-gradient' : ''}`}>{label}</span>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
|
||||
320
backend/webui/src/components/settings/AccountTab.tsx
Normal file
320
backend/webui/src/components/settings/AccountTab.tsx
Normal file
@@ -0,0 +1,320 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { User, Mail, Key, LogOut, Trash2, Camera, Check, X, Loader2 } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/contexts/AuthContext';
|
||||
import { updateProfile, changePassword, logoutAll, UpdateProfileRequest, ChangePasswordRequest } from '@/lib/auth';
|
||||
|
||||
export function AccountTab() {
|
||||
const { user, logout, refreshUser } = useAuth();
|
||||
const [isEditingProfile, setIsEditingProfile] = useState(false);
|
||||
const [isChangingPassword, setIsChangingPassword] = useState(false);
|
||||
const [profileForm, setProfileForm] = useState({ name: user?.name || '' });
|
||||
const [passwordForm, setPasswordForm] = useState({ currentPassword: '', newPassword: '', confirmPassword: '' });
|
||||
const [loading, setLoading] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
|
||||
const handleProfileSave = async () => {
|
||||
if (!profileForm.name.trim()) {
|
||||
setError('Имя не может быть пустым');
|
||||
return;
|
||||
}
|
||||
setLoading('profile');
|
||||
setError(null);
|
||||
try {
|
||||
await updateProfile({ name: profileForm.name } as UpdateProfileRequest);
|
||||
await refreshUser();
|
||||
setIsEditingProfile(false);
|
||||
setSuccess('Профиль обновлён');
|
||||
setTimeout(() => setSuccess(null), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Ошибка обновления профиля');
|
||||
} finally {
|
||||
setLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePasswordChange = async () => {
|
||||
if (passwordForm.newPassword !== passwordForm.confirmPassword) {
|
||||
setError('Пароли не совпадают');
|
||||
return;
|
||||
}
|
||||
if (passwordForm.newPassword.length < 8) {
|
||||
setError('Пароль должен быть минимум 8 символов');
|
||||
return;
|
||||
}
|
||||
setLoading('password');
|
||||
setError(null);
|
||||
try {
|
||||
await changePassword({
|
||||
currentPassword: passwordForm.currentPassword,
|
||||
newPassword: passwordForm.newPassword,
|
||||
} as ChangePasswordRequest);
|
||||
setIsChangingPassword(false);
|
||||
setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
|
||||
setSuccess('Пароль изменён');
|
||||
setTimeout(() => setSuccess(null), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Ошибка смены пароля');
|
||||
} finally {
|
||||
setLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogoutAll = async () => {
|
||||
setLoading('logoutAll');
|
||||
try {
|
||||
await logoutAll();
|
||||
window.location.href = '/';
|
||||
} catch {
|
||||
setError('Ошибка выхода');
|
||||
} finally {
|
||||
setLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
setLoading('logout');
|
||||
try {
|
||||
await logout();
|
||||
window.location.href = '/';
|
||||
} catch {
|
||||
setError('Ошибка выхода');
|
||||
} finally {
|
||||
setLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="p-3 bg-error/10 border border-error/20 rounded-xl text-error text-sm"
|
||||
>
|
||||
{error}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="p-3 bg-success/10 border border-success/20 rounded-xl text-success text-sm"
|
||||
>
|
||||
{success}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Profile Section */}
|
||||
<Section title="Профиль" icon={User}>
|
||||
<div className="p-4 bg-elevated/40 border border-border/40 rounded-xl">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="relative">
|
||||
<div className="w-16 h-16 rounded-full bg-accent/20 flex items-center justify-center">
|
||||
{user.avatar ? (
|
||||
<img src={user.avatar} alt={user.name} className="w-full h-full rounded-full object-cover" />
|
||||
) : (
|
||||
<span className="text-2xl font-semibold text-accent">
|
||||
{user.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button className="absolute -bottom-1 -right-1 w-7 h-7 rounded-full bg-surface border border-border flex items-center justify-center hover:bg-surface/80 transition-all">
|
||||
<Camera className="w-3.5 h-3.5 text-muted" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
{isEditingProfile ? (
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
value={profileForm.name}
|
||||
onChange={(e) => setProfileForm({ ...profileForm, name: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-sm text-primary focus:outline-none focus:border-accent"
|
||||
placeholder="Ваше имя"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleProfileSave}
|
||||
disabled={loading === 'profile'}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-accent text-white rounded-lg text-sm hover:bg-accent-hover transition-all disabled:opacity-50"
|
||||
>
|
||||
{loading === 'profile' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
|
||||
Сохранить
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setIsEditingProfile(false); setProfileForm({ name: user.name }); }}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-surface border border-border text-secondary rounded-lg text-sm hover:text-primary transition-all"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
Отмена
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-lg font-medium text-primary">{user.name}</h3>
|
||||
<span className={`text-xs font-medium px-2 py-0.5 rounded ${
|
||||
user.tier === 'business'
|
||||
? 'bg-amber-500/20 text-amber-400'
|
||||
: user.tier === 'pro'
|
||||
? 'bg-accent/20 text-accent'
|
||||
: 'bg-surface text-muted'
|
||||
}`}>
|
||||
{user.tier === 'business' ? 'Business' : user.tier === 'pro' ? 'Pro' : 'Free'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted mt-0.5">{user.email}</p>
|
||||
<button
|
||||
onClick={() => setIsEditingProfile(true)}
|
||||
className="mt-2 text-sm text-accent hover:text-accent-hover transition-colors"
|
||||
>
|
||||
Редактировать профиль
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Email Section */}
|
||||
<Section title="Email" icon={Mail}>
|
||||
<div className="p-4 bg-elevated/40 border border-border/40 rounded-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-primary">{user.email}</p>
|
||||
<p className="text-xs text-muted mt-0.5">
|
||||
{user.emailVerified ? (
|
||||
<span className="text-success">Подтверждён</span>
|
||||
) : (
|
||||
<span className="text-warning">Не подтверждён</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
{!user.emailVerified && (
|
||||
<button className="px-3 py-1.5 text-sm text-accent hover:text-accent-hover transition-colors">
|
||||
Подтвердить
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Password Section */}
|
||||
<Section title="Безопасность" icon={Key}>
|
||||
<div className="p-4 bg-elevated/40 border border-border/40 rounded-xl">
|
||||
{isChangingPassword ? (
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="password"
|
||||
value={passwordForm.currentPassword}
|
||||
onChange={(e) => setPasswordForm({ ...passwordForm, currentPassword: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-sm text-primary focus:outline-none focus:border-accent"
|
||||
placeholder="Текущий пароль"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={passwordForm.newPassword}
|
||||
onChange={(e) => setPasswordForm({ ...passwordForm, newPassword: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-sm text-primary focus:outline-none focus:border-accent"
|
||||
placeholder="Новый пароль"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={passwordForm.confirmPassword}
|
||||
onChange={(e) => setPasswordForm({ ...passwordForm, confirmPassword: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-sm text-primary focus:outline-none focus:border-accent"
|
||||
placeholder="Подтвердите пароль"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handlePasswordChange}
|
||||
disabled={loading === 'password'}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-accent text-white rounded-lg text-sm hover:bg-accent-hover transition-all disabled:opacity-50"
|
||||
>
|
||||
{loading === 'password' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
|
||||
Сохранить
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setIsChangingPassword(false); setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' }); }}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-surface border border-border text-secondary rounded-lg text-sm hover:text-primary transition-all"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
Отмена
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-primary">Пароль</p>
|
||||
<p className="text-xs text-muted mt-0.5">••••••••</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsChangingPassword(true)}
|
||||
className="px-3 py-1.5 text-sm text-accent hover:text-accent-hover transition-colors"
|
||||
>
|
||||
Изменить
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Session Section */}
|
||||
<Section title="Сессии" icon={LogOut}>
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
disabled={loading === 'logout'}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3 text-sm bg-surface/40 border border-border/50 text-secondary rounded-xl hover:bg-surface/60 hover:border-border hover:text-primary transition-all disabled:opacity-50"
|
||||
>
|
||||
{loading === 'logout' ? <Loader2 className="w-4 h-4 animate-spin" /> : <LogOut className="w-4 h-4" />}
|
||||
Выйти из аккаунта
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLogoutAll}
|
||||
disabled={loading === 'logoutAll'}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3 text-sm bg-warning/5 border border-warning/20 text-warning rounded-xl hover:bg-warning/10 hover:border-warning/30 transition-all disabled:opacity-50"
|
||||
>
|
||||
{loading === 'logoutAll' ? <Loader2 className="w-4 h-4 animate-spin" /> : <LogOut className="w-4 h-4" />}
|
||||
Выйти со всех устройств
|
||||
</button>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Delete Account */}
|
||||
<Section title="Опасная зона" icon={Trash2}>
|
||||
<button className="w-full flex items-center justify-center gap-2 px-4 py-3 text-sm bg-error/5 border border-error/20 text-error rounded-xl hover:bg-error/10 hover:border-error/30 transition-all">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
Удалить аккаунт
|
||||
</button>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ title, icon: Icon, children }: { title: string; icon: React.ElementType; children: React.ReactNode }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="space-y-3"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className="w-4 h-4 text-muted" />
|
||||
<h2 className="text-xs font-semibold text-muted uppercase tracking-wider">{title}</h2>
|
||||
</div>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
326
backend/webui/src/components/settings/BillingTab.tsx
Normal file
326
backend/webui/src/components/settings/BillingTab.tsx
Normal file
@@ -0,0 +1,326 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Wallet, CreditCard, Plus, Check, Zap, Crown, Building2, ArrowRight, Receipt, Download, Clock } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/contexts/AuthContext';
|
||||
|
||||
interface Plan {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
priceMonthly: number;
|
||||
icon: React.ElementType;
|
||||
color: string;
|
||||
features: string[];
|
||||
limits: {
|
||||
apiRequests: string;
|
||||
llmRequests: string;
|
||||
storage: string;
|
||||
};
|
||||
}
|
||||
|
||||
const plans: Plan[] = [
|
||||
{
|
||||
id: 'free',
|
||||
name: 'Free',
|
||||
price: 0,
|
||||
priceMonthly: 0,
|
||||
icon: Zap,
|
||||
color: 'text-muted',
|
||||
features: ['Базовый поиск', 'История запросов', 'Ограниченный AI'],
|
||||
limits: {
|
||||
apiRequests: '1,000/день',
|
||||
llmRequests: '50/день',
|
||||
storage: '100 MB',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'pro',
|
||||
name: 'Pro',
|
||||
price: 990,
|
||||
priceMonthly: 990,
|
||||
icon: Crown,
|
||||
color: 'text-accent',
|
||||
features: ['Расширенный поиск', 'Приоритетный AI', 'Экспорт данных', 'API доступ'],
|
||||
limits: {
|
||||
apiRequests: '10,000/день',
|
||||
llmRequests: '500/день',
|
||||
storage: '1 GB',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'business',
|
||||
name: 'Business',
|
||||
price: 4990,
|
||||
priceMonthly: 4990,
|
||||
icon: Building2,
|
||||
color: 'text-amber-400',
|
||||
features: ['Всё из Pro', 'Безлимитный AI', 'Приоритетная поддержка', 'Команды', 'SLA 99.9%'],
|
||||
limits: {
|
||||
apiRequests: '100,000/день',
|
||||
llmRequests: '5,000/день',
|
||||
storage: '10 GB',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const mockTransactions = [
|
||||
{ id: '1', date: '2026-02-28', amount: 990, type: 'subscription', description: 'Подписка Pro' },
|
||||
{ id: '2', date: '2026-02-15', amount: 500, type: 'topup', description: 'Пополнение баланса' },
|
||||
{ id: '3', date: '2026-01-28', amount: 990, type: 'subscription', description: 'Подписка Pro' },
|
||||
];
|
||||
|
||||
export function BillingTab() {
|
||||
const { user } = useAuth();
|
||||
const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
|
||||
const [showTopup, setShowTopup] = useState(false);
|
||||
const [topupAmount, setTopupAmount] = useState('');
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const currentPlan = plans.find(p => p.id === user.tier) || plans[0];
|
||||
|
||||
const handleUpgrade = (planId: string) => {
|
||||
setSelectedPlan(planId);
|
||||
};
|
||||
|
||||
const handleTopup = () => {
|
||||
const amount = parseInt(topupAmount, 10);
|
||||
if (isNaN(amount) || amount < 100) return;
|
||||
setShowTopup(false);
|
||||
setTopupAmount('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Balance Card */}
|
||||
<Section title="Баланс" icon={Wallet}>
|
||||
<div className="p-4 bg-gradient-to-br from-accent/20 via-accent/10 to-transparent border border-accent/30 rounded-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted">Текущий баланс</p>
|
||||
<p className="text-3xl font-bold text-primary mt-1">{(user.balance ?? 0).toLocaleString('ru-RU')} ₽</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowTopup(!showTopup)}
|
||||
className="flex items-center gap-2 px-4 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-all text-sm font-medium"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Пополнить
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showTopup && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
className="mt-4 pt-4 border-t border-accent/20"
|
||||
>
|
||||
<div className="flex gap-2 mb-3">
|
||||
{[100, 500, 1000, 5000].map((amount) => (
|
||||
<button
|
||||
key={amount}
|
||||
onClick={() => setTopupAmount(amount.toString())}
|
||||
className={`flex-1 py-2 rounded-lg text-sm font-medium transition-all ${
|
||||
topupAmount === amount.toString()
|
||||
? 'bg-accent text-white'
|
||||
: 'bg-surface/50 text-secondary hover:text-primary hover:bg-surface'
|
||||
}`}
|
||||
>
|
||||
{amount} ₽
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="number"
|
||||
value={topupAmount}
|
||||
onChange={(e) => setTopupAmount(e.target.value)}
|
||||
placeholder="Сумма"
|
||||
className="flex-1 px-3 py-2 bg-surface border border-border rounded-lg text-sm text-primary focus:outline-none focus:border-accent"
|
||||
/>
|
||||
<button
|
||||
onClick={handleTopup}
|
||||
disabled={!topupAmount || parseInt(topupAmount, 10) < 100}
|
||||
className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-hover transition-all disabled:opacity-50"
|
||||
>
|
||||
Оплатить
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-muted mt-2">Минимальная сумма: 100 ₽</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Current Plan */}
|
||||
<Section title="Текущий тариф" icon={currentPlan.icon}>
|
||||
<div className="p-4 bg-elevated/40 border border-border/40 rounded-xl">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-xl bg-surface flex items-center justify-center ${currentPlan.color}`}>
|
||||
<currentPlan.icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-primary">{currentPlan.name}</h3>
|
||||
<p className="text-sm text-muted">
|
||||
{currentPlan.price === 0 ? 'Бесплатно' : `${currentPlan.price.toLocaleString('ru-RU')} ₽/мес`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{user.tier !== 'business' && (
|
||||
<button
|
||||
onClick={() => handleUpgrade(user.tier === 'free' ? 'pro' : 'business')}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-accent/10 text-accent rounded-lg text-sm font-medium hover:bg-accent/20 transition-all"
|
||||
>
|
||||
Улучшить
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="p-3 bg-surface/30 rounded-lg">
|
||||
<p className="text-xs text-muted">API запросы</p>
|
||||
<p className="text-sm font-medium text-primary mt-0.5">{currentPlan.limits.apiRequests}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-surface/30 rounded-lg">
|
||||
<p className="text-xs text-muted">AI запросы</p>
|
||||
<p className="text-sm font-medium text-primary mt-0.5">{currentPlan.limits.llmRequests}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-surface/30 rounded-lg">
|
||||
<p className="text-xs text-muted">Хранилище</p>
|
||||
<p className="text-sm font-medium text-primary mt-0.5">{currentPlan.limits.storage}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Plans Comparison */}
|
||||
{selectedPlan && (
|
||||
<Section title="Выбор тарифа" icon={Crown}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
{plans.map((plan) => (
|
||||
<motion.div
|
||||
key={plan.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={`p-4 rounded-xl border transition-all cursor-pointer ${
|
||||
selectedPlan === plan.id
|
||||
? 'bg-accent/10 border-accent'
|
||||
: 'bg-elevated/40 border-border/40 hover:border-border'
|
||||
} ${user.tier === plan.id ? 'ring-2 ring-accent/50' : ''}`}
|
||||
onClick={() => setSelectedPlan(plan.id)}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<plan.icon className={`w-5 h-5 ${plan.color}`} />
|
||||
<span className="font-medium text-primary">{plan.name}</span>
|
||||
{user.tier === plan.id && (
|
||||
<span className="text-xs bg-accent/20 text-accent px-1.5 py-0.5 rounded">Текущий</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-primary mb-3">
|
||||
{plan.price === 0 ? 'Бесплатно' : `${plan.price.toLocaleString('ru-RU')} ₽`}
|
||||
{plan.price > 0 && <span className="text-sm font-normal text-muted">/мес</span>}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{plan.features.map((feature, idx) => (
|
||||
<li key={idx} className="flex items-center gap-2 text-sm text-secondary">
|
||||
<Check className="w-4 h-4 text-accent flex-shrink-0" />
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{user.tier !== plan.id && plan.id !== 'free' && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleUpgrade(plan.id); }}
|
||||
className="w-full mt-4 py-2 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-hover transition-all"
|
||||
>
|
||||
{plans.findIndex(p => p.id === user.tier) < plans.findIndex(p => p.id === plan.id) ? 'Улучшить' : 'Выбрать'}
|
||||
</button>
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{/* Payment Methods */}
|
||||
<Section title="Способы оплаты" icon={CreditCard}>
|
||||
<div className="p-4 bg-elevated/40 border border-border/40 rounded-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-surface flex items-center justify-center">
|
||||
<CreditCard className="w-5 h-5 text-muted" />
|
||||
</div>
|
||||
<p className="text-sm text-muted">Карты не добавлены</p>
|
||||
</div>
|
||||
<button className="flex items-center gap-1.5 px-3 py-1.5 bg-surface border border-border text-secondary rounded-lg text-sm hover:text-primary hover:border-border/80 transition-all">
|
||||
<Plus className="w-4 h-4" />
|
||||
Добавить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Transaction History */}
|
||||
<Section title="История платежей" icon={Receipt}>
|
||||
<div className="space-y-2">
|
||||
{mockTransactions.length === 0 ? (
|
||||
<div className="p-4 bg-elevated/40 border border-border/40 rounded-xl text-center">
|
||||
<Clock className="w-8 h-8 text-muted mx-auto mb-2" />
|
||||
<p className="text-sm text-muted">История платежей пуста</p>
|
||||
</div>
|
||||
) : (
|
||||
mockTransactions.map((tx) => (
|
||||
<div
|
||||
key={tx.id}
|
||||
className="flex items-center justify-between p-3 bg-elevated/40 border border-border/40 rounded-xl"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
|
||||
tx.type === 'topup' ? 'bg-success/10' : 'bg-accent/10'
|
||||
}`}>
|
||||
{tx.type === 'topup' ? (
|
||||
<Plus className="w-4 h-4 text-success" />
|
||||
) : (
|
||||
<Receipt className="w-4 h-4 text-accent" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-primary">{tx.description}</p>
|
||||
<p className="text-xs text-muted">{new Date(tx.date).toLocaleDateString('ru-RU')}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`text-sm font-medium ${tx.type === 'topup' ? 'text-success' : 'text-primary'}`}>
|
||||
{tx.type === 'topup' ? '+' : '-'}{tx.amount.toLocaleString('ru-RU')} ₽
|
||||
</span>
|
||||
<button className="p-1.5 text-muted hover:text-secondary transition-colors">
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ title, icon: Icon, children }: { title: string; icon: React.ElementType; children: React.ReactNode }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="space-y-3"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className="w-4 h-4 text-muted" />
|
||||
<h2 className="text-xs font-semibold text-muted uppercase tracking-wider">{title}</h2>
|
||||
</div>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
199
backend/webui/src/components/settings/PreferencesTab.tsx
Normal file
199
backend/webui/src/components/settings/PreferencesTab.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Shield, Zap, Scale, Sparkles, Download, Trash2, Bell, Eye, Languages, Plug, ChevronDown } from 'lucide-react';
|
||||
import * as Switch from '@radix-ui/react-switch';
|
||||
import { useLanguage, SupportedLanguage } from '@/lib/contexts/LanguageContext';
|
||||
import { ConnectorsSettings } from '@/components/settings/ConnectorsSettings';
|
||||
|
||||
export function PreferencesTab() {
|
||||
const [mode, setMode] = useState('balanced');
|
||||
const [saveHistory, setSaveHistory] = useState(true);
|
||||
const [personalization, setPersonalization] = useState(true);
|
||||
const [notifications, setNotifications] = useState(false);
|
||||
const [showConnectors, setShowConnectors] = useState(false);
|
||||
const { language, setLanguage } = useLanguage();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Default Mode */}
|
||||
<Section title="Режим по умолчанию" icon={Zap}>
|
||||
<div className="grid grid-cols-3 gap-2 sm:gap-3">
|
||||
{[
|
||||
{ id: 'speed', label: 'Быстрый', icon: Zap, desc: '~10 сек' },
|
||||
{ id: 'balanced', label: 'Баланс', icon: Scale, desc: '~30 сек' },
|
||||
{ id: 'quality', label: 'Качество', icon: Sparkles, desc: '~60 сек' },
|
||||
].map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => setMode(m.id)}
|
||||
className={`flex flex-col items-center gap-1 sm:gap-2 p-3 sm:p-4 rounded-xl border transition-all ${
|
||||
mode === m.id
|
||||
? 'active-gradient text-primary'
|
||||
: 'bg-surface/30 border-border/30 text-muted hover:border-border hover:text-secondary'
|
||||
}`}
|
||||
>
|
||||
<m.icon className={`w-4 h-4 sm:w-5 sm:h-5 ${mode === m.id ? 'text-gradient' : ''}`} />
|
||||
<span className="text-xs sm:text-sm font-medium">{m.label}</span>
|
||||
<span className="text-[10px] sm:text-xs text-faint">{m.desc}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Privacy & Data */}
|
||||
<Section title="Приватность" icon={Shield}>
|
||||
<div className="space-y-3">
|
||||
<ToggleRow
|
||||
icon={Eye}
|
||||
label="Сохранять историю"
|
||||
description="Автоматическое сохранение сессий"
|
||||
checked={saveHistory}
|
||||
onChange={setSaveHistory}
|
||||
/>
|
||||
<ToggleRow
|
||||
icon={Sparkles}
|
||||
label="Персонализация"
|
||||
description="Улучшение на основе истории"
|
||||
checked={personalization}
|
||||
onChange={setPersonalization}
|
||||
/>
|
||||
<ToggleRow
|
||||
icon={Bell}
|
||||
label="Уведомления"
|
||||
description="Уведомления об обновлениях"
|
||||
checked={notifications}
|
||||
onChange={setNotifications}
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Language */}
|
||||
<Section title="Язык интерфейса" icon={Languages}>
|
||||
<div className="grid grid-cols-2 gap-2 sm:gap-3">
|
||||
{[
|
||||
{ id: 'ru', label: 'Русский', flag: '🇷🇺' },
|
||||
{ id: 'en', label: 'English', flag: '🇺🇸' },
|
||||
].map((lang) => (
|
||||
<button
|
||||
key={lang.id}
|
||||
onClick={() => setLanguage(lang.id as SupportedLanguage)}
|
||||
className={`flex items-center gap-3 p-3 sm:p-4 rounded-xl border transition-all ${
|
||||
language === lang.id
|
||||
? 'active-gradient text-primary'
|
||||
: 'bg-surface/30 border-border/30 text-muted hover:border-border hover:text-secondary'
|
||||
}`}
|
||||
>
|
||||
<span className="text-lg">{lang.flag}</span>
|
||||
<span className="text-sm font-medium">{lang.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Connectors */}
|
||||
<Section title="Коннекторы" icon={Plug}>
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-muted">
|
||||
Подключите источники данных и каналы уведомлений для автономных задач в Лаптопе.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowConnectors(!showConnectors)}
|
||||
className="w-full flex items-center justify-between p-3 sm:p-4 bg-elevated/40 border border-border/40 rounded-xl hover:bg-elevated/60 hover:border-border transition-all"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center">
|
||||
<Plug className="w-5 h-5 text-indigo-400" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-sm font-medium text-primary">Настроить коннекторы</p>
|
||||
<p className="text-xs text-muted">Поиск, данные, финансы, уведомления</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDown className={`w-5 h-5 text-muted transition-transform ${showConnectors ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{showConnectors && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
className="pt-2"
|
||||
>
|
||||
<ConnectorsSettings />
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Data Management */}
|
||||
<Section title="Управление данными" icon={Download}>
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<button className="flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm bg-surface/40 border border-border/50 text-secondary rounded-xl hover:bg-surface/60 hover:border-border hover:text-primary transition-all">
|
||||
<Download className="w-4 h-4" />
|
||||
Экспорт данных
|
||||
</button>
|
||||
<button className="flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm bg-error/5 border border-error/20 text-error rounded-xl hover:bg-error/10 hover:border-error/30 transition-all">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
Удалить всё
|
||||
</button>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* About */}
|
||||
<div className="pt-6 border-t border-border/30">
|
||||
<div className="text-center text-faint text-xs">
|
||||
<p className="mb-1">GooSeek v1.0.0</p>
|
||||
<p>AI-поиск нового поколения</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ title, icon: Icon, children }: { title: string; icon: React.ElementType; children: React.ReactNode }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="space-y-3 sm:space-y-4"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className="w-4 h-4 text-muted" />
|
||||
<h2 className="text-xs font-semibold text-muted uppercase tracking-wider">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ToggleRowProps {
|
||||
icon: React.ElementType;
|
||||
label: string;
|
||||
description: string;
|
||||
checked: boolean;
|
||||
onChange: (v: boolean) => void;
|
||||
}
|
||||
|
||||
function ToggleRow({ icon: Icon, label, description, checked, onChange }: ToggleRowProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-elevated/40 border border-border/40 rounded-xl">
|
||||
<div className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-surface/60 flex items-center justify-center flex-shrink-0">
|
||||
<Icon className="w-4 h-4 text-secondary" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-primary truncate">{label}</p>
|
||||
<p className="text-xs text-muted mt-0.5 truncate">{description}</p>
|
||||
</div>
|
||||
<Switch.Root
|
||||
checked={checked}
|
||||
onCheckedChange={onChange}
|
||||
className="w-10 h-[22px] sm:w-11 sm:h-6 bg-surface/80 rounded-full relative transition-colors data-[state=checked]:active-gradient border border-border flex-shrink-0"
|
||||
>
|
||||
<Switch.Thumb className="block w-[18px] h-[18px] sm:w-5 sm:h-5 bg-secondary rounded-full transition-transform translate-x-0.5 data-[state=checked]:translate-x-[18px] sm:data-[state=checked]:translate-x-[22px] data-[state=checked]:progress-gradient" />
|
||||
</Switch.Root>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
4
backend/webui/src/components/settings/index.ts
Normal file
4
backend/webui/src/components/settings/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export { AccountTab } from './AccountTab';
|
||||
export { BillingTab } from './BillingTab';
|
||||
export { PreferencesTab } from './PreferencesTab';
|
||||
export { ConnectorsSettings } from './ConnectorsSettings';
|
||||
@@ -4,6 +4,7 @@ import type {
|
||||
StreamEvent,
|
||||
Thread,
|
||||
Space,
|
||||
SpaceMember,
|
||||
FinanceMarket,
|
||||
HeatmapData,
|
||||
TopMovers,
|
||||
@@ -282,6 +283,72 @@ export async function deleteSpace(id: string): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchSpaceMembers(spaceId: string): Promise<SpaceMember[]> {
|
||||
const response = await fetch(`${API_BASE}/api/v1/spaces/${spaceId}/members`, {
|
||||
headers: getAuthHeaders(),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Space members fetch failed: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.members || [];
|
||||
}
|
||||
|
||||
export async function inviteToSpace(spaceId: string, email: string, role: string = 'member'): Promise<{ inviteUrl: string }> {
|
||||
const response = await fetch(`${API_BASE}/api/v1/spaces/${spaceId}/invite`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
body: JSON.stringify({ email, role }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => ({}));
|
||||
throw new Error(data.error || `Invite failed: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function removeSpaceMember(spaceId: string, userId: string): Promise<void> {
|
||||
const response = await fetch(`${API_BASE}/api/v1/spaces/${spaceId}/members/${userId}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders(),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Remove member failed: ${response.status}`);
|
||||
}
|
||||
}
|
||||
|
||||
export async function acceptSpaceInvite(token: string): Promise<Space> {
|
||||
const response = await fetch(`${API_BASE}/api/v1/spaces/invite/${token}/accept`, {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders(),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => ({}));
|
||||
throw new Error(data.error || `Accept invite failed: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function fetchSpaceThreads(spaceId: string): Promise<Thread[]> {
|
||||
const response = await fetch(`${API_BASE}/api/v1/spaces/${spaceId}/threads`, {
|
||||
headers: getAuthHeaders(),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Space threads fetch failed: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.threads || [];
|
||||
}
|
||||
|
||||
export async function fetchMarkets(): Promise<FinanceMarket[]> {
|
||||
const response = await fetch(`${API_BASE}/api/v1/markets`, {
|
||||
headers: getAuthHeaders(),
|
||||
|
||||
@@ -7,6 +7,7 @@ export interface User {
|
||||
avatar?: string;
|
||||
role: 'user' | 'admin';
|
||||
tier: 'free' | 'pro' | 'business';
|
||||
balance: number;
|
||||
emailVerified: boolean;
|
||||
provider: string;
|
||||
createdAt: string;
|
||||
|
||||
@@ -30,6 +30,7 @@ export function useChat(options: UseChatOptions = {}) {
|
||||
const mode = typeof sendOptions === 'string' ? sendOptions : sendOptions?.mode ?? 'balanced';
|
||||
const webSearch = typeof sendOptions === 'object' ? sendOptions.webSearch : false;
|
||||
const attachments = typeof sendOptions === 'object' ? sendOptions.attachments : [];
|
||||
const model = typeof sendOptions === 'object' ? sendOptions.model : undefined;
|
||||
const locale = getLanguageFromStorage();
|
||||
if (!content.trim() || isLoading) return;
|
||||
|
||||
@@ -91,6 +92,7 @@ export function useChat(options: UseChatOptions = {}) {
|
||||
locale,
|
||||
webSearch,
|
||||
attachments: attachmentInfos.length > 0 ? attachmentInfos : undefined,
|
||||
chatModel: model,
|
||||
});
|
||||
|
||||
let fullContent = '';
|
||||
|
||||
@@ -55,13 +55,41 @@ export interface DiscoverItem {
|
||||
|
||||
export interface Space {
|
||||
id: string;
|
||||
userId: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
instructions?: string;
|
||||
icon?: string;
|
||||
color?: string;
|
||||
focusMode?: FocusMode;
|
||||
isPublic?: boolean;
|
||||
createdAt: string;
|
||||
updatedAt?: string;
|
||||
threadCount?: number;
|
||||
memberCount?: number;
|
||||
members?: SpaceMember[];
|
||||
isOwner?: boolean;
|
||||
}
|
||||
|
||||
export interface SpaceMember {
|
||||
id: string;
|
||||
spaceId: string;
|
||||
userId: string;
|
||||
role: 'owner' | 'admin' | 'member';
|
||||
email?: string;
|
||||
name?: string;
|
||||
avatar?: string;
|
||||
joinedAt: string;
|
||||
}
|
||||
|
||||
export interface SpaceInvite {
|
||||
id: string;
|
||||
spaceId: string;
|
||||
email: string;
|
||||
role: string;
|
||||
invitedBy: string;
|
||||
expiresAt: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export type FocusMode =
|
||||
|
||||
Reference in New Issue
Block a user