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/views/settings/CameraManagementView.tsx

@@ -208,7 +208,12 @@ export default function CameraManagementView({
             !config.cameras[camera].enabled_in_config &&
             !isReplayCamera(camera),
         )
-        .sort();
+        .sort((a, b) => {
+          const orderA = config.cameras[a].ui?.order ?? 0;
+          const orderB = config.cameras[b].ui?.order ?? 0;
+          if (orderA !== orderB) return orderA - orderB;
+          return a.localeCompare(b);
+        });
     }
     return [];
   }, [config]);
@@ -217,7 +222,12 @@ export default function CameraManagementView({
     if (config) {
       return Object.keys(config.cameras)
         .filter((camera) => !isReplayCamera(camera))
-        .sort();
+        .sort((a, b) => {
+          const orderA = config.cameras[a].ui?.order ?? 0;
+          const orderB = config.cameras[b].ui?.order ?? 0;
+          if (orderA !== orderB) return orderA - orderB;
+          return a.localeCompare(b);
+        });
     }
     return [];
   }, [config]);

web/src/views/settings/FrigatePlusSettingsView.tsx

@@ -140,6 +140,7 @@ export default function FrigatePlusSettingsView(_props: SettingsPageProps) {
                       <tbody>
                         {Object.entries(config.cameras)
                           .filter(([name]) => !isReplayCamera(name))
+                          .sort(([, a], [, b]) => a.ui.order - b.ui.order)
                           .map(([name, camera]) => (
                             <tr
                               key={name}

web/src/views/settings/ProfilesView.tsx

@@ -148,7 +148,7 @@ export default function ProfilesView({
     const data: Record<string, Record<string, string[]>> = {};
     const cameras = Object.keys(config.cameras)
       .filter((name) => !isReplayCamera(name))
-      .sort();
+      .sort((a, b) => config.cameras[a].ui.order - config.cameras[b].ui.order);
 
     for (const profile of allProfileNames) {
       data[profile] = {};
@@ -474,7 +474,11 @@ export default function ProfilesView({
             const color = getProfileColor(profile, allProfileNames);
             const isActive = activeProfile === profile;
             const cameraData = profileOverviewData[profile] ?? {};
-            const cameras = Object.keys(cameraData).sort();
+            const cameras = Object.keys(cameraData).sort(
+              (a, b) =>
+                (config?.cameras[a]?.ui?.order ?? 0) -
+                (config?.cameras[b]?.ui?.order ?? 0),
+            );
             const isExpanded = expandedProfiles.has(profile);
 
             return (