Settings UI tweaks (#22547)

* fix genai settings ui

- add roles widget to select roles for genai providers
- add dropdown in semantic search to allow selection of embeddings genai provider

* tweak grouping to prioritize fieldOrder before groups

previously, groups were always rendered first. now fieldOrder is respected, and any fields in a group will cause the group and all the fields in that group to be rendered in order. this allows moving the enabled switches to the top of the section

* mobile tweaks

stack buttons, add more space on profiles pane, and move the overridden badge beneath the description

* language consistency

* prevent camera config sections from being regenerated for profiles

* conditionally import axengine module

to match other detectors

* i18n

* update vscode launch.json for new integrated browser

* formatting

web/src/views/settings/SingleSectionPage.tsx

@@ -131,34 +131,35 @@ export function SingleSectionPage({
 
   return (
     <div className="flex size-full flex-col lg:pr-2">
-      <div className="mb-5 flex items-center justify-between gap-4">
-        <div className="flex flex-col">
-          <Heading as="h4">
-            {t(`${sectionKey}.label`, { ns: sectionNamespace })}
-          </Heading>
-          {i18n.exists(`${sectionKey}.description`, {
-            ns: sectionNamespace,
-          }) && (
-            <div className="my-1 text-sm text-muted-foreground">
-              {t(`${sectionKey}.description`, { ns: sectionNamespace })}
-            </div>
-          )}
-          {sectionDocsUrl && (
-            <div className="flex items-center text-sm text-primary-variant">
-              <Link
-                to={sectionDocsUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline"
-              >
-                {t("readTheDocumentation", { ns: "common" })}
-                <LuExternalLink className="ml-2 inline-flex size-3" />
-              </Link>
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col items-end gap-2 md:flex-row md:items-center">
-          <div className="flex flex-wrap items-center justify-end gap-2">
+      <div className="mb-5 flex flex-col gap-2">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex flex-col">
+            <Heading as="h4">
+              {t(`${sectionKey}.label`, { ns: sectionNamespace })}
+            </Heading>
+            {i18n.exists(`${sectionKey}.description`, {
+              ns: sectionNamespace,
+            }) && (
+              <div className="my-1 text-sm text-muted-foreground">
+                {t(`${sectionKey}.description`, { ns: sectionNamespace })}
+              </div>
+            )}
+            {sectionDocsUrl && (
+              <div className="flex items-center text-sm text-primary-variant">
+                <Link
+                  to={sectionDocsUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline"
+                >
+                  {t("readTheDocumentation", { ns: "common" })}
+                  <LuExternalLink className="ml-2 inline-flex size-3" />
+                </Link>
+              </div>
+            )}
+          </div>
+          {/* Desktop: badge inline next to title */}
+          <div className="hidden shrink-0 sm:flex sm:flex-wrap sm:items-center sm:gap-2">
             {level === "camera" &&
               showOverrideIndicator &&
               sectionStatus.isOverridden && (
@@ -211,6 +212,40 @@ export function SingleSectionPage({
             )}
           </div>
         </div>
+        {/* Mobile: badge below title/description */}
+        <div className="flex flex-wrap items-center gap-2 sm:hidden">
+          {level === "camera" &&
+            showOverrideIndicator &&
+            sectionStatus.isOverridden && (
+              <Badge
+                variant="secondary"
+                className={cn(
+                  "cursor-default border-2 text-center text-xs text-primary-variant",
+                  sectionStatus.overrideSource === "profile" && profileColor
+                    ? profileColor.border
+                    : "border-selected",
+                )}
+              >
+                {sectionStatus.overrideSource === "profile"
+                  ? t("button.overriddenBaseConfig", {
+                      ns: "views/settings",
+                      defaultValue: "Overridden (Base Config)",
+                    })
+                  : t("button.overriddenGlobal", {
+                      ns: "views/settings",
+                      defaultValue: "Overridden (Global)",
+                    })}
+              </Badge>
+            )}
+          {sectionStatus.hasChanges && (
+            <Badge
+              variant="secondary"
+              className="cursor-default bg-danger text-xs text-white hover:bg-danger"
+            >
+              {t("modified", { ns: "common", defaultValue: "Modified" })}
+            </Badge>
+          )}
+        </div>
       </div>
       <ConfigSectionTemplate
         sectionKey={sectionKey}