✨ Migrated widget modals from integration modals

src/widgets/bitTorrent/BitTorrentTile.tsx

@@ -5,7 +5,7 @@ import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 
 const definition = defineWidget({
-  id: 'bitTorrent',
+  id: 'torrents-status',
   icon: IconClock,
   options: {},
   gridstack: {

src/widgets/dashDot/DashDotTile.tsx

@@ -13,7 +13,7 @@ import { DashDotCompactStorage } from './DashDotCompactStorage';
 import { DashDotGraph } from './DashDotGraph';
 
 const definition = defineWidget({
-  id: 'dashDot',
+  id: 'dashdot',
   icon: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/dashdot.png',
   options: {
     cpuMultiView: {
@@ -78,18 +78,7 @@ function DashDotTile({ module, className }: DashDotTileProps) {
 
   const menu = (
     // TODO: add widgetWrapper that is generic and uses the definition
-    <WidgetsMenu<'dashDot'>
-      module={module}
-      integration="dashDot"
-      options={module?.properties}
-      labels={{
-        isCpuMultiView: 'descriptor.settings.cpuMultiView.label',
-        isStorageMultiView: 'descriptor.settings.storageMultiView.label',
-        isCompactView: 'descriptor.settings.useCompactView.label',
-        graphs: 'descriptor.settings.graphs.label',
-        url: 'descriptor.settings.url.label',
-      }}
-    />
+    <WidgetsMenu module={module} integration={definition.id} />
   );
 
   if (!dashDotUrl) {

src/widgets/date/DateTile.tsx

@@ -10,7 +10,7 @@ import { IWidget } from '../widgets';
 import { IconClock } from '@tabler/icons';
 
 const definition = defineWidget({
-  id: 'clock',
+  id: 'date',
   icon: IconClock,
   options: {
     display24HourFormat: {
@@ -18,35 +18,29 @@ const definition = defineWidget({
       defaultValue: false,
     },
   },
-
   gridstack: {
     minWidth: 4,
     minHeight: 2,
     maxWidth: 12,
     maxHeight: 12,
   },
-  component: ClockTile,
+  component: DateTile,
 });
 
-export type IClockWidget = IWidget<typeof definition['id'], typeof definition>;
+export type IDateWidget = IWidget<typeof definition['id'], typeof definition>;
 
-interface ClockTileProps extends BaseTileProps {
-  module: IClockWidget; // TODO: change to new type defined through widgetDefinition
+interface DateTileProps extends BaseTileProps {
+  module: IDateWidget; // TODO: change to new type defined through widgetDefinition
 }
 
-function ClockTile({ className, module }: ClockTileProps) {
+function DateTile({ className, module }: DateTileProps) {
   const date = useDateState();
   const formatString = module.properties.display24HourFormat ? 'HH:mm' : 'h:mm A';
 
   // TODO: add widgetWrapper that is generic and uses the definition
   return (
     <HomarrCardWrapper className={className}>
-      <WidgetsMenu<'clock'>
-        integration="clock"
-        module={module}
-        options={module.properties}
-        labels={{ is24HoursFormat: 'descriptor.settings.display24HourFormat.label' }}
-      />
+      <WidgetsMenu integration={definition.id} module={module} />
       <Center style={{ height: '100%' }}>
         <Stack spacing="xs">
           <Title>{dayjs(date).format(formatString)}</Title>

src/widgets/index.ts

@@ -1,8 +1,16 @@
+import date from './date/DateTile';
 import calendar from './calendar/CalendarTile';
-import dashDot from './dashDot/DashDotTile';
-import useNet from './useNet/UseNetTile';
-import clock from './clock/ClockTile';
+import dashdot from './dashDot/DashDotTile';
+import usenet from './useNet/UseNetTile';
 import weather from './weather/WeatherTile';
 import bitTorrent from './bitTorrent/BitTorrentTile';
 import torrentNetworkTraffic from './torrentNetworkTraffic/TorrentNetworkTrafficTile';
-export default { calendar, dashDot, useNet, clock, weather, bitTorrent, torrentNetworkTraffic };
+export default {
+  calendar,
+  dashdot,
+  usenet,
+  weather,
+  'torrents-status': bitTorrent,
+  dlspeed: torrentNetworkTraffic,
+  date,
+};

src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx

@@ -5,7 +5,7 @@ import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 
 const definition = defineWidget({
-  id: 'torrentNetworkTraffic',
+  id: 'dlspeed',
   icon: IconClock,
   options: {},
 

src/widgets/useNet/UseNetTile.tsx

@@ -32,7 +32,7 @@ dayjs.extend(duration);
 const downloadServiceTypes: ServiceIntegrationType['type'][] = ['sabnzbd', 'nzbGet'];
 
 const definition = defineWidget({
-  id: 'useNet',
+  id: 'usenet',
   icon: IconFileDownload,
   options: {},
   component: UseNetTile,

src/widgets/weather/WeatherTile.tsx

@@ -67,15 +67,7 @@ function WeatherTile({ className, module }: WeatherTileProps) {
   // TODO: add widgetWrapper that is generic and uses the definition
   return (
     <HomarrCardWrapper className={className}>
-      <WidgetsMenu
-        integration="weather"
-        module={module}
-        options={module.properties}
-        labels={{
-          isFahrenheit: 'descriptor.settings.displayInFahrenheit.label',
-          location: 'descriptor.settings.location.label',
-        }}
-      />
+      <WidgetsMenu integration={definition.id} module={module} />
       <Center style={{ height: '100%' }}>
         <Group spacing="md" noWrap align="center">
           <WeatherIcon code={weather!.current_weather.weathercode} />