feat: add MicroDAO branding and Agent avatar upload UI
This commit is contained in:
Apple
176
docs/tasks/TASK_PHASE_LOGOS_BACKGROUNDS_UI_v1.md
Normal file
176
docs/tasks/TASK_PHASE_LOGOS_BACKGROUNDS_UI_v1.md
Normal file
@@ -0,0 +1,176 @@
|
||||
# TASK_PHASE_LOGOS_BACKGROUNDS_UI_v1
|
||||
|
||||
Проєкт: DAARION.city — Логотипи та фони MicroDAO / Agents
|
||||
Фаза: UI для завантаження та відображення брендингу
|
||||
Мета: Додати можливість завантажувати та редагувати логотипи MicroDAO та аватарки агентів у новому фронтенді (`apps/web`).
|
||||
|
||||
---
|
||||
|
||||
## 0. Поточний стан
|
||||
|
||||
- Поля `logo_url`, `banner_url` існують у БД для MicroDAO.
|
||||
- Поле `avatar_url` існує для агентів (в `dais.vis.avatar_url` або напряму).
|
||||
- Старий фронтенд (`src/features/microdao/MicrodaoConsolePage.tsx`) має UI для завантаження.
|
||||
- Новий фронтенд (`apps/web`) **не має** UI для завантаження — тільки відображення.
|
||||
- API endpoint `PATCH /microdao/{slug}/branding` існує.
|
||||
- API endpoint для завантаження файлів (`POST /assets/upload`) існує.
|
||||
|
||||
---
|
||||
|
||||
## 1. Scope
|
||||
|
||||
### Включено
|
||||
|
||||
1. Компонент `MicrodaoBrandingCard` для редагування логотипа та банера MicroDAO.
|
||||
2. Компонент `AgentAvatarUpload` для редагування аватарки агента.
|
||||
3. Інтеграція в сторінки `/microdao/[slug]` та `/agents/[agentId]`.
|
||||
4. API routes для проксі завантаження файлів.
|
||||
5. Відображення placeholder при відсутності зображень.
|
||||
|
||||
### Виключено
|
||||
|
||||
- Складні редактори зображень (crop, resize).
|
||||
- Генерація AI-аватарок (окремий таск).
|
||||
|
||||
---
|
||||
|
||||
## 2. Backend API (існуючі endpoints)
|
||||
|
||||
### MicroDAO Branding
|
||||
```
|
||||
PATCH /city/microdao/{slug}/branding
|
||||
Body: { "logo_url": "...", "banner_url": "..." }
|
||||
```
|
||||
|
||||
### Asset Upload
|
||||
```
|
||||
POST /city/assets/upload
|
||||
Form: file, type (microdao_logo, microdao_banner, agent_avatar)
|
||||
Response: { original_url, processed_url, thumb_url }
|
||||
```
|
||||
|
||||
### Agent Avatar Update
|
||||
```
|
||||
PATCH /city/agents/{agent_id}/dais
|
||||
Body: { "vis": { "avatar_url": "..." } }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Frontend Components
|
||||
|
||||
### 3.1. MicrodaoBrandingCard
|
||||
|
||||
Файл: `apps/web/src/components/microdao/MicrodaoBrandingCard.tsx`
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
import { useState, useRef } from 'react';
|
||||
import { Upload, Image, X } from 'lucide-react';
|
||||
|
||||
interface MicrodaoBrandingCardProps {
|
||||
slug: string;
|
||||
logoUrl?: string | null;
|
||||
bannerUrl?: string | null;
|
||||
canEdit?: boolean;
|
||||
onUpdated?: () => void;
|
||||
}
|
||||
|
||||
export function MicrodaoBrandingCard({
|
||||
slug,
|
||||
logoUrl,
|
||||
bannerUrl,
|
||||
canEdit = false,
|
||||
onUpdated
|
||||
}: MicrodaoBrandingCardProps) {
|
||||
// ... implementation
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2. AgentAvatarUpload
|
||||
|
||||
Файл: `apps/web/src/components/agent-dashboard/AgentAvatarUpload.tsx`
|
||||
|
||||
```tsx
|
||||
'use client';
|
||||
|
||||
interface AgentAvatarUploadProps {
|
||||
agentId: string;
|
||||
currentAvatarUrl?: string | null;
|
||||
canEdit?: boolean;
|
||||
onUpdated?: () => void;
|
||||
}
|
||||
|
||||
export function AgentAvatarUpload({
|
||||
agentId,
|
||||
currentAvatarUrl,
|
||||
canEdit = false,
|
||||
onUpdated
|
||||
}: AgentAvatarUploadProps) {
|
||||
// ... implementation
|
||||
}
|
||||
```
|
||||
|
||||
### 3.3. API Route for Upload
|
||||
|
||||
Файл: `apps/web/src/app/api/assets/upload/route.ts`
|
||||
|
||||
```ts
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
const CITY_SERVICE_URL = process.env.INTERNAL_API_URL || 'http://daarion-city-service:7001';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
const formData = await request.formData();
|
||||
|
||||
const upstream = await fetch(`${CITY_SERVICE_URL}/city/assets/upload`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const data = await upstream.json();
|
||||
return NextResponse.json(data, { status: upstream.status });
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Integration Points
|
||||
|
||||
### 4.1. MicroDAO Detail Page
|
||||
|
||||
В `apps/web/src/app/microdao/[slug]/page.tsx`:
|
||||
- Додати `MicrodaoBrandingCard` у секцію Hero або окрему вкладку Settings.
|
||||
- Показувати тільки якщо `canManage === true`.
|
||||
|
||||
### 4.2. Agent Console Page
|
||||
|
||||
В `apps/web/src/app/agents/[agentId]/page.tsx`:
|
||||
- Додати `AgentAvatarUpload` у вкладку Identity.
|
||||
- Показувати тільки якщо агент належить поточному користувачу.
|
||||
|
||||
---
|
||||
|
||||
## 5. Acceptance Criteria
|
||||
|
||||
1. На сторінці MicroDAO (для orchestrator) є можливість:
|
||||
- Завантажити/змінити логотип
|
||||
- Завантажити/змінити банер
|
||||
- Видалити зображення
|
||||
2. На сторінці агента (для власника) є можливість:
|
||||
- Завантажити/змінити аватарку
|
||||
- Видалити аватарку
|
||||
3. Зображення відображаються одразу після завантаження.
|
||||
4. При відсутності зображення показується placeholder.
|
||||
5. Помилки завантаження показуються користувачу.
|
||||
|
||||
---
|
||||
|
||||
## 6. Deliverables
|
||||
|
||||
- `apps/web/src/components/microdao/MicrodaoBrandingCard.tsx`
|
||||
- `apps/web/src/components/agent-dashboard/AgentAvatarUpload.tsx`
|
||||
- `apps/web/src/app/api/assets/upload/route.ts`
|
||||
- Оновлені сторінки `/microdao/[slug]` та `/agents/[agentId]`
|
||||
|
||||
Reference in New Issue
Block a user