✨ Change integration structure to array and rename to widgets in config

src/widgets/bitTorrent/BitTorrentTile.tsx

@@ -20,10 +20,10 @@ const definition = defineWidget({
 export type IBitTorrent = IWidget<typeof definition['id'], typeof definition>;
 
 interface BitTorrentTileProps extends BaseTileProps {
-  module: IBitTorrent; // TODO: change to new type defined through widgetDefinition
+  widget: IBitTorrent; // TODO: change to new type defined through widgetDefinition
 }
 
-function BitTorrentTile({ className, module }: BitTorrentTileProps) {
+function BitTorrentTile({ className, widget }: BitTorrentTileProps) {
   return <HomarrCardWrapper>Bit Torrent</HomarrCardWrapper>;
 }
 

src/widgets/calendar/CalendarTile.tsx

@@ -34,10 +34,10 @@ const definition = defineWidget({
 export type ICalendarWidget = IWidget<typeof definition['id'], typeof definition>;
 
 interface CalendarTileProps extends BaseTileProps {
-  module: ICalendarWidget;
+  widget: ICalendarWidget;
 }
 
-function CalendarTile({ className, module }: CalendarTileProps) {
+function CalendarTile({ className, widget }: CalendarTileProps) {
   const { secondaryColor } = useColorTheme();
   const { name: configName } = useConfigContext();
   const { classes, cx } = useStyles(secondaryColor);
@@ -64,7 +64,7 @@ function CalendarTile({ className, module }: CalendarTileProps) {
         size="xs"
         fullWidth
         onChange={() => {}}
-        firstDayOfWeek={module.properties.sundayStart ? 'sunday' : 'monday'}
+        firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'}
         dayStyle={(date) => ({
           margin: 1,
           backgroundColor: isToday(date)

src/widgets/dashDot/DashDotCompactStorage.tsx

@@ -58,7 +58,7 @@ const useDashDotStorage = () => {
       'dashdot/storage',
       {
         configName,
-        url: config?.integrations.dashDot?.properties.url,
+        url: config?.widgets.dashDot?.properties.url,
       },
     ],
     queryFn: () => fetchDashDotStorageLoad(configName),

src/widgets/dashDot/DashDotTile.tsx

@@ -50,24 +50,24 @@ const definition = defineWidget({
 export type IDashDotTile = IWidget<typeof definition['id'], typeof definition>;
 
 interface DashDotTileProps extends BaseTileProps {
-  module: IDashDotTile; // TODO: change to new type defined through widgetDefinition
+  widget: IDashDotTile; // TODO: change to new type defined through widgetDefinition
 }
 
-function DashDotTile({ module, className }: DashDotTileProps) {
+function DashDotTile({ widget, className }: DashDotTileProps) {
   const { classes } = useDashDotTileStyles();
   const { t } = useTranslation('modules/dashdot');
 
-  const dashDotUrl = module?.properties.url;
+  const dashDotUrl = widget?.properties.url;
 
-  const { data: info } = useDashDotInfo();
+  const { data: info } = useDashDotInfo({ dashDotUrl });
 
-  const graphs = module?.properties.graphs.map((g) => ({
+  const graphs = widget?.properties.graphs.map((g) => ({
     id: g,
     name: t(`card.graphs.${g}.title`),
     twoSpan: ['network', 'gpu'].includes(g),
     isMultiView:
-      (g === 'cpu' && module.properties.cpuMultiView) ||
-      (g === 'storage' && module.properties.storageMultiView),
+      (g === 'cpu' && widget.properties.cpuMultiView) ||
+      (g === 'storage' && widget.properties.storageMultiView),
   }));
 
   const heading = (
@@ -78,7 +78,7 @@ function DashDotTile({ module, className }: DashDotTileProps) {
 
   const menu = (
     // TODO: add widgetWrapper that is generic and uses the definition
-    <WidgetsMenu module={module} integration={definition.id} />
+    <WidgetsMenu widget={widget} integration={definition.id} />
   );
 
   if (!dashDotUrl) {
@@ -93,7 +93,7 @@ function DashDotTile({ module, className }: DashDotTileProps) {
     );
   }
 
-  const isCompact = module?.properties.useCompactView ?? false;
+  const isCompact = widget?.properties.useCompactView ?? false;
 
   const isCompactStorageVisible = graphs?.some((g) => g.id === 'storage' && isCompact);
 
@@ -130,14 +130,14 @@ function DashDotTile({ module, className }: DashDotTileProps) {
   );
 }
 
-const useDashDotInfo = () => {
-  const { name: configName, config } = useConfigContext();
+const useDashDotInfo = ({ dashDotUrl }: { dashDotUrl: string }) => {
+  const { name: configName } = useConfigContext();
   return useQuery({
     queryKey: [
       'dashdot/info',
       {
         configName,
-        url: config?.integrations.dashDot?.properties.url,
+        dashDotUrl,
       },
     ],
     queryFn: () => fetchDashDotInfo(configName),

src/widgets/date/DateTile.tsx

@@ -30,17 +30,17 @@ const definition = defineWidget({
 export type IDateWidget = IWidget<typeof definition['id'], typeof definition>;
 
 interface DateTileProps extends BaseTileProps {
-  module: IDateWidget; // TODO: change to new type defined through widgetDefinition
+  widget: IDateWidget; // TODO: change to new type defined through widgetDefinition
 }
 
-function DateTile({ className, module }: DateTileProps) {
+function DateTile({ className, widget }: DateTileProps) {
   const date = useDateState();
-  const formatString = module.properties.display24HourFormat ? 'HH:mm' : 'h:mm A';
+  const formatString = widget.properties.display24HourFormat ? 'HH:mm' : 'h:mm A';
 
   // TODO: add widgetWrapper that is generic and uses the definition
   return (
     <HomarrCardWrapper className={className}>
-      <WidgetsMenu integration={definition.id} module={module} />
+      <WidgetsMenu integration={definition.id} widget={widget} />
       <Center style={{ height: '100%' }}>
         <Stack spacing="xs">
           <Title>{dayjs(date).format(formatString)}</Title>

src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx

@@ -21,10 +21,10 @@ const definition = defineWidget({
 export type ITorrentNetworkTraffic = IWidget<typeof definition['id'], typeof definition>;
 
 interface TorrentNetworkTrafficTileProps extends BaseTileProps {
-  module: ITorrentNetworkTraffic; // TODO: change to new type defined through widgetDefinition
+  widget: ITorrentNetworkTraffic; // TODO: change to new type defined through widgetDefinition
 }
 
-function TorrentNetworkTrafficTile({ className, module }: TorrentNetworkTrafficTileProps) {
+function TorrentNetworkTrafficTile({ className, widget }: TorrentNetworkTrafficTileProps) {
   return <HomarrCardWrapper>TorrentNetworkTraffic</HomarrCardWrapper>;
 }
 

src/widgets/weather/WeatherTile.tsx

@@ -33,11 +33,11 @@ const definition = defineWidget({
 export type IWeatherWidget = IWidget<typeof definition['id'], typeof definition>;
 
 interface WeatherTileProps extends BaseTileProps {
-  module: IWeatherWidget;
+  widget: IWeatherWidget;
 }
 
-function WeatherTile({ className, module }: WeatherTileProps) {
-  const { data: weather, isLoading, isError } = useWeatherForCity(module.properties.location);
+function WeatherTile({ className, widget }: WeatherTileProps) {
+  const { data: weather, isLoading, isError } = useWeatherForCity(widget.properties.location);
 
   if (isLoading) {
     return (
@@ -67,7 +67,7 @@ function WeatherTile({ className, module }: WeatherTileProps) {
   // TODO: add widgetWrapper that is generic and uses the definition
   return (
     <HomarrCardWrapper className={className}>
-      <WidgetsMenu integration={definition.id} module={module} />
+      <WidgetsMenu integration={definition.id} widget={widget} />
       <Center style={{ height: '100%' }}>
         <Group spacing="md" noWrap align="center">
           <WeatherIcon code={weather!.current_weather.weathercode} />
@@ -75,7 +75,7 @@ function WeatherTile({ className, module }: WeatherTileProps) {
             <Title order={2}>
               {getPerferedUnit(
                 weather!.current_weather.temperature,
-                module.properties.displayInFahrenheit
+                widget.properties.displayInFahrenheit
               )}
             </Title>
             <Group spacing="xs" noWrap>
@@ -83,7 +83,7 @@ function WeatherTile({ className, module }: WeatherTileProps) {
                 <span>
                   {getPerferedUnit(
                     weather!.daily.temperature_2m_max[0],
-                    module.properties.displayInFahrenheit
+                    widget.properties.displayInFahrenheit
                   )}
                 </span>
                 <IconArrowUpRight size={16} style={{ right: 15 }} />
@@ -92,7 +92,7 @@ function WeatherTile({ className, module }: WeatherTileProps) {
                 <span>
                   {getPerferedUnit(
                     weather!.daily.temperature_2m_min[0],
-                    module.properties.displayInFahrenheit
+                    widget.properties.displayInFahrenheit
                   )}
                 </span>
                 <IconArrowDownRight size={16} />