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";
@@ -658,10 +658,16 @@ function TagMultiSelect({
                     {selected && <Check className="h-4 w-4 shrink-0" />}
                   </button>
                 );
-              })}
-            </div>
-          )}
-        </div>,
+                })}
+                {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,23 +2161,40 @@ 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>
-                <Button
-                  variant="secondary"
-                  onClick={openDiscardTimerModal}
-                  disabled={isDiscardingTimer}
-                  className="h-12 rounded-md px-5 text-xs font-semibold uppercase"
-                >
-                  {isDiscardingTimer ? "..." : ((t.actions as { discard?: string } | undefined)?.discard || "Discard")}
-                </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>
-            )}
+                <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 w-12 rounded-md"
+                  title={(t.actions as { discard?: string } | undefined)?.discard || "Discard"}
+                  aria-label={(t.actions as { discard?: string } | undefined)?.discard || "Discard"}
+                >
+                  {isDiscardingTimer ? "..." : <Trash2 className="h-4 w-4" />}
+                </Button>
+              </>
+            ) : (
+              <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>
 
         </div>