UI cleanup (#10567)

* Fix selected items text

* Use action icons from design and fix spacing

* Fix icons for live grid

* Fix viewed select api

* Setup default theme as system

* Make conig editor respect system theme

web/src/components/filter/ReviewActionGroup.tsx

@@ -1,8 +1,10 @@
-import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
+import { FaCircleCheck } from "react-icons/fa6";
 import { useCallback } from "react";
 import axios from "axios";
 import { Button } from "../ui/button";
 import { isDesktop } from "react-device-detect";
+import { FaCompactDisc } from "react-icons/fa";
+import { HiTrash } from "react-icons/hi";
 
 type ReviewActionGroupProps = {
   selectedReviews: string[];
@@ -21,8 +23,7 @@ export default function ReviewActionGroup({
   }, [setSelectedReviews]);
 
   const onMarkAsReviewed = useCallback(async () => {
-    const idList = selectedReviews.join(",");
+    await axios.post(`reviews/viewed`, { ids: selectedReviews });
-    await axios.post(`reviews/viewed`, { ids: idList });
     setSelectedReviews([]);
     pullLatestData();
   }, [selectedReviews, setSelectedReviews, pullLatestData]);
@@ -36,16 +37,20 @@ export default function ReviewActionGroup({
 
   return (
     <div className="absolute inset-x-2 inset-y-0 md:left-auto md:right-2 p-2 flex gap-2 justify-between items-center bg-background">
-      <div className="flex items-center">
+      <div className="mx-1 flex justify-center items-center text-sm text-muted-foreground">
-        <div className="text-sm text-gray-500 mr-2">{`${selectedReviews.length} selected | `}</div>
+        <div className="p-1">{`${selectedReviews.length} selected`}</div>
-        <Button size="xs" variant="link" onClick={onClearSelected}>
+        <div className="p-1">{"|"}</div>
+        <div
+          className="p-2 text-primary-foreground cursor-pointer hover:bg-secondary hover:rounded-lg"
+          onClick={onClearSelected}
+        >
           Unselect
-        </Button>
+        </div>
       </div>
       <div className="flex items-center gap-1 md:gap-2">
         {selectedReviews.length == 1 && (
           <Button
-            className="flex items-center"
+            className="p-2 flex items-center gap-2"
             variant="secondary"
             size="sm"
             onClick={() => {
@@ -53,26 +58,26 @@ export default function ReviewActionGroup({
               onClearSelected();
             }}
           >
-            <LuFileUp className="mr-1" />
+            <FaCompactDisc />
             {isDesktop && "Export"}
           </Button>
         )}
         <Button
-          className="flex items-center"
+          className="p-2 flex items-center gap-2"
           variant="secondary"
           size="sm"
           onClick={onMarkAsReviewed}
         >
-          <LuCheckSquare className="mr-1" />
+          <FaCircleCheck />
           {isDesktop && "Mark as reviewed"}
         </Button>
         <Button
-          className="flex items-center"
+          className="p-2 flex items-center gap-1"
           variant="secondary"
           size="sm"
           onClick={onDelete}
         >
-          <LuTrash className="mr-1" />
+          <HiTrash />
           {isDesktop && "Delete"}
         </Button>
       </div>

web/src/components/icons/LiveIcons.tsx

@@ -0,0 +1,42 @@
+type LiveIconProps = {
+  layout?: "list" | "grid";
+};
+
+export function LiveGridIcon({ layout }: LiveIconProps) {
+  return (
+    <div className="size-full flex flex-col gap-0.5 rounded-md overflow-hidden">
+      <div
+        className={`h-1 w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
+      />
+      <div className="h-1 w-full flex gap-0.5">
+        <div
+          className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
+        />
+        <div
+          className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
+        />
+      </div>
+      <div className="h-1 w-full flex gap-0.5">
+        <div
+          className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
+        />
+        <div
+          className={`w-full ${layout == "grid" ? "bg-selected" : "bg-muted-foreground"}`}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function LiveListIcon({ layout }: LiveIconProps) {
+  return (
+    <div className="size-full flex flex-col gap-0.5 rounded-md overflow-hidden">
+      <div
+        className={`size-full ${layout == "list" ? "bg-selected" : "bg-muted-foreground"}`}
+      />
+      <div
+        className={`size-full ${layout == "list" ? "bg-selected" : "bg-muted-foreground"}`}
+      />
+    </div>
+  );
+}

web/src/context/providers.tsx

@@ -13,7 +13,7 @@ function providers({ children }: TProvidersProps) {
   return (
     <RecoilRoot>
       <ApiProvider>
-        <ThemeProvider defaultTheme="light" storageKey="frigate-ui-theme">
+        <ThemeProvider defaultTheme="system" storageKey="frigate-ui-theme">
           <TooltipProvider>
             <IconContext.Provider value={{ size: "20" }}>
               {children}

web/src/context/theme-provider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 
 type Theme = "dark" | "light" | "system";
 type ColorScheme =
@@ -41,6 +41,7 @@ type ThemeProviderProps = {
 
 type ThemeProviderState = {
   theme: Theme;
+  systemTheme?: Theme;
   colorScheme: ColorScheme;
   setTheme: (theme: Theme) => void;
   setColorScheme: (colorScheme: ColorScheme) => void;
@@ -48,6 +49,7 @@ type ThemeProviderState = {
 
 const initialState: ThemeProviderState = {
   theme: "system",
+  systemTheme: undefined,
   colorScheme: "theme-default",
   setTheme: () => null,
   setColorScheme: () => null,
@@ -86,6 +88,16 @@ export function ThemeProvider({
     }
   });
 
+  const systemTheme = useMemo<Theme | undefined>(() => {
+    if (theme != "system") {
+      return undefined;
+    }
+
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }, [theme]);
+
   useEffect(() => {
     //localStorage.removeItem(storageKey);
     //console.log(localStorage.getItem(storageKey));
@@ -95,21 +107,17 @@ export function ThemeProvider({
 
     root.classList.add(theme, colorScheme);
 
-    if (theme === "system") {
+    if (systemTheme) {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-        .matches
-        ? "dark"
-        : "light";
-
       root.classList.add(systemTheme);
       return;
     }
 
     root.classList.add(theme);
-  }, [theme, colorScheme]);
+  }, [theme, colorScheme, systemTheme]);
 
   const value = {
     theme,
+    systemTheme,
     colorScheme,
     setTheme: (theme: Theme) => {
       localStorage.setItem(storageKey, JSON.stringify({ theme, colorScheme }));

web/src/pages/ConfigEditor.tsx

@@ -19,7 +19,7 @@ function ConfigEditor() {
 
   const { data: config } = useSWR<string>("config/raw");
 
-  const { theme } = useTheme();
+  const { theme, systemTheme } = useTheme();
   const [error, setError] = useState<string | undefined>();
 
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
@@ -107,7 +107,7 @@ function ConfigEditor() {
         language: "yaml",
         model: modelRef.current,
         scrollBeyondLastLine: false,
-        theme: theme == "dark" ? "vs-dark" : "vs-light",
+        theme: (systemTheme || theme) == "dark" ? "vs-dark" : "vs-light",
       });
     }
 

web/src/views/live/LiveDashboardView.tsx

@@ -1,6 +1,7 @@
 import { useFrigateReviews } from "@/api/ws";
 import Logo from "@/components/Logo";
 import { CameraGroupSelector } from "@/components/filter/CameraGroupSelector";
+import { LiveGridIcon, LiveListIcon } from "@/components/icons/LiveIcons";
 import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail";
 import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
 import LivePlayer from "@/components/player/LivePlayer";
@@ -12,7 +13,6 @@ import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment } from "@/types/review";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { isDesktop, isMobile, isSafari } from "react-device-detect";
-import { CiGrid2H, CiGrid31 } from "react-icons/ci";
 import useSWR from "swr";
 
 type LiveDashboardViewProps = {
@@ -89,26 +89,26 @@ export default function LiveDashboardView({
           <CameraGroupSelector />
           <div className="flex items-center gap-1">
             <Button
-              className={
+              className={`p-1 ${
                 layout == "grid"
-                  ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                  ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                  : "text-muted-foreground bg-muted"
+                  : "bg-muted"
-              }
+              }`}
               size="xs"
               onClick={() => setLayout("grid")}
             >
-              <CiGrid31 className="m-1" />
+              <LiveGridIcon layout={layout} />
             </Button>
             <Button
-              className={
+              className={`p-1 ${
                 layout == "list"
-                  ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                  ? "bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
-                  : "text-muted-foreground bg-muted"
+                  : "bg-muted"
-              }
+              }`}
               size="xs"
               onClick={() => setLayout("list")}
             >
-              <CiGrid2H className="m-1" />
+              <LiveListIcon layout={layout} />
             </Button>
           </div>
         </div>