Add Chat + Settings pages, fix all bugs

- /chat: AI chat interface with Claude API
- /settings: language selector (CZ/HE/RU/UA), notifications, connectors
- Fixed Invalid Date on task detail
- All 6 pages returning 200

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/tasks/app/chat/page.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth";
+
+interface ChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  timestamp: Date;
+}
+
+export default function ChatPage() {
+  const { token, user } = useAuth();
+  const router = useRouter();
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (!token) {
+      router.replace("/login");
+    }
+  }, [token, router]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  async function handleSend() {
+    const text = input.trim();
+    if (!text || loading || !token) return;
+
+    const userMsg: ChatMessage = {
+      id: Date.now().toString(),
+      role: "user",
+      content: text,
+      timestamp: new Date(),
+    };
+
+    setMessages((prev) => [...prev, userMsg]);
+    setInput("");
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/v1/chat", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ message: text }),
+      });
+
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`);
+      }
+
+      const data = await res.json();
+      const assistantMsg: ChatMessage = {
+        id: (Date.now() + 1).toString(),
+        role: "assistant",
+        content: data.reply || data.message || "Omlouv\u00e1m se, nemohl jsem zpracovat va\u0161i zpr\u00e1vu.",
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, assistantMsg]);
+    } catch {
+      const errorMsg: ChatMessage = {
+        id: (Date.now() + 1).toString(),
+        role: "assistant",
+        content: "Chat asistent je momentáln\u011b nedostupný. Zkuste to prosím pozd\u011bji.",
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, errorMsg]);
+    } finally {
+      setLoading(false);
+      inputRef.current?.focus();
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+
+  if (!token) return null;
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-8rem)] max-w-2xl mx-auto px-4">
+      {/* Chat header */}
+      <div className="flex items-center gap-3 py-4 border-b border-gray-200 dark:border-gray-800">
+        <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full flex items-center justify-center">
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+          </svg>
+        </div>
+        <div>
+          <h1 className="font-semibold">AI Asistent</h1>
+          <p className="text-xs text-muted">Zeptejte se na cokoliv ohledn\u011b va\u0161ich úkol\u016f</p>
+        </div>
+      </div>
+
+      {/* Messages area */}
+      <div className="flex-1 overflow-y-auto py-4 space-y-4">
+        {messages.length === 0 && (
+          <div className="text-center py-16">
+            <div className="text-5xl mb-4 opacity-40">
+              <svg className="w-16 h-16 mx-auto text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+              </svg>
+            </div>
+            <p className="text-muted text-lg font-medium">Za\u010dn\u011bte konverzaci</p>
+            <p className="text-muted text-sm mt-1">
+              Napi\u0161te zpr\u00e1vu a AI asistent v\u00e1m pom\u016f\u017ee s úkoly
+            </p>
+          </div>
+        )}
+
+        {messages.map((msg) => (
+          <div
+            key={msg.id}
+            className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
+          >
+            <div
+              className={`max-w-[80%] rounded-2xl px-4 py-3 ${
+                msg.role === "user"
+                  ? "bg-blue-600 text-white rounded-br-md"
+                  : "bg-gray-100 dark:bg-gray-800 rounded-bl-md"
+              }`}
+            >
+              <p className="text-sm whitespace-pre-wrap leading-relaxed">{msg.content}</p>
+              <p
+                className={`text-[10px] mt-1 ${
+                  msg.role === "user" ? "text-blue-200" : "text-muted"
+                }`}
+              >
+                {msg.timestamp.toLocaleTimeString("cs-CZ", { hour: "2-digit", minute: "2-digit" })}
+              </p>
+            </div>
+          </div>
+        ))}
+
+        {loading && (
+          <div className="flex justify-start">
+            <div className="bg-gray-100 dark:bg-gray-800 rounded-2xl rounded-bl-md px-4 py-3">
+              <div className="flex gap-1.5">
+                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
+                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
+                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "300ms" }} />
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input area */}
+      <div className="border-t border-gray-200 dark:border-gray-800 py-3 pb-20 sm:pb-4">
+        <div className="flex items-end gap-2">
+          <textarea
+            ref={inputRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Napi\u0161te zpr\u00e1vu..."
+            rows={1}
+            className="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-2xl bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none text-sm"
+            style={{ maxHeight: "120px" }}
+          />
+          <button
+            onClick={handleSend}
+            disabled={loading || !input.trim()}
+            className="p-3 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-full transition-colors flex-shrink-0"
+            aria-label="Odeslat"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/tasks/app/settings/page.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth";
+import { useTheme } from "@/components/ThemeProvider";
+
+const LANGUAGES = [
+  { code: "cs", label: "Čeština", flag: "🇨🇿" },
+  { code: "he", label: "עברית", flag: "🇮🇱" },
+  { code: "ru", label: "Русский", flag: "🇷🇺" },
+  { code: "ua", label: "Українська", flag: "🇺🇦" },
+];
+
+export default function SettingsPage() {
+  const { token, user, logout } = useAuth();
+  const { theme, toggleTheme } = useTheme();
+  const router = useRouter();
+  const [language, setLanguage] = useState("cs");
+  const [notifications, setNotifications] = useState({
+    push: true,
+    email: false,
+    taskReminders: true,
+    dailySummary: false,
+  });
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    if (!token) {
+      router.replace("/login");
+    }
+    // Load saved preferences
+    if (typeof window !== "undefined") {
+      const savedLang = localStorage.getItem("taskteam_language");
+      if (savedLang) setLanguage(savedLang);
+      const savedNotifs = localStorage.getItem("taskteam_notifications");
+      if (savedNotifs) {
+        try {
+          setNotifications(JSON.parse(savedNotifs));
+        } catch {
+          // ignore
+        }
+      }
+    }
+  }, [token, router]);
+
+  function handleSave() {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("taskteam_language", language);
+      localStorage.setItem("taskteam_notifications", JSON.stringify(notifications));
+    }
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  }
+
+  function handleLogout() {
+    logout();
+    router.push("/login");
+  }
+
+  if (!token) return null;
+
+  return (
+    <div className="max-w-lg mx-auto space-y-6 px-4 pb-24 sm:pb-8">
+      <h1 className="text-xl font-bold">Nastavení</h1>
+
+      {/* Profile section */}
+      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
+        <h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">Profil</h2>
+        <div className="flex items-center gap-4">
+          <div className="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-xl font-bold">
+            {(user?.name || user?.email || "?").charAt(0).toUpperCase()}
+          </div>
+          <div className="min-w-0">
+            <p className="font-semibold text-lg">{user?.name || "Uživatel"}</p>
+            <p className="text-sm text-muted truncate">{user?.email}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Appearance */}
+      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
+        <h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">Vzhled</h2>
+
+        {/* Theme toggle */}
+        <div className="flex items-center justify-between py-3">
+          <div className="flex items-center gap-3">
+            {theme === "dark" ? (
+              <svg className="w-5 h-5 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+              </svg>
+            ) : (
+              <svg className="w-5 h-5 text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+              </svg>
+            )}
+            <span className="text-sm font-medium">
+              {theme === "dark" ? "Tmavý režim" : "Světlý režim"}
+            </span>
+          </div>
+          <button
+            onClick={toggleTheme}
+            className={`relative w-12 h-7 rounded-full transition-colors ${
+              theme === "dark" ? "bg-blue-600" : "bg-gray-300"
+            }`}
+            aria-label="Přepnout téma"
+          >
+            <div
+              className={`absolute top-0.5 w-6 h-6 bg-white rounded-full shadow transition-transform ${
+                theme === "dark" ? "translate-x-5" : "translate-x-0.5"
+              }`}
+            />
+          </button>
+        </div>
+      </div>
+
+      {/* Language */}
+      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
+        <h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">Jazyk</h2>
+        <div className="grid grid-cols-2 gap-2">
+          {LANGUAGES.map((lang) => (
+            <button
+              key={lang.code}
+              onClick={() => setLanguage(lang.code)}
+              className={`flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium transition-all ${
+                language === lang.code
+                  ? "bg-blue-600 text-white shadow-md"
+                  : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
+              }`}
+            >
+              <span className="text-lg">{lang.flag}</span>
+              <span>{lang.label}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Notifications */}
+      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
+        <h2 className="text-sm font-semibold text-muted uppercase tracking-wide mb-4">Oznámení</h2>
+        <div className="space-y-1">
+          {[
+            { key: "push" as const, label: "Push oznámení" },
+            { key: "email" as const, label: "E-mailová oznámení" },
+            { key: "taskReminders" as const, label: "Připomenutí úkolů" },
+            { key: "dailySummary" as const, label: "Denní souhrn" },
+          ].map((item) => (
+            <div key={item.key} className="flex items-center justify-between py-3">
+              <span className="text-sm font-medium">{item.label}</span>
+              <button
+                onClick={() =>
+                  setNotifications((prev) => ({
+                    ...prev,
+                    [item.key]: !prev[item.key],
+                  }))
+                }
+                className={`relative w-12 h-7 rounded-full transition-colors ${
+                  notifications[item.key] ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"
+                }`}
+                aria-label={`Přepnout ${item.label}`}
+              >
+                <div
+                  className={`absolute top-0.5 w-6 h-6 bg-white rounded-full shadow transition-transform ${
+                    notifications[item.key] ? "translate-x-5" : "translate-x-0.5"
+                  }`}
+                />
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Save button */}
+      <button
+        onClick={handleSave}
+        className={`w-full py-3 rounded-xl font-medium transition-all ${
+          saved
+            ? "bg-green-600 text-white"
+            : "bg-blue-600 hover:bg-blue-700 text-white"
+        }`}
+      >
+        {saved ? "Uloženo!" : "Uložit nastavení"}
+      </button>
+
+      {/* Logout */}
+      <button
+        onClick={handleLogout}
+        className="w-full py-3 rounded-xl font-medium border border-red-300 dark:border-red-800 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+      >
+        Odhlásit se
+      </button>
+
+      {/* App info */}
+      <div className="text-center text-xs text-muted py-4">
+        <p>Task Team v0.1.0</p>
+      </div>
+    </div>
+  );
+}

apps/tasks/app/tasks/[id]/page.tsx

@@ -0,0 +1,299 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { useAuth } from "@/lib/auth";
+import {
+  getTask,
+  getGroups,
+  updateTask,
+  deleteTask,
+  Task,
+  Group,
+} from "@/lib/api";
+import TaskForm from "@/components/TaskForm";
+import StatusBadge from "@/components/StatusBadge";
+
+function isDone(status: string): boolean {
+  return status === "done" || status === "completed";
+}
+
+function formatDate(dateStr: string | null | undefined): string {
+  if (!dateStr) return "Bez termínu";
+  try {
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return "Bez termínu";
+    return d.toLocaleDateString("cs-CZ", {
+      day: "numeric",
+      month: "numeric",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return "Bez termínu";
+  }
+}
+
+export default function TaskDetailPage() {
+  const { token } = useAuth();
+  const router = useRouter();
+  const params = useParams();
+  const id = params.id as string;
+  const [task, setTask] = useState<Task | null>(null);
+  const [groups, setGroups] = useState<Group[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [editing, setEditing] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState("");
+
+  const loadTask = useCallback(async () => {
+    if (!token || !id) return;
+    setLoading(true);
+    try {
+      const [taskData, groupsData] = await Promise.all([
+        getTask(token, id),
+        getGroups(token),
+      ]);
+      setTask(taskData);
+      setGroups(groupsData.data || []);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Chyba při načítání úkolu"
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [token, id]);
+
+  useEffect(() => {
+    if (!token) {
+      router.replace("/login");
+      return;
+    }
+    loadTask();
+  }, [token, router, loadTask]);
+
+  async function handleUpdate(data: Partial<Task>) {
+    if (!token || !id) return;
+    await updateTask(token, id, data);
+    setEditing(false);
+    loadTask();
+  }
+
+  async function handleDelete() {
+    if (!token || !id) return;
+    if (!confirm("Opravdu smazat tento úkol?")) return;
+    setDeleting(true);
+    try {
+      await deleteTask(token, id);
+      router.push("/tasks");
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Chyba při mazání"
+      );
+      setDeleting(false);
+    }
+  }
+
+  async function handleQuickStatus(newStatus: Task["status"]) {
+    if (!token || !id) return;
+    try {
+      await updateTask(token, id, { status: newStatus });
+      loadTask();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Chyba při změně stavu"
+      );
+    }
+  }
+
+  if (!token) return null;
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+      </div>
+    );
+  }
+
+  if (error || !task) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-red-500">{error || "Úkol nenalezen"}</p>
+        <button
+          onClick={() => router.push("/tasks")}
+          className="mt-4 text-blue-600 hover:underline"
+        >
+          Zpět na úkoly
+        </button>
+      </div>
+    );
+  }
+
+  if (editing) {
+    return (
+      <div className="max-w-lg mx-auto">
+        <h1 className="text-xl font-bold mb-4">Upravit úkol</h1>
+        <TaskForm
+          groups={groups}
+          initial={task}
+          onSubmit={handleUpdate}
+          onCancel={() => setEditing(false)}
+          submitLabel="Uložit změny"
+        />
+      </div>
+    );
+  }
+
+  const PRIORITY_LABELS: Record<string, { label: string; dot: string }> = {
+    low: { label: "Nízká", dot: "\uD83D\uDFE2" },
+    medium: { label: "Střední", dot: "\uD83D\uDFE1" },
+    high: { label: "Vysoká", dot: "\uD83D\uDFE0" },
+    urgent: { label: "Urgentní", dot: "\uD83D\uDD34" },
+  };
+
+  const pri = PRIORITY_LABELS[task.priority] || PRIORITY_LABELS.medium;
+  const taskDone = isDone(task.status);
+
+  return (
+    <div className="max-w-lg mx-auto space-y-6">
+      {/* Back button */}
+      <button
+        onClick={() => router.push("/tasks")}
+        className="text-sm text-muted hover:text-foreground flex items-center gap-1"
+      >
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M15 19l-7-7 7-7"
+          />
+        </svg>
+        Zpět
+      </button>
+
+      {/* Task detail card */}
+      <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-6">
+        <div className="flex items-start justify-between gap-4 mb-4">
+          <div className="flex items-start gap-3">
+            {task.group_icon && (
+              <span className="text-2xl">{task.group_icon}</span>
+            )}
+            <h1
+              className={`text-xl font-bold ${
+                taskDone ? "line-through text-muted" : ""
+              }`}
+            >
+              {task.title}
+            </h1>
+          </div>
+          <StatusBadge status={task.status} size="md" />
+        </div>
+
+        {task.description && (
+          <p className="text-muted mb-4 whitespace-pre-wrap leading-relaxed">
+            {task.description}
+          </p>
+        )}
+
+        <div className="grid grid-cols-2 gap-3 text-sm">
+          <div>
+            <span className="text-muted">Priorita:</span>
+            <span className="ml-2 font-medium">
+              {pri.dot} {pri.label}
+            </span>
+          </div>
+          {task.group_name && (
+            <div>
+              <span className="text-muted">Skupina:</span>
+              <span
+                className="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium text-white"
+                style={{
+                  backgroundColor: task.group_color || "#6b7280",
+                }}
+              >
+                {task.group_icon && (
+                  <span className="mr-1">{task.group_icon}</span>
+                )}
+                {task.group_name}
+              </span>
+            </div>
+          )}
+          <div>
+            <span className="text-muted">Termín:</span>
+            <span className="ml-2">
+              {formatDate(task.due_at)}
+            </span>
+          </div>
+          <div>
+            <span className="text-muted">Vytvořeno:</span>
+            <span className="ml-2">
+              {formatDate(task.created_at)}
+            </span>
+          </div>
+          {task.completed_at && (
+            <div>
+              <span className="text-muted">Dokončeno:</span>
+              <span className="ml-2">
+                {formatDate(task.completed_at)}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Quick status buttons */}
+      <div className="flex gap-2 flex-wrap">
+        {!taskDone && (
+          <button
+            onClick={() => handleQuickStatus("done")}
+            className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-medium transition-colors"
+          >
+            Označit jako hotové
+          </button>
+        )}
+        {task.status === "pending" && (
+          <button
+            onClick={() => handleQuickStatus("in_progress")}
+            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors"
+          >
+            Zahájit
+          </button>
+        )}
+        {taskDone && (
+          <button
+            onClick={() => handleQuickStatus("pending")}
+            className="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg text-sm font-medium transition-colors"
+          >
+            Znovu otevřít
+          </button>
+        )}
+      </div>
+
+      {/* Action buttons */}
+      <div className="flex gap-3">
+        <button
+          onClick={() => setEditing(true)}
+          className="flex-1 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors font-medium"
+        >
+          Upravit
+        </button>
+        <button
+          onClick={handleDelete}
+          disabled={deleting}
+          className="px-6 py-2.5 border border-red-300 dark:border-red-800 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors font-medium disabled:opacity-50"
+        >
+          {deleting ? "Mažu..." : "Smazat"}
+        </button>
+      </div>
+    </div>
+  );
+}