Chneemann/flowstate
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(ui): integrate reusable ActionButton across dashboard and tasks components
All checks were successful
Deploy Flowstate to VPS / deploy (push) Successful in 51s
Details

Browse source
This commit is contained in:
Chneemann 2026-08-27 09:23:06 +02:00
parent a110e07ccc
commit d08a3cc0fe
No known key found for this signature in database
3 changed files with 9 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/(app)/dashboard/header/Header.tsx
View file

@ -5,11 +5,11 @@
"use client";
import { Sparkles } from "lucide-react";
import { Plus, Sparkles } from "lucide-react";
import TrashLink from "./TrashLink";
import NewTaskButton from "./NewTaskButton";
import { useState } from "react";
import ActionDropZones from "./ActionDropZones";
import { ActionButton } from "@/app/components/ui/buttons/ActionButton";
/**
* Renders the dashboard header section featuring title text, drop zones,
@ -46,7 +46,9 @@ export default function Header({
/>
{!isDraggingActive && (
<div className="flex items-center gap-3 animate-in fade-in duration-200">
<NewTaskButton />
<ActionButton href="/tasks?task=new" variant="primary" icon={Plus}>
New Task
</ActionButton>
<TrashLink />
</div>
)}

28
app/(app)/dashboard/header/NewTaskButton.tsx
View file

@ -1,28 +0,0 @@
/**
* @file app/(app)/dashboard/header/NewTaskButton.tsx
* @description Client component rendering an interactive trigger button for creating new tasks.
*/
"use client";
import { Plus } from "lucide-react";
import { useRouter } from "next/navigation";
/**
* Renders a stylized button component with an icon and active state animations to initiate task creation.
*
* @returns {JSX.Element} The rendered new task button component.
*/
export default function NewTaskButton() {
const router = useRouter();
return (
<button
onClick={() => router.push("/tasks?task=new")}
className="inline-flex items-center justify-center gap-2 px-3.5 py-2.5 rounded-xl font-medium text-sm text-black hover:text-foreground bg-primary hover:bg-primary-hover border border-black hover:border-foreground active:scale-95 transition-colors duration-200 cursor-pointer"
>
<Plus size={18} />
<span>New Task</span>
</button>
);
}

11
app/(app)/tasks/TaskForm.tsx
View file

@ -5,8 +5,7 @@
"use client";
import { AlertCircle } from "lucide-react";
import Link from "next/link";
import { AlertCircle, X } from "lucide-react";
import { DbTask, TaskStatus } from "@/lib/types/task";
import { useTaskForm } from "./useTaskForm";
import TaskHeader from "./task/TaskHeader";
@ -14,6 +13,7 @@ import TaskBasicInfo from "./task/TaskBasicInfo";
import TaskOptions from "./task/TaskOptions";
import TaskAssignees from "./task/TaskAssignees";
import TaskDateTime from "./task/TaskDateTime";
import { ActionButton } from "@/app/components/ui/buttons/ActionButton";
/**
* Properties for the TaskForm component.
@ -95,12 +95,9 @@ export default function TaskForm({
</div>
<div className="flex items-center justify-end gap-3">
<Link
href="/dashboard"
className="px-4 py-2.5 rounded-xl font-medium text-sm border border-border hover:bg-background-muted transition-colors"
>
<ActionButton href="/dashboard" variant="secondary" icon={X}>
Cancel
</Link>
</ActionButton>
<button
type="submit"
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl font-medium text-sm text-black bg-primary hover:bg-primary-hover active:scale-95 transition-all duration-200 cursor-pointer disabled:opacity-50"