Tweaks (#23367)

* add ptz presets and default role widgets

* language tweaks

* fix width in triggers view

* tweak iOS PWA message in notifications settings

* deprecate ui.date_style and ui.time_style

these have been unused since date/time formatting has been pushed to i18n

* add config migrator to remove date_style and time_style

* remove date_style and time_style from reference config

* fix camera list scrolling in state classification wizard on mobile

web/src/components/config-form/theme/widgets/DefaultRoleWidget.tsx

@@ -0,0 +1,56 @@
+import { useMemo } from "react";
+import type { WidgetProps } from "@rjsf/utils";
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { ConfigFormContext } from "@/types/configForm";
+import { getSizedFieldClassName } from "../utils";
+
+const BUILT_IN_ROLES = ["admin", "viewer"];
+
+export function DefaultRoleWidget(props: WidgetProps) {
+  const { id, value, disabled, readonly, onChange, schema, options, registry } =
+    props;
+  const { t } = useTranslation(["views/settings"]);
+
+  const fieldClassName = getSizedFieldClassName(options, "sm");
+
+  const formContext = registry?.formContext as ConfigFormContext | undefined;
+  const roles = useMemo<string[]>(() => {
+    const configured = Object.keys(formContext?.fullConfig?.auth?.roles ?? {});
+    // Keep admin/viewer first, then any custom roles in config order.
+    const custom = configured.filter((r) => !BUILT_IN_ROLES.includes(r));
+    return [...BUILT_IN_ROLES, ...custom];
+  }, [formContext]);
+
+  const selectedValue = typeof value === "string" && value ? value : "viewer";
+
+  const getLabel = (role: string) =>
+    BUILT_IN_ROLES.includes(role) ? t(`configForm.defaultRole.${role}`) : role;
+
+  return (
+    <Select
+      value={selectedValue}
+      onValueChange={onChange}
+      disabled={disabled || readonly}
+    >
+      <SelectTrigger id={id} className={fieldClassName}>
+        <SelectValue placeholder={schema.title} />
+      </SelectTrigger>
+      <SelectContent>
+        {roles.map((role) => (
+          <SelectItem key={role} value={role}>
+            {getLabel(role)}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export default DefaultRoleWidget;