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

src/pages/Timesheet.tsx

@@ -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">
+                <Button
-                  {t.timesheet?.stopTimer || "Stop"}
+                  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">
+              <Button
-                {isStartingTimer ? "..." : (t.timesheet?.startTimer || "Start")}
+                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>