feat: Next.js frontend — kanban board, sidebar, dark theme

- Kanban with drag-and-drop (5 columns) - Project sidebar navigation - API client (projects, tasks, agents, labels) - Tailwind CSS dark theme - Docker support, SSR with internal API URL - Port 3100 (3000 occupied by Gitea)
2026-02-15 18:52:49 +01:00 · 2026-02-15 18:52:49 +01:00 · 1d998dca55
commit 1d998dca55
parent a04c9d7bb3
15 changed files with 2122 additions and 38 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+node_modules/
+.next/
+out/
--- a/12
+++ b/12
@ -0,0 +1,12 @@
+FROM node:22-alpine
+
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm install
+
+COPY . .
+
+EXPOSE 3000
+
+CMD ["npm", "run", "dev"]
--- a/README.md
+++ b/README.md
@ -1,38 +0,0 @@
-# Team Board — Frontend
-
-Web UI для Team Board. Next.js + React.
-
-## Стек
-
- Next.js 14
- React
- TypeScript
- Tailwind CSS
- Authentik OAuth
-
-## Запуск
-
-```bash
-npm install
-npm run dev
-```
-
-## Структура
-
-```
-frontend/
-├── src/
-│   ├── app/
-│   ├── components/
-│   └── lib/
-├── public/
-└── package.json
-```
-
-## Переменные окружения
-
-```env
-NEXT_PUBLIC_API_URL=http://localhost:8000
-NEXTAUTH_URL=http://localhost:3000
-NEXTAUTH_SECRET=...
-```
--- a/next.config.ts
+++ b/next.config.ts
@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,25 @@
+{
+  "name": "team-board-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^15.3",
+    "react": "^19.1",
+    "react-dom": "^19.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "postcss": "^8",
+    "tailwindcss": "^4.1",
+    "typescript": "^5"
+  }
+}
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+export default config;
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -0,0 +1,16 @@
+@import "tailwindcss";
+
+:root {
+  --bg: #0a0a0a;
+  --fg: #ededed;
+  --accent: #3b82f6;
+  --border: #262626;
+  --card: #141414;
+  --muted: #737373;
+}
+
+body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: system-ui, -apple-system, sans-serif;
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Team Board",
+  description: "AI Agent Collaboration Platform",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="ru">
+      <body>{children}</body>
+    </html>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -0,0 +1,42 @@
+import Link from "next/link";
+import { getProjects } from "@/lib/api";
+
+export const dynamic = "force-dynamic";
+
+export default async function Home() {
+  let projects;
+  try {
+    projects = await getProjects();
+  } catch {
+    projects = [];
+  }
+
+  return (
+    <div className="flex h-screen">
+      <main className="flex-1 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-2">Team Board</h1>
+          <p className="text-[var(--muted)] mb-8">AI Agent Collaboration Platform</p>
+
+          {projects.length > 0 ? (
+            <div className="flex flex-col gap-2">
+              {projects.map((p) => (
+                <Link
+                  key={p.id}
+                  href={`/projects/${p.slug}`}
+                  className="px-6 py-3 bg-[var(--card)] border border-[var(--border)] rounded-lg
+                             hover:border-[var(--accent)] transition-colors"
+                >
+                  <div className="font-semibold">{p.name}</div>
+                  {p.description && <div className="text-sm text-[var(--muted)]">{p.description}</div>}
+                </Link>
+              ))}
+            </div>
+          ) : (
+            <p className="text-[var(--muted)]">Нет проектов. Создайте первый через API.</p>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/src/app/projects/[slug]/page.tsx
+++ b/src/app/projects/[slug]/page.tsx
@ -0,0 +1,45 @@
+import { getProjects, getTasks } from "@/lib/api";
+import { notFound } from "next/navigation";
+import Sidebar from "@/components/Sidebar";
+import KanbanBoard from "@/components/KanbanBoard";
+
+export const dynamic = "force-dynamic";
+
+interface Props {
+  params: Promise<{ slug: string }>;
+}
+
+export default async function ProjectPage({ params }: Props) {
+  const { slug } = await params;
+  let projects;
+  try {
+    projects = await getProjects();
+  } catch {
+    projects = [];
+  }
+
+  const project = projects.find((p) => p.slug === slug);
+  if (!project) return notFound();
+
+  return (
+    <div className="flex h-screen">
+      <Sidebar projects={projects} activeSlug={slug} />
+      <main className="flex-1 flex flex-col overflow-hidden">
+        {/* Header */}
+        <header className="border-b border-[var(--border)] px-6 py-4 flex items-center gap-4">
+          <div>
+            <h1 className="text-xl font-bold">{project.name}</h1>
+            {project.description && (
+              <p className="text-sm text-[var(--muted)]">{project.description}</p>
+            )}
+          </div>
+        </header>
+
+        {/* Kanban */}
+        <div className="flex-1 overflow-hidden">
+          <KanbanBoard projectId={project.id} />
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/src/components/KanbanBoard.tsx
+++ b/src/components/KanbanBoard.tsx
@ -0,0 +1,156 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Task, getTasks, updateTask, createTask } from "@/lib/api";
+
+const COLUMNS = [
+  { key: "draft", label: "Backlog", color: "#737373" },
+  { key: "ready", label: "TODO", color: "#3b82f6" },
+  { key: "in_progress", label: "In Progress", color: "#f59e0b" },
+  { key: "review", label: "Review", color: "#a855f7" },
+  { key: "completed", label: "Done", color: "#22c55e" },
+];
+
+const PRIORITY_COLORS: Record<string, string> = {
+  critical: "#ef4444",
+  high: "#f59e0b",
+  medium: "#3b82f6",
+  low: "#737373",
+};
+
+interface Props {
+  projectId: string;
+}
+
+export default function KanbanBoard({ projectId }: Props) {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [newTaskTitle, setNewTaskTitle] = useState("");
+  const [addingTo, setAddingTo] = useState<string | null>(null);
+  const [draggedTask, setDraggedTask] = useState<string | null>(null);
+
+  const loadTasks = async () => {
+    try {
+      const data = await getTasks(projectId);
+      setTasks(data);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadTasks();
+  }, [projectId]);
+
+  const handleDrop = async (status: string) => {
+    if (!draggedTask) return;
+    const task = tasks.find((t) => t.id === draggedTask);
+    if (!task || task.status === status) return;
+
+    // Optimistic update
+    setTasks((prev) => prev.map((t) => (t.id === draggedTask ? { ...t, status } : t)));
+    setDraggedTask(null);
+
+    try {
+      await updateTask(draggedTask, { status });
+    } catch {
+      loadTasks(); // revert
+    }
+  };
+
+  const handleAddTask = async (status: string) => {
+    if (!newTaskTitle.trim()) return;
+    try {
+      const task = await createTask({
+        project_id: projectId,
+        title: newTaskTitle.trim(),
+        status,
+      });
+      setTasks((prev) => [...prev, task]);
+      setNewTaskTitle("");
+      setAddingTo(null);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  if (loading) {
+    return <div className="flex items-center justify-center h-64 text-[var(--muted)]">Загрузка...</div>;
+  }
+
+  return (
+    <div className="flex gap-4 overflow-x-auto p-4 h-full">
+      {COLUMNS.map((col) => {
+        const colTasks = tasks.filter((t) => t.status === col.key);
+        return (
+          <div
+            key={col.key}
+            className="flex flex-col min-w-[280px] w-[280px] shrink-0"
+            onDragOver={(e) => e.preventDefault()}
+            onDrop={() => handleDrop(col.key)}
+          >
+            {/* Column header */}
+            <div className="flex items-center gap-2 mb-3 px-1">
+              <div className="w-3 h-3 rounded-full" style={{ background: col.color }} />
+              <span className="font-semibold text-sm">{col.label}</span>
+              <span className="text-xs text-[var(--muted)] ml-auto">{colTasks.length}</span>
+            </div>
+
+            {/* Cards */}
+            <div className="flex flex-col gap-2 flex-1 min-h-[100px] rounded-lg bg-[var(--bg)] p-2">
+              {colTasks.map((task) => (
+                <div
+                  key={task.id}
+                  draggable
+                  onDragStart={() => setDraggedTask(task.id)}
+                  className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-3 cursor-grab
+                             hover:border-[var(--accent)] transition-colors active:cursor-grabbing"
+                >
+                  <div className="flex items-start gap-2">
+                    <div
+                      className="w-2 h-2 rounded-full mt-1.5 shrink-0"
+                      style={{ background: PRIORITY_COLORS[task.priority] || "#737373" }}
+                      title={task.priority}
+                    />
+                    <span className="text-sm">{task.title}</span>
+                  </div>
+                  {task.description && (
+                    <p className="text-xs text-[var(--muted)] mt-1 ml-4 line-clamp-2">{task.description}</p>
+                  )}
+                </div>
+              ))}
+
+              {/* Add task */}
+              {addingTo === col.key ? (
+                <div className="mt-1">
+                  <input
+                    autoFocus
+                    className="w-full bg-[var(--card)] border border-[var(--border)] rounded px-2 py-1.5
+                               text-sm outline-none focus:border-[var(--accent)]"
+                    placeholder="Название задачи..."
+                    value={newTaskTitle}
+                    onChange={(e) => setNewTaskTitle(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") handleAddTask(col.key);
+                      if (e.key === "Escape") setAddingTo(null);
+                    }}
+                    onBlur={() => {
+                      if (!newTaskTitle.trim()) setAddingTo(null);
+                    }}
+                  />
+                </div>
+              ) : (
+                <button
+                  className="text-xs text-[var(--muted)] hover:text-[var(--fg)] mt-1 text-left px-2 py-1"
+                  onClick={() => setAddingTo(col.key)}
+                >
+                  + Добавить
+                </button>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+import { Project } from "@/lib/api";
+
+interface Props {
+  projects: Project[];
+  activeSlug?: string;
+}
+
+export default function Sidebar({ projects, activeSlug }: Props) {
+  return (
+    <aside className="w-60 shrink-0 border-r border-[var(--border)] h-screen flex flex-col bg-[var(--card)]">
+      {/* Logo */}
+      <div className="p-4 border-b border-[var(--border)]">
+        <Link href="/" className="text-lg font-bold tracking-tight">
+          Team Board
+        </Link>
+      </div>
+
+      {/* Projects */}
+      <nav className="flex-1 overflow-y-auto p-2">
+        <div className="text-xs uppercase text-[var(--muted)] px-2 py-1 mb-1">Проекты</div>
+        {projects.map((p) => (
+          <Link
+            key={p.id}
+            href={`/projects/${p.slug}`}
+            className={`block px-3 py-2 rounded text-sm transition-colors ${
+              activeSlug === p.slug
+                ? "bg-[var(--accent)]/10 text-[var(--accent)]"
+                : "hover:bg-white/5 text-[var(--fg)]"
+            }`}
+          >
+            {p.name}
+          </Link>
+        ))}
+      </nav>
+
+      {/* Footer */}
+      <div className="p-3 border-t border-[var(--border)] text-xs text-[var(--muted)]">
+        Team Board v0.1
+      </div>
+    </aside>
+  );
+}
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@ -0,0 +1,77 @@
+// SSR runs inside Docker → use internal service name; browser uses public URL
+const API_BASE =
+  typeof window === "undefined"
+    ? (process.env.API_INTERNAL_URL || "http://tracker:8100")
+    : (process.env.NEXT_PUBLIC_API_URL || "http://localhost:8100");
+
+async function request<T>(path: string, opts?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    headers: { "Content-Type": "application/json", ...opts?.headers },
+    ...opts,
+  });
+  if (!res.ok) throw new Error(`API ${res.status}: ${await res.text()}`);
+  if (res.status === 204) return undefined as T;
+  return res.json();
+}
+
+// Types
+export interface Project {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  git_repo: string | null;
+}
+
+export interface Task {
+  id: string;
+  project_id: string;
+  parent_id: string | null;
+  title: string;
+  description: string | null;
+  status: string;
+  priority: string;
+  requires_pr: boolean;
+  pr_url: string | null;
+  assigned_agent_id: string | null;
+  position: number;
+}
+
+export interface Agent {
+  id: string;
+  name: string;
+  slug: string;
+  adapter_id: string;
+  subscription_mode: string;
+  max_concurrent: number;
+  status: string;
+}
+
+export interface Label {
+  id: string;
+  name: string;
+  color: string | null;
+}
+
+// Projects
+export const getProjects = () => request<Project[]>("/api/v1/projects/");
+export const createProject = (data: Partial<Project>) =>
+  request<Project>("/api/v1/projects/", { method: "POST", body: JSON.stringify(data) });
+
+// Tasks
+export const getTasks = (projectId?: string) => {
+  const q = projectId ? `?project_id=${projectId}` : "";
+  return request<Task[]>(`/api/v1/tasks/${q}`);
+};
+export const createTask = (data: Partial<Task>) =>
+  request<Task>("/api/v1/tasks/", { method: "POST", body: JSON.stringify(data) });
+export const updateTask = (id: string, data: Partial<Task>) =>
+  request<Task>(`/api/v1/tasks/${id}`, { method: "PATCH", body: JSON.stringify(data) });
+export const deleteTask = (id: string) =>
+  request<void>(`/api/v1/tasks/${id}`, { method: "DELETE" });
+
+// Agents
+export const getAgents = () => request<Agent[]>("/api/v1/agents/");
+
+// Labels
+export const getLabels = () => request<Label[]>("/api/v1/labels/");
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "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/*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}