improved timer system and overlay

packages/frontend/src/components/ui/icon.tsx

@@ -19,8 +19,11 @@ import {
   Moon as PixelMoon,
   MoreVertical as PixelMoreVertical,
   NoteDelete as PixelNoteDelete,
+  Pause as PixelPause,
+  Play as PixelPlay,
   Plus as PixelPlus,
   Server as PixelServer,
+  CheckboxOn as PixelStop,
   Sun as PixelSun,
   Trash as PixelTrash,
   Undo as PixelUndo,
@@ -50,9 +53,12 @@ import {
   SignOutIcon as PhosphorLogOut,
   MoonIcon as PhosphorMoon,
   OctagonIcon as PhosphorOctagon,
+  PauseIcon as PhosphorPause,
+  PlayIcon as PhosphorPlay,
   PlusIcon as PhosphorPlus,
   QuestionIcon as PhosphorQuestion,
   HardDrivesIcon as PhosphorServer,
+  StopIcon as PhosphorStop,
   SunIcon as PhosphorSun,
   TrashIcon as PhosphorTrash,
   ArrowCounterClockwiseIcon as PhosphorUndo,
@@ -87,8 +93,11 @@ import {
   Home as LucideHome,
   Moon,
   OctagonXIcon,
+  Pause,
+  Play,
   Plus,
   ServerIcon,
+  Square,
   SquareCheck,
   Sun,
   Timer,
@@ -103,6 +112,7 @@ import { useSessionSafe } from "@/components/session-provider";
 
 // lucide: https://lucide.dev/icons
 // pixel: https://pixelarticons.com/ (CLICK "Legacy") - these ones are free
+// phosphor: https://phosphoricons.com/
 const icons = {
   alertTriangle: { lucide: AlertTriangle, pixel: PixelAlert, phosphor: PhosphorWarning },
   bug: { lucide: Bug, pixel: PixelDebug, phosphor: PhosphorBug },
@@ -138,9 +148,12 @@ const icons = {
   logOut: { lucide: LogOut, pixel: PixelLogout, phosphor: PhosphorLogOut },
   moon: { lucide: Moon, pixel: PixelMoon, phosphor: PhosphorMoon },
   octagonXIcon: { lucide: OctagonXIcon, pixel: PixelClose, phosphor: PhosphorOctagon },
+  pause: { lucide: Pause, pixel: PixelPause, phosphor: PhosphorPause },
+  play: { lucide: Play, pixel: PixelPlay, phosphor: PhosphorPlay },
   plus: { lucide: Plus, pixel: PixelPlus, phosphor: PhosphorPlus },
   serverIcon: { lucide: ServerIcon, pixel: PixelServer, phosphor: PhosphorServer },
   sun: { lucide: Sun, pixel: PixelSun, phosphor: PhosphorSun },
+  stop: { lucide: Square, pixel: PixelStop, phosphor: PhosphorStop },
   timer: { lucide: Timer, pixel: PixelClock, phosphor: PhosphorClock },
   trash: { lucide: Trash, pixel: PixelTrash, phosphor: PhosphorTrash },
   triangleAlertIcon: { lucide: TriangleAlertIcon, pixel: PixelAlert, phosphor: PhosphorWarning },