feat: global ui & functional update

app/dashboard/onboarding/page.tsx

@@ -4,13 +4,14 @@
 // Onboarding Page - First Workspace Creation
 // ============================================================================
 
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useRouter } from "next/navigation";
-import { Building2, Loader2, Megaphone } from "lucide-react";
+import { Building2, Loader2, Megaphone, Upload, Trash2, X } from "lucide-react";
 import { workspacesApi } from "@/lib/api";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   Card,
   CardContent,
@@ -24,8 +25,37 @@ import { STORAGE_KEYS } from "@/lib/utils/constants";
 export default function OnboardingPage() {
   const router = useRouter();
   const [name, setName] = useState("");
+  const [avatarFile, setAvatarFile] = useState<File | null>(null);
+  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
   const [isCreating, setIsCreating] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > 2 * 1024 * 1024) {
+      setError("Размер файла не должен превышать 2 МБ");
+      return;
+    }
+
+    setAvatarFile(file);
+    const reader = new FileReader();
+    reader.onload = () => {
+      setAvatarPreview(reader.result as string);
+    };
+    reader.readAsDataURL(file);
+    setError(null);
+  };
+
+  const handleAvatarRemove = () => {
+    setAvatarFile(null);
+    setAvatarPreview(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
 
   const handleCreate = async () => {
     if (!name.trim()) return;
@@ -34,8 +64,8 @@ export default function OnboardingPage() {
       setIsCreating(true);
       setError(null);
 
-      const workspace = await workspacesApi.create({ name: name.trim() });
-      
+      const workspace = await workspacesApi.create({ name: name.trim(), avatar_file: avatarFile });
+
       // Save as selected workspace
       localStorage.setItem(STORAGE_KEYS.SELECTED_WORKSPACE, workspace.id);
 
@@ -62,6 +92,49 @@ export default function OnboardingPage() {
         </CardHeader>
 
         <CardContent className="space-y-4">
+          {/* Avatar */}
+          <div className="flex items-center gap-4">
+            <Avatar className="h-16 w-16">
+              <AvatarImage src={avatarPreview || undefined} alt="Avatar preview" />
+              <AvatarFallback className="text-xl">
+                {name.charAt(0).toUpperCase() || "W"}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={isCreating}
+                >
+                  <Upload className="h-4 w-4 mr-2" />
+                  Загрузить
+                </Button>
+                {avatarPreview && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleAvatarRemove}
+                    disabled={isCreating}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                PNG, JPG или GIF. Максимум 2 МБ.
+              </p>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={handleAvatarChange}
+              />
+            </div>
+          </div>
+
           <div className="space-y-2">
             <Label htmlFor="workspace-name">Название воркспейса</Label>
             <Input