Update web deps (#16983)

* Update vite

* Update LuIcons

* Update radix packages

* Fix other icons

* Use correct node version

* Remove superfluous web build on python tests

* Move web build to test

web/src/components/graph/CombinedStorageGraph.tsx

@@ -16,7 +16,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { getUnitSize } from "@/utils/storageUtil";
-import { LuAlertCircle } from "react-icons/lu";
+import { CiCircleAlert } from "react-icons/ci";
 
 type CameraStorage = {
   [key: string]: {
@@ -199,7 +199,7 @@ export function CombinedStorageGraph({
                           className="focus:outline-none"
                           aria-label="Unused Storage Information"
                         >
-                          <LuAlertCircle
+                          <CiCircleAlert
                             className="size-5"
                             aria-label="Unused Storage Information"
                           />

web/src/components/indicators/activity-indicator.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import { LuLoader2 } from "react-icons/lu";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
 export default function ActivityIndicator({ className = "w-full", size = 30 }) {
   return (
@@ -7,7 +7,7 @@ export default function ActivityIndicator({ className = "w-full", size = 30 }) {
       className={cn("flex items-center justify-center", className)}
       aria-label="Loading…"
     >
-      <LuLoader2 className="animate-spin" size={size} />
+      <AiOutlineLoading3Quarters className="animate-spin" size={size} />
     </div>
   );
 }

web/src/components/menu/GeneralSettings.tsx

@@ -5,7 +5,7 @@ import {
   LuList,
   LuLogOut,
   LuMoon,
-  LuPenSquare,
+  LuSquarePen,
   LuRotateCw,
   LuSettings,
   LuSun,
@@ -200,7 +200,7 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                   }
                   aria-label="Configuration editor"
                 >
-                  <LuPenSquare className="mr-2 size-4" />
+                  <LuSquarePen className="mr-2 size-4" />
                   <span>Configuration editor</span>
                 </MenuItem>
               </Link>

web/src/components/menu/SearchResultActions.tsx

@@ -4,7 +4,8 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { baseUrl } from "@/api/baseUrl";
 import { toast } from "sonner";
 import axios from "axios";
-import { LuCamera, LuDownload, LuMoreVertical, LuTrash2 } from "react-icons/lu";
+import { LuCamera, LuDownload, LuTrash2 } from "react-icons/lu";
+import { FiMoreVertical } from "react-icons/fi";
 import { FaArrowsRotate } from "react-icons/fa6";
 import { MdImageSearch } from "react-icons/md";
 import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
@@ -216,7 +217,7 @@ export default function SearchResultActions({
 
           <DropdownMenu>
             <DropdownMenuTrigger>
-              <LuMoreVertical className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+              <FiMoreVertical className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">{menuItems}</DropdownMenuContent>
           </DropdownMenu>

web/src/components/overlay/detail/ObjectLifecycle.tsx

@@ -23,7 +23,6 @@ import {
   LuEar,
   LuFolderX,
   LuPlay,
-  LuPlayCircle,
   LuSettings,
   LuTruck,
 } from "react-icons/lu";
@@ -54,6 +53,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import { ObjectPath } from "./ObjectPath";
 import { getLifecycleItemDescription } from "@/utils/lifecycleUtil";
+import { IoPlayCircleOutline } from "react-icons/io5";
 
 type ObjectLifecycleProps = {
   className?: string;
@@ -733,7 +733,7 @@ export function LifecycleIcon({
     case "gone":
       return <IoMdExit className={cn(className)} />;
     case "active":
-      return <LuPlayCircle className={cn(className)} />;
+      return <IoPlayCircleOutline className={cn(className)} />;
     case "stationary":
       return <LuCircle className={cn(className)} />;
     case "entered_zone":

web/src/views/explore/ExploreView.tsx

@@ -3,7 +3,7 @@ import { isDesktop, isIOS, isMobileOnly, isSafari } from "react-device-detect";
 import useSWR from "swr";
 import { useApiHost } from "@/api";
 import { cn } from "@/lib/utils";
-import { LuArrowRightCircle } from "react-icons/lu";
+import { BsArrowRightCircle } from "react-icons/bs";
 import { useNavigate } from "react-router-dom";
 import {
   Tooltip,
@@ -183,7 +183,7 @@ function ThumbnailRow({
         >
           <Tooltip>
             <TooltipTrigger>
-              <LuArrowRightCircle
+              <BsArrowRightCircle
                 className="ml-2 text-secondary-foreground transition-all duration-300 hover:text-primary"
                 size={24}
               />

web/src/views/settings/NotificationsSettingsView.tsx

@@ -20,7 +20,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import axios from "axios";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
-import { LuAlertCircle, LuCheck, LuExternalLink, LuX } from "react-icons/lu";
+import { LuCheck, LuExternalLink, LuX } from "react-icons/lu";
+import { CiCircleAlert } from "react-icons/ci";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
 import useSWR from "swr";
@@ -311,7 +312,7 @@ export default function NotificationView({
               </div>
             </div>
             <Alert variant="destructive">
-              <LuAlertCircle className="size-5" />
+              <CiCircleAlert className="size-5" />
               <AlertTitle>Notifications Unavailable</AlertTitle>
 
               <AlertDescription>

web/src/views/system/StorageMetrics.tsx

@@ -8,7 +8,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import useSWR from "swr";
-import { LuAlertCircle } from "react-icons/lu";
+import { CiCircleAlert } from "react-icons/ci";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { useTimezone } from "@/hooks/use-date-utils";
 import { RecordingsSummary } from "@/types/review";
@@ -86,7 +86,7 @@ export default function StorageMetrics({
                   className="focus:outline-none"
                   aria-label="Unused Storage Information"
                 >
-                  <LuAlertCircle
+                  <CiCircleAlert
                     className="size-5"
                     aria-label="Unused Storage Information"
                   />