chore(repo): checkpoint current capakraken implementation state

2026-03-29 12:47:12 +02:00
parent beae1a5d6e
commit 47e4d701ff
94 changed files with 4283 additions and 1710 deletions
@@ -2,7 +2,7 @@

 import type { DashboardWidgetConfig, DashboardWidgetType } from "@capakraken/shared/types";
 import dynamic from "next/dynamic";
-import { Suspense, useState, useRef, useEffect } from "react";
+import { Suspense, useState, useRef, useEffect, useMemo } from "react";
 import { useDashboardLayout } from "~/hooks/useDashboardLayout.js";
 import { WidgetContainer } from "./WidgetContainer.js";
 import { AddWidgetModal } from "./AddWidgetModal.js";
@@ -44,6 +44,94 @@ function renderWidget(
  );
 }

+function DeferredWidgetFallback() {
+  return (
+    <div className="flex h-full min-h-32 flex-col gap-3 p-1">
+      <div className="h-3 w-32 shimmer-skeleton rounded" />
+      <div className="h-20 w-full shimmer-skeleton rounded-2xl" />
+      <div className="h-3 w-4/5 shimmer-skeleton rounded" />
+      <div className="h-3 w-3/5 shimmer-skeleton rounded" />
+    </div>
+  );
+}
+
+function DeferredWidgetBody({
+  type,
+  config,
+  activationRank,
+  isPriority,
+  onConfigChange,
+}: {
+  type: DashboardWidgetType;
+  config: DashboardWidgetConfig;
+  activationRank: number;
+  isPriority: boolean;
+  onConfigChange: (u: Record<string, unknown>) => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isActive, setIsActive] = useState(isPriority);
+
+  useEffect(() => {
+    if (isPriority) {
+      setIsActive(true);
+    }
+  }, [isPriority]);
+
+  useEffect(() => {
+    if (isActive) return;
+
+    const element = containerRef.current;
+    if (!element) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return;
+        setIsActive(true);
+        observer.disconnect();
+      },
+      { rootMargin: "320px 0px", threshold: 0.05 },
+    );
+
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [isActive]);
+
+  useEffect(() => {
+    if (isActive || isPriority || typeof window === "undefined") return;
+
+    const activationDelayMs = 900 + Math.min(activationRank, 6) * 180;
+    let timeoutId: number | null = null;
+    let idleId: number | null = null;
+    const browserWindow = window as Window &
+      typeof globalThis & {
+        requestIdleCallback?: (
+          callback: IdleRequestCallback,
+          options?: IdleRequestOptions,
+        ) => number;
+        cancelIdleCallback?: (handle: number) => void;
+      };
+
+    const activate = () => setIsActive(true);
+
+    if (typeof browserWindow.requestIdleCallback === "function") {
+      idleId = browserWindow.requestIdleCallback(activate, { timeout: activationDelayMs });
+    } else {
+      timeoutId = browserWindow.setTimeout(activate, activationDelayMs);
+    }
+
+    return () => {
+      if (idleId !== null && typeof browserWindow.cancelIdleCallback === "function") {
+        browserWindow.cancelIdleCallback(idleId);
+      }
+      if (timeoutId !== null) {
+        browserWindow.clearTimeout(timeoutId);
+      }
+    };
+  }, [activationRank, isActive, isPriority]);
+
+  return <div ref={containerRef} className="h-full">{isActive ? renderWidget(type, config, onConfigChange) : <DeferredWidgetFallback />}</div>;
+}
+
 export function DashboardClient() {
  const [addModalOpen, setAddModalOpen] = useState(false);
  const { config, addWidget, removeWidget, updateWidgetConfig, onLayoutChange, resetLayout } =
@@ -52,29 +140,80 @@ export function DashboardClient() {
  // Measure grid container width so Responsive knows the column size.
  // We can't use WidthProvider (uses findDOMNode, deprecated in React 18).
  const containerRef = useRef<HTMLDivElement>(null);
+  const resizeFrameRef = useRef<number | null>(null);
+  const lastMeasuredWidthRef = useRef(0);
  const [gridWidth, setGridWidth] = useState(1200);
  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
+    const updateWidth = (width: number) => {
+      const roundedWidth = Math.max(0, Math.round(width));
+      if (roundedWidth === lastMeasuredWidthRef.current) return;
+      lastMeasuredWidthRef.current = roundedWidth;
+      setGridWidth((currentWidth) => (currentWidth === roundedWidth ? currentWidth : roundedWidth));
+    };
    const ro = new ResizeObserver(([entry]) => {
-      if (entry) setGridWidth(entry.contentRect.width);
+      if (!entry) return;
+      if (resizeFrameRef.current !== null) cancelAnimationFrame(resizeFrameRef.current);
+      resizeFrameRef.current = requestAnimationFrame(() => {
+        resizeFrameRef.current = null;
+        updateWidth(entry.contentRect.width);
+      });
    });
    ro.observe(el);
-    setGridWidth(el.getBoundingClientRect().width);
-    return () => ro.disconnect();
+    updateWidth(el.getBoundingClientRect().width);
+    return () => {
+      ro.disconnect();
+      if (resizeFrameRef.current !== null) cancelAnimationFrame(resizeFrameRef.current);
+    };
  }, []);

