Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/components/protected-layout.tsx

@@ -2,6 +2,7 @@ import { useEffect, type ReactNode } from "react";
 import { useNavigate } from "@tanstack/react-router";
 import { useAuth } from "@/lib/auth";
 import { AppShell } from "@/components/app-shell";
+import { TimerWidget } from "@/components/timer/timer-widget";
 import { Loader2 } from "lucide-react";
 
 export function ProtectedLayout({ children, adminOnly }: { children: ReactNode; adminOnly?: boolean }) {
@@ -25,5 +26,10 @@ export function ProtectedLayout({ children, adminOnly }: { children: ReactNode;
     );
   }
 
-  return <AppShell>{children}</AppShell>;
+  return (
+    <AppShell>
+      {children}
+      <TimerWidget />
+    </AppShell>
+  );
 }

src/components/timer/timer-widget.tsx

@@ -96,7 +96,7 @@ export function TimerWidget() {
             )}
           </div>
           {!active.caseId && (
-            <div className="mt-1 text-[10px] text-amber-600 dark:text-amber-400">Attach to a case to save as time entry.</div>
+            <div className="mt-1 text-[10px] text-destructive">Attach to a case to save as a time entry.</div>
           )}
         </div>
         <div className="flex gap-2 px-3 pb-3">

src/routes/__root.tsx

@@ -1,5 +1,6 @@
 import { Outlet, Link, createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
 import { AuthProvider } from "@/lib/auth";
+import { TimerProvider } from "@/lib/timer";
 
 import appCss from "../styles.css?url";
 
@@ -70,7 +71,9 @@ function RootShell({ children }: { children: React.ReactNode }) {
 function RootComponent() {
   return (
     <AuthProvider>
-      <Outlet />
+      <TimerProvider>
+        <Outlet />
+      </TimerProvider>
     </AuthProvider>
   );
 }