🎨 Migrate all wrapper to use WidgetWrapper

src/components/Dashboard/Tiles/Apps/AppTile.tsx

@@ -36,11 +36,7 @@ export const AppTile = ({ className, app }: AppTileProps) => {
 
   return (
     <HomarrCardWrapper className={className}>
-      {/* TODO: add app menu */}
-
-      <div style={{ position: 'absolute', top: 10, right: 10 }}>
       <AppMenu app={app} />
-      </div>
 
       {!app.url || isEditMode ? (
         <UnstyledButton

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -3,6 +3,7 @@ import { MutableRefObject, RefObject } from 'react';
 import { AppType } from '../../../types/app';
 import Widgets from '../../../widgets';
 import { IWidget, IWidgetDefinition } from '../../../widgets/widgets';
+import { WidgetWrapper } from '../../../widgets/WidgetWrapper';
 import { Tiles } from '../Tiles/tilesDefinitions';
 import { GridstackTileWrapper } from '../Tiles/TileWrapper';
 
@@ -51,7 +52,9 @@ export const WrapperContent = ({ apps, refs, widgets }: WrapperContentProps) =>
             {...widget.shape.location}
             {...widget.shape.size}
           >
+            <WidgetWrapper className="grid-stack-item-content" widget={widget} widgetId={widget.id}>
               <definition.component className="grid-stack-item-content" widget={widget} />
+            </WidgetWrapper>
           </GridstackTileWrapper>
         );
       })}

src/widgets/bitTorrent/BitTorrentTile.tsx

