feat: create project from UI (modal form)

src/app/(protected)/page.tsx

@@ -2,12 +2,16 @@
 
 import { useEffect, useState } from "react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { getProjects, Project } from "@/lib/api";
 import { logout } from "@/lib/auth-client";
+import CreateProjectModal from "@/components/CreateProjectModal";
 
 export default function Home() {
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     getProjects()
@@ -19,38 +23,60 @@ export default function Home() {
   return (
     <div className="flex h-screen">
       <main className="flex-1 flex items-center justify-center">
-        <div className="text-center">
+        <div className="text-center max-w-md w-full px-4">
           <h1 className="text-4xl font-bold mb-2">Team Board</h1>
           <p className="text-[var(--muted)] mb-8">AI Agent Collaboration Platform</p>
 
           {loading ? (
             <p className="text-[var(--muted)]">Загрузка...</p>
-          ) : projects.length > 0 ? (
-            <div className="flex flex-col gap-2">
+          ) : (
+            <>
+              {projects.length > 0 && (
+                <div className="flex flex-col gap-2 mb-6">
                   {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"
+                                 hover:border-[var(--accent)] transition-colors text-left"
                     >
                       <div className="font-semibold">{p.name}</div>
-                  {p.description && <div className="text-sm text-[var(--muted)]">{p.description}</div>}
+                      {p.description && (
+                        <div className="text-sm text-[var(--muted)]">{p.description}</div>
+                      )}
                     </Link>
                   ))}
                 </div>
-          ) : (
-            <p className="text-[var(--muted)]">Нет проектов. Создайте первый через API.</p>
+              )}
+
+              <button
+                onClick={() => setShowCreate(true)}
+                className="px-6 py-3 bg-[var(--accent)] text-white rounded-lg hover:opacity-90
+                           transition-opacity text-sm font-medium"
+              >
+                + Новый проект
+              </button>
+            </>
           )}
 
           <button
             onClick={logout}
-            className="mt-8 text-xs text-[var(--muted)] hover:text-[var(--fg)] transition-colors"
+            className="mt-8 block mx-auto text-xs text-[var(--muted)] hover:text-[var(--fg)] transition-colors"
           >
             Выйти
           </button>
         </div>
       </main>
+
+      {showCreate && (
+        <CreateProjectModal
+          onClose={() => setShowCreate(false)}
+          onCreated={(project) => {
+            setShowCreate(false);
+            router.push(`/projects/${project.slug}`);
+          }}
+        />
+      )}
     </div>
   );
 }

src/components/CreateProjectModal.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useState } from "react";
+import { createProject, Project } from "@/lib/api";
+
+interface Props {
+  onCreated: (project: Project) => void;
+  onClose: () => void;
+}
+
+export default function CreateProjectModal({ onCreated, onClose }: Props) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const slug = name
+    .toLowerCase()
+    .replace(/[^a-zа-яё0-9\s-]/gi, "")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .slice(0, 50);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim() || !slug) return;
+    setLoading(true);
+    setError("");
+    try {
+      const project = await createProject({
+        name: name.trim(),
+        slug,
+        description: description.trim() || null,
+      });
+      onCreated(project);
+    } catch (err) {
+      setError("Ошибка создания проекта");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
+      <form
+        onClick={(e) => e.stopPropagation()}
+        onSubmit={handleSubmit}
+        className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6 w-96"
+      >
+        <h2 className="text-lg font-bold mb-4">Новый проект</h2>
+
+        {error && (
+          <div className="mb-3 p-2 bg-red-500/10 border border-red-500/30 rounded text-red-400 text-sm">
+            {error}
+          </div>
+        )}
+
+        <label className="block text-sm text-[var(--muted)] mb-1">Название</label>
+        <input
+          autoFocus
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full mb-1 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg
+                     outline-none focus:border-[var(--accent)] text-sm"
+          placeholder="Мой проект"
+        />
+        {slug && <div className="text-xs text-[var(--muted)] mb-3">Slug: {slug}</div>}
+
+        <label className="block text-sm text-[var(--muted)] mb-1">Описание</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          className="w-full mb-4 px-3 py-2 bg-[var(--bg)] border border-[var(--border)] rounded-lg
+                     outline-none focus:border-[var(--accent)] text-sm resize-none"
+          rows={3}
+          placeholder="Необязательно"
+        />
+
+        <div className="flex gap-2 justify-end">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-[var(--muted)] hover:text-[var(--fg)]"
+          >
+            Отмена
+          </button>
+          <button
+            type="submit"
+            disabled={loading || !name.trim()}
+            className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm
+                       hover:opacity-90 disabled:opacity-50"
+          >
+            {loading ? "..." : "Создать"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}