-  const layouts = {
-    lg: config.widgets.map((w) => ({
-      i: w.id,
-      x: w.x,
-      y: w.y,
-      w: w.w,
-      h: w.h,
-      minW: w.minW ?? 2,
-      minH: w.minH ?? 2,
-    })),
-  };
+  const layouts = useMemo(
+    () => ({
+      lg: config.widgets.map((w) => ({
+        i: w.id,
+        x: w.x,
+        y: w.y,
+        w: w.w,
+        h: w.h,
+        minW: w.minW ?? 2,
+        minH: w.minH ?? 2,
+      })),
+    }),
+    [config.widgets],
+  );
+
+  const renderedWidgets = useMemo(
+    () =>
+      config.widgets.map((widget) => {
+        const widgetDefinition = getWidget(widget.type);
+        const isPriorityWidget = widget.y < 3;
+        return (
+          <div key={widget.id}>
+            <WidgetContainer
+              title={widget.title ?? widgetDefinition.label}
+              description={widgetDefinition.description}
+              showDetails={widget.config.showDetails === true}
+              onToggleDetails={() =>
+                updateWidgetConfig(widget.id, {
+                  showDetails: widget.config.showDetails !== true,
+                })
+              }
+              onRemove={() => removeWidget(widget.id)}
+            >
+              <DeferredWidgetBody
+                type={widget.type}
+                config={widget.config}
+                activationRank={widget.y * 12 + widget.x}
+                isPriority={isPriorityWidget}
+                onConfigChange={(update) => updateWidgetConfig(widget.id, update)}
+              />
+            </WidgetContainer>
+          </div>
+        );
+      }),
+    [config.widgets, removeWidget, updateWidgetConfig],
+  );

  return (
    <div className="app-page space-y-6">
@@ -153,25 +292,7 @@ export function DashboardClient() {
                draggableHandle=".widget-drag-handle"
                margin={[12, 12]}
              >
-                {config.widgets.map((widget) => (
-                  <div key={widget.id}>
-                    <WidgetContainer
-                      title={widget.title ?? getWidget(widget.type).label}
-                      description={getWidget(widget.type).description}
-                      showDetails={widget.config.showDetails === true}
-                      onToggleDetails={() =>
-                        updateWidgetConfig(widget.id, {
-                          showDetails: widget.config.showDetails !== true,
-                        })
-                      }
-                      onRemove={() => removeWidget(widget.id)}
-                    >
-                      {renderWidget(widget.type, widget.config, (update) =>
-                        updateWidgetConfig(widget.id, update),
-                      )}
-                    </WidgetContainer>
-                  </div>
-                ))}
+                {renderedWidgets}
              </AnyGridLayout>
            );
          })()}