@@ -1,6 +1,4 @@
-import { IconClock, IconFileDownload } from '@tabler/icons';
-import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
-import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
+import { IconFileDownload } from '@tabler/icons';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 
@@ -19,12 +17,12 @@ const definition = defineWidget({
 
 export type IBitTorrent = IWidget<typeof definition['id'], typeof definition>;
 
-interface BitTorrentTileProps extends BaseTileProps {
-  widget: IBitTorrent; // TODO: change to new type defined through widgetDefinition
+interface BitTorrentTileProps {
+  widget: IBitTorrent;
 }
 
-function BitTorrentTile({ className, widget }: BitTorrentTileProps) {
-  return <HomarrCardWrapper>Bit Torrent</HomarrCardWrapper>;
+function BitTorrentTile({ widget }: BitTorrentTileProps) {
+  return null;
 }
 
 export default definition;

src/widgets/calendar/CalendarTile.tsx

@@ -3,8 +3,6 @@ import { Calendar } from '@mantine/dates';
 import { IconCalendarTime } from '@tabler/icons';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
-import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
-import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
 import { useConfigContext } from '../../config/provider';
 import { useColorTheme } from '../../tools/color';
 import { isToday } from '../../tools/isToday';
@@ -33,11 +31,11 @@ const definition = defineWidget({
 
 export type ICalendarWidget = IWidget<typeof definition['id'], typeof definition>;
 
-interface CalendarTileProps extends BaseTileProps {
+interface CalendarTileProps {
   widget: ICalendarWidget;
 }
 
-function CalendarTile({ className, widget }: CalendarTileProps) {
+function CalendarTile({ widget }: CalendarTileProps) {
   const { secondaryColor } = useColorTheme();
   const { name: configName } = useConfigContext();
   const { classes, cx } = useStyles(secondaryColor);
@@ -57,7 +55,6 @@ function CalendarTile({ className, widget }: CalendarTileProps) {
   });
 
   return (
-    <HomarrCardWrapper className={className} p={6}>
     <Calendar
       month={month}
       onMonthChange={setMonth}
@@ -85,7 +82,6 @@ function CalendarTile({ className, widget }: CalendarTileProps) {
         <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date)} />
       )}
     />
-    </HomarrCardWrapper>
   );
 }
 

src/widgets/dashDot/DashDotTile.tsx

@@ -2,9 +2,6 @@ import { createStyles, Group, Title } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { useTranslation } from 'next-i18next';
-import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
-import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
-import { WidgetsMenu } from '../../components/Dashboard/Tiles/Widgets/WidgetsMenu';
 import { useConfigContext } from '../../config/provider';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
@@ -49,11 +46,11 @@ const definition = defineWidget({
 
 export type IDashDotTile = IWidget<typeof definition['id'], typeof definition>;
 
-interface DashDotTileProps extends BaseTileProps {
-  widget: IDashDotTile; // TODO: change to new type defined through widgetDefinition
+interface DashDotTileProps {
+  widget: IDashDotTile;
 }
 
-function DashDotTile({ widget, className }: DashDotTileProps) {
+function DashDotTile({ widget }: DashDotTileProps) {
   const { classes } = useDashDotTileStyles();
   const { t } = useTranslation('modules/dashdot');
 
@@ -76,23 +73,6 @@ function DashDotTile({ widget, className }: DashDotTileProps) {
     </Title>
   );
 
-  const menu = (
-    // TODO: add widgetWrapper that is generic and uses the definition
-    <WidgetsMenu widget={widget} integration={definition.id} />
-  );
-
-  if (!dashDotUrl) {
-    return (
-      <HomarrCardWrapper className={className}>
-        {menu}
-        <div>
-          {heading}
-          <p>{t('card.errors.noApp')}</p>
-        </div>
-      </HomarrCardWrapper>
-    );
-  }
-
   const isCompact = widget?.properties.useCompactView ?? false;
 
   const isCompactStorageVisible = graphs?.some((g) => g.id === 'storage' && isCompact);
@@ -104,8 +84,7 @@ function DashDotTile({ widget, className }: DashDotTileProps) {
   );
 
   return (
-    <HomarrCardWrapper className={className}>
-      {menu}
+    <>
       {heading}
       {!info && <p>{t('card.errors.noInformation')}</p>}
       {info && (
@@ -126,7 +105,7 @@ function DashDotTile({ widget, className }: DashDotTileProps) {
           </Group>
         </div>
       )}
-    </HomarrCardWrapper>
+    </>
   );
 }
 

src/widgets/date/DateTile.tsx

@@ -1,13 +1,10 @@
 import { Center, Stack, Text, Title } from '@mantine/core';
+import { IconClock } from '@tabler/icons';
 import dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';
-import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
-import { WidgetsMenu } from '../../components/Dashboard/Tiles/Widgets/WidgetsMenu';
-import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
 import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
-import { IconClock } from '@tabler/icons';
 
 const definition = defineWidget({
   id: 'date',
@@ -29,25 +26,21 @@ const definition = defineWidget({
 
 export type IDateWidget = IWidget<typeof definition['id'], typeof definition>;
 
-interface DateTileProps extends BaseTileProps {
-  widget: IDateWidget; // TODO: change to new type defined through widgetDefinition
+interface DateTileProps {
+  widget: IDateWidget;
 }
 
-function DateTile({ className, widget }: DateTileProps) {
+function DateTile({ widget }: DateTileProps) {
   const date = useDateState();
   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} widget={widget} />
     <Center style={{ height: '100%' }}>
       <Stack spacing="xs">
         <Title>{dayjs(date).format(formatString)}</Title>
         <Text size="lg">{dayjs(date).format('dddd, MMMM D')}</Text>
       </Stack>
     </Center>
-    </HomarrCardWrapper>
   );
 }
 

src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx

@@ -1,6 +1,4 @@
-import { IconArrowsUpDown, IconClock } from '@tabler/icons';
-import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
-import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
+import { IconArrowsUpDown } from '@tabler/icons';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 
@@ -20,12 +18,12 @@ const definition = defineWidget({
 
 export type ITorrentNetworkTraffic = IWidget<typeof definition['id'], typeof definition>;
 
-interface TorrentNetworkTrafficTileProps extends BaseTileProps {
-  widget: ITorrentNetworkTraffic; // TODO: change to new type defined through widgetDefinition
+interface TorrentNetworkTrafficTileProps {
+  widget: ITorrentNetworkTraffic;
 }
 
-function TorrentNetworkTrafficTile({ className, widget }: TorrentNetworkTrafficTileProps) {
-  return <HomarrCardWrapper>TorrentNetworkTraffic</HomarrCardWrapper>;
+function TorrentNetworkTrafficTile({ widget }: TorrentNetworkTrafficTileProps) {
+  return null;
 }
 
 export default definition;

src/widgets/useNet/UseNetTile.tsx

@@ -16,16 +16,14 @@ import { useElementSize } from '@mantine/hooks';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
-import { UsenetQueueList } from './UsenetQueueList';
-import { UsenetHistoryList } from './UsenetHistoryList';
-import { BaseTileProps } from '../../components/Dashboard/Tiles/type';
-import { AppIntegrationType } from '../../types/app';
 import { useConfigContext } from '../../config/provider';
 import { useGetUsenetInfo, usePauseUsenetQueue, useResumeUsenetQueue } from '../../tools/hooks/api';
-import { HomarrCardWrapper } from '../../components/Dashboard/Tiles/HomarrCardWrapper';
 import { humanFileSize } from '../../tools/humanFileSize';
+import { AppIntegrationType } from '../../types/app';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
+import { UsenetHistoryList } from './UsenetHistoryList';
+import { UsenetQueueList } from './UsenetQueueList';
 
 dayjs.extend(duration);
 
@@ -46,15 +44,14 @@ const definition = defineWidget({
 
 export type IWeatherWidget = IWidget<typeof definition['id'], typeof definition>;
 
-interface UseNetTileProps extends BaseTileProps {}
+interface UseNetTileProps {}
 
-function UseNetTile({ className }: UseNetTileProps) {
+function UseNetTile({}: UseNetTileProps) {
   const { t } = useTranslation('modules/usenet');
   const { config } = useConfigContext();
   const downloadApps =
-    config?.apps.filter(
-      (x) => x.integration && downloadAppTypes.includes(x.integration.type)
-    ) ?? [];
+    config?.apps.filter((x) => x.integration && downloadAppTypes.includes(x.integration.type)) ??
+    [];
 
   const [selectedAppId, setSelectedApp] = useState<string | null>(downloadApps[0]?.id);
   const { data } = useGetUsenetInfo({ appId: selectedAppId! });
@@ -70,14 +67,12 @@ function UseNetTile({ className }: UseNetTileProps) {
 
   if (downloadApps.length === 0) {
     return (
-      <HomarrCardWrapper className={className}>
       <Stack>
         <Title order={3}>{t('card.errors.noDownloadClients.title')}</Title>
         <Group>
           <Text>{t('card.errors.noDownloadClients.text')}</Text>
         </Group>
       </Stack>
-      </HomarrCardWrapper>
     );
   }
 
@@ -89,7 +84,6 @@ function UseNetTile({ className }: UseNetTileProps) {
   const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
 
   return (
-    <HomarrCardWrapper className={className}>
     <Tabs keepMounted={false} defaultValue="queue">
       <Tabs.List ref={ref} mb="md" style={{ flex: 1 }} grow>
         <Tabs.Tab value="queue">{t('tabs.queue')}</Tabs.Tab>
@@ -132,7 +126,6 @@ function UseNetTile({ className }: UseNetTileProps) {
         <UsenetHistoryList appId={selectedAppId} />
       </Tabs.Panel>
     </Tabs>
-    </HomarrCardWrapper>
   );
 }
 

src/widgets/weather/WeatherTile.tsx

@@ -32,16 +32,16 @@ const definition = defineWidget({
 
 export type IWeatherWidget = IWidget<typeof definition['id'], typeof definition>;
 
-interface WeatherTileProps extends BaseTileProps {
+interface WeatherTileProps {
   widget: IWeatherWidget;
 }
 
-function WeatherTile({ className, widget }: WeatherTileProps) {
+function WeatherTile({ widget }: WeatherTileProps) {
   const { data: weather, isLoading, isError } = useWeatherForCity(widget.properties.location);
 
   if (isLoading) {
     return (
-      <HomarrCardWrapper className={className}>
+      <>
         <Skeleton height={40} width={100} mb="xl" />
         <Group noWrap>
           <Skeleton height={50} circle />
@@ -50,24 +50,20 @@ function WeatherTile({ className, widget }: WeatherTileProps) {
             <Skeleton height={25} width={70} />
           </Group>
         </Group>
-      </HomarrCardWrapper>
+      </>
     );
   }
 
   if (isError) {
     return (
-      <HomarrCardWrapper className={className}>
       <Center>
         <Text weight={500}>An error occured</Text>
       </Center>
-      </HomarrCardWrapper>
     );
   }
 
   // TODO: add widgetWrapper that is generic and uses the definition
   return (
-    <HomarrCardWrapper className={className}>
-      <WidgetsMenu integration={definition.id} widget={widget} />
     <Center style={{ height: '100%' }}>
       <Group spacing="md" noWrap align="center">
         <WeatherIcon code={weather!.current_weather.weathercode} />
@@ -101,7 +97,6 @@ function WeatherTile({ className, widget }: WeatherTileProps) {
         </Stack>
       </Group>
     </Center>
-    </HomarrCardWrapper>
   );
 }