feat(ui): refine live observation workspace

apps/control-station/src/components/FloatingObservationWindow.tsx

@@ -1,22 +1,56 @@
-import type { RefObject } from "react";
+import { useLayoutEffect, useState, type RefObject } from "react";
 import { WorkspaceWindow } from "@nodedc/ui-react";
 
 import type { ObservationWindowRect } from "../core/observation/useObservationLayout";
 import type { ObservationSourceDescriptor } from "../core/runtime/contracts";
 import { ObservationMedia, observationSourceStatusLabel } from "./ObservationSources";
 
-export function initialObservationWindowRect(index: number): ObservationWindowRect {
+const WINDOW_WIDTH = 336;
+const WINDOW_HEIGHT = 210;
+const WINDOW_GAP = 16;
+const WINDOW_INSET = 18;
+const TIMELINE_CLEARANCE = 64;
+
+export function initialObservationWindowRect(
+  index: number,
+  count = 1,
+  bounds: { width: number; height: number } = { width: 1280, height: 720 },
+): ObservationWindowRect {
+  const availableWidth = Math.max(0, bounds.width - WINDOW_INSET * 2);
+  const width = Math.max(1, Math.min(WINDOW_WIDTH, availableWidth || WINDOW_WIDTH));
+  const availableHeight = Math.max(0, bounds.height - WINDOW_INSET - TIMELINE_CLEARANCE);
+  const maxColumns = Math.max(
+    1,
+    Math.floor((availableWidth + WINDOW_GAP) / (width + WINDOW_GAP)),
+  );
+  const columns = Math.max(1, Math.min(Math.max(1, count), maxColumns));
+  const rows = Math.max(1, Math.ceil(Math.max(1, count) / columns));
+  const rowHeight = Math.max(
+    1,
+    (availableHeight - Math.max(0, rows - 1) * WINDOW_GAP) / rows,
+  );
+  const height = Math.max(1, Math.min(WINDOW_HEIGHT, rowHeight));
+  const row = Math.floor(index / columns);
+  const column = index % columns;
+  const rowItemCount = Math.min(columns, Math.max(1, count - row * columns));
+  const rowWidth = rowItemCount * width + Math.max(0, rowItemCount - 1) * WINDOW_GAP;
+  const rowStart = Math.max(0, bounds.width - WINDOW_INSET - rowWidth);
+
   return {
-    x: 18 + (index % 3) * 354,
-    y: 78 + Math.floor(index / 3) * 226,
-    width: 336,
-    height: 210,
+    x: rowStart + Math.min(column, rowItemCount - 1) * (width + WINDOW_GAP),
+    y: Math.max(
+      0,
+      bounds.height - TIMELINE_CLEARANCE - height - row * (height + WINDOW_GAP),
+    ),
+    width,
+    height,
   };
 }
 
 export function FloatingObservationWindow({
   source,
   index,
+  count,
   boundsRef,
   rect,
   maximized,
@@ -28,6 +62,7 @@ export function FloatingObservationWindow({
 }: {
   source: ObservationSourceDescriptor;
   index: number;
+  count: number;
   boundsRef: RefObject<HTMLElement | null>;
   rect?: ObservationWindowRect;
   maximized: boolean;
@@ -37,10 +72,33 @@ export function FloatingObservationWindow({
   onActivate: () => void;
   onClose: () => void;
 }) {
+  const [bounds, setBounds] = useState<{ width: number; height: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const element = boundsRef.current;
+    if (!element) return;
+
+    const measure = () => {
+      const next = { width: element.clientWidth, height: element.clientHeight };
+      setBounds((current) => (
+        current?.width === next.width && current.height === next.height ? current : next
+      ));
+    };
+
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [boundsRef]);
+
+  const initialRect = bounds ? initialObservationWindowRect(index, count, bounds) : null;
+  const windowRect = rect ?? initialRect;
+  if (!windowRect) return null;
+
   return (
     <WorkspaceWindow
       boundsRef={boundsRef}
-      rect={rect ?? initialObservationWindowRect(index)}
+      rect={windowRect}
       onRectChange={onRectChange}
       maximized={maximized}
       onMaximizedChange={onMaximizedChange}
@@ -60,8 +118,8 @@ export function FloatingObservationWindow({
           <span>{source.capabilities.timelineMode === "live-only" ? "Эфир без буфера" : "Временная шкала"}</span>
         </span>
       )}
-      minWidth={280}
-      minHeight={190}
+      minWidth={Math.min(280, windowRect.width)}
+      minHeight={Math.min(190, windowRect.height)}
       resizable={source.capabilities.resizable}
       active={active}
       zIndex={maximized ? 15 : active ? 9 : 7}