UI tweaks (#10946)

* fix warning

* Improve event switching speed

* Fix icon colors

* Only show frigate+ page when frigate+ is enabled

* Add link from reecordings to live as well

web/src/components/filter/ReviewFilterGroup.tsx

@@ -693,7 +693,9 @@ function ShowMotionOnlyButton({
           variant={motionOnlyButton ? "select" : "default"}
           onClick={() => setMotionOnlyButton(!motionOnlyButton)}
         >
-          <FaRunning />
+          <FaRunning
+            className={`${motionOnlyButton ? "text-selected-foreground" : "text-secondary-foreground"}`}
+          />
         </Button>
       </div>
     </>

web/src/components/navigation/Bottombar.tsx

@@ -1,4 +1,3 @@
-import { navbarLinks } from "@/pages/site-navigation";
 import NavItem from "./NavItem";
 import { IoIosWarning } from "react-icons/io";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
@@ -9,20 +8,15 @@ import { useMemo } from "react";
 import useStats from "@/hooks/use-stats";
 import GeneralSettings from "../settings/GeneralSettings";
 import AccountSettings from "../settings/AccountSettings";
+import useNavigation from "@/hooks/use-navigation";
 
 function Bottombar() {
+  const navItems = useNavigation("secondary");
+
   return (
     <div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between">
-      {navbarLinks.map((item) => (
-        <NavItem
-          className=""
-          variant="secondary"
-          key={item.id}
-          Icon={item.icon}
-          title={item.title}
-          url={item.url}
-          dev={item.dev}
-        />
+      {navItems.map((item) => (
+        <NavItem key={item.id} item={item} Icon={item.icon} />
       ))}
       <GeneralSettings />
       <AccountSettings />

web/src/components/navigation/NavItem.tsx

@@ -1,6 +1,4 @@
-import { IconType } from "react-icons";
 import { NavLink } from "react-router-dom";
-import { ENV } from "@/env";
 import {
   Tooltip,
   TooltipContent,
@@ -8,6 +6,8 @@ import {
 } from "@/components/ui/tooltip";
 import { isDesktop } from "react-device-detect";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { NavData } from "@/types/navigation";
+import { IconType } from "react-icons";
 
 const variants = {
   primary: {
@@ -21,37 +21,29 @@ const variants = {
 };
 
 type NavItemProps = {
-  className: string;
-  variant?: "primary" | "secondary";
+  className?: string;
+  item: NavData;
   Icon: IconType;
-  title: string;
-  url: string;
-  dev?: boolean;
   onClick?: () => void;
 };
 
 export default function NavItem({
   className,
-  variant = "primary",
+  item,
   Icon,
-  title,
-  url,
-  dev,
   onClick,
 }: NavItemProps) {
-  const shouldRender = dev ? ENV !== "production" : true;
-
-  if (!shouldRender) {
+  if (item.enabled == false) {
     return;
   }
 
   const content = (
     <NavLink
-      to={url}
+      to={item.url}
       onClick={onClick}
       className={({ isActive }) =>
-        `${className} flex flex-col justify-center items-center rounded-lg ${
-          variants[variant][isActive ? "active" : "inactive"]
+        `flex flex-col justify-center items-center rounded-lg ${className ?? ""} ${
+          variants[item.variant ?? "primary"][isActive ? "active" : "inactive"]
         }`
       }
     >
@@ -65,7 +57,7 @@ export default function NavItem({
         <TooltipTrigger>{content}</TooltipTrigger>
         <TooltipPortal>
           <TooltipContent side="right">
-            <p>{title}</p>
+            <p>{item.title}</p>
           </TooltipContent>
         </TooltipPortal>
       </Tooltip>

web/src/components/navigation/Sidebar.tsx

@@ -1,14 +1,16 @@
 import Logo from "../Logo";
-import { navbarLinks } from "@/pages/site-navigation";
 import NavItem from "./NavItem";
 import { CameraGroupSelector } from "../filter/CameraGroupSelector";
 import { useLocation } from "react-router-dom";
 import GeneralSettings from "../settings/GeneralSettings";
 import AccountSettings from "../settings/AccountSettings";
+import useNavigation from "@/hooks/use-navigation";
 
 function Sidebar() {
   const location = useLocation();
 
+  const navbarLinks = useNavigation();
+
   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-background_alt border-r border-secondary-highlight">
       <span tabIndex={0} className="sr-only" />
@@ -22,10 +24,8 @@ function Sidebar() {
             <div key={item.id}>
               <NavItem
                 className={`mx-[10px] ${showCameraGroups ? "mb-2" : "mb-4"}`}
+                item={item}
                 Icon={item.icon}
-                title={item.title}
-                url={item.url}
-                dev={item.dev}
               />
               {showCameraGroups && <CameraGroupSelector className="mb-4" />}
             </div>