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

.github/workflows/pull_request.yml

@@ -24,7 +24,7 @@ jobs:
           persist-credentials: false
       - uses: actions/setup-node@master
         with:
-          node-version: 16.x
+          node-version: 20.x
       - name: Install devcontainer cli
         run: npm install --global @devcontainers/cli
       - name: Build devcontainer
@@ -64,6 +64,9 @@ jobs:
           node-version: 20.x
       - run: npm install
         working-directory: ./web
+      - name: Build web
+        run: npm run build
+        working-directory: ./web
       # - name: Test
       #   run: npm run test
       #   working-directory: ./web
@@ -99,14 +102,6 @@ jobs:
         uses: actions/checkout@v4
         with:
           persist-credentials: false
-      - uses: actions/setup-node@master
-        with:
-          node-version: 16.x
-      - run: npm install
-        working-directory: ./web
-      - name: Build web
-        run: npm run build
-        working-directory: ./web
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
       - name: Set up Docker Buildx

web/package.json

@@ -14,45 +14,45 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@cycjimmy/jsmpeg-player": "^6.1.1",
+    "@cycjimmy/jsmpeg-player": "^6.1.2",
     "@hookform/resolvers": "^3.9.0",
     "@melloware/react-logviewer": "^6.1.2",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
-    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-aspect-ratio": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-context-menu": "^2.2.2",
+    "@radix-ui/react-context-menu": "^2.2.6",
-    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-hover-card": "^1.1.2",
+    "@radix-ui/react-hover-card": "^1.1.6",
-    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-slider": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.3",
-    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.2",
-    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "apexcharts": "^3.52.0",
     "axios": "^1.7.7",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.2.0",
     "framer-motion": "^11.5.4",
-    "hls.js": "^1.5.17",
+    "hls.js": "^1.5.20",
     "idb-keyval": "^6.2.1",
     "immer": "^10.1.1",
-    "konva": "^9.3.16",
+    "konva": "^9.3.18",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.407.0",
+    "lucide-react": "^0.477.0",
-    "monaco-yaml": "^5.2.2",
+    "monaco-yaml": "^5.3.1",
     "next-themes": "^0.3.0",
     "nosleep.js": "^0.12.0",
     "react": "^18.3.1",
@@ -62,10 +62,10 @@
     "react-dom": "^18.3.1",
     "react-grid-layout": "^1.5.0",
     "react-hook-form": "^7.52.1",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.5.0",
     "react-konva": "^18.2.10",
     "react-router-dom": "^6.26.0",
-    "react-swipeable": "^7.0.1",
+    "react-swipeable": "^7.0.2",
     "react-tracked": "^2.0.1",
     "react-transition-group": "^4.4.5",
     "react-use-websocket": "^4.8.1",
@@ -75,7 +75,7 @@
     "sonner": "^1.5.0",
     "sort-by": "^1.2.0",
     "strftime": "^0.10.3",
-    "swr": "^2.2.5",
+    "swr": "^2.3.2",
     "tailwind-merge": "^2.4.0",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
@@ -97,8 +97,8 @@
     "@types/strftime": "^0.9.8",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
-    "@vitejs/plugin-react-swc": "^3.7.1",
+    "@vitejs/plugin-react-swc": "^3.8.0",
-    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/coverage-v8": "^3.0.7",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -115,8 +115,8 @@
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.9",
-    "typescript": "^5.5.4",
+    "typescript": "^5.8.2",
-    "vite": "^5.4.0",
+    "vite": "^6.2.0",
-    "vitest": "^2.0.5"
+    "vitest": "^3.0.7"
   }
 }

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"
                   />