Refactor Settings UI (#20392)

* refactor with sidebar and mobile page

* sidebar spacing and color tweaks

* layout tweaks

* move camera switch button to header

* improve mobile

* remove back button on mobile page header

* mobile fixes

* remove debug

* don't use mobilepage

* more mobile tweaks

* use mobile page for components

* add optional actions to mobile page header for top right buttons

* fix alignment

* use page toggle

* tweaks

* sidebar inset tweaks

* move triggers to notifications sub menu

* consistency

* fix padding

* more padding fixes

* navigate history

web/src/components/mobile/MobilePage.tsx

@@ -170,12 +170,14 @@ export function MobilePageContent({
 
 interface MobilePageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   onClose?: () => void;
+  actions?: React.ReactNode;
 }
 
 export function MobilePageHeader({
   children,
   className,
   onClose,
+  actions,
   ...props
 }: MobilePageHeaderProps) {
   const { t } = useTranslation(["common"]);
@@ -208,6 +210,11 @@ export function MobilePageHeader({
         <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
       </Button>
       <div className="flex flex-row text-center">{children}</div>
+      {actions && (
+        <div className="absolute right-0 flex items-center gap-2">
+          {actions}
+        </div>
+      )}
     </div>
   );
 }

web/src/components/ui/sidebar.tsx

@@ -338,7 +338,7 @@ const SidebarInset = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex w-full flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:mb-2 md:peer-data-[variant=inset]:ml-0",
         className,
       )}
       {...props}

web/src/pages/Settings.tsx

@@ -15,22 +15,18 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import { Button } from "@/components/ui/button";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import useOptimisticState from "@/hooks/use-optimistic-state";
-import { isIOS, isMobile } from "react-device-detect";
+import { isMobile } from "react-device-detect";
 import { FaVideo } from "react-icons/fa";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import FilterSwitch from "@/components/filter/FilterSwitch";
 import { ZoneMaskFilterButton } from "@/components/filter/ZoneMaskFilter";
 import { PolygonType } from "@/types/canvas";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import scrollIntoView from "scroll-into-view-if-needed";
 import CameraSettingsView from "@/views/settings/CameraSettingsView";
-import ObjectSettingsView from "@/views/settings/ObjectSettingsView";
 import MotionTunerView from "@/views/settings/MotionTunerView";
 import MasksAndZonesView from "@/views/settings/MasksAndZonesView";
 import UsersView from "@/views/settings/UsersView";
@@ -40,14 +36,36 @@ import EnrichmentsSettingsView from "@/views/settings/EnrichmentsSettingsView";
 import UiSettingsView from "@/views/settings/UiSettingsView";
 import FrigatePlusSettingsView from "@/views/settings/FrigatePlusSettingsView";
 import { useSearchEffect } from "@/hooks/use-overlay-state";
-import { useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { useInitialCameraState } from "@/api/ws";
-import { isInIframe } from "@/utils/isIFrame";
-import { isPWA } from "@/utils/isPWA";
 import { useIsAdmin } from "@/hooks/use-is-admin";
 import { useTranslation } from "react-i18next";
 import TriggerView from "@/views/settings/TriggerView";
 import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import Heading from "@/components/ui/heading";
+import { LuChevronRight } from "react-icons/lu";
+import Logo from "@/components/Logo";
+import {
+  MobilePage,
+  MobilePageContent,
+  MobilePageHeader,
+  MobilePageTitle,
+} from "@/components/mobile/MobilePage";
 
 const allSettingsViews = [
   "ui",
@@ -64,11 +82,87 @@ const allSettingsViews = [
 ] as const;
 type SettingsType = (typeof allSettingsViews)[number];
 
+const settingsGroups = [
+  {
+    label: "General",
+    items: [{ key: "ui", component: UiSettingsView }],
+  },
+  {
+    label: "Cameras",
+    items: [
+      { key: "cameras", component: CameraSettingsView },
+      { key: "masksAndZones", component: MasksAndZonesView },
+      { key: "motionTuner", component: MotionTunerView },
+    ],
+  },
+  {
+    label: "Enrichments",
+    items: [{ key: "enrichments", component: EnrichmentsSettingsView }],
+  },
+  {
+    label: "Users",
+    items: [
+      { key: "users", component: UsersView },
+      { key: "roles", component: RolesView },
+    ],
+  },
+  {
+    label: "Notifications",
+    items: [
+      { key: "notifications", component: NotificationView },
+      { key: "triggers", component: TriggerView },
+    ],
+  },
+  {
+    label: "Frigate+",
+    items: [{ key: "frigateplus", component: FrigatePlusSettingsView }],
+  },
+];
+
+const getCurrentComponent = (page: SettingsType) => {
+  for (const group of settingsGroups) {
+    for (const item of group.items) {
+      if (item.key === page) {
+        return item.component;
+      }
+    }
+  }
+  return null;
+};
+
+function MobileMenuItem({
+  item,
+  onSelect,
+  onClose,
+  className,
+}: {
+  item: { key: string };
+  onSelect: (key: string) => void;
+  onClose?: () => void;
+  className?: string;
+}) {
+  const { t } = useTranslation(["views/settings"]);
+
+  return (
+    <Button
+      variant="ghost"
+      className={cn("w-full justify-between pr-2", className)}
+      onClick={() => {
+        onSelect(item.key);
+        onClose?.();
+      }}
+    >
+      <div className="smart-capitalize">{t("menu." + item.key)}</div>
+      <LuChevronRight className="size-4" />
+    </Button>
+  );
+}
+
 export default function Settings() {
   const { t } = useTranslation(["views/settings"]);
   const [page, setPage] = useState<SettingsType>("ui");
   const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
-  const tabsRef = useRef<HTMLDivElement | null>(null);
+  const [contentMobileOpen, setContentMobileOpen] = useState(false);
 
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -91,6 +185,8 @@ export default function Settings() {
   const [unsavedChanges, setUnsavedChanges] = useState(false);
   const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
 
+  const navigate = useNavigate();
+
   const cameras = useMemo(() => {
     if (!config) {
       return [];
@@ -144,7 +240,10 @@ export default function Settings() {
         const firstEnabledCamera =
           cameras.find((cam) => cameraEnabledStates[cam.name]) || cameras[0];
         setSelectedCamera(firstEnabledCamera.name);
-      } else if (!cameraEnabledStates[selectedCamera] && page !== "cameras") {
+      } else if (
+        !cameraEnabledStates[selectedCamera] &&
+        pageToggle !== "cameras"
+      ) {
         // Switch to first enabled camera if current one is disabled, unless on "camera settings" page
         const firstEnabledCamera =
           cameras.find((cam) => cameraEnabledStates[cam.name]) || cameras[0];
@@ -153,30 +252,15 @@ export default function Settings() {
         }
       }
     }
-  }, [cameras, selectedCamera, cameraEnabledStates, page]);
-
-  useEffect(() => {
-    if (tabsRef.current) {
-      const element = tabsRef.current.querySelector(
-        `[data-nav-item="${pageToggle}"]`,
-      );
-      if (element instanceof HTMLElement) {
-        scrollIntoView(element, {
-          behavior:
-            isMobile && isIOS && !isPWA && isInIframe ? "auto" : "smooth",
-          inline: "start",
-        });
-      }
-    }
-  }, [tabsRef, pageToggle]);
+  }, [cameras, selectedCamera, cameraEnabledStates, pageToggle]);
 
   useSearchEffect("page", (page: string) => {
     if (allSettingsViews.includes(page as SettingsType)) {
       // Restrict viewer to UI settings
       if (!isAdmin && !allowedViewsForViewer.includes(page as SettingsType)) {
-        setPage("ui");
+        setPageToggle("ui");
       } else {
-        setPage(page as SettingsType);
+        setPageToggle(page as SettingsType);
       }
     }
     // don't clear url params if we're creating a new object mask
@@ -193,55 +277,84 @@ export default function Settings() {
   });
 
   useEffect(() => {
+    if (!contentMobileOpen) {
       document.title = t("documentTitle.default");
-  }, [t]);
+    }
+  }, [t, contentMobileOpen]);
 
+  if (isMobile) {
     return (
-    <div className="flex size-full flex-col p-2">
-      <div className="relative flex h-11 w-full items-center justify-between">
-        <ScrollArea className="w-full whitespace-nowrap">
-          <div ref={tabsRef} className="flex flex-row">
-            <ToggleGroup
-              className="*:rounded-md *:px-3 *:py-4"
-              type="single"
-              size="sm"
-              value={pageToggle}
-              onValueChange={(value: SettingsType) => {
-                if (value) {
-                  // Restrict viewer navigation
-                  if (!isAdmin && !allowedViewsForViewer.includes(value)) {
+      <>
+        {!contentMobileOpen && (
+          <div className="flex size-full flex-col">
+            <div className="sticky -top-2 z-50 mb-2 bg-background p-4">
+              <div className="flex items-center justify-center">
+                <Logo className="h-8" />
+              </div>
+              <div className="flex flex-row text-center">
+                <h2 className="ml-2 text-lg font-semibold">
+                  {t("settings", { ns: "common" })}
+                </h2>
+              </div>
+            </div>
+
+            <div className="scrollbar-container overflow-y-auto px-4">
+              {settingsGroups.map((group) => {
+                const filteredItems = group.items.filter((item) =>
+                  visibleSettingsViews.includes(item.key as SettingsType),
+                );
+                if (filteredItems.length === 0) return null;
+                return (
+                  <div key={group.label} className="mb-3">
+                    {filteredItems.length > 1 && (
+                      <h3 className="mb-2 ml-2 text-sm font-medium text-secondary-foreground">
+                        {group.label}
+                      </h3>
+                    )}
+                    {filteredItems.map((item) => (
+                      <MobileMenuItem
+                        key={item.key}
+                        item={item}
+                        className={cn(filteredItems.length == 1 && "pl-2")}
+                        onSelect={(key) => {
+                          if (
+                            !isAdmin &&
+                            !allowedViewsForViewer.includes(key as SettingsType)
+                          ) {
                             setPageToggle("ui");
                           } else {
-                    setPageToggle(value);
-                  }
+                            setPageToggle(key as SettingsType);
                           }
+                          setContentMobileOpen(true);
                         }}
-            >
-              {visibleSettingsViews.map((item) => (
-                <ToggleGroupItem
-                  key={item}
-                  className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "ui" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
-                  value={item}
-                  data-nav-item={item}
-                  aria-label={t("selectItem", {
-                    ns: "common",
-                    item: t("menu." + item),
-                  })}
-                >
-                  <div className="smart-capitalize">{t("menu." + item)}</div>
-                </ToggleGroupItem>
+                      />
                     ))}
-            </ToggleGroup>
-            <ScrollBar orientation="horizontal" className="h-0" />
                   </div>
-        </ScrollArea>
-        {(page == "debug" ||
-          page == "cameras" ||
-          page == "masksAndZones" ||
-          page == "motionTuner" ||
-          page == "triggers") && (
-          <div className="ml-2 flex flex-shrink-0 items-center gap-2">
-            {page == "masksAndZones" && (
+                );
+              })}
+            </div>
+          </div>
+        )}
+        <MobilePage
+          open={contentMobileOpen}
+          onOpenChange={setContentMobileOpen}
+        >
+          <MobilePageContent
+            className={cn("px-2", "scrollbar-container overflow-y-auto")}
+          >
+            <MobilePageHeader
+              className="top-0 mb-0"
+              onClose={() => navigate(-1)}
+              actions={
+                [
+                  "debug",
+                  "cameras",
+                  "masksAndZones",
+                  "motionTuner",
+                  "triggers",
+                ].includes(pageToggle) ? (
+                  <div className="flex items-center gap-2">
+                    {pageToggle == "masksAndZones" && (
                       <ZoneMaskFilterButton
                         selectedZoneMask={filterZoneMask}
                         updateZoneMaskFilter={setFilterZoneMask}
@@ -255,50 +368,27 @@ export default function Settings() {
                       currentPage={page}
                     />
                   </div>
-        )}
-      </div>
-      <div className="mt-2 flex h-full w-full flex-col items-start md:h-dvh md:pb-24">
-        {page == "ui" && <UiSettingsView />}
-        {page == "enrichments" && (
-          <EnrichmentsSettingsView setUnsavedChanges={setUnsavedChanges} />
-        )}
-        {page == "debug" && (
-          <ObjectSettingsView selectedCamera={selectedCamera} />
-        )}
-        {page == "cameras" && (
-          <CameraSettingsView
+                ) : undefined
+              }
+            >
+              <MobilePageTitle>{t("menu." + page)}</MobilePageTitle>
+            </MobilePageHeader>
+
+            <div className="p-2">
+              {(() => {
+                const CurrentComponent = getCurrentComponent(page);
+                if (!CurrentComponent) return null;
+                return (
+                  <CurrentComponent
                     selectedCamera={selectedCamera}
                     setUnsavedChanges={setUnsavedChanges}
-          />
-        )}
-        {page == "masksAndZones" && (
-          <MasksAndZonesView
-            selectedCamera={selectedCamera}
                     selectedZoneMask={filterZoneMask}
-            setUnsavedChanges={setUnsavedChanges}
                   />
-        )}
-        {page == "motionTuner" && (
-          <MotionTunerView
-            selectedCamera={selectedCamera}
-            setUnsavedChanges={setUnsavedChanges}
-          />
-        )}
-        {page === "triggers" && (
-          <TriggerView
-            selectedCamera={selectedCamera}
-            setUnsavedChanges={setUnsavedChanges}
-          />
-        )}
-        {page == "users" && <UsersView />}
-        {page == "roles" && <RolesView />}
-        {page == "notifications" && (
-          <NotificationView setUnsavedChanges={setUnsavedChanges} />
-        )}
-        {page == "frigateplus" && (
-          <FrigatePlusSettingsView setUnsavedChanges={setUnsavedChanges} />
-        )}
+                );
+              })()}
             </div>
+          </MobilePageContent>
+        </MobilePage>
         {confirmationDialogOpen && (
           <AlertDialog
             open={confirmationDialogOpen}
@@ -324,6 +414,166 @@ export default function Settings() {
             </AlertDialogContent>
           </AlertDialog>
         )}
+      </>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center justify-between border-b border-secondary p-3">
+        <Heading as="h3" className="mb-0">
+          {t("settings", { ns: "common" })}
+        </Heading>
+        {[
+          "debug",
+          "cameras",
+          "masksAndZones",
+          "motionTuner",
+          "triggers",
+        ].includes(page) && (
+          <div className="flex items-center gap-2">
+            {pageToggle == "masksAndZones" && (
+              <ZoneMaskFilterButton
+                selectedZoneMask={filterZoneMask}
+                updateZoneMaskFilter={setFilterZoneMask}
+              />
+            )}
+            <CameraSelectButton
+              allCameras={cameras}
+              selectedCamera={selectedCamera}
+              setSelectedCamera={setSelectedCamera}
+              cameraEnabledStates={cameraEnabledStates}
+              currentPage={page}
+            />
+          </div>
+        )}
+      </div>
+      <SidebarProvider className="md:h-dvh md:pb-24">
+        <Sidebar variant="inset" className="relative mb-8 pt-0">
+          <SidebarContent className="border-r-[1px] border-secondary bg-background pt-2">
+            <SidebarMenu>
+              {settingsGroups.map((group) => {
+                const filteredItems = group.items.filter((item) =>
+                  visibleSettingsViews.includes(item.key as SettingsType),
+                );
+                if (filteredItems.length === 0) return null;
+                return (
+                  <SidebarGroup key={group.label} className="py-1">
+                    {filteredItems.length === 1 ? (
+                      <SidebarMenu>
+                        <SidebarMenuItem>
+                          <SidebarMenuButton
+                            className="ml-0 pl-0"
+                            isActive={pageToggle === filteredItems[0].key}
+                            onClick={() => {
+                              if (
+                                !isAdmin &&
+                                !allowedViewsForViewer.includes(
+                                  filteredItems[0].key as SettingsType,
+                                )
+                              ) {
+                                setPageToggle("ui");
+                              } else {
+                                setPageToggle(
+                                  filteredItems[0].key as SettingsType,
+                                );
+                              }
+                            }}
+                          >
+                            <div className="smart-capitalize">
+                              {t("menu." + filteredItems[0].key)}
+                            </div>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      </SidebarMenu>
+                    ) : (
+                      <>
+                        <SidebarGroupLabel
+                          className={cn(
+                            "ml-0 cursor-default pl-0 text-sm",
+                            filteredItems.some(
+                              (item) => pageToggle === item.key,
+                            )
+                              ? "text-primary"
+                              : "text-sidebar-foreground/80",
+                          )}
+                        >
+                          {group.label}
+                        </SidebarGroupLabel>
+                        <SidebarMenuSub className="mx-1 border-0">
+                          {filteredItems.map((item) => (
+                            <SidebarMenuSubItem key={item.key}>
+                              <SidebarMenuSubButton
+                                isActive={pageToggle === item.key}
+                                onClick={() => {
+                                  if (
+                                    !isAdmin &&
+                                    !allowedViewsForViewer.includes(
+                                      item.key as SettingsType,
+                                    )
+                                  ) {
+                                    setPageToggle("ui");
+                                  } else {
+                                    setPageToggle(item.key as SettingsType);
+                                  }
+                                }}
+                              >
+                                <div className="w-full cursor-pointer smart-capitalize">
+                                  {t("menu." + item.key)}
+                                </div>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      </>
+                    )}
+                  </SidebarGroup>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarContent>
+        </Sidebar>
+        <SidebarInset>
+          <div className="flex-1 overflow-auto p-2 pr-0">
+            {(() => {
+              const CurrentComponent = getCurrentComponent(page);
+              if (!CurrentComponent) return null;
+              return (
+                <CurrentComponent
+                  selectedCamera={selectedCamera}
+                  setUnsavedChanges={setUnsavedChanges}
+                  selectedZoneMask={filterZoneMask}
+                />
+              );
+            })()}
+          </div>
+        </SidebarInset>
+        {confirmationDialogOpen && (
+          <AlertDialog
+            open={confirmationDialogOpen}
+            onOpenChange={() => setConfirmationDialogOpen(false)}
+          >
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>
+                  {t("dialog.unsavedChanges.title")}
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  {t("dialog.unsavedChanges.desc")}
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel onClick={() => handleDialog(false)}>
+                  {t("button.cancel", { ns: "common" })}
+                </AlertDialogCancel>
+                <AlertDialogAction onClick={() => handleDialog(true)}>
+                  {t("button.save", { ns: "common" })}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        )}
+      </SidebarProvider>
     </div>
   );
 }

web/src/views/settings/AuthenticationView.tsx

@@ -405,9 +405,9 @@ export default function AuthenticationView({
   // Users section
   const UsersSection = (
     <>
-      <div className="mb-5 flex flex-row items-center justify-between gap-2">
+      <div className="mb-5 flex flex-row items-center justify-between gap-2 md:pr-2">
         <div className="flex flex-col items-start">
-          <Heading as="h3" className="my-2">
+          <Heading as="h4" className="mb-2">
             {t("users.management.title")}
           </Heading>
           <p className="text-sm text-muted-foreground">
@@ -425,7 +425,7 @@ export default function AuthenticationView({
         </Button>
       </div>
       <div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-        <div className="scrollbar-container flex-1 overflow-hidden rounded-lg border border-border bg-background_alt">
+        <div className="scrollbar-container flex-1 overflow-hidden rounded-lg border border-border bg-background_alt md:mr-2">
           <div className="h-full overflow-auto">
             <Table>
               <TableHeader className="sticky top-0 bg-muted/50">
@@ -594,9 +594,9 @@ export default function AuthenticationView({
   // Roles section
   const RolesSection = (
     <>
-      <div className="mb-5 flex flex-row items-center justify-between gap-2">
+      <div className="mb-5 flex flex-row items-center justify-between gap-2 md:pr-2">
         <div className="flex flex-col items-start">
-          <Heading as="h3" className="my-2">
+          <Heading as="h4" className="mb-2">
             {t("roles.management.title")}
           </Heading>
           <p className="text-sm text-muted-foreground">
@@ -614,7 +614,7 @@ export default function AuthenticationView({
         </Button>
       </div>
       <div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-        <div className="scrollbar-container flex-1 overflow-hidden rounded-lg border border-border bg-background_alt">
+        <div className="scrollbar-container flex-1 overflow-hidden rounded-lg border border-border bg-background_alt md:mr-2">
           <div className="h-full overflow-auto">
             <Table>
               <TableHeader className="sticky top-0 bg-muted/50">
@@ -784,7 +784,7 @@ export default function AuthenticationView({
   return (
     <div className="flex size-full flex-col">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
+      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mr-2 md:mt-0">
         {section === "users" && UsersSection}
         {section === "roles" && RolesSection}
         {!section && (

web/src/views/settings/CameraSettingsView.tsx

@@ -313,10 +313,10 @@ export default function CameraSettingsView({
     <>
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
-        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
+        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
           {viewMode === "settings" ? (
             <>
-              <Heading as="h3" className="my-2">
+              <Heading as="h4" className="mb-2">
                 {t("camera.title")}
               </Heading>
               <div className="mb-4 flex flex-col gap-4">

web/src/views/settings/EnrichmentsSettingsView.tsx

@@ -244,8 +244,8 @@ export default function EnrichmentsSettingsView({
   return (
     <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
-        <Heading as="h3" className="my-2">
+      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+        <Heading as="h4" className="mb-2">
           {t("enrichments.title")}
         </Heading>
         <Separator className="my-2 flex bg-secondary" />

web/src/views/settings/FrigatePlusSettingsView.tsx

@@ -211,8 +211,8 @@ export default function FrigatePlusSettingsView({
     <>
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
-        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
-          <Heading as="h3" className="my-2">
+        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+          <Heading as="h4" className="mb-2">
             {t("frigatePlus.title")}
           </Heading>
 

web/src/views/settings/MasksAndZonesView.tsx

@@ -433,7 +433,7 @@ export default function MasksAndZonesView({
       {cameraConfig && editingPolygons && (
         <div className="flex size-full flex-col md:flex-row">
           <Toaster position="top-center" closeButton={true} />
-          <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
+          <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mr-2 md:mt-0 md:w-3/12">
             {editPane == "zone" && (
               <ZoneEditPane
                 polygons={editingPolygons}
@@ -482,7 +482,7 @@ export default function MasksAndZonesView({
             )}
             {editPane === undefined && (
               <>
-                <Heading as="h3" className="my-2">
+                <Heading as="h4" className="mb-2">
                   {t("menu.masksAndZones")}
                 </Heading>
                 <div className="flex w-full flex-col">

web/src/views/settings/MotionTunerView.tsx

@@ -191,8 +191,8 @@ export default function MotionTunerView({
   return (
     <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
-        <Heading as="h3" className="my-2">
+      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mr-2 md:mt-0 md:w-3/12">
+        <Heading as="h4" className="mb-2">
           {t("motionDetectionTuner.title")}
         </Heading>
         <div className="my-3 space-y-3 text-sm text-muted-foreground">

web/src/views/settings/NotificationsSettingsView.tsx

@@ -331,10 +331,10 @@ export default function NotificationView({
 
   if (!("Notification" in window) || !window.isSecureContext) {
     return (
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
+      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
         <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
           <div className="col-span-1">
-            <Heading as="h3" className="my-2">
+            <Heading as="h4" className="mb-2">
               {t("notification.notificationSettings.title")}
             </Heading>
             <div className="max-w-6xl">
@@ -385,14 +385,14 @@ export default function NotificationView({
     <>
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
-        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
+        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto p-2 md:order-none">
           <div
             className={cn(
               isAdmin && "grid w-full grid-cols-1 gap-4 md:grid-cols-2",
             )}
           >
             <div className="col-span-1">
-              <Heading as="h3" className="my-2">
+              <Heading as="h4" className="mb-2">
                 {t("notification.notificationSettings.title")}
               </Heading>
 

web/src/views/settings/ObjectSettingsView.tsx

@@ -164,8 +164,8 @@ export default function ObjectSettingsView({
   return (
     <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
-        <Heading as="h3" className="my-2">
+      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:w-3/12">
+        <Heading as="h4" className="mb-2">
           {t("debug.title")}
         </Heading>
         <div className="mb-5 space-y-3 text-sm text-muted-foreground">

web/src/views/settings/TriggerView.tsx

@@ -414,11 +414,11 @@ export default function TriggerView({
   return (
     <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
+      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
         {!isSemanticSearchEnabled ? (
           <div className="mb-5 flex flex-row items-center justify-between gap-2">
             <div className="flex flex-col items-start">
-              <Heading as="h3" className="my-2">
+              <Heading as="h4" className="mb-2">
                 {t("triggers.management.title")}
               </Heading>
               <p className="mb-5 text-sm text-muted-foreground">
@@ -452,7 +452,7 @@ export default function TriggerView({
           <>
             <div className="mb-5 flex flex-row items-center justify-between gap-2">
               <div className="flex flex-col items-start">
-                <Heading as="h3" className="my-2">
+                <Heading as="h4" className="mb-2">
                   {t("triggers.management.title")}
                 </Heading>
                 <p className="text-sm text-muted-foreground">

web/src/views/settings/UiSettingsView.tsx

@@ -100,8 +100,8 @@ export default function UiSettingsView() {
     <>
       <div className="flex size-full flex-col md:flex-row">
         <Toaster position="top-center" closeButton={true} />
-        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
-          <Heading as="h3" className="my-2">
+        <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none">
+          <Heading as="h4" className="mb-2">
             {t("general.title")}
           </Heading>
 

web/tailwind.config.cjs

@@ -119,12 +119,12 @@ module.exports = {
           DEFAULT: "hsl(var(--neutral_variant))",
         },
         sidebar: {
-          DEFAULT: "hsl(var(--secondary))",
+          DEFAULT: "hsl(var(--background))",
           foreground: "hsl(var(--secondary-foreground))",
           primary: "hsl(var(--primary))",
           "primary-foreground": "hsl(var(--primary-foreground))",
-          accent: "hsl(var(--primary-variant))",
-          "accent-foreground": "hsl(var(--primary-foreground))",
+          accent: "hsl(var(--background-alt))",
+          "accent-foreground": "hsl(var(--primary))",
           border: "hsl(var(--border))",
           ring: "hsl(var(--ring))",
         },