Add support for live fullscreen mode (#10191)

* Fix timeline colors

* Add support for full screen mode

* Add support for live view full screen

* Cleanup

* Add border to sidebar and statusbar

web/src/components/Statusbar.tsx

@@ -28,7 +28,7 @@ export default function Statusbar() {
   }, [stats]);
 
   return (
-    <div className="absolute left-0 bottom-0 right-0 w-full h-8 flex items-center px-4 bg-primary z-10 text-secondary-foreground">
+    <div className="absolute left-0 bottom-0 right-0 w-full h-8 flex items-center px-4 bg-primary z-10 text-secondary-foreground border-t border-secondary-highlight">
       {cpuPercent && (
         <div className="flex items-center text-sm mr-4">
           <MdCircle

web/src/components/dynamic/CameraFeatureToggle.tsx

@@ -8,18 +8,18 @@ import { isDesktop } from "react-device-detect";
 
 const variants = {
   primary: {
-    active: "font-bold text-primary-foreground bg-selected",
-    inactive: "text-secondary-foreground bg-secondary",
+    active: "font-bold text-white bg-selected rounded-lg",
+    inactive: "text-secondary-foreground bg-secondary rounded-lg",
   },
-  secondary: {
-    active: "font-bold text-primary",
-    inactive: "text-secondary-foreground",
+  overlay: {
+    active: "font-bold text-white bg-selected rounded-full",
+    inactive: "text-primary-white rounded-full bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500",
   },
 };
 
 type CameraFeatureToggleProps = {
   className?: string;
-  variant?: "primary" | "secondary";
+  variant?: "primary" | "overlay";
   isActive: boolean;
   Icon: IconType;
   title: string;
@@ -37,7 +37,7 @@ export default function CameraFeatureToggle({
   const content = (
     <div
       onClick={onClick}
-      className={`${className} flex flex-col justify-center items-center rounded-lg ${
+      className={`${className} flex flex-col justify-center items-center ${
         variants[variant][isActive ? "active" : "inactive"]
       }`}
     >

web/src/components/navigation/Sidebar.tsx

@@ -5,7 +5,7 @@ import NavItem from "./NavItem";
 
 function Sidebar() {
   return (
-    <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-primary">
+    <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-primary border-r border-secondary-highlight">
       <span tabIndex={0} className="sr-only" />
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />

web/src/components/timeline/EventSegment.tsx

@@ -61,7 +61,7 @@ function MinimapBounds({
     <>
       {isFirstSegmentInMinimap && (
         <div
-          className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary font-medium z-20 text-center text-[10px] scroll-mt-8"
+          className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] scroll-mt-8"
           ref={firstMinimapSegmentRef}
         >
           {new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
@@ -73,7 +73,7 @@ function MinimapBounds({
       )}
 
       {isLastSegmentInMinimap && (
-        <div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary font-medium z-20 text-center text-[10px]">
+        <div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px]">
           {new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
             hour: "2-digit",
             minute: "2-digit",
@@ -247,7 +247,7 @@ export function EventSegment({
   const segmentClasses = `h-2 relative w-full ${
     showMinimap
       ? isInMinimapRange
-        ? "bg-card"
+        ? "bg-secondary-highlight"
         : isLastSegmentInMinimap
           ? ""
           : "opacity-70"