feat: Add Next.js 15 glassmorphism frontend for DAARION MVP
This commit is contained in:
Apple
2
.gitignore
vendored
2
.gitignore
vendored
@@ -68,3 +68,5 @@ htmlcov/
|
|||||||
# OS specific
|
# OS specific
|
||||||
Thumbs.db
|
Thumbs.db
|
||||||
.directory
|
.directory
|
||||||
|
apps/web/node_modules/
|
||||||
|
apps/web/.next/
|
||||||
|
|||||||
48
apps/web/Dockerfile
Normal file
48
apps/web/Dockerfile
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# DAARION Web Frontend Dockerfile
|
||||||
|
# Multi-stage build for Next.js 15
|
||||||
|
|
||||||
|
# Stage 1: Dependencies
|
||||||
|
FROM node:20-alpine AS deps
|
||||||
|
RUN apk add --no-cache libc6-compat
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY package.json package-lock.json* ./
|
||||||
|
RUN npm ci --legacy-peer-deps
|
||||||
|
|
||||||
|
# Stage 2: Builder
|
||||||
|
FROM node:20-alpine AS builder
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY --from=deps /app/node_modules ./node_modules
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Set environment variables for build
|
||||||
|
ENV NEXT_TELEMETRY_DISABLED=1
|
||||||
|
ENV NODE_ENV=production
|
||||||
|
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Stage 3: Runner
|
||||||
|
FROM node:20-alpine AS runner
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
ENV NODE_ENV=production
|
||||||
|
ENV NEXT_TELEMETRY_DISABLED=1
|
||||||
|
|
||||||
|
RUN addgroup --system --gid 1001 nodejs
|
||||||
|
RUN adduser --system --uid 1001 nextjs
|
||||||
|
|
||||||
|
# Copy necessary files
|
||||||
|
COPY --from=builder /app/public ./public
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||||
|
|
||||||
|
USER nextjs
|
||||||
|
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
ENV PORT=3000
|
||||||
|
ENV HOSTNAME="0.0.0.0"
|
||||||
|
|
||||||
|
CMD ["node", "server.js"]
|
||||||
|
|
||||||
160
apps/web/README_WEB.md
Normal file
160
apps/web/README_WEB.md
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
# DAARION Web Frontend
|
||||||
|
|
||||||
|
Графічний інтерфейс для DAARION MVP на базі Next.js 15 з glassmorphism дизайном.
|
||||||
|
|
||||||
|
## 🚀 Швидкий старт
|
||||||
|
|
||||||
|
### Локальна розробка
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd apps/web
|
||||||
|
|
||||||
|
# Встановити залежності
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Запустити dev сервер
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Відкрийте [http://localhost:3000](http://localhost:3000)
|
||||||
|
|
||||||
|
### Змінні середовища
|
||||||
|
|
||||||
|
Створіть `.env.local`:
|
||||||
|
|
||||||
|
```env
|
||||||
|
# URL бекенду (для розробки)
|
||||||
|
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080
|
||||||
|
|
||||||
|
# Для продакшену залиште порожнім (same-origin)
|
||||||
|
# NEXT_PUBLIC_API_BASE_URL=
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📁 Структура проекту
|
||||||
|
|
||||||
|
```
|
||||||
|
apps/web/
|
||||||
|
├── src/
|
||||||
|
│ ├── app/ # Next.js App Router
|
||||||
|
│ │ ├── page.tsx # Landing / Home
|
||||||
|
│ │ ├── layout.tsx # Root layout
|
||||||
|
│ │ ├── globals.css # Global styles
|
||||||
|
│ │ ├── city/
|
||||||
|
│ │ │ ├── page.tsx # City rooms list
|
||||||
|
│ │ │ └── [slug]/
|
||||||
|
│ │ │ └── page.tsx # Individual room
|
||||||
|
│ │ └── secondme/
|
||||||
|
│ │ └── page.tsx # Second Me profile
|
||||||
|
│ ├── components/
|
||||||
|
│ │ ├── Navigation.tsx # Header navigation
|
||||||
|
│ │ ├── StatusIndicator.tsx # API health indicator
|
||||||
|
│ │ └── Skeleton.tsx # Loading skeletons
|
||||||
|
│ └── lib/
|
||||||
|
│ ├── api.ts # API client
|
||||||
|
│ └── utils.ts # Utility functions
|
||||||
|
├── public/ # Static assets
|
||||||
|
├── Dockerfile # Production container
|
||||||
|
├── next.config.ts # Next.js config
|
||||||
|
├── tailwind.config.ts # Tailwind config
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎨 Дизайн
|
||||||
|
|
||||||
|
### Glassmorphism стиль
|
||||||
|
|
||||||
|
- Темна тема за замовчуванням (`bg-slate-950`)
|
||||||
|
- Напівпрозорі панелі з `backdrop-blur`
|
||||||
|
- Градієнтні акценти (cyan → blue)
|
||||||
|
- Анімовані hover-ефекти
|
||||||
|
|
||||||
|
### CSS класи
|
||||||
|
|
||||||
|
```css
|
||||||
|
.glass-panel /* Базова скляна панель */
|
||||||
|
.glass-panel-hover /* Панель з hover ефектом */
|
||||||
|
.glass-card /* Картка з тінню */
|
||||||
|
.text-gradient /* Градієнтний текст */
|
||||||
|
.glow-accent /* Світіння акценту */
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🛣️ Роути
|
||||||
|
|
||||||
|
| Шлях | Опис |
|
||||||
|
|------|------|
|
||||||
|
| `/` | Landing page з features |
|
||||||
|
| `/city` | Список кімнат міста |
|
||||||
|
| `/city/[slug]` | Окрема кімната |
|
||||||
|
| `/secondme` | Профіль Second Me |
|
||||||
|
|
||||||
|
## 🔌 API інтеграція
|
||||||
|
|
||||||
|
Всі виклики до API проходять через `/api/*`:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { api } from '@/lib/api'
|
||||||
|
|
||||||
|
// Отримати кімнати
|
||||||
|
const rooms = await api.getCityRooms()
|
||||||
|
|
||||||
|
// Отримати профіль Second Me
|
||||||
|
const profile = await api.getSecondMeProfile()
|
||||||
|
|
||||||
|
// Перевірка здоров'я API
|
||||||
|
const isHealthy = await api.checkHealth()
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🐳 Docker
|
||||||
|
|
||||||
|
### Збірка образу
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd apps/web
|
||||||
|
docker build -t daarion-web .
|
||||||
|
```
|
||||||
|
|
||||||
|
### Запуск контейнера
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker run -p 3000:3000 \
|
||||||
|
-e NEXT_PUBLIC_API_BASE_URL= \
|
||||||
|
daarion-web
|
||||||
|
```
|
||||||
|
|
||||||
|
### Docker Compose
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
services:
|
||||||
|
web:
|
||||||
|
build: ./apps/web
|
||||||
|
ports:
|
||||||
|
- "3000:3000"
|
||||||
|
environment:
|
||||||
|
- NEXT_PUBLIC_API_BASE_URL=
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📱 Мобільна адаптація
|
||||||
|
|
||||||
|
- Responsive breakpoints: `sm:640px`, `md:768px`, `lg:1024px`
|
||||||
|
- Mobile-first підхід
|
||||||
|
- Бургер-меню для навігації на мобільних
|
||||||
|
- Оптимізовані розміри тексту та відступів
|
||||||
|
|
||||||
|
## 🔧 Команди
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev # Development server
|
||||||
|
npm run build # Production build
|
||||||
|
npm run start # Start production server
|
||||||
|
npm run lint # Run ESLint
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔜 Roadmap
|
||||||
|
|
||||||
|
- [ ] Matrix/WebSocket інтеграція для чату
|
||||||
|
- [ ] Авторизація (Passkey/OAuth)
|
||||||
|
- [ ] Agent Console
|
||||||
|
- [ ] Wallet/Governance екрани
|
||||||
|
- [ ] PWA support
|
||||||
|
- [ ] Dark/Light theme toggle
|
||||||
|
|
||||||
5
apps/web/next-env.d.ts
vendored
Normal file
5
apps/web/next-env.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
/// <reference types="next" />
|
||||||
|
/// <reference types="next/image-types/global" />
|
||||||
|
|
||||||
|
// NOTE: This file should not be edited
|
||||||
|
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||||
24
apps/web/next.config.ts
Normal file
24
apps/web/next.config.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import type { NextConfig } from 'next'
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
output: 'standalone',
|
||||||
|
|
||||||
|
async rewrites() {
|
||||||
|
// In production, API calls go to same origin
|
||||||
|
// In dev, proxy to local backend
|
||||||
|
const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL || ''
|
||||||
|
|
||||||
|
if (apiBase && apiBase !== '') {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
source: '/api/:path*',
|
||||||
|
destination: `${apiBase}/api/:path*`,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
return []
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default nextConfig
|
||||||
|
|
||||||
6149
apps/web/package-lock.json
generated
Normal file
6149
apps/web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
apps/web/package.json
Normal file
32
apps/web/package.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "daarion-web",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev -p 3000",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start -p 3000",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"next": "15.0.3",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"lucide-react": "^0.460.0",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"tailwind-merge": "^2.5.4",
|
||||||
|
"class-variance-authority": "^0.7.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.10.1",
|
||||||
|
"@types/react": "^18.3.12",
|
||||||
|
"@types/react-dom": "^18.3.1",
|
||||||
|
"typescript": "^5.7.2",
|
||||||
|
"tailwindcss": "^3.4.15",
|
||||||
|
"postcss": "^8.4.49",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"eslint": "^9.15.0",
|
||||||
|
"eslint-config-next": "15.0.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
10
apps/web/postcss.config.mjs
Normal file
10
apps/web/postcss.config.mjs
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
/** @type {import('postcss-load-config').Config} */
|
||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default config
|
||||||
|
|
||||||
205
apps/web/src/app/city/[slug]/page.tsx
Normal file
205
apps/web/src/app/city/[slug]/page.tsx
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
import Link from 'next/link'
|
||||||
|
import { ArrowLeft, Users, MessageSquare, FileText, Clock, Send } from 'lucide-react'
|
||||||
|
import { api, CityRoom } from '@/lib/api'
|
||||||
|
import { formatDate } from '@/lib/utils'
|
||||||
|
import { notFound } from 'next/navigation'
|
||||||
|
|
||||||
|
// Force dynamic rendering - don't prerender at build time
|
||||||
|
export const dynamic = 'force-dynamic'
|
||||||
|
|
||||||
|
interface PageProps {
|
||||||
|
params: Promise<{ slug: string }>
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getRoom(slug: string): Promise<CityRoom | null> {
|
||||||
|
try {
|
||||||
|
return await api.getCityRoom(slug)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch room:', error)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function RoomPage({ params }: PageProps) {
|
||||||
|
const { slug } = await params
|
||||||
|
const room = await getRoom(slug)
|
||||||
|
|
||||||
|
if (!room) {
|
||||||
|
notFound()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="px-4 py-6 border-b border-white/5">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<Link
|
||||||
|
href="/city"
|
||||||
|
className="inline-flex items-center gap-2 text-slate-400 hover:text-white transition-colors mb-4"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
Назад до кімнат
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl sm:text-3xl font-bold text-white">
|
||||||
|
{room.name}
|
||||||
|
</h1>
|
||||||
|
<p className="text-slate-400 mt-1">
|
||||||
|
{room.description || 'Без опису'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="flex items-center gap-2 text-sm">
|
||||||
|
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
||||||
|
<span className="text-emerald-400">{room.members_online} онлайн</span>
|
||||||
|
</div>
|
||||||
|
{room.is_default && (
|
||||||
|
<span className="px-3 py-1 text-xs font-medium bg-cyan-500/20 text-cyan-400 rounded-full">
|
||||||
|
Default Room
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="max-w-6xl mx-auto px-4 py-6">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Chat Area */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<div className="glass-panel h-[500px] sm:h-[600px] flex flex-col">
|
||||||
|
{/* Chat Header */}
|
||||||
|
<div className="px-6 py-4 border-b border-white/10">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MessageSquare className="w-5 h-5 text-cyan-400" />
|
||||||
|
<span className="font-medium text-white">Чат кімнати</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Messages Placeholder */}
|
||||||
|
<div className="flex-1 flex items-center justify-center p-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800/50 flex items-center justify-center">
|
||||||
|
<MessageSquare className="w-8 h-8 text-slate-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-white mb-2">
|
||||||
|
Чат скоро буде доступний
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-slate-400 max-w-sm">
|
||||||
|
Matrix/WebSocket інтеграція буде додана в наступному оновленні.
|
||||||
|
Поки що ви можете переглядати інформацію про кімнату.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input Placeholder */}
|
||||||
|
<div className="px-4 py-4 border-t border-white/10">
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Напишіть повідомлення..."
|
||||||
|
disabled
|
||||||
|
className="flex-1 px-4 py-3 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500/50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
disabled
|
||||||
|
className="px-4 py-3 bg-cyan-500/20 text-cyan-400 rounded-xl disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<Send className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sidebar */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Room Info */}
|
||||||
|
<div className="glass-panel p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||||
|
<FileText className="w-5 h-5 text-cyan-400" />
|
||||||
|
Інформація
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<InfoRow label="ID" value={room.id} />
|
||||||
|
<InfoRow label="Slug" value={room.slug} />
|
||||||
|
<InfoRow
|
||||||
|
label="Створено"
|
||||||
|
value={formatDate(room.created_at)}
|
||||||
|
/>
|
||||||
|
<InfoRow
|
||||||
|
label="Автор"
|
||||||
|
value={room.created_by || 'Система'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Online Users */}
|
||||||
|
<div className="glass-panel p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||||
|
<Users className="w-5 h-5 text-cyan-400" />
|
||||||
|
Учасники онлайн
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{room.members_online > 0 ? (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{Array.from({ length: Math.min(room.members_online, 8) }).map((_, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-500/30 to-blue-600/30 flex items-center justify-center text-sm font-medium text-cyan-400"
|
||||||
|
>
|
||||||
|
U{i + 1}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{room.members_online > 8 && (
|
||||||
|
<div className="w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-sm text-slate-400">
|
||||||
|
+{room.members_online - 8}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-slate-400">
|
||||||
|
Наразі ніхто не онлайн
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Co-Memory Placeholder */}
|
||||||
|
<div className="glass-panel p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||||
|
<Clock className="w-5 h-5 text-cyan-400" />
|
||||||
|
Co-Memory / Files
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="text-center py-6">
|
||||||
|
<div className="w-12 h-12 mx-auto mb-3 rounded-full bg-slate-800/50 flex items-center justify-center">
|
||||||
|
<FileText className="w-6 h-6 text-slate-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-400">
|
||||||
|
Спільна памʼять та файли будуть доступні скоро
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function InfoRow({ label, value }: { label: string; value: string }) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-between items-center text-sm">
|
||||||
|
<span className="text-slate-400">{label}</span>
|
||||||
|
<span className="text-white font-mono text-xs bg-slate-800/50 px-2 py-1 rounded">
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
148
apps/web/src/app/city/page.tsx
Normal file
148
apps/web/src/app/city/page.tsx
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
import Link from 'next/link'
|
||||||
|
import { Building2, Users, Star, MessageSquare, ArrowRight } from 'lucide-react'
|
||||||
|
import { api, CityRoom } from '@/lib/api'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
// Force dynamic rendering - don't prerender at build time
|
||||||
|
export const dynamic = 'force-dynamic'
|
||||||
|
|
||||||
|
async function getCityRooms(): Promise<CityRoom[]> {
|
||||||
|
try {
|
||||||
|
return await api.getCityRooms()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch city rooms:', error)
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function CityPage() {
|
||||||
|
const rooms = await getCityRooms()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen px-4 py-8">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<div className="p-3 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-600/20">
|
||||||
|
<Building2 className="w-8 h-8 text-cyan-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-white">Кімнати Міста</h1>
|
||||||
|
<p className="text-slate-400">Оберіть кімнату для спілкування</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Rooms Grid */}
|
||||||
|
{rooms.length === 0 ? (
|
||||||
|
<div className="glass-panel p-12 text-center">
|
||||||
|
<Building2 className="w-16 h-16 text-slate-600 mx-auto mb-4" />
|
||||||
|
<h2 className="text-xl font-semibold text-white mb-2">
|
||||||
|
Кімнати не знайдено
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-400">
|
||||||
|
API недоступний або кімнати ще не створені
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||||
|
{rooms.map((room) => (
|
||||||
|
<RoomCard key={room.id} room={room} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Stats Section */}
|
||||||
|
{rooms.length > 0 && (
|
||||||
|
<div className="mt-12 grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||||
|
<StatCard
|
||||||
|
label="Кімнат"
|
||||||
|
value={rooms.length}
|
||||||
|
icon={Building2}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Онлайн"
|
||||||
|
value={rooms.reduce((sum, r) => sum + r.members_online, 0)}
|
||||||
|
icon={Users}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="За замовч."
|
||||||
|
value={rooms.filter(r => r.is_default).length}
|
||||||
|
icon={Star}
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
label="Активних"
|
||||||
|
value={rooms.filter(r => r.members_online > 0).length}
|
||||||
|
icon={MessageSquare}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function RoomCard({ room }: { room: CityRoom }) {
|
||||||
|
const isActive = room.members_online > 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
href={`/city/${room.slug}`}
|
||||||
|
className="glass-panel-hover p-5 group block"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between mb-3">
|
||||||
|
<h3 className="text-lg font-semibold text-white group-hover:text-cyan-400 transition-colors">
|
||||||
|
{room.name}
|
||||||
|
</h3>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{room.is_default && (
|
||||||
|
<span className="px-2 py-0.5 text-xs font-medium bg-cyan-500/20 text-cyan-400 rounded-full">
|
||||||
|
Default
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-slate-400 mb-4 line-clamp-2">
|
||||||
|
{room.description || 'Без опису'}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4 text-sm">
|
||||||
|
<span className={cn(
|
||||||
|
'flex items-center gap-1.5',
|
||||||
|
isActive ? 'text-emerald-400' : 'text-slate-500'
|
||||||
|
)}>
|
||||||
|
<span className={cn(
|
||||||
|
'w-2 h-2 rounded-full',
|
||||||
|
isActive ? 'bg-emerald-400 animate-pulse' : 'bg-slate-600'
|
||||||
|
)} />
|
||||||
|
{room.members_online} онлайн
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ArrowRight className="w-5 h-5 text-slate-500 group-hover:text-cyan-400 group-hover:translate-x-1 transition-all" />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatCard({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
icon: Icon
|
||||||
|
}: {
|
||||||
|
label: string
|
||||||
|
value: number
|
||||||
|
icon: React.ComponentType<{ className?: string }>
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="glass-panel p-4 text-center">
|
||||||
|
<Icon className="w-5 h-5 text-cyan-400 mx-auto mb-2" />
|
||||||
|
<div className="text-2xl font-bold text-white">{value}</div>
|
||||||
|
<div className="text-xs text-slate-400">{label}</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
113
apps/web/src/app/globals.css
Normal file
113
apps/web/src/app/globals.css
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--foreground-rgb: 255, 255, 255;
|
||||||
|
--background-start-rgb: 15, 23, 42;
|
||||||
|
--background-end-rgb: 8, 47, 73;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: rgb(var(--foreground-rgb));
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgb(var(--background-start-rgb)) 0%,
|
||||||
|
rgb(var(--background-end-rgb)) 50%,
|
||||||
|
rgb(15, 23, 42) 100%
|
||||||
|
);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glassmorphism utilities */
|
||||||
|
@layer components {
|
||||||
|
.glass-panel {
|
||||||
|
@apply bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-panel-hover {
|
||||||
|
@apply glass-panel transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:scale-[1.02];
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card {
|
||||||
|
@apply bg-slate-900/50 backdrop-blur-lg border border-slate-700/50 rounded-xl shadow-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glow-accent {
|
||||||
|
box-shadow: 0 0 30px rgba(14, 165, 233, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-gradient {
|
||||||
|
@apply bg-gradient-to-r from-cyan-400 via-sky-500 to-blue-600 bg-clip-text text-transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ambient background effects */
|
||||||
|
.ambient-bg {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ambient-bg::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: radial-gradient(
|
||||||
|
ellipse at 30% 20%,
|
||||||
|
rgba(14, 165, 233, 0.15) 0%,
|
||||||
|
transparent 50%
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
ellipse at 70% 80%,
|
||||||
|
rgba(6, 182, 212, 0.1) 0%,
|
||||||
|
transparent 50%
|
||||||
|
);
|
||||||
|
animation: ambient-drift 20s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ambient-drift {
|
||||||
|
0%, 100% {
|
||||||
|
transform: translate(0, 0) rotate(0deg);
|
||||||
|
}
|
||||||
|
33% {
|
||||||
|
transform: translate(2%, 2%) rotate(1deg);
|
||||||
|
}
|
||||||
|
66% {
|
||||||
|
transform: translate(-1%, 1%) rotate(-1deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar styling */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: rgba(15, 23, 42, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(100, 116, 139, 0.5);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(100, 116, 139, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile optimizations */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.glass-panel, .glass-card {
|
||||||
|
@apply rounded-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
48
apps/web/src/app/layout.tsx
Normal file
48
apps/web/src/app/layout.tsx
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
import type { Metadata, Viewport } from 'next'
|
||||||
|
import { Inter } from 'next/font/google'
|
||||||
|
import './globals.css'
|
||||||
|
import { Navigation } from '@/components/Navigation'
|
||||||
|
|
||||||
|
const inter = Inter({
|
||||||
|
subsets: ['latin', 'cyrillic'],
|
||||||
|
display: 'swap',
|
||||||
|
variable: '--font-inter',
|
||||||
|
})
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'DAARION - Місто Дарів',
|
||||||
|
description: 'Децентралізована платформа для мікро-спільнот з AI-агентами',
|
||||||
|
keywords: ['DAARION', 'DAO', 'AI', 'agents', 'community', 'decentralized'],
|
||||||
|
authors: [{ name: 'DAARION Team' }],
|
||||||
|
}
|
||||||
|
|
||||||
|
export const viewport: Viewport = {
|
||||||
|
width: 'device-width',
|
||||||
|
initialScale: 1,
|
||||||
|
maximumScale: 1,
|
||||||
|
themeColor: '#0c4a6e',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="uk" className={inter.variable}>
|
||||||
|
<body className={`${inter.className} antialiased`}>
|
||||||
|
{/* Ambient background effect */}
|
||||||
|
<div className="ambient-bg" />
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<Navigation />
|
||||||
|
|
||||||
|
{/* Main content */}
|
||||||
|
<main className="min-h-screen pt-16">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
38
apps/web/src/app/not-found.tsx
Normal file
38
apps/web/src/app/not-found.tsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { Home, ArrowLeft } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function NotFound() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center px-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-8xl font-bold text-gradient mb-4">404</h1>
|
||||||
|
<h2 className="text-2xl font-semibold text-white mb-4">
|
||||||
|
Сторінку не знайдено
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-400 mb-8 max-w-md mx-auto">
|
||||||
|
Вибачте, але сторінка, яку ви шукаєте, не існує або була переміщена.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl font-medium hover:from-cyan-400 hover:to-blue-500 transition-all"
|
||||||
|
>
|
||||||
|
<Home className="w-5 h-5" />
|
||||||
|
На головну
|
||||||
|
</Link>
|
||||||
|
<button
|
||||||
|
onClick={() => window.history.back()}
|
||||||
|
className="inline-flex items-center justify-center gap-2 px-6 py-3 glass-panel hover:bg-white/10 transition-all font-medium"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-5 h-5" />
|
||||||
|
Назад
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
163
apps/web/src/app/page.tsx
Normal file
163
apps/web/src/app/page.tsx
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
import Link from 'next/link'
|
||||||
|
import { ArrowRight, Building2, Bot, Users, Zap, Shield, Globe } from 'lucide-react'
|
||||||
|
import { StatusIndicator } from '@/components/StatusIndicator'
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: Building2,
|
||||||
|
title: 'Віртуальне Місто',
|
||||||
|
description: 'Кімнати для спілкування, колаборації та спільних проєктів',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Bot,
|
||||||
|
title: 'AI Агенти',
|
||||||
|
description: 'Персональні та командні агенти для автоматизації задач',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: 'MicroDAO',
|
||||||
|
description: 'Децентралізоване управління для малих спільнот',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Приватність',
|
||||||
|
description: 'Ваші дані залишаються під вашим контролем',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative px-4 pt-12 pb-20 sm:pt-20 sm:pb-32">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
{/* Status badge */}
|
||||||
|
<div className="flex justify-center mb-8">
|
||||||
|
<StatusIndicator />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main heading */}
|
||||||
|
<div className="text-center space-y-6 mb-12">
|
||||||
|
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight">
|
||||||
|
<span className="text-white">Ласкаво просимо до</span>
|
||||||
|
<br />
|
||||||
|
<span className="text-gradient">DAARION</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-lg sm:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Децентралізована платформа для мікро-спільнот,
|
||||||
|
де AI-агенти допомагають будувати майбутнє разом
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* CTA buttons */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
|
||||||
|
<Link
|
||||||
|
href="/city"
|
||||||
|
className="inline-flex items-center justify-center gap-2 px-8 py-4 text-lg font-semibold bg-gradient-to-r from-cyan-500 to-blue-600 rounded-2xl hover:from-cyan-400 hover:to-blue-500 transition-all duration-300 shadow-lg shadow-cyan-500/25 hover:shadow-cyan-500/40 hover:scale-105"
|
||||||
|
>
|
||||||
|
<Building2 className="w-5 h-5" />
|
||||||
|
Увійти в Місто
|
||||||
|
<ArrowRight className="w-5 h-5" />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/secondme"
|
||||||
|
className="inline-flex items-center justify-center gap-2 px-8 py-4 text-lg font-semibold glass-panel hover:bg-white/10 transition-all duration-300"
|
||||||
|
>
|
||||||
|
<Bot className="w-5 h-5" />
|
||||||
|
Мій Second Me
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Feature cards */}
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||||
|
{features.map((feature, index) => {
|
||||||
|
const Icon = feature.icon
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="glass-panel-hover p-6 group"
|
||||||
|
>
|
||||||
|
<div className="mb-4 inline-flex p-3 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-600/20 group-hover:from-cyan-500/30 group-hover:to-blue-600/30 transition-colors">
|
||||||
|
<Icon className="w-6 h-6 text-cyan-400" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-2">
|
||||||
|
{feature.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-slate-400 leading-relaxed">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Vision Section */}
|
||||||
|
<section className="px-4 py-16 sm:py-24">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="glass-panel p-8 sm:p-12 glow-accent">
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<Globe className="w-8 h-8 text-cyan-400" />
|
||||||
|
<h2 className="text-2xl sm:text-3xl font-bold text-white">
|
||||||
|
Місто Дарів
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4 text-slate-300 leading-relaxed">
|
||||||
|
<p>
|
||||||
|
<strong className="text-white">DAARION</strong> — це експериментальна платформа
|
||||||
|
для побудови децентралізованих мікро-спільнот нового покоління.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul className="space-y-3 mt-6">
|
||||||
|
<li className="flex items-start gap-3">
|
||||||
|
<Zap className="w-5 h-5 text-cyan-400 mt-0.5 flex-shrink-0" />
|
||||||
|
<span>
|
||||||
|
<strong className="text-white">AI-First:</strong> Кожен учасник має персонального
|
||||||
|
цифрового двійника (Second Me), який навчається та допомагає
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-3">
|
||||||
|
<Users className="w-5 h-5 text-cyan-400 mt-0.5 flex-shrink-0" />
|
||||||
|
<span>
|
||||||
|
<strong className="text-white">Малі спільноти:</strong> Оптимізовано для груп
|
||||||
|
5–50 людей з глибокою колаборацією
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-3">
|
||||||
|
<Shield className="w-5 h-5 text-cyan-400 mt-0.5 flex-shrink-0" />
|
||||||
|
<span>
|
||||||
|
<strong className="text-white">Децентралізація:</strong> MicroDAO для прозорого
|
||||||
|
управління та розподілу ресурсів
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 pt-6 border-t border-white/10">
|
||||||
|
<Link
|
||||||
|
href="/city"
|
||||||
|
className="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 font-medium transition-colors"
|
||||||
|
>
|
||||||
|
Дослідити кімнати міста
|
||||||
|
<ArrowRight className="w-4 h-4" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="px-4 py-8 border-t border-white/5">
|
||||||
|
<div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-slate-500">
|
||||||
|
<p>© 2024 DAARION. Місто Дарів.</p>
|
||||||
|
<p>MVP v1.0 — Phase 1-3</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
192
apps/web/src/app/secondme/page.tsx
Normal file
192
apps/web/src/app/secondme/page.tsx
Normal file
@@ -0,0 +1,192 @@
|
|||||||
|
import { User, Brain, MessageSquare, Target, Sparkles, Activity, Clock } from 'lucide-react'
|
||||||
|
import { api, SecondMeProfile } from '@/lib/api'
|
||||||
|
import { formatRelativeTime } from '@/lib/utils'
|
||||||
|
|
||||||
|
// Force dynamic rendering - don't prerender at build time
|
||||||
|
export const dynamic = 'force-dynamic'
|
||||||
|
|
||||||
|
async function getProfile(): Promise<SecondMeProfile | null> {
|
||||||
|
try {
|
||||||
|
return await api.getSecondMeProfile()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch SecondMe profile:', error)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function SecondMePage() {
|
||||||
|
const profile = await getProfile()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen px-4 py-8">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<div className="p-3 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-600/20">
|
||||||
|
<User className="w-8 h-8 text-violet-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-white">Second Me</h1>
|
||||||
|
<p className="text-slate-400">Ваш персональний цифровий двійник</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profile Card */}
|
||||||
|
<div className="glass-panel p-6 sm:p-8 mb-8 glow-accent">
|
||||||
|
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
|
||||||
|
{/* Avatar */}
|
||||||
|
<div className="relative">
|
||||||
|
<div className="w-24 h-24 sm:w-32 sm:h-32 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
|
||||||
|
<Sparkles className="w-12 h-12 sm:w-16 sm:h-16 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute -bottom-1 -right-1 w-8 h-8 rounded-full bg-emerald-500 border-4 border-slate-900 flex items-center justify-center">
|
||||||
|
<Activity className="w-4 h-4 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info */}
|
||||||
|
<div className="flex-1 text-center sm:text-left">
|
||||||
|
<h2 className="text-2xl font-bold text-white mb-2">
|
||||||
|
{profile?.user_id || 'Гість'}
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-400 mb-4">
|
||||||
|
Агент: <span className="text-violet-400 font-mono">{profile?.agent_id || 'N/A'}</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-4 justify-center sm:justify-start">
|
||||||
|
<StatBadge
|
||||||
|
icon={MessageSquare}
|
||||||
|
label="Взаємодій"
|
||||||
|
value={profile?.total_interactions ?? 0}
|
||||||
|
/>
|
||||||
|
<StatBadge
|
||||||
|
icon={Clock}
|
||||||
|
label="Остання"
|
||||||
|
value={profile?.last_interaction ? formatRelativeTime(profile.last_interaction) : 'Ніколи'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Feature Sections */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{/* Memory Section */}
|
||||||
|
<FeatureCard
|
||||||
|
icon={Brain}
|
||||||
|
title="Памʼять"
|
||||||
|
description="Ваш цифровий двійник запамʼятовує ваші вподобання, стиль спілкування та контекст розмов"
|
||||||
|
status="coming"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Tasks Section */}
|
||||||
|
<FeatureCard
|
||||||
|
icon={Target}
|
||||||
|
title="Задачі"
|
||||||
|
description="Second Me допомагає відстежувати ваші задачі та нагадує про важливі справи"
|
||||||
|
status="coming"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Agents Section */}
|
||||||
|
<FeatureCard
|
||||||
|
icon={Sparkles}
|
||||||
|
title="Агенти"
|
||||||
|
description="Координація з іншими AI-агентами системи для виконання складних завдань"
|
||||||
|
status="coming"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chat with Second Me */}
|
||||||
|
<div className="mt-8">
|
||||||
|
<div className="glass-panel p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||||
|
<MessageSquare className="w-5 h-5 text-violet-400" />
|
||||||
|
Поговорити з Second Me
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="bg-slate-800/30 rounded-xl p-6 text-center">
|
||||||
|
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-violet-500/20 flex items-center justify-center">
|
||||||
|
<MessageSquare className="w-8 h-8 text-violet-400" />
|
||||||
|
</div>
|
||||||
|
<h4 className="text-white font-medium mb-2">
|
||||||
|
Чат скоро буде доступний
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-slate-400 max-w-md mx-auto">
|
||||||
|
Функція спілкування з вашим цифровим двійником буде додана в наступному оновленні.
|
||||||
|
Second Me зможе відповідати на питання, допомагати з задачами та навчатися від вас.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input placeholder */}
|
||||||
|
<div className="mt-4 flex gap-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Напишіть повідомлення Second Me..."
|
||||||
|
disabled
|
||||||
|
className="flex-1 px-4 py-3 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
disabled
|
||||||
|
className="px-6 py-3 bg-violet-500/20 text-violet-400 rounded-xl font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
Надіслати
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatBadge({
|
||||||
|
icon: Icon,
|
||||||
|
label,
|
||||||
|
value
|
||||||
|
}: {
|
||||||
|
icon: React.ComponentType<{ className?: string }>
|
||||||
|
label: string
|
||||||
|
value: number | string
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2 px-4 py-2 bg-slate-800/50 rounded-xl">
|
||||||
|
<Icon className="w-4 h-4 text-violet-400" />
|
||||||
|
<span className="text-sm text-slate-400">{label}:</span>
|
||||||
|
<span className="text-sm font-medium text-white">{value}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function FeatureCard({
|
||||||
|
icon: Icon,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
status,
|
||||||
|
}: {
|
||||||
|
icon: React.ComponentType<{ className?: string }>
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
|
status: 'active' | 'coming'
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="glass-panel p-6 relative overflow-hidden">
|
||||||
|
{status === 'coming' && (
|
||||||
|
<div className="absolute top-3 right-3">
|
||||||
|
<span className="px-2 py-0.5 text-xs font-medium bg-amber-500/20 text-amber-400 rounded-full">
|
||||||
|
Скоро
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mb-4 inline-flex p-3 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-600/20">
|
||||||
|
<Icon className="w-6 h-6 text-violet-400" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
|
||||||
|
<p className="text-sm text-slate-400 leading-relaxed">{description}</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
124
apps/web/src/components/Navigation.tsx
Normal file
124
apps/web/src/components/Navigation.tsx
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { usePathname } from 'next/navigation'
|
||||||
|
import { Menu, X, Home, Building2, User, Sparkles } from 'lucide-react'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ href: '/', label: 'Головна', icon: Home },
|
||||||
|
{ href: '/city', label: 'Місто', icon: Building2 },
|
||||||
|
{ href: '/secondme', label: 'Second Me', icon: User },
|
||||||
|
]
|
||||||
|
|
||||||
|
export function Navigation() {
|
||||||
|
const [isOpen, setIsOpen] = useState(false)
|
||||||
|
const pathname = usePathname()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="fixed top-0 left-0 right-0 z-50">
|
||||||
|
{/* Glassmorphism navbar */}
|
||||||
|
<div className="glass-panel mx-4 mt-4 px-4 py-3 sm:px-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
{/* Logo */}
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="flex items-center gap-2 group"
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<Sparkles className="w-8 h-8 text-cyan-400 group-hover:text-cyan-300 transition-colors" />
|
||||||
|
<div className="absolute inset-0 blur-lg bg-cyan-400/30 group-hover:bg-cyan-300/40 transition-colors" />
|
||||||
|
</div>
|
||||||
|
<span className="text-xl font-bold text-gradient hidden sm:block">
|
||||||
|
DAARION
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Desktop navigation */}
|
||||||
|
<div className="hidden md:flex items-center gap-1">
|
||||||
|
{navItems.map((item) => {
|
||||||
|
const Icon = item.icon
|
||||||
|
const isActive = pathname === item.href ||
|
||||||
|
(item.href !== '/' && pathname.startsWith(item.href))
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-2 px-4 py-2 rounded-xl transition-all duration-200',
|
||||||
|
isActive
|
||||||
|
? 'bg-white/10 text-cyan-400'
|
||||||
|
: 'text-slate-300 hover:text-white hover:bg-white/5'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className="w-4 h-4" />
|
||||||
|
<span className="text-sm font-medium">{item.label}</span>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Auth buttons (desktop) */}
|
||||||
|
<div className="hidden md:flex items-center gap-3">
|
||||||
|
<button className="px-4 py-2 text-sm text-slate-300 hover:text-white transition-colors">
|
||||||
|
Увійти
|
||||||
|
</button>
|
||||||
|
<button className="px-4 py-2 text-sm font-medium bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl hover:from-cyan-400 hover:to-blue-500 transition-all duration-200 shadow-lg shadow-cyan-500/20">
|
||||||
|
Приєднатися
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile menu button */}
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="md:hidden p-2 text-slate-300 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
{isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile navigation */}
|
||||||
|
{isOpen && (
|
||||||
|
<div className="md:hidden mt-4 pt-4 border-t border-white/10">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{navItems.map((item) => {
|
||||||
|
const Icon = item.icon
|
||||||
|
const isActive = pathname === item.href ||
|
||||||
|
(item.href !== '/' && pathname.startsWith(item.href))
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.href}
|
||||||
|
href={item.href}
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200',
|
||||||
|
isActive
|
||||||
|
? 'bg-white/10 text-cyan-400'
|
||||||
|
: 'text-slate-300 hover:text-white hover:bg-white/5'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
<span className="font-medium">{item.label}</span>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
<div className="flex gap-3 mt-4 pt-4 border-t border-white/10">
|
||||||
|
<button className="flex-1 py-3 text-sm text-slate-300 hover:text-white transition-colors rounded-xl hover:bg-white/5">
|
||||||
|
Увійти
|
||||||
|
</button>
|
||||||
|
<button className="flex-1 py-3 text-sm font-medium bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl">
|
||||||
|
Приєднатися
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
67
apps/web/src/components/Skeleton.tsx
Normal file
67
apps/web/src/components/Skeleton.tsx
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
interface SkeletonProps {
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Skeleton({ className }: SkeletonProps) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'animate-pulse rounded-lg bg-slate-700/50',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CardSkeleton() {
|
||||||
|
return (
|
||||||
|
<div className="glass-panel p-6 space-y-4">
|
||||||
|
<Skeleton className="h-6 w-3/4" />
|
||||||
|
<Skeleton className="h-4 w-full" />
|
||||||
|
<Skeleton className="h-4 w-2/3" />
|
||||||
|
<div className="flex gap-2 pt-2">
|
||||||
|
<Skeleton className="h-6 w-16 rounded-full" />
|
||||||
|
<Skeleton className="h-6 w-20 rounded-full" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function RoomCardSkeleton() {
|
||||||
|
return (
|
||||||
|
<div className="glass-panel p-5 space-y-3">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<Skeleton className="h-6 w-32" />
|
||||||
|
<Skeleton className="h-5 w-16 rounded-full" />
|
||||||
|
</div>
|
||||||
|
<Skeleton className="h-4 w-full" />
|
||||||
|
<Skeleton className="h-4 w-3/4" />
|
||||||
|
<div className="flex items-center gap-4 pt-2">
|
||||||
|
<Skeleton className="h-4 w-24" />
|
||||||
|
<Skeleton className="h-4 w-20" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProfileSkeleton() {
|
||||||
|
return (
|
||||||
|
<div className="glass-panel p-8 space-y-6">
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<Skeleton className="h-24 w-24 rounded-full" />
|
||||||
|
<div className="space-y-3 flex-1">
|
||||||
|
<Skeleton className="h-8 w-48" />
|
||||||
|
<Skeleton className="h-4 w-32" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<Skeleton className="h-20" />
|
||||||
|
<Skeleton className="h-20" />
|
||||||
|
<Skeleton className="h-20" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
55
apps/web/src/components/StatusIndicator.tsx
Normal file
55
apps/web/src/components/StatusIndicator.tsx
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { CheckCircle2, XCircle, Loader2 } from 'lucide-react'
|
||||||
|
import { api } from '@/lib/api'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
export function StatusIndicator() {
|
||||||
|
const [status, setStatus] = useState<'loading' | 'online' | 'offline'>('loading')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkStatus = async () => {
|
||||||
|
try {
|
||||||
|
const isHealthy = await api.checkHealth()
|
||||||
|
setStatus(isHealthy ? 'online' : 'offline')
|
||||||
|
} catch {
|
||||||
|
setStatus('offline')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkStatus()
|
||||||
|
const interval = setInterval(checkStatus, 30000) // Check every 30s
|
||||||
|
|
||||||
|
return () => clearInterval(interval)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn(
|
||||||
|
'inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium',
|
||||||
|
status === 'loading' && 'bg-slate-700/50 text-slate-300',
|
||||||
|
status === 'online' && 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30',
|
||||||
|
status === 'offline' && 'bg-red-500/20 text-red-400 border border-red-500/30',
|
||||||
|
)}>
|
||||||
|
{status === 'loading' && (
|
||||||
|
<>
|
||||||
|
<Loader2 className="w-4 h-4 animate-spin" />
|
||||||
|
<span>Перевірка...</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{status === 'online' && (
|
||||||
|
<>
|
||||||
|
<CheckCircle2 className="w-4 h-4" />
|
||||||
|
<span>API Online</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{status === 'offline' && (
|
||||||
|
<>
|
||||||
|
<XCircle className="w-4 h-4" />
|
||||||
|
<span>API Offline</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
89
apps/web/src/lib/api.ts
Normal file
89
apps/web/src/lib/api.ts
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
/**
|
||||||
|
* DAARION API Client
|
||||||
|
* Handles all API calls to the backend
|
||||||
|
*/
|
||||||
|
|
||||||
|
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL || ''
|
||||||
|
|
||||||
|
export interface CityRoom {
|
||||||
|
id: string
|
||||||
|
slug: string
|
||||||
|
name: string
|
||||||
|
description: string | null
|
||||||
|
is_default: boolean
|
||||||
|
created_at: string
|
||||||
|
created_by: string | null
|
||||||
|
members_online: number
|
||||||
|
last_event: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SecondMeProfile {
|
||||||
|
user_id: string
|
||||||
|
agent_id: string
|
||||||
|
total_interactions: number
|
||||||
|
last_interaction: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ApiError {
|
||||||
|
detail: string
|
||||||
|
}
|
||||||
|
|
||||||
|
class ApiClient {
|
||||||
|
private baseUrl: string
|
||||||
|
|
||||||
|
constructor(baseUrl: string = '') {
|
||||||
|
this.baseUrl = baseUrl
|
||||||
|
}
|
||||||
|
|
||||||
|
private async fetch<T>(endpoint: string, options?: RequestInit): Promise<T> {
|
||||||
|
const url = `${this.baseUrl}${endpoint}`
|
||||||
|
|
||||||
|
const response = await fetch(url, {
|
||||||
|
...options,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...options?.headers,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error: ApiError = await response.json().catch(() => ({ detail: 'Unknown error' }))
|
||||||
|
throw new Error(error.detail || `HTTP ${response.status}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Health check
|
||||||
|
async checkHealth(): Promise<boolean> {
|
||||||
|
try {
|
||||||
|
const rooms = await this.getCityRooms()
|
||||||
|
return rooms.length > 0
|
||||||
|
} catch {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// City Rooms
|
||||||
|
async getCityRooms(): Promise<CityRoom[]> {
|
||||||
|
return this.fetch<CityRoom[]>('/api/city/rooms')
|
||||||
|
}
|
||||||
|
|
||||||
|
async getCityRoom(slug: string): Promise<CityRoom | null> {
|
||||||
|
const rooms = await this.getCityRooms()
|
||||||
|
return rooms.find(r => r.slug === slug) || null
|
||||||
|
}
|
||||||
|
|
||||||
|
// Second Me
|
||||||
|
async getSecondMeProfile(): Promise<SecondMeProfile> {
|
||||||
|
return this.fetch<SecondMeProfile>('/api/secondme/profile')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Agents
|
||||||
|
async getAgents(): Promise<unknown[]> {
|
||||||
|
return this.fetch<unknown[]>('/api/agents/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const api = new ApiClient(API_BASE)
|
||||||
|
|
||||||
34
apps/web/src/lib/utils.ts
Normal file
34
apps/web/src/lib/utils.ts
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import { clsx, type ClassValue } from 'clsx'
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDate(date: string | null): string {
|
||||||
|
if (!date) return 'Невідомо'
|
||||||
|
return new Date(date).toLocaleDateString('uk-UA', {
|
||||||
|
day: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
year: 'numeric',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatRelativeTime(date: string | null): string {
|
||||||
|
if (!date) return 'Невідомо'
|
||||||
|
|
||||||
|
const now = new Date()
|
||||||
|
const then = new Date(date)
|
||||||
|
const diffMs = now.getTime() - then.getTime()
|
||||||
|
const diffMins = Math.floor(diffMs / 60000)
|
||||||
|
const diffHours = Math.floor(diffMs / 3600000)
|
||||||
|
const diffDays = Math.floor(diffMs / 86400000)
|
||||||
|
|
||||||
|
if (diffMins < 1) return 'Щойно'
|
||||||
|
if (diffMins < 60) return `${diffMins} хв тому`
|
||||||
|
if (diffHours < 24) return `${diffHours} год тому`
|
||||||
|
if (diffDays < 7) return `${diffDays} дн тому`
|
||||||
|
|
||||||
|
return formatDate(date)
|
||||||
|
}
|
||||||
|
|
||||||
56
apps/web/tailwind.config.ts
Normal file
56
apps/web/tailwind.config.ts
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import type { Config } from 'tailwindcss'
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
content: [
|
||||||
|
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
// DAARION brand colors
|
||||||
|
daarion: {
|
||||||
|
50: '#f0f9ff',
|
||||||
|
100: '#e0f2fe',
|
||||||
|
200: '#bae6fd',
|
||||||
|
300: '#7dd3fc',
|
||||||
|
400: '#38bdf8',
|
||||||
|
500: '#0ea5e9',
|
||||||
|
600: '#0284c7',
|
||||||
|
700: '#0369a1',
|
||||||
|
800: '#075985',
|
||||||
|
900: '#0c4a6e',
|
||||||
|
950: '#082f49',
|
||||||
|
},
|
||||||
|
// Glassmorphism accents
|
||||||
|
glass: {
|
||||||
|
white: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
border: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||||
|
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||||
|
'daarion-gradient': 'linear-gradient(135deg, #0c4a6e 0%, #082f49 50%, #0f172a 100%)',
|
||||||
|
},
|
||||||
|
backdropBlur: {
|
||||||
|
xs: '2px',
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||||
|
'glow': 'glow 2s ease-in-out infinite alternate',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
glow: {
|
||||||
|
'0%': { boxShadow: '0 0 5px rgba(14, 165, 233, 0.3)' },
|
||||||
|
'100%': { boxShadow: '0 0 20px rgba(14, 165, 233, 0.6)' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
export default config
|
||||||
|
|
||||||
28
apps/web/tsconfig.json
Normal file
28
apps/web/tsconfig.json
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
"target": "ES2017"
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
|
|
||||||
30
docker-compose.web.yml
Normal file
30
docker-compose.web.yml
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# DAARION Web Frontend Docker Compose
|
||||||
|
# Deploy alongside MVP services
|
||||||
|
|
||||||
|
version: '3.8'
|
||||||
|
|
||||||
|
services:
|
||||||
|
web:
|
||||||
|
build:
|
||||||
|
context: ./apps/web
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
container_name: daarion-web
|
||||||
|
restart: unless-stopped
|
||||||
|
ports:
|
||||||
|
- "3000:3000"
|
||||||
|
environment:
|
||||||
|
- NODE_ENV=production
|
||||||
|
- NEXT_PUBLIC_API_BASE_URL=
|
||||||
|
networks:
|
||||||
|
- dagi-network
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "wget", "-q", "--spider", "http://localhost:3000"]
|
||||||
|
interval: 30s
|
||||||
|
timeout: 10s
|
||||||
|
retries: 3
|
||||||
|
start_period: 10s
|
||||||
|
|
||||||
|
networks:
|
||||||
|
dagi-network:
|
||||||
|
external: true
|
||||||
|
|
||||||
16
package.json
16
package.json
@@ -7,17 +7,23 @@
|
|||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"update-repos": "python3 scripts/update_repos_info.py",
|
||||||
|
"dev:web": "cd apps/web && npm run dev",
|
||||||
|
"build:web": "cd apps/web && npm run build",
|
||||||
|
"start:web": "cd apps/web && npm run start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@tanstack/react-query": "^5.17.0",
|
||||||
|
"lucide-react": "^0.294.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.20.0",
|
"react-router-dom": "^6.20.0"
|
||||||
"lucide-react": "^0.294.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "^18.2.43",
|
"@types/react": "^18.2.43",
|
||||||
"@types/react-dom": "^18.2.17",
|
"@types/react-dom": "^18.2.17",
|
||||||
|
"@types/ws": "^8.18.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.14.0",
|
"@typescript-eslint/eslint-plugin": "^6.14.0",
|
||||||
"@typescript-eslint/parser": "^6.14.0",
|
"@typescript-eslint/parser": "^6.14.0",
|
||||||
"@vitejs/plugin-react": "^4.2.1",
|
"@vitejs/plugin-react": "^4.2.1",
|
||||||
@@ -28,7 +34,7 @@
|
|||||||
"postcss": "^8.4.32",
|
"postcss": "^8.4.32",
|
||||||
"tailwindcss": "^3.3.6",
|
"tailwindcss": "^3.3.6",
|
||||||
"typescript": "^5.2.2",
|
"typescript": "^5.2.2",
|
||||||
"vite": "^5.0.8"
|
"vite": "^5.0.8",
|
||||||
|
"ws": "^8.18.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user