Add overflow menu to system tabs on mobile (#24543)

* add overflow menu to system tabs on mobile

* add default icon, observe measure div, fix tests

web/src/pages/System.tsx

@@ -1,8 +1,10 @@
 import useSWR from "swr";
 import { FrigateStats } from "@/types/stats";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import TimeAgo from "@/components/dynamic/TimeAgo";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Toggle } from "@/components/ui/toggle";
+import OverflowStrip from "@/components/mobile/OverflowStrip";
 import { isDesktop, isMobile } from "react-device-detect";
 import GeneralMetrics from "@/views/system/GeneralMetrics";
 import StorageMetrics from "@/views/system/StorageMetrics";
@@ -36,6 +38,14 @@ const allMetrics = [
 ] as const;
 type SystemMetric = (typeof allMetrics)[number];
 
+const metricIcons: Record<SystemMetric, ReactNode> = {
+  health: <LuHeartPulse className="size-4" />,
+  general: <LuActivity className="size-4" />,
+  enrichments: <LuSearchCode className="size-4" />,
+  storage: <LuHardDrive className="size-4" />,
+  cameras: <FaVideo className="size-4" />,
+};
+
 function System() {
   const { t } = useTranslation(["views/system"]);
   const { data: config } = useSWR<FrigateConfig>("config", {
@@ -98,43 +108,66 @@ function System() {
         {isMobile && (
           <Logo className="absolute inset-x-1/2 h-8 -translate-x-1/2" />
         )}
-        <ScrollArea className={cn("whitespace-nowrap", isMobile && "w-[45%]")}>
-          <div className="flex flex-row">
-            <ToggleGroup
-              className="*:rounded-md *:px-3 *:py-4"
-              type="single"
-              size="sm"
-              value={pageToggle}
-              onValueChange={(value: SystemMetric) => {
-                if (value) {
-                  setPageToggle(value);
-                }
-              }} // don't allow the severity to be unselected
-            >
-              {Object.values(metrics).map((item) => (
-                <ToggleGroupItem
+        {isMobile ? (
+          <div className="w-[calc(50%-1rem)]">
+            <OverflowStrip
+              items={metrics.map((item) => (
+                <Toggle
                   key={item}
-                  className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
-                  value={item}
+                  className={cn(
+                    "shrink-0 rounded-md px-3 py-4",
+                    pageToggle != item && "*:text-muted-foreground",
+                  )}
+                  size="sm"
+                  pressed={pageToggle == item}
+                  onPressedChange={() => setPageToggle(item)}
                   aria-label={t("selectItem", {
                     ns: "common",
                     item: t(item + ".title"),
                   })}
                 >
-                  {item == "health" && <LuHeartPulse className="size-4" />}
-                  {item == "general" && <LuActivity className="size-4" />}
-                  {item == "enrichments" && <LuSearchCode className="size-4" />}
-                  {item == "storage" && <LuHardDrive className="size-4" />}
-                  {item == "cameras" && <FaVideo className="size-4" />}
-                  {isDesktop && (
-                    <div className="smart-capitalize">{t(item + ".title")}</div>
-                  )}
-                </ToggleGroupItem>
+                  {metricIcons[item]}
+                </Toggle>
               ))}
-            </ToggleGroup>
-            <ScrollBar orientation="horizontal" className="h-0" />
+              activeIndex={metrics.indexOf(pageToggle)}
+              gapClassName="gap-0.5"
+              showAllLabel={t("showAllTabs")}
+              showLessLabel={t("showLessTabs")}
+            />
           </div>
-        </ScrollArea>
+        ) : (
+          <ScrollArea className="whitespace-nowrap">
+            <div className="flex flex-row">
+              <ToggleGroup
+                className="*:rounded-md *:px-3 *:py-4"
+                type="single"
+                size="sm"
+                value={pageToggle}
+                onValueChange={(value: SystemMetric) => {
+                  if (value) {
+                    setPageToggle(value);
+                  }
+                }} // don't allow the severity to be unselected
+              >
+                {Object.values(metrics).map((item) => (
+                  <ToggleGroupItem
+                    key={item}
+                    className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+                    value={item}
+                    aria-label={t("selectItem", {
+                      ns: "common",
+                      item: t(item + ".title"),
+                    })}
+                  >
+                    {metricIcons[item]}
+                    <div className="smart-capitalize">{t(item + ".title")}</div>
+                  </ToggleGroupItem>
+                ))}
+              </ToggleGroup>
+              <ScrollBar orientation="horizontal" className="h-0" />
+            </div>
+          </ScrollArea>
+        )}
 
         <div className="flex h-full items-center">
           {pageToggle == "health" && (