chore: reconcile mobile layer after stack rebase

2026-08-14 11:32:09 +02:00
1 parent 4a4b04d471
commit eb918b805a
@@ -1,17 +1,26 @@
 "use client";

-import { ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Badge, Box, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";

 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";

-import type { WidgetComponentProps } from "../definition";
 import { getUsableWidgetQueryData } from "../common/query-state";
-import { createWidgetKey } from "./coolify-utils";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
+import { WidgetEmptyState } from "../common/empty-state";
+import type { WidgetComponentProps } from "../definition";
+import { createWidgetKey, getCoolifySectionVisibility } from "./coolify-utils";
 import { InstanceCard } from "./instance-card";
 import { SingleInstanceLayout } from "./single-instance-layout";
+import type { InstanceData } from "./types";

-export default function CoolifyWidget({ options, integrationIds, width, height }: WidgetComponentProps<"coolify">) {
+export default function CoolifyWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"coolify">) {
  const t = useScopedI18n("widget.coolify");

  if (integrationIds.length === 0) {
@@ -22,7 +31,18 @@ export default function CoolifyWidget({ options, integrationIds, width, height }
    );
  }

-  return <CoolifyContent integrationIds={integrationIds} options={options} width={width} height={height} />;
+  const isAdvanced = displayMode === "advanced";
+  const sectionVisibility = getCoolifySectionVisibility(options, displayMode);
+
+  return (
+    <CoolifyContent
+      integrationIds={integrationIds}
+      options={{ ...options, ...sectionVisibility }}
+      width={width}
+      height={height}
+      isAdvanced={isAdvanced}
+    />
+  );
 }

 interface CoolifyContentProps {
@@ -30,19 +50,24 @@ interface CoolifyContentProps {
  options: WidgetComponentProps<"coolify">["options"];
  width: number;
  height: number;
+  isAdvanced: boolean;
 }

-function CoolifyContent({ integrationIds, options, width, height }: CoolifyContentProps) {
+function CoolifyContent({ integrationIds, options, width, height, isAdvanced }: CoolifyContentProps) {
  const t = useScopedI18n("common");
  const instancesQuery = clientApi.widget.coolify.getInstancesInfo.useQuery({
    integrationIds,
  });
  const instancesData = getUsableWidgetQueryData(instancesQuery) ?? [];
  const { isPending } = instancesQuery;
+  const successfulInstances = instancesData.filter(
+    (instance): instance is InstanceData => instance.instanceInfo !== null,
+  );
+  const failedInstances = instancesData.filter((instance) => instance.instanceInfo === null);

  const isTiny = width < 256 || height < 144;
  const hideFooter = height < 112;
-  const [firstInstance] = instancesData;
+  const [firstInstance] = successfulInstances;
  const widgetKey = createWidgetKey(integrationIds);

  if (isPending) {
@@ -54,33 +79,77 @@ function CoolifyContent({ integrationIds, options, width, height }: CoolifyConte
      </Stack>
    );
  }
-
-  if (instancesData.length === 1 && firstInstance) {
+  if (successfulInstances.length === 0) {
    return (
-      <SingleInstanceLayout
-        instance={firstInstance}
-        options={options}
-        isTiny={isTiny}
-        widgetKey={widgetKey}
-        hideFooter={hideFooter}
-      />
+      <Stack h="100%" gap={0}>
+        <FailedSourceBadges sources={failedInstances} queryError={instancesQuery.error} />
+        <Box style={{ minHeight: 0, flex: 1 }}>
+          <WidgetEmptyState />
+        </Box>
+      </Stack>
+    );
+  }
+
+  if (successfulInstances.length === 1 && firstInstance) {
+    return (
+      <Stack h="100%" gap={0}>
+        <FailedSourceBadges sources={failedInstances} queryError={instancesQuery.error} />
+        <div style={{ minHeight: 0, flex: 1 }}>
+          <SingleInstanceLayout
+            instance={firstInstance}
+            options={options}
+            isTiny={!isAdvanced && isTiny}
+            isAdvanced={isAdvanced}
+            widgetKey={widgetKey}
+            hideFooter={!isAdvanced && hideFooter}
+          />
+        </div>
+      </Stack>
    );
  }

  return (
-    <ScrollArea h="100%">
-      <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="sm" p="xs">
-        {instancesData.map((instance) => (
-          <InstanceCard
-            key={instance.integrationId}
-            instance={instance}
-            options={options}
-            isTiny={isTiny}
-            widgetKey={widgetKey}
-            hideFooter={hideFooter}
-          />
-        ))}
-      </SimpleGrid>
-    </ScrollArea>
+    <Stack h="100%" gap={0}>
+      <FailedSourceBadges sources={failedInstances} queryError={instancesQuery.error} />
+      <ScrollArea style={{ minHeight: 0, flex: 1 }}>
+        <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="sm" p="xs">
+          {successfulInstances.map((instance) => (
+            <InstanceCard
+              key={instance.integrationId}
+              instance={instance}
+              options={options}
+              isTiny={!isAdvanced && isTiny}
+              isAdvanced={isAdvanced}
+              widgetKey={widgetKey}
+              hideFooter={!isAdvanced && hideFooter}
+            />
+          ))}
+        </SimpleGrid>
+      </ScrollArea>
+    </Stack>
  );
 }
+
+const FailedSourceBadges = ({
+  sources,
+  queryError,
+}: {
+  sources: { integrationId: string; integrationName: string }[];
+  queryError: unknown;
+}) => {
+  const t = useScopedI18n("widget.coolify");
+  if (sources.length === 0 && !queryError) return null;
+
+  return (
+    <Group gap={4} p="xs" pb={0} wrap="wrap">
+      {sources.map((source) => (
+        <Badge key={source.integrationId} color="red" variant="light" size="xs">
+          {t("source.unavailable", { source: source.integrationName })}
+        </Badge>
+      ))}
+      <Box ml="auto">
+        <WidgetQueryErrorIndicator error={queryError} label={t("name")} />
+      </Box>
+    </Group>
+  );
+};
@@ -1,6 +1,7 @@
 "use client";

-import { Accordion, Anchor, Badge, Card, Group, Image, Text, Tooltip } from "@mantine/core";
+import { useState } from "react";
+import { Accordion, Anchor, Badge, Card, Group, Image, Stack, Text, Tooltip } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";

 import { useTimeAgo } from "@homarr/common";
@@ -8,7 +9,7 @@ import { useScopedI18n } from "@homarr/translation/client";

 import { ApplicationsSection } from "./applications-section";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
-import { buildServerResourceCounts, getBadgeColor, parseStatus } from "./coolify-utils";
+import { buildServerResourceCounts, getBadgeColor, isCoolifyServerOnline, parseStatus } from "./coolify-utils";
 import { ServersSection } from "./servers-section";
 import { ServicesSection } from "./services-section";
 import type { CoolifyOptions, InstanceData } from "./types";
@@ -18,11 +19,12 @@ interface InstanceCardProps {
  instance: InstanceData;
  options: CoolifyOptions;
  isTiny: boolean;
+  isAdvanced: boolean;
  widgetKey: string;
  hideFooter: boolean;
 }

-export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter }: InstanceCardProps) {
+export function InstanceCard({ instance, options, isTiny, isAdvanced, widgetKey, hideFooter }: InstanceCardProps) {
  const t = useScopedI18n("widget.coolify");
  const tCommon = useScopedI18n("common");
  const cardKey = `${widgetKey}-${instance.integrationId}`;
@@ -34,6 +36,7 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter
    key: `coolify-sections-${cardKey}`,
    defaultValue: ["applications"],
  });
+  const [advancedOpenSections, setAdvancedOpenSections] = useState(["servers", "applications", "services"]);
  const serverResourceCounts = buildServerResourceCounts(
    instance.instanceInfo.servers,
    instance.instanceInfo.applications,
@@ -41,9 +44,10 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter
  );

  const baseUrl = getSafeApplicationUrl(instance.integrationUrl)?.replace(/\/+$/, "") ?? "";
+  const displayUrl = baseUrl ? baseUrl.replace(/^https?:\/\//, "") : "—";
  const relativeTime = useTimeAgo(instance.updatedAt);

-  const onlineServers = instance.instanceInfo.servers.filter((s) => s.is_reachable !== false).length;
+  const onlineServers = instance.instanceInfo.servers.filter(isCoolifyServerOnline).length;
  const runningApps = instance.instanceInfo.applications.filter(
    (a) => parseStatus(a.status ?? "") === "running",
  ).length;
@@ -76,20 +80,27 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter
        wrap="nowrap"
        style={{ borderBottom: "1px solid var(--mantine-color-dark-4)" }}
      >
-        <Group gap={4} wrap="nowrap">
+        <Group gap={4} wrap="nowrap" miw={0}>
          <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
-          <Anchor
-            component={baseUrl ? "a" : "span"}
-            href={baseUrl}
-            target={baseUrl ? "_blank" : undefined}
-            rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
-            fz={isTiny ? "10px" : "xs"}
-            fw={600}
-            c="inherit"
-            lineClamp={1}
-          >
-            {instance.integrationName}
-          </Anchor>
+          <Stack gap={0} miw={0}>
+            <Anchor
+              component={baseUrl ? "a" : "span"}
+              href={baseUrl}
+              target={baseUrl ? "_blank" : undefined}
+              rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
+              fz={isTiny ? "10px" : "xs"}
+              fw={600}
+              c="inherit"
+              lineClamp={1}
+            >
+              {instance.integrationName}
+            </Anchor>
+            {isAdvanced && (
+              <Text fz="10px" c="dimmed" truncate="end">
+                {t("source.url", { url: displayUrl })}
+              </Text>
+            )}
+          </Stack>
        </Group>
        <Group gap={4} wrap="nowrap">
          {isTiny && totalResources > 0 ? (
@@ -125,13 +136,20 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter
        </Group>
      </Group>

-      <Accordion variant="filled" chevronPosition="right" multiple value={openSections} onChange={setOpenSections}>
+      <Accordion
+        variant="filled"
+        chevronPosition="right"
+        multiple
+        value={isAdvanced ? advancedOpenSections : openSections}
+        onChange={isAdvanced ? setAdvancedOpenSections : setOpenSections}
+      >
        {options.showServers && (
          <ServersSection
            servers={instance.instanceInfo.servers}
            serverResourceCounts={serverResourceCounts}
            baseUrl={baseUrl}
            isTiny={isTiny}
+            isAdvanced={isAdvanced}
            showIp={showIp}
            onToggleIp={() => setShowIp((prev) => !prev)}
          />
@@ -140,7 +158,12 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter
          <ApplicationsSection applications={instance.instanceInfo.applications} baseUrl={baseUrl} isTiny={isTiny} />
        )}
        {options.showServices && (
-          <ServicesSection services={instance.instanceInfo.services} baseUrl={baseUrl} isTiny={isTiny} />
+          <ServicesSection
+            services={instance.instanceInfo.services}
+            baseUrl={baseUrl}
+            isTiny={isTiny}
+            isAdvanced={isAdvanced}
+          />
        )}
      </Accordion>

@@ -1,20 +1,28 @@
 "use client";

 import { Accordion, ActionIcon, Anchor, Badge, Group, Stack, Text } from "@mantine/core";
-import { IconCircleCheckFilled, IconCircleXFilled, IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
+import {
+  IconCircleCheckFilled,
+  IconCircleFilled,
+  IconCircleXFilled,
+  IconEye,
+  IconEyeOff,
+  IconServer,
+} from "@tabler/icons-react";

 import type { CoolifyServer } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";

 import actionTargetClasses from "../common/action-target.module.css";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
-import { getBadgeColor } from "./coolify-utils";
+import { getBadgeColor, getCoolifyServerState, isCoolifyServerOnline } from "./coolify-utils";

 interface ServersSectionProps {
  servers: CoolifyServer[];
  serverResourceCounts: Map<number, { apps: number; services: number }>;
  baseUrl: string;
  isTiny: boolean;
+  isAdvanced: boolean;
  showIp: boolean;
  onToggleIp: () => void;
 }
@@ -24,12 +32,13 @@ export function ServersSection({
  serverResourceCounts,
  baseUrl,
  isTiny,
+  isAdvanced,
  showIp,
  onToggleIp,
 }: ServersSectionProps) {
  const t = useScopedI18n("widget.coolify");
  const tCommon = useScopedI18n("common");
-  const onlineServers = servers.filter((server) => server.is_reachable !== false).length;
+  const onlineServers = servers.filter(isCoolifyServerOnline).length;

  return (
    <Accordion.Item value="servers">
@@ -67,6 +76,7 @@ export function ServersSection({
                }
                baseUrl={baseUrl}
                isTiny={isTiny}
+                isAdvanced={isAdvanced}
                showIp={showIp}
              />
            ))}
@@ -86,23 +96,28 @@ interface ServerRowProps {
  counts: { apps: number; services: number };
  baseUrl: string;
  isTiny: boolean;
+  isAdvanced: boolean;
  showIp: boolean;
 }

-function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps) {
+function ServerRow({ server, counts, baseUrl, isTiny, isAdvanced, showIp }: ServerRowProps) {
  const t = useScopedI18n("widget.coolify");
  const isBuildServer = server.settings?.is_build_server === true;
-  const isOnline = server.is_reachable !== false;
+  const reachability = getCoolifyServerState(server, "is_reachable");
+  const usability = getCoolifyServerState(server, "is_usable");
  const serverUrl = getSafeApplicationUrl(`${baseUrl}/server/${server.uuid}`);
-  const StatusIcon = isOnline ? IconCircleCheckFilled : IconCircleXFilled;
+  const status = reachability === true ? "online" : reachability === false ? "offline" : "unknown";
+  const StatusIcon =
+    reachability === true ? IconCircleCheckFilled : reachability === false ? IconCircleXFilled : IconCircleFilled;
+  const statusColor = reachability === true ? "green" : reachability === false ? "red" : "gray";

  return (
    <Stack gap={0}>
      <Group wrap="nowrap" gap={isTiny ? 4 : "xs"}>
        <StatusIcon
-          aria-label={t(isOnline ? "status.online" : "status.offline")}
+          aria-label={t(`status.${status}`)}
          size={isTiny ? 12 : 16}
-          color={`var(--mantine-color-${isOnline ? "green" : "red"}-6)`}
+          color={`var(--mantine-color-${statusColor}-6)`}
        />
        <Anchor
          className={actionTargetClasses.root}
@@ -129,9 +144,30 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
      </Group>
      <Group wrap="nowrap" gap={4} ml={16}>
        <Text fz="10px" c="dimmed">
-          {showIp ? server.ip : "***.***.***.***"}
+          {showIp ? (server.ip ?? "—") : "***.***.***.***"}
        </Text>
      </Group>
+      {isAdvanced && (
+        <Group gap={4} ml={16} wrap="wrap">
+          <ServerStateBadge field="reachability" value={reachability} />
+          <ServerStateBadge field="usability" value={usability} />
+        </Group>
+      )}
    </Stack>
  );
 }
+
+const ServerStateBadge = ({ field, value }: { field: "reachability" | "usability"; value: boolean | undefined }) => {
+  const t = useScopedI18n("widget.coolify");
+  const status =
+    value === undefined
+      ? t("status.unknown")
+      : field === "reachability"
+        ? t(value ? "status.reachable" : "status.unreachable")
+        : t(value ? "status.usable" : "status.unusable");
+  return (
+    <Badge size="xs" variant="light" color={value === true ? "green" : value === false ? "red" : "gray"}>
+      {t(`server.${field}`)}: {status}
+    </Badge>
+  );
+};
@@ -1,21 +1,24 @@
 "use client";

-import { Accordion, Badge, Group, Stack, Text } from "@mantine/core";
+import { Accordion, Anchor, Badge, Group, Stack, Text } from "@mantine/core";
 import { IconStack2 } from "@tabler/icons-react";

 import type { CoolifyServiceWithContext } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";

-import { getBadgeColor, parseStatus } from "./coolify-utils";
+import actionTargetClasses from "../common/action-target.module.css";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { cleanFqdn, getBadgeColor, getStatusColor, parseStatus } from "./coolify-utils";
 import { ResourceRow } from "./resource-row";

 interface ServicesSectionProps {
  services: CoolifyServiceWithContext[];
  baseUrl: string;
  isTiny: boolean;
+  isAdvanced: boolean;
 }

-export function ServicesSection({ services, baseUrl, isTiny }: ServicesSectionProps) {
+export function ServicesSection({ services, baseUrl, isTiny, isAdvanced }: ServicesSectionProps) {
  const t = useScopedI18n("widget.coolify");
  const tCommon = useScopedI18n("common");
  const runningServices = services.filter((svc) => parseStatus(svc.status ?? "") === "running").length;
@@ -34,7 +37,19 @@ export function ServicesSection({ services, baseUrl, isTiny }: ServicesSectionPr
        {services.length > 0 ? (
          <Stack gap={4}>
            {services.map((service) => (
-              <ResourceRow key={service.uuid} item={service} baseUrl={baseUrl} isTiny={isTiny} resourceType="service" />
+              <Stack key={service.uuid} gap={2}>
+                <ResourceRow item={service} baseUrl={baseUrl} isTiny={isTiny} resourceType="service" />
+                {isAdvanced && service.applications && service.applications.length > 0 && (
+                  <Stack gap={2} ml="lg">
+                    <Text fz="10px" c="dimmed">
+                      {tCommon("applications")}
+                    </Text>
+                    {service.applications.map((application) => (
+                      <ServiceApplicationRow key={application.uuid} application={application} />
+                    ))}
+                  </Stack>
+                )}
+              </Stack>
            ))}
          </Stack>
        ) : (
@@ -46,3 +61,45 @@ export function ServicesSection({ services, baseUrl, isTiny }: ServicesSectionPr
    </Accordion.Item>
  );
 }
+
+type ServiceApplication = NonNullable<CoolifyServiceWithContext["applications"]>[number];
+
+const ServiceApplicationRow = ({ application }: { application: ServiceApplication }) => {
+  const t = useScopedI18n("widget.coolify");
+  const status = parseStatus(application.status ?? "");
+  const publicUrl = getSafeApplicationUrl(cleanFqdn(application.fqdn));
+  const statusLabel =
+    status === "running" ||
+    status === "stopped" ||
+    status === "exited" ||
+    status === "starting" ||
+    status === "restarting"
+      ? t(`status.${status}`)
+      : t("status.unknown");
+
+  return (
+    <Group gap={4} wrap="nowrap">
+      <Badge size="xs" variant="dot" color={getStatusColor(status)}>
+        {statusLabel}
+      </Badge>
+      {publicUrl ? (
+        <Anchor
+          className={actionTargetClasses.root}
+          href={publicUrl}
+          target="_blank"
+          rel={SAFE_NEW_TAB_REL}
+          fz="xs"
+          c="inherit"
+          truncate="end"
+          style={{ textDecoration: "none" }}
+        >
+          {application.name}
+        </Anchor>
+      ) : (
+        <Text fz="xs" truncate="end">
+          {application.name}
+        </Text>
+      )}
+    </Group>
+  );
+};
@@ -1,5 +1,6 @@
 "use client";

+import { useState } from "react";
 import { Accordion, Anchor, Group, Image, ScrollArea, Stack, Text } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";

@@ -18,11 +19,19 @@ interface SingleInstanceLayoutProps {
  instance: InstanceData;
  options: CoolifyOptions;
  isTiny: boolean;
+  isAdvanced: boolean;
  widgetKey: string;
  hideFooter: boolean;
 }

-export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, hideFooter }: SingleInstanceLayoutProps) {
+export function SingleInstanceLayout({
+  instance,
+  options,
+  isTiny,
+  isAdvanced,
+  widgetKey,
+  hideFooter,
+}: SingleInstanceLayoutProps) {
  const t = useScopedI18n("widget.coolify");
  const [showIp, setShowIp] = useLocalStorage({
    key: `coolify-show-ip-${widgetKey}`,
@@ -32,6 +41,7 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, hid
    key: `coolify-sections-${widgetKey}`,
    defaultValue: ["applications"],
  });
+  const [advancedOpenSections, setAdvancedOpenSections] = useState(["servers", "applications", "services"]);
  const serverResourceCounts = buildServerResourceCounts(
    instance.instanceInfo.servers,
    instance.instanceInfo.applications,
@@ -52,27 +62,41 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, hid
              oolify
            </Text>
          </Group>
-          <Anchor
-            component={baseUrl ? "a" : "span"}
-            href={baseUrl}
-            target={baseUrl ? "_blank" : undefined}
-            rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
-            fz={isTiny ? "xs" : "sm"}
-            fw={500}
-            c="dimmed"
-            lineClamp={1}
-          >
-            {displayUrl}
-          </Anchor>
+          <Stack gap={0} miw={0}>
+            {isAdvanced && (
+              <Text fz="xs" fw={600} truncate="end">
+                {instance.integrationName}
+              </Text>
+            )}
+            <Anchor
+              component={baseUrl ? "a" : "span"}
+              href={baseUrl}
+              target={baseUrl ? "_blank" : undefined}
+              rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
+              fz={isTiny ? "xs" : "sm"}
+              fw={500}
+              c="dimmed"
+              lineClamp={1}
+            >
+              {isAdvanced ? t("source.url", { url: displayUrl }) : displayUrl}
+            </Anchor>
+          </Stack>
        </Group>

-        <Accordion variant="contained" chevronPosition="right" multiple value={openSections} onChange={setOpenSections}>
+        <Accordion
+          variant="contained"
+          chevronPosition="right"
+          multiple
+          value={isAdvanced ? advancedOpenSections : openSections}
+          onChange={isAdvanced ? setAdvancedOpenSections : setOpenSections}
+        >
          {options.showServers && (
            <ServersSection
              servers={instance.instanceInfo.servers}
              serverResourceCounts={serverResourceCounts}
              baseUrl={baseUrl}
              isTiny={isTiny}
+              isAdvanced={isAdvanced}
              showIp={showIp}
              onToggleIp={() => setShowIp((prev) => !prev)}
            />
@@ -81,7 +105,12 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, hid
            <ApplicationsSection applications={instance.instanceInfo.applications} baseUrl={baseUrl} isTiny={isTiny} />
          )}
          {options.showServices && (
-            <ServicesSection services={instance.instanceInfo.services} baseUrl={baseUrl} isTiny={isTiny} />
+            <ServicesSection
+              services={instance.instanceInfo.services}
+              baseUrl={baseUrl}
+              isTiny={isTiny}
+              isAdvanced={isAdvanced}
+            />
          )}
        </Accordion>