configure for full i18n support

web/src/views/settings/CameraConfigView.tsx

@@ -1,27 +1,26 @@
 // Camera Configuration View
 // Per-camera configuration with tab navigation and override indicators
 
-import { useMemo, useCallback, useState } from "react";
+import { useMemo, useCallback, useState, memo } from "react";
 import useSWR from "swr";
 import { useTranslation } from "react-i18next";
-import {
-  DetectSection,
-  RecordSection,
-  SnapshotsSection,
-  MotionSection,
-  ObjectsSection,
-  ReviewSection,
-  AudioSection,
-  NotificationsSection,
-  LiveSection,
-  TimestampSection,
-} from "@/components/config-form/sections";
+import { DetectSection } from "@/components/config-form/sections/DetectSection";
+import { RecordSection } from "@/components/config-form/sections/RecordSection";
+import { SnapshotsSection } from "@/components/config-form/sections/SnapshotsSection";
+import { MotionSection } from "@/components/config-form/sections/MotionSection";
+import { ObjectsSection } from "@/components/config-form/sections/ObjectsSection";
+import { ReviewSection } from "@/components/config-form/sections/ReviewSection";
+import { AudioSection } from "@/components/config-form/sections/AudioSection";
+import { NotificationsSection } from "@/components/config-form/sections/NotificationsSection";
+import { LiveSection } from "@/components/config-form/sections/LiveSection";
+import { TimestampSection } from "@/components/config-form/sections/TimestampSection";
 import { useAllCameraOverrides } from "@/hooks/use-config-override";
 import type { FrigateConfig } from "@/types/frigateConfig";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Badge } from "@/components/ui/badge";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import Heading from "@/components/ui/heading";
 import { cn } from "@/lib/utils";
 
 interface CameraConfigViewProps {
@@ -83,14 +82,14 @@ export default function CameraConfigView({
   }
 
   return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-2xl font-bold tracking-tight">
+    <div className="flex size-full flex-col">
+      <div className="mb-4">
+        <Heading as="h2">
           {t("configForm.camera.title", {
             defaultValue: "Camera Configuration",
           })}
-        </h2>
-        <p className="text-muted-foreground">
+        </Heading>
+        <p className="text-sm text-muted-foreground">
           {t("configForm.camera.description", {
             defaultValue:
               "Configure settings for individual cameras. Overridden settings are highlighted.",
@@ -103,7 +102,7 @@ export default function CameraConfigView({
         <Tabs
           value={selectedCamera}
           onValueChange={handleCameraChange}
-          className="w-full"
+          className="flex flex-1 flex-col"
         >
           <ScrollArea className="w-full">
             <TabsList className="inline-flex w-max">
@@ -134,7 +133,7 @@ export default function CameraConfigView({
           </ScrollArea>
 
           {cameras.map((camera) => (
-            <TabsContent key={camera} value={camera} className="mt-4">
+            <TabsContent key={camera} value={camera} className="mt-4 flex-1">
               <CameraConfigContent
                 cameraName={camera}
                 config={config}
@@ -166,13 +165,26 @@ interface CameraConfigContentProps {
   onSave: () => void;
 }
 
-function CameraConfigContent({
+const CameraConfigContent = memo(function CameraConfigContent({
   cameraName,
   config,
   overriddenSections,
   onSave,
 }: CameraConfigContentProps) {
-  const { t } = useTranslation(["views/settings"]);
+  const { t } = useTranslation([
+    "config/detect",
+    "config/record",
+    "config/snapshots",
+    "config/motion",
+    "config/objects",
+    "config/review",
+    "config/audio",
+    "config/notifications",
+    "config/live",
+    "config/timestamp_style",
+    "views/settings",
+    "common",
+  ]);
   const [activeSection, setActiveSection] = useState("detect");
 
   const cameraConfig = config.cameras?.[cameraName];
@@ -180,35 +192,73 @@ function CameraConfigContent({
   if (!cameraConfig) {
     return (
       <div className="text-muted-foreground">
-        {t("configForm.camera.notFound", { defaultValue: "Camera not found" })}
+        {t("configForm.camera.notFound", {
+          ns: "views/settings",
+          defaultValue: "Camera not found",
+        })}
       </div>
     );
   }
 
   const sections = [
-    { key: "detect", label: "Detect", component: DetectSection },
-    { key: "record", label: "Record", component: RecordSection },
-    { key: "snapshots", label: "Snapshots", component: SnapshotsSection },
-    { key: "motion", label: "Motion", component: MotionSection },
-    { key: "objects", label: "Objects", component: ObjectsSection },
-    { key: "review", label: "Review", component: ReviewSection },
-    { key: "audio", label: "Audio", component: AudioSection },
+    {
+      key: "detect",
+      i18nNamespace: "config/detect",
+      component: DetectSection,
+    },
+    {
+      key: "record",
+      i18nNamespace: "config/record",
+      component: RecordSection,
+    },
+    {
+      key: "snapshots",
+      i18nNamespace: "config/snapshots",
+      component: SnapshotsSection,
+    },
+    {
+      key: "motion",
+      i18nNamespace: "config/motion",
+      component: MotionSection,
+    },
+    {
+      key: "objects",
+      i18nNamespace: "config/objects",
+      component: ObjectsSection,
+    },
+    {
+      key: "review",
+      i18nNamespace: "config/review",
+      component: ReviewSection,
+    },
+    { key: "audio", i18nNamespace: "config/audio", component: AudioSection },
     {
       key: "notifications",
-      label: "Notifications",
+      i18nNamespace: "config/notifications",
       component: NotificationsSection,
     },
-    { key: "live", label: "Live", component: LiveSection },
-    { key: "timestamp_style", label: "Timestamp", component: TimestampSection },
+    { key: "live", i18nNamespace: "config/live", component: LiveSection },
+    {
+      key: "timestamp_style",
+      i18nNamespace: "config/timestamp_style",
+      component: TimestampSection,
+    },
   ];
 
   return (
-    <div className="flex gap-6">
+    <div className="flex flex-1 gap-6 overflow-hidden">
       {/* Section Navigation */}
       <nav className="w-48 shrink-0">
         <ul className="space-y-1">
           {sections.map((section) => {
             const isOverridden = overriddenSections.includes(section.key);
+            const sectionLabel = t("label", {
+              ns: section.i18nNamespace,
+              defaultValue:
+                section.key.charAt(0).toUpperCase() +
+                section.key.slice(1).replace(/_/g, " "),
+            });
+
             return (
               <li key={section.key}>
                 <button
@@ -220,14 +270,13 @@ function CameraConfigContent({
                       : "hover:bg-muted",
                   )}
                 >
-                  <span>
-                    {t(`configForm.${section.key}.title`, {
-                      defaultValue: section.label,
-                    })}
-                  </span>
+                  <span>{sectionLabel}</span>
                   {isOverridden && (
                     <Badge variant="secondary" className="h-5 px-1.5 text-xs">
-                      {t("common.modified", { defaultValue: "Modified" })}
+                      {t("button.modified", {
+                        ns: "common",
+                        defaultValue: "Modified",
+                      })}
                     </Badge>
                   )}
                 </button>
@@ -238,28 +287,25 @@ function CameraConfigContent({
       </nav>
 
       {/* Section Content */}
-      <ScrollArea className="h-[calc(100vh-300px)] flex-1">
-        <div className="pr-4">
-          {sections.map((section) => {
-            const SectionComponent = section.component;
-            return (
-              <div
-                key={section.key}
-                className={cn(
-                  activeSection === section.key ? "block" : "hidden",
-                )}
-              >
-                <SectionComponent
-                  level="camera"
-                  cameraName={cameraName}
-                  showOverrideIndicator
-                  onSave={onSave}
-                />
-              </div>
-            );
-          })}
-        </div>
-      </ScrollArea>
+      <div className="scrollbar-container flex-1 overflow-y-auto pr-4">
+        {sections.map((section) => {
+          const SectionComponent = section.component;
+          return (
+            <div
+              key={section.key}
+              className={cn(activeSection === section.key ? "block" : "hidden")}
+            >
+              <SectionComponent
+                level="camera"
+                cameraName={cameraName}
+                showOverrideIndicator
+                onSave={onSave}
+                showTitle={true}
+              />
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
-}
+});

web/src/views/settings/GlobalConfigView.tsx

@@ -1,38 +1,75 @@
 // Global Configuration View
 // Main view for configuring global Frigate settings
 
-import { useMemo, useCallback, useState } from "react";
+import { useMemo, useCallback, useState, memo } from "react";
 import useSWR from "swr";
 import axios from "axios";
 import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
 import { ConfigForm } from "@/components/config-form/ConfigForm";
-import {
-  DetectSection,
-  RecordSection,
-  SnapshotsSection,
-  MotionSection,
-  ObjectsSection,
-  ReviewSection,
-  AudioSection,
-  NotificationsSection,
-  LiveSection,
-  TimestampSection,
-} from "@/components/config-form/sections";
+import { DetectSection } from "@/components/config-form/sections/DetectSection";
+import { RecordSection } from "@/components/config-form/sections/RecordSection";
+import { SnapshotsSection } from "@/components/config-form/sections/SnapshotsSection";
+import { MotionSection } from "@/components/config-form/sections/MotionSection";
+import { ObjectsSection } from "@/components/config-form/sections/ObjectsSection";
+import { ReviewSection } from "@/components/config-form/sections/ReviewSection";
+import { AudioSection } from "@/components/config-form/sections/AudioSection";
+import { NotificationsSection } from "@/components/config-form/sections/NotificationsSection";
+import { LiveSection } from "@/components/config-form/sections/LiveSection";
+import { TimestampSection } from "@/components/config-form/sections/TimestampSection";
 import type { RJSFSchema } from "@rjsf/utils";
 import type { FrigateConfig } from "@/types/frigateConfig";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
 import { extractSchemaSection } from "@/lib/config-schema";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import Heading from "@/components/ui/heading";
+import { LuSave } from "react-icons/lu";
+import isEqual from "lodash/isEqual";
+import { cn } from "@/lib/utils";
 
-// Section configurations for global-only settings
+// Shared sections that can be overridden at camera level
+const sharedSections = [
+  { key: "detect", i18nNamespace: "config/detect", component: DetectSection },
+  { key: "record", i18nNamespace: "config/record", component: RecordSection },
+  {
+    key: "snapshots",
+    i18nNamespace: "config/snapshots",
+    component: SnapshotsSection,
+  },
+  { key: "motion", i18nNamespace: "config/motion", component: MotionSection },
+  {
+    key: "objects",
+    i18nNamespace: "config/objects",
+    component: ObjectsSection,
+  },
+  { key: "review", i18nNamespace: "config/review", component: ReviewSection },
+  { key: "audio", i18nNamespace: "config/audio", component: AudioSection },
+  {
+    key: "notifications",
+    i18nNamespace: "config/notifications",
+    component: NotificationsSection,
+  },
+  { key: "live", i18nNamespace: "config/live", component: LiveSection },
+  {
+    key: "timestamp_style",
+    i18nNamespace: "config/timestamp_style",
+    component: TimestampSection,
+  },
+];
+
+// Section configurations for global-only settings (system and integrations)
 const globalSectionConfigs: Record<
   string,
-  { fieldOrder?: string[]; hiddenFields?: string[]; advancedFields?: string[] }
+  {
+    fieldOrder?: string[];
+    hiddenFields?: string[];
+    advancedFields?: string[];
+    i18nNamespace: string;
+  }
 > = {
   mqtt: {
+    i18nNamespace: "config/mqtt",
     fieldOrder: [
       "enabled",
       "host",
@@ -56,10 +93,12 @@ const globalSectionConfigs: Record<
     ],
   },
   database: {
+    i18nNamespace: "config/database",
     fieldOrder: ["path"],
     advancedFields: [],
   },
   auth: {
+    i18nNamespace: "config/auth",
     fieldOrder: [
       "enabled",
       "reset_admin_password",
@@ -70,14 +109,17 @@ const globalSectionConfigs: Record<
     advancedFields: ["failed_login_rate_limit", "trusted_proxies"],
   },
   tls: {
+    i18nNamespace: "config/tls",
     fieldOrder: ["enabled", "cert", "key"],
     advancedFields: [],
   },
   telemetry: {
+    i18nNamespace: "config/telemetry",
     fieldOrder: ["network_interfaces", "stats", "version_check"],
     advancedFields: ["stats"],
   },
   birdseye: {
+    i18nNamespace: "config/birdseye",
     fieldOrder: [
       "enabled",
       "restream",
@@ -91,14 +133,17 @@ const globalSectionConfigs: Record<
     advancedFields: ["width", "height", "quality", "inactivity_threshold"],
   },
   semantic_search: {
+    i18nNamespace: "config/semantic_search",
     fieldOrder: ["enabled", "reindex", "model_size"],
     advancedFields: ["reindex"],
   },
   face_recognition: {
+    i18nNamespace: "config/face_recognition",
     fieldOrder: ["enabled", "threshold", "min_area", "model_size"],
     advancedFields: ["threshold", "min_area"],
   },
   lpr: {
+    i18nNamespace: "config/lpr",
     fieldOrder: [
       "enabled",
       "threshold",
@@ -111,6 +156,17 @@ const globalSectionConfigs: Record<
   },
 };
 
+// System sections (global only)
+const systemSections = ["database", "tls", "auth", "telemetry", "birdseye"];
+
+// Integration sections (global only)
+const integrationSections = [
+  "mqtt",
+  "semantic_search",
+  "face_recognition",
+  "lpr",
+];
+
 interface GlobalConfigSectionProps {
   sectionKey: string;
   schema: RJSFSchema | null;
@@ -118,13 +174,23 @@ interface GlobalConfigSectionProps {
   onSave: () => void;
 }
 
-function GlobalConfigSection({
+const GlobalConfigSection = memo(function GlobalConfigSection({
   sectionKey,
   schema,
   config,
   onSave,
 }: GlobalConfigSectionProps) {
-  const { t } = useTranslation(["views/settings"]);
+  const sectionConfig = globalSectionConfigs[sectionKey];
+  const { t } = useTranslation([
+    sectionConfig?.i18nNamespace || "common",
+    "views/settings",
+    "common",
+  ]);
+  const [pendingData, setPendingData] = useState<Record<
+    string,
+    unknown
+  > | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
 
   const formData = useMemo((): Record<string, unknown> => {
     if (!config) return {} as Record<string, unknown>;
@@ -134,67 +200,118 @@ function GlobalConfigSection({
     );
   }, [config, sectionKey]);
 
-  const handleSubmit = useCallback(
-    async (data: Record<string, unknown>) => {
-      try {
-        await axios.put("config/set", {
-          requires_restart: 1,
-          config_data: {
-            [sectionKey]: data,
-          },
-        });
+  const hasChanges = useMemo(() => {
+    if (!pendingData) return false;
+    return !isEqual(formData, pendingData);
+  }, [formData, pendingData]);
 
-        toast.success(
-          t(`configForm.${sectionKey}.toast.success`, {
-            defaultValue: "Settings saved successfully",
-          }),
-        );
+  const handleChange = useCallback((data: Record<string, unknown>) => {
+    setPendingData(data);
+  }, []);
 
-        onSave();
-      } catch (error) {
-        toast.error(
-          t(`configForm.${sectionKey}.toast.error`, {
-            defaultValue: "Failed to save settings",
-          }),
-        );
-      }
-    },
-    [sectionKey, t, onSave],
-  );
+  const handleSave = useCallback(async () => {
+    if (!pendingData) return;
 
-  if (!schema) {
+    setIsSaving(true);
+    try {
+      await axios.put("config/set", {
+        requires_restart: 1,
+        config_data: {
+          [sectionKey]: pendingData,
+        },
+      });
+
+      toast.success(
+        t("toast.success", {
+          ns: "views/settings",
+          defaultValue: "Settings saved successfully",
+        }),
+      );
+
+      setPendingData(null);
+      onSave();
+    } catch {
+      toast.error(
+        t("toast.error", {
+          ns: "views/settings",
+          defaultValue: "Failed to save settings",
+        }),
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  }, [sectionKey, pendingData, t, onSave]);
+
+  if (!schema || !sectionConfig) {
     return null;
   }
 
-  const sectionConfig = globalSectionConfigs[sectionKey] || {};
-
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-lg">
-          {t(`configForm.${sectionKey}.title`, {
-            defaultValue:
-              sectionKey.charAt(0).toUpperCase() + sectionKey.slice(1),
-          })}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <ConfigForm
-          schema={schema}
-          formData={formData}
-          onSubmit={handleSubmit}
-          fieldOrder={sectionConfig.fieldOrder}
-          hiddenFields={sectionConfig.hiddenFields}
-          advancedFields={sectionConfig.advancedFields}
-        />
-      </CardContent>
-    </Card>
+    <div className="space-y-4">
+      <ConfigForm
+        schema={schema}
+        formData={pendingData || formData}
+        onChange={handleChange}
+        fieldOrder={sectionConfig.fieldOrder}
+        hiddenFields={sectionConfig.hiddenFields}
+        advancedFields={sectionConfig.advancedFields}
+        showSubmit={false}
+        i18nNamespace={sectionConfig.i18nNamespace}
+        disabled={isSaving}
+      />
+
+      <div className="flex items-center justify-between pt-2">
+        <div>
+          {hasChanges && (
+            <span className="text-sm text-muted-foreground">
+              {t("unsavedChanges", {
+                ns: "views/settings",
+                defaultValue: "You have unsaved changes",
+              })}
+            </span>
+          )}
+        </div>
+        <Button
+          onClick={handleSave}
+          disabled={!hasChanges || isSaving}
+          className="gap-2"
+        >
+          <LuSave className="h-4 w-4" />
+          {isSaving
+            ? t("saving", { ns: "common", defaultValue: "Saving..." })
+            : t("save", { ns: "common", defaultValue: "Save" })}
+        </Button>
+      </div>
+    </div>
   );
-}
+});
 
 export default function GlobalConfigView() {
-  const { t } = useTranslation(["views/settings"]);
+  const { t } = useTranslation([
+    "views/settings",
+    "config/detect",
+    "config/record",
+    "config/snapshots",
+    "config/motion",
+    "config/objects",
+    "config/review",
+    "config/audio",
+    "config/notifications",
+    "config/live",
+    "config/timestamp_style",
+    "config/mqtt",
+    "config/database",
+    "config/auth",
+    "config/tls",
+    "config/telemetry",
+    "config/birdseye",
+    "config/semantic_search",
+    "config/face_recognition",
+    "config/lpr",
+    "common",
+  ]);
   const [activeTab, setActiveTab] = useState("shared");
+  const [activeSection, setActiveSection] = useState("detect");
 
   const { data: config, mutate: refreshConfig } =
     useSWR<FrigateConfig>("config");
@@ -204,6 +321,37 @@ export default function GlobalConfigView() {
     refreshConfig();
   }, [refreshConfig]);
 
+  // Get the sections for the current tab
+  const currentSections = useMemo(() => {
+    if (activeTab === "shared") {
+      return sharedSections;
+    } else if (activeTab === "system") {
+      return systemSections.map((key) => ({
+        key,
+        i18nNamespace: globalSectionConfigs[key].i18nNamespace,
+        component: null, // Uses GlobalConfigSection instead
+      }));
+    } else {
+      return integrationSections.map((key) => ({
+        key,
+        i18nNamespace: globalSectionConfigs[key].i18nNamespace,
+        component: null,
+      }));
+    }
+  }, [activeTab]);
+
+  // Reset active section when tab changes
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab);
+    if (tab === "shared") {
+      setActiveSection("detect");
+    } else if (tab === "system") {
+      setActiveSection("database");
+    } else {
+      setActiveSection("mqtt");
+    }
+  }, []);
+
   if (!config || !schema) {
     return (
       <div className="flex h-full items-center justify-center">
@@ -213,14 +361,14 @@ export default function GlobalConfigView() {
   }
 
   return (
-    <div className="space-y-6">
-      <div>
-        <h2 className="text-2xl font-bold tracking-tight">
+    <div className="flex size-full flex-col">
+      <div className="mb-4">
+        <Heading as="h2">
           {t("configForm.global.title", {
             defaultValue: "Global Configuration",
           })}
-        </h2>
-        <p className="text-muted-foreground">
+        </Heading>
+        <p className="text-sm text-muted-foreground">
           {t("configForm.global.description", {
             defaultValue:
               "Configure global settings that apply to all cameras by default.",
@@ -228,7 +376,11 @@ export default function GlobalConfigView() {
         </p>
       </div>
 
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="flex flex-1 flex-col overflow-hidden"
+      >
         <TabsList className="grid w-full grid-cols-3">
           <TabsTrigger value="shared">
             {t("configForm.global.tabs.shared", {
@@ -245,83 +397,126 @@ export default function GlobalConfigView() {
           </TabsTrigger>
         </TabsList>
 
-        <ScrollArea className="h-[calc(100vh-300px)]">
-          <TabsContent value="shared" className="space-y-6 p-1">
-            {/* Shared config sections - these can be overridden per camera */}
-            <DetectSection level="global" onSave={handleSave} />
-            <RecordSection level="global" onSave={handleSave} />
-            <SnapshotsSection level="global" onSave={handleSave} />
-            <MotionSection level="global" onSave={handleSave} />
-            <ObjectsSection level="global" onSave={handleSave} />
-            <ReviewSection level="global" onSave={handleSave} />
-            <AudioSection level="global" onSave={handleSave} />
-            <NotificationsSection level="global" onSave={handleSave} />
-            <LiveSection level="global" onSave={handleSave} />
-            <TimestampSection level="global" onSave={handleSave} />
-          </TabsContent>
+        <div className="mt-4 flex flex-1 gap-6 overflow-hidden">
+          {/* Section Navigation */}
+          <nav className="w-48 shrink-0">
+            <ul className="space-y-1">
+              {currentSections.map((section) => {
+                const sectionLabel = t("label", {
+                  ns: section.i18nNamespace,
+                  defaultValue:
+                    section.key.charAt(0).toUpperCase() +
+                    section.key.slice(1).replace(/_/g, " "),
+                });
 
-          <TabsContent value="system" className="space-y-6 p-1">
-            {/* System configuration sections */}
-            <GlobalConfigSection
-              sectionKey="database"
-              schema={extractSchemaSection(schema, "database")}
-              config={config}
-              onSave={handleSave}
-            />
-            <GlobalConfigSection
-              sectionKey="tls"
-              schema={extractSchemaSection(schema, "tls")}
-              config={config}
-              onSave={handleSave}
-            />
-            <GlobalConfigSection
-              sectionKey="auth"
-              schema={extractSchemaSection(schema, "auth")}
-              config={config}
-              onSave={handleSave}
-            />
-            <GlobalConfigSection
-              sectionKey="telemetry"
-              schema={extractSchemaSection(schema, "telemetry")}
-              config={config}
-              onSave={handleSave}
-            />
-            <GlobalConfigSection
-              sectionKey="birdseye"
-              schema={extractSchemaSection(schema, "birdseye")}
-              config={config}
-              onSave={handleSave}
-            />
-          </TabsContent>
+                return (
+                  <li key={section.key}>
+                    <button
+                      onClick={() => setActiveSection(section.key)}
+                      className={cn(
+                        "flex w-full items-center justify-between rounded-md px-3 py-2 text-sm transition-colors",
+                        activeSection === section.key
+                          ? "bg-accent text-accent-foreground"
+                          : "hover:bg-muted",
+                      )}
+                    >
+                      <span>{sectionLabel}</span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </nav>
 
-          <TabsContent value="integrations" className="space-y-6 p-1">
-            {/* Integration configuration sections */}
-            <GlobalConfigSection
-              sectionKey="mqtt"
-              schema={extractSchemaSection(schema, "mqtt")}
-              config={config}
-              onSave={handleSave}
-            />
-            <GlobalConfigSection
-              sectionKey="semantic_search"
-              schema={extractSchemaSection(schema, "semantic_search")}
-              config={config}
-              onSave={handleSave}
-            />
-            <GlobalConfigSection
-              sectionKey="face_recognition"
-              schema={extractSchemaSection(schema, "face_recognition")}
-              config={config}
-              onSave={handleSave}
-            />
-            <GlobalConfigSection
-              sectionKey="lpr"
-              schema={extractSchemaSection(schema, "lpr")}
-              config={config}
-              onSave={handleSave}
-            />
-          </TabsContent>
-        </ScrollArea>
+          {/* Section Content */}
+          <div className="scrollbar-container flex-1 overflow-y-auto pr-4">
+            {activeTab === "shared" && (
+              <>
+                {sharedSections.map((section) => {
+                  const SectionComponent = section.component;
+                  return (
+                    <div
+                      key={section.key}
+                      className={cn(
+                        activeSection === section.key ? "block" : "hidden",
+                      )}
+                    >
+                      <Heading as="h4" className="mb-4">
+                        {t("label", {
+                          ns: section.i18nNamespace,
+                          defaultValue:
+                            section.key.charAt(0).toUpperCase() +
+                            section.key.slice(1).replace(/_/g, " "),
+                        })}
+                      </Heading>
+                      <SectionComponent
+                        level="global"
+                        onSave={handleSave}
+                        showTitle={false}
+                      />
+                    </div>
+                  );
+                })}
+              </>
+            )}
+
+            {activeTab === "system" && (
+              <>
+                {systemSections.map((sectionKey) => (
+                  <div
+                    key={sectionKey}
+                    className={cn(
+                      activeSection === sectionKey ? "block" : "hidden",
+                    )}
+                  >
+                    <Heading as="h4" className="mb-4">
+                      {t("label", {
+                        ns: globalSectionConfigs[sectionKey].i18nNamespace,
+                        defaultValue:
+                          sectionKey.charAt(0).toUpperCase() +
+                          sectionKey.slice(1).replace(/_/g, " "),
+                      })}
+                    </Heading>
+                    <GlobalConfigSection
+                      sectionKey={sectionKey}
+                      schema={extractSchemaSection(schema, sectionKey)}
+                      config={config}
+                      onSave={handleSave}
+                    />
+                  </div>
+                ))}
+              </>
+            )}
+
+            {activeTab === "integrations" && (
+              <>
+                {integrationSections.map((sectionKey) => (
+                  <div
+                    key={sectionKey}
+                    className={cn(
+                      activeSection === sectionKey ? "block" : "hidden",
+                    )}
+                  >
+                    <Heading as="h4" className="mb-4">
+                      {t("label", {
+                        ns: globalSectionConfigs[sectionKey].i18nNamespace,
+                        defaultValue:
+                          sectionKey.charAt(0).toUpperCase() +
+                          sectionKey.slice(1).replace(/_/g, " "),
+                      })}
+                    </Heading>
+                    <GlobalConfigSection
+                      sectionKey={sectionKey}
+                      schema={extractSchemaSection(schema, sectionKey)}
+                      config={config}
+                      onSave={handleSave}
+                    />
+                  </div>
+                ))}
+              </>
+            )}
+          </div>
+        </div>
       </Tabs>
     </div>
   );