admin/task-team
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

UI fixes: emoji icons, modal form, Czech labels, polish

Browse Source 
- Fixed group emoji icons in DB (💼🛒📚🗺️🏃✨🏠🌿)
- Added TaskModal component for + button
- Czech status labels (Čeká, Probíhá, Hotovo, Zrušeno)
- Improved TaskCard, GroupSelector, Header, StatusBadge
- Better dark/light mode transitions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude CLI Agent
2026-03-29 11:16:07 +00:00
parent 6c93ae04d0
commit 4a6b5e5498
11 changed files with 499 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
apps/tasks/app/globals.css
View File

@@ -24,6 +24,26 @@ body {
background: var(--background);
color: var(--foreground);
font-family: system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px; /* prevent auto-zoom on iOS */
max-width: 100vw;
overflow-x: hidden;
}
/* Mobile-first base */
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
textarea,
select {
font-size: 16px; /* Prevent zoom on iOS */
}
@layer utilities {
@@ -34,4 +54,36 @@ body {
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.text-muted {
color: var(--muted);
}
}
/* Smooth page transitions */
main {
animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile overscroll behavior */
@media (max-width: 640px) {
html {
overscroll-behavior-y: contain;
}
}
/* Selection color */
::selection {
background: rgba(59, 130, 246, 0.3);
}

2
apps/tasks/app/layout.tsx
View File

@@ -37,7 +37,7 @@ export default function RootLayout({
<ThemeProvider>
<AuthProvider>
<Header />
<main className="max-w-4xl mx-auto px-4 py-6">
<main className="max-w-4xl mx-auto py-4">
{children}
</main>
</AuthProvider>

126
apps/tasks/app/tasks/[id]/page.tsx
View File

@@ -3,10 +3,21 @@
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 {
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";
}
export default function TaskDetailPage() {
const { token } = useAuth();
const router = useRouter();
@@ -30,7 +41,9 @@ export default function TaskDetailPage() {
setTask(taskData);
setGroups(groupsData.data || []);
} catch (err) {
setError(err instanceof Error ? err.message : "Chyba pri nacitani ukolu");
setError(
err instanceof Error ? err.message : "Chyba p\u0159i na\u010d\u00edt\u00e1n\u00ed \u00fakolu"
);
} finally {
setLoading(false);
}
@@ -53,13 +66,15 @@ export default function TaskDetailPage() {
async function handleDelete() {
if (!token || !id) return;
if (!confirm("Opravdu smazat tento ukol?")) return;
if (!confirm("Opravdu smazat tento \u00fakol?")) return;
setDeleting(true);
try {
await deleteTask(token, id);
router.push("/tasks");
} catch (err) {
setError(err instanceof Error ? err.message : "Chyba pri mazani");
setError(
err instanceof Error ? err.message : "Chyba p\u0159i maz\u00e1n\u00ed"
);
setDeleting(false);
}
}
@@ -70,7 +85,9 @@ export default function TaskDetailPage() {
await updateTask(token, id, { status: newStatus });
loadTask();
} catch (err) {
setError(err instanceof Error ? err.message : "Chyba pri zmene stavu");
setError(
err instanceof Error ? err.message : "Chyba p\u0159i zm\u011bn\u011b stavu"
);
}
}
@@ -79,7 +96,7 @@ export default function TaskDetailPage() {
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>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
</div>
);
}
@@ -87,12 +104,12 @@ export default function TaskDetailPage() {
if (error || !task) {
return (
<div className="text-center py-12">
<p className="text-red-500">{error || "Ukol nenalezen"}</p>
<p className="text-red-500">{error || "\u00dakol nenalezen"}</p>
<button
onClick={() => router.push("/tasks")}
className="mt-4 text-blue-600 hover:underline"
>
Zpet na ukoly
Zp\u011bt na \u00fakoly
</button>
</div>
);
@@ -101,25 +118,28 @@ export default function TaskDetailPage() {
if (editing) {
return (
<div className="max-w-lg mx-auto">
<h1 className="text-xl font-bold mb-4">Upravit ukol</h1>
<h1 className="text-xl font-bold mb-4">Upravit \u00fakol</h1>
<TaskForm
groups={groups}
initial={task}
onSubmit={handleUpdate}
onCancel={() => setEditing(false)}
submitLabel="Ulozit zmeny"
submitLabel="Ulo\u017eit zm\u011bny"
/>
</div>
);
}
const PRIORITY_LABELS: Record<string, string> = {
low: "Nizka",
medium: "Stredni",
high: "Vysoka",
urgent: "Urgentni",
const PRIORITY_LABELS: Record<string, { label: string; dot: string }> = {
low: { label: "N\u00edzk\u00e1", dot: "\ud83d\udfe2" },
medium: { label: "St\u0159edn\u00ed", dot: "\ud83d\udfe1" },
high: { label: "Vysok\u00e1", dot: "\ud83d\udfe0" },
urgent: { label: "Urgentn\u00ed", 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 */}
@@ -127,55 +147,89 @@ export default function TaskDetailPage() {
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
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>
Zpet
Zp\u011bt
</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">
<h1 className={`text-xl font-bold ${task.status === "done" ? "line-through text-muted" : ""}`}>
{task.title}
</h1>
<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">{task.description}</p>
<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">{PRIORITY_LABELS[task.priority]}</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" }}
style={{
backgroundColor: task.group_color || "#6b7280",
}}
>
{task.group_icon && (
<span className="mr-1">{task.group_icon}</span>
)}
{task.group_name}
</span>
</div>
)}
{task.due_at && (
<div>
<span className="text-muted">Termin:</span>
<span className="ml-2">{new Date(task.due_at).toLocaleString("cs-CZ")}</span>
<span className="text-muted">Term\u00edn:</span>
<span className="ml-2">
{new Date(task.due_at).toLocaleString("cs-CZ")}
</span>
</div>
)}
<div>
<span className="text-muted">Vytvoreno:</span>
<span className="ml-2">{new Date(task.created_at).toLocaleString("cs-CZ")}</span>
<span className="text-muted">Vytvo\u0159eno:</span>
<span className="ml-2">
{new Date(task.created_at).toLocaleString("cs-CZ")}
</span>
</div>
{task.completed_at && (
<div>
<span className="text-muted">Dokonceno:</span>
<span className="ml-2">{new Date(task.completed_at).toLocaleString("cs-CZ")}</span>
<span className="text-muted">Dokon\u010deno:</span>
<span className="ml-2">
{new Date(task.completed_at).toLocaleString("cs-CZ")}
</span>
</div>
)}
</div>
@@ -183,12 +237,12 @@ export default function TaskDetailPage() {
{/* Quick status buttons */}
<div className="flex gap-2 flex-wrap">
{task.status !== "done" && (
{!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"
>
Oznacit jako hotove
Ozna\u010dit jako hotov\u00e9
</button>
)}
{task.status === "pending" && (
@@ -196,15 +250,15 @@ export default function TaskDetailPage() {
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"
>
Zahajit
Zah\u00e1jit
</button>
)}
{task.status === "done" && (
{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 otevrit
Znovu otev\u0159\u00edt
</button>
)}
</div>
@@ -222,7 +276,7 @@ export default function TaskDetailPage() {
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 ? "Mazu..." : "Smazat"}
{deleting ? "Ma\u017eu..." : "Smazat"}
</button>
</div>
</div>

80
apps/tasks/app/tasks/page.tsx
View File

@@ -6,7 +6,7 @@ import { useAuth } from "@/lib/auth";
import { getTasks, getGroups, createTask, Task, Group } from "@/lib/api";
import TaskCard from "@/components/TaskCard";
import GroupSelector from "@/components/GroupSelector";
import TaskForm from "@/components/TaskForm";
import TaskModal from "@/components/TaskModal";
type StatusFilter = "all" | "pending" | "in_progress" | "done" | "cancelled";
@@ -35,7 +35,7 @@ export default function TasksPage() {
setTasks(tasksRes.data || []);
setGroups(groupsRes.data || []);
} catch (err) {
console.error("Chyba pri nacitani:", err);
console.error("Chyba p\u0159i na\u010d\u00edt\u00e1n\u00ed:", err);
} finally {
setLoading(false);
}
@@ -57,19 +57,23 @@ export default function TasksPage() {
}
const statusOptions: { value: StatusFilter; label: string }[] = [
{ value: "all", label: "Vse" },
{ value: "pending", label: "Ceka" },
{ value: "in_progress", label: "Probiha" },
{ value: "all", label: "V\u0161e" },
{ value: "pending", label: "\u010Cek\u00e1" },
{ value: "in_progress", label: "Prob\u00edh\u00e1" },
{ value: "done", label: "Hotovo" },
{ value: "cancelled", label: "Zruseno" },
{ value: "cancelled", label: "Zru\u0161eno" },
];
if (!token) return null;
return (
<div className="space-y-4">
<div className="space-y-4 pb-24">
{/* Group tabs */}
<GroupSelector groups={groups} selected={selectedGroup} onSelect={setSelectedGroup} />
<GroupSelector
groups={groups}
selected={selectedGroup}
onSelect={setSelectedGroup}
/>
{/* Status filter */}
<div className="flex gap-1.5 overflow-x-auto scrollbar-hide pb-1">
@@ -77,7 +81,7 @@ export default function TasksPage() {
<button
key={opt.value}
onClick={() => setStatusFilter(opt.value)}
className={`flex-shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
className={`flex-shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium transition-all min-h-[36px] ${
statusFilter === opt.value
? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
: "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
@@ -88,29 +92,18 @@ export default function TasksPage() {
))}
</div>
{/* Task creation form */}
{showForm && (
<div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-5">
<h2 className="text-lg font-semibold mb-4">Novy ukol</h2>
<TaskForm
groups={groups}
onSubmit={handleCreateTask}
onCancel={() => setShowForm(false)}
submitLabel="Vytvorit"
/>
</div>
)}
{/* Task list */}
{loading ? (
<div className="flex justify-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
</div>
) : tasks.length === 0 ? (
<div className="text-center py-16">
<div className="text-4xl mb-3">&#9744;</div>
<p className="text-muted text-lg">Zadne ukoly</p>
<p className="text-muted text-sm mt-1">Vytvorte prvni ukol pomoci tlacitka +</p>
<div className="text-5xl mb-4 opacity-50">&#9744;</div>
<p className="text-muted text-lg font-medium">\u017d\u00e1dn\u00e9 \u00fakoly</p>
<p className="text-muted text-sm mt-1">
Vytvo\u0159te prvn\u00ed \u00fakol pomoc\u00ed tla\u010d\u00edtka +
</p>
</div>
) : (
<div className="space-y-2">
@@ -120,15 +113,34 @@ export default function TasksPage() {
</div>
)}
{/* Floating add button */}
{!showForm && (
<button
onClick={() => setShowForm(true)}
className="fixed bottom-6 right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all flex items-center justify-center text-2xl font-light"
aria-label="Pridat ukol"
{/* Floating action button */}
<button
onClick={() => setShowForm(true)}
className="fixed bottom-6 right-6 w-14 h-14 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white rounded-full shadow-lg hover:shadow-xl active:shadow-md transition-all duration-200 flex items-center justify-center z-40 hover:scale-105 active:scale-95"
aria-label="P\u0159idat \u00fakol"
>
<svg
className="w-7 h-7"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2.5}
>
+
</button>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 4v16m8-8H4"
/>
</svg>
</button>
{/* Add task modal */}
{showForm && (
<TaskModal
groups={groups}
onSubmit={handleCreateTask}
onClose={() => setShowForm(false)}
/>
)}
</div>
);