feat: modernize dashboard widgets

packages/widgets/src/coolify/component.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ScrollArea, Stack, Text } from "@mantine/core";
+import { ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -10,7 +10,12 @@ import { createWidgetKey } from "./coolify-utils";
 import { InstanceCard } from "./instance-card";
 import { SingleInstanceLayout } from "./single-instance-layout";
 
-export default function CoolifyWidget({ options, integrationIds, width }: WidgetComponentProps<"coolify">) {
+export default function CoolifyWidget({
+  options,
+  integrationIds,
+  width,
+  displayMode,
+}: WidgetComponentProps<"coolify">) {
   const t = useScopedI18n("widget.coolify");
 
   if (integrationIds.length === 0) {
@@ -21,29 +26,45 @@ export default function CoolifyWidget({ options, integrationIds, width }: Widget
     );
   }
 
-  return <CoolifyContent integrationIds={integrationIds} options={options} width={width} />;
+  return (
+    <CoolifyContent
+      integrationIds={integrationIds}
+      options={options}
+      width={width}
+      isAdvanced={displayMode === "advanced"}
+    />
+  );
 }
 
 interface CoolifyContentProps {
   integrationIds: string[];
   options: WidgetComponentProps<"coolify">["options"];
   width: number;
+  isAdvanced: boolean;
 }
 
-function CoolifyContent({ integrationIds, options, width }: CoolifyContentProps) {
+function CoolifyContent({ integrationIds, options, width, isAdvanced }: CoolifyContentProps) {
   const { data: instancesData = [] } = clientApi.widget.coolify.getInstancesInfo.useQuery({ integrationIds });
 
-  const isTiny = width < 256;
+  const isTiny = !isAdvanced && width < 256;
   const [firstInstance] = instancesData;
   const widgetKey = createWidgetKey(integrationIds);
 
   if (instancesData.length === 1 && firstInstance) {
-    return <SingleInstanceLayout instance={firstInstance} options={options} isTiny={isTiny} widgetKey={widgetKey} />;
+    return (
+      <SingleInstanceLayout
+        instance={firstInstance}
+        options={options}
+        isTiny={isTiny}
+        widgetKey={widgetKey}
+        isAdvanced={isAdvanced}
+      />
+    );
   }
 
   return (
     <ScrollArea h="100%">
-      <Stack gap="xs" p="xs">
+      <SimpleGrid cols={isAdvanced && width >= 760 ? 2 : 1} spacing="sm" p="xs">
         {instancesData.map((instance) => (
           <InstanceCard
             key={instance.integrationId}
@@ -51,9 +72,10 @@ function CoolifyContent({ integrationIds, options, width }: CoolifyContentProps)
             options={options}
             isTiny={isTiny}
             widgetKey={widgetKey}
+            isAdvanced={isAdvanced}
           />
         ))}
-      </Stack>
+      </SimpleGrid>
     </ScrollArea>
   );
 }

packages/widgets/src/coolify/index.ts

@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("coolify", {
   icon: IconCloud,
+  queryKey: [["widget", "coolify"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showServers: factory.switch({

packages/widgets/src/coolify/instance-card.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { Accordion, Anchor, Badge, Card, Group, Image, Text } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 
@@ -18,9 +19,10 @@ interface InstanceCardProps {
   options: CoolifyOptions;
   isTiny: boolean;
   widgetKey: string;
+  isAdvanced: boolean;
 }
 
-export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceCardProps) {
+export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced }: InstanceCardProps) {
   const t = useScopedI18n("widget.coolify");
   const cardKey = `${widgetKey}-${instance.integrationId}`;
   const [showIp, setShowIp] = useLocalStorage({
@@ -31,6 +33,12 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC
     key: `coolify-sections-${cardKey}`,
     defaultValue: ["applications"],
   });
+  const visibleSections = [
+    options.showServers ? "servers" : null,
+    options.showApplications ? "applications" : null,
+    options.showServices ? "services" : null,
+  ].filter((section): section is string => section !== null);
+  const [advancedOpenSections, setAdvancedOpenSections] = useState(visibleSections);
 
   const serverResourceCounts = buildServerResourceCounts(
     instance.instanceInfo.servers,
@@ -90,7 +98,13 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC
         </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}

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

@@ -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,9 +19,10 @@ interface SingleInstanceLayoutProps {
   options: CoolifyOptions;
   isTiny: boolean;
   widgetKey: string;
+  isAdvanced: boolean;
 }
 
-export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: SingleInstanceLayoutProps) {
+export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, isAdvanced }: SingleInstanceLayoutProps) {
   const t = useScopedI18n("widget.coolify");
   const [showIp, setShowIp] = useLocalStorage({
     key: `coolify-show-ip-${widgetKey}`,
@@ -30,6 +32,12 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S
     key: `coolify-sections-${widgetKey}`,
     defaultValue: ["applications"],
   });
+  const visibleSections = [
+    options.showServers ? "servers" : null,
+    options.showApplications ? "applications" : null,
+    options.showServices ? "services" : null,
+  ].filter((section): section is string => section !== null);
+  const [advancedOpenSections, setAdvancedOpenSections] = useState(visibleSections);
 
   const serverResourceCounts = buildServerResourceCounts(
     instance.instanceInfo.servers,
@@ -56,7 +64,13 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S
           </Anchor>
         </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}