Miscellaneous fixes (#23648)

* sort preview cameras in history by ui order

* sort cameras by UI order in various components for consistent display

* add no recordings faq

* fix link

* recording cache faq

* add link

* improve anchor naming in object detector docs

rather than #configuration-1, #configuration-2, etc

* use yaml instead of json for object detector docs

* fix anchor

web/src/components/classification/wizard/Step2StateArea.tsx

@@ -64,7 +64,6 @@ export default function Step2StateArea({
 
     const selectedCameraNames = cameraAreas.map((ca) => ca.camera);
     return Object.entries(config.cameras)
-      .sort()
       .filter(
         ([name, cam]) =>
           cam.enabled &&
@@ -72,6 +71,7 @@ export default function Step2StateArea({
           !isReplayCamera(name) &&
           !selectedCameraNames.includes(name),
       )
+      .sort(([, a], [, b]) => a.ui.order - b.ui.order)
       .map(([name]) => ({
         name,
         displayName: resolveCameraName(config, name),

web/src/components/filter/ExportFilterGroup.tsx

@@ -29,9 +29,13 @@ export default function ExportFilterGroup({
 
   const filterValues = useMemo(
     () => ({
-      cameras: allowedCameras,
+      cameras: [...allowedCameras].sort(
+        (a, b) =>
+          (config?.cameras[a]?.ui?.order ?? 0) -
+          (config?.cameras[b]?.ui?.order ?? 0),
+      ),
     }),
-    [allowedCameras],
+    [config, allowedCameras],
   );
 
   const groups = useMemo(() => {

web/src/components/filter/SearchFilterGroup.tsx

@@ -127,12 +127,16 @@ export default function SearchFilterGroup({
 
   const filterValues = useMemo(
     () => ({
-      cameras: allowedCameras,
+      cameras: [...allowedCameras].sort(
+        (a, b) =>
+          (config?.cameras[a]?.ui?.order ?? 0) -
+          (config?.cameras[b]?.ui?.order ?? 0),
+      ),
       labels: Object.values(allLabels || {}),
       zones: Object.values(allZones || {}),
       search_type: ["thumbnail", "description"] as SearchSource[],
     }),
-    [allLabels, allZones, allowedCameras],
+    [config, allLabels, allZones, allowedCameras],
   );
 
   const availableSortTypes = useMemo(() => {

web/src/components/overlay/CreateRoleDialog.tsx

@@ -53,9 +53,13 @@ export default function CreateRoleDialog({
   const { t } = useTranslation(["views/settings"]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const cameras = Object.keys(config.cameras || {}).filter(
-    (name) => !isReplayCamera(name),
-  );
+  const cameras = Object.keys(config.cameras || {})
+    .filter((name) => !isReplayCamera(name))
+    .sort(
+      (a, b) =>
+        (config.cameras[a]?.ui?.order ?? 0) -
+        (config.cameras[b]?.ui?.order ?? 0),
+    );
 
   const existingRoles = Object.keys(config.auth?.roles || {});
 

web/src/components/overlay/EditRoleCamerasDialog.tsx

@@ -47,9 +47,13 @@ export default function EditRoleCamerasDialog({
   const { t } = useTranslation(["views/settings"]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const cameras = Object.keys(config.cameras || {}).filter(
-    (name) => !isReplayCamera(name),
-  );
+  const cameras = Object.keys(config.cameras || {})
+    .filter((name) => !isReplayCamera(name))
+    .sort(
+      (a, b) =>
+        (config.cameras[a]?.ui?.order ?? 0) -
+        (config.cameras[b]?.ui?.order ?? 0),
+    );
 
   const formSchema = z.object({
     cameras: z

web/src/components/overlay/detail/ObjectPathPlotter.tsx

@@ -39,7 +39,9 @@ export default function ObjectPathPlotter() {
 
   const cameraNames = useMemo(() => {
     if (!config) return [];
-    return Object.keys(config.cameras).filter((name) => !isReplayCamera(name));
+    return Object.keys(config.cameras)
+      .filter((name) => !isReplayCamera(name))
+      .sort((a, b) => config.cameras[a].ui.order - config.cameras[b].ui.order);
   }, [config]);
 
   useEffect(() => {

web/src/components/settings/CloneCameraDialog.tsx

@@ -96,7 +96,7 @@ export default function CloneCameraDialog({
     if (!config) return [];
     return Object.keys(config.cameras)
       .filter((c) => !isReplayCamera(c))
-      .sort();
+      .sort((a, b) => config.cameras[a].ui.order - config.cameras[b].ui.order);
   }, [config]);
 
   const formSchema = useMemo(() => {
@@ -176,7 +176,7 @@ export default function CloneCameraDialog({
     if (!config) return [];
     return Object.keys(config.cameras)
       .filter((c) => c !== sourceCamera && !isReplayCamera(c))
-      .sort();
+      .sort((a, b) => config.cameras[a].ui.order - config.cameras[b].ui.order);
   }, [config, sourceCamera]);
 
   const srcCfg = config?.cameras?.[sourceCamera];

web/src/components/ws/WsMessageFeed.tsx

@@ -169,7 +169,7 @@ export default function WsMessageFeed({
         const cam = config.cameras[name];
         return !isReplayCamera(name) && cam.enabled_in_config;
       })
-      .sort();
+      .sort((a, b) => config.cameras[a].ui.order - config.cameras[b].ui.order);
   }, [config]);
 
   const filteredMessages = useMemo(() => {