Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(timesheet): use icon actions for the main timer

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-25 19:07:39 +03:30
parent 679d1cafb6
commit 29eefdea27
1 changed files with 45 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/Timesheet.tsx
View File

@@ -1,6 +1,6 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { CalendarDays, Check, ChevronDown, Clock3, DollarSign, MoreVertical, Pencil, Play, Plus, Tag as TagIcon, Trash2 } from "lucide-react";
import { CalendarDays, Check, ChevronDown, Clock3, DollarSign, MoreVertical, Pencil, Play, Plus, Search, Square, Tag as TagIcon, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { getProjects, type Project } from "../api/projects";
@@ -659,8 +659,14 @@ function TagMultiSelect({
</button>
);
})}
{filteredTags.length === 0 && (
<div className="px-2 py-3 text-xs text-slate-500 dark:text-slate-400">
No tags found.
</div>
)}
</div>
</>
)}
</div>,
document.body
)
@@ -2155,21 +2161,38 @@ export default function Timesheet() {
<div className="ms-2 flex shrink-0 items-center gap-2">
{runningEntry ? (
<>
<Button variant="destructive" onClick={() => void handleStop(runningEntry)} className="h-12 rounded-md px-5 text-xs font-semibold uppercase">
{t.timesheet?.stopTimer || "Stop"}
<Button
variant="destructive"
size="icon"
onClick={() => void handleStop(runningEntry)}
className="h-12 w-12 rounded-md"
title={t.timesheet?.stopTimer || "Stop"}
aria-label={t.timesheet?.stopTimer || "Stop"}
>
<Square className="h-4 w-4 fill-current" />
</Button>
<Button
variant="secondary"
size="icon"
onClick={openDiscardTimerModal}
disabled={isDiscardingTimer}
className="h-12 rounded-md px-5 text-xs font-semibold uppercase"
className="h-12 w-12 rounded-md"
title={(t.actions as { discard?: string } | undefined)?.discard || "Discard"}
aria-label={(t.actions as { discard?: string } | undefined)?.discard || "Discard"}
>
{isDiscardingTimer ? "..." : ((t.actions as { discard?: string } | undefined)?.discard || "Discard")}
{isDiscardingTimer ? "..." : <Trash2 className="h-4 w-4" />}
</Button>
</>
) : (
<Button onClick={() => void handleStartTimer()} disabled={isStartingTimer} className="h-12 rounded-md px-5 text-xs font-semibold uppercase">
{isStartingTimer ? "..." : (t.timesheet?.startTimer || "Start")}
<Button
onClick={() => void handleStartTimer()}
disabled={isStartingTimer}
size="icon"
className="h-12 w-12 rounded-md"
title={t.timesheet?.startTimer || "Start"}
aria-label={t.timesheet?.startTimer || "Start"}
>
{isStartingTimer ? "..." : <Play className="h-4 w-4 fill-current" />}
</Button>
)}
</div>