fix: sync widget modernization with dev

packages/widgets/src/coolify/single-instance-layout.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
 import { Accordion, Anchor, Group, Image, ScrollArea, Stack, Text } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 
@@ -13,6 +12,7 @@ import { ServersSection } from "./servers-section";
 import { ServicesSection } from "./services-section";
 import type { CoolifyOptions, InstanceData } from "./types";
 import { COOLIFY_BRAND_COLOR, COOLIFY_ICON_URL } from "./types";
+import { useAdvancedOpenSections } from "./use-advanced-open-sections";
 
 interface SingleInstanceLayoutProps {
   instance: InstanceData;
@@ -32,27 +32,7 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, isA
     key: `coolify-sections-${widgetKey}`,
     defaultValue: ["applications"],
   });
-  const visibleSections = useMemo(
-    () =>
-      [
-        options.showServers ? "servers" : null,
-        options.showApplications ? "applications" : null,
-        options.showServices ? "services" : null,
-      ].filter((section): section is string => section !== null),
-    [options.showApplications, options.showServers, options.showServices],
-  );
-  const [advancedOpenSections, setAdvancedOpenSections] = useState(visibleSections);
-  const previousVisibleSectionsRef = useRef(visibleSections);
-
-  useEffect(() => {
-    const newlyVisibleSections = visibleSections.filter(
-      (section) => !previousVisibleSectionsRef.current.includes(section),
-    );
-    previousVisibleSectionsRef.current = visibleSections;
-    if (newlyVisibleSections.length === 0) return;
-
-    setAdvancedOpenSections((current) => [...new Set([...current, ...newlyVisibleSections])]);
-  }, [visibleSections]);
+  const [advancedOpenSections, setAdvancedOpenSections] = useAdvancedOpenSections(options);
 
   const serverResourceCounts = buildServerResourceCounts(
     instance.instanceInfo.servers,