rework live dashboard grid layout and add natural mode

web/src/views/settings/UiSettingsView.tsx

@@ -1,3 +1,5 @@
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { LuInfo } from "react-icons/lu";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import {
@@ -55,6 +57,7 @@ type SwitchSettingRowProps = {
   id: string;
   label: string;
   description: string;
+  note?: string;
   checked: boolean | undefined;
   onCheckedChange: (checked: boolean | undefined) => void;
 };
@@ -63,6 +66,7 @@ function SwitchSettingRow({
   id,
   label,
   description,
+  note,
   checked,
   onCheckedChange,
 }: SwitchSettingRowProps) {
@@ -82,6 +86,15 @@ function SwitchSettingRow({
           </div>
         </div>
         <p className={DESCRIPTION_CLASS_NAME}>{description}</p>
+        {note && (
+          <Alert
+            variant="info"
+            className="flex items-center gap-2 p-2 [&>svg+div]:translate-y-0 [&>svg]:static [&>svg~*]:pl-0"
+          >
+            <LuInfo className="size-4 shrink-0" />
+            <AlertDescription className="text-xs">{note}</AlertDescription>
+          </Alert>
+        )}
       </div>
       <div className="hidden w-full md:flex md:max-w-2xl md:items-center">
         <Switch
@@ -321,6 +334,10 @@ export default function UiSettingsView() {
     "displayCameraNames",
     false,
   );
+  const [naturalAspect, setNaturalAspect] = useUserPersistence(
+    "naturalAspectLayout",
+    false,
+  );
   const [playbackRate, setPlaybackRate] = useUserPersistence("playbackRate", 1);
   const [weekStartsOn, setWeekStartsOn] = useUserPersistence("weekStartsOn", 0);
   const [alertVideos, setAlertVideos] = useUserPersistence("alertVideos", true);
@@ -351,6 +368,14 @@ export default function UiSettingsView() {
       checked: cameraNames,
       onCheckedChange: setCameraName,
     },
+    {
+      id: "natural-aspect",
+      label: t("general.liveDashboard.naturalAspectLayout.label"),
+      description: t("general.liveDashboard.naturalAspectLayout.desc"),
+      note: t("general.liveDashboard.naturalAspectLayout.descNote"),
+      checked: naturalAspect,
+      onCheckedChange: setNaturalAspect,
+    },
   ];
 
   return (
@@ -569,6 +594,7 @@ export default function UiSettingsView() {
           fileName={pendingImport.name}
           file={pendingImport.file}
           summary={pendingImport.summary}
+          currentNaturalAspect={naturalAspect ?? false}
           onConfirm={handleImportConfirm}
         />
       )}