✨ Migrate tiles from id to type

src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx

@@ -28,7 +28,7 @@ export const ChangeWidgetPositionModal = ({
     updateConfig(
       configName,
       (prev) => {
-        const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
+        const currentWidget = prev.widgets.find((x) => x.type === innerProps.widgetType);
         currentWidget!.shape[shapeSize] = {
           location: {
             x,
@@ -42,7 +42,10 @@ export const ChangeWidgetPositionModal = ({
 
         return {
           ...prev,
-          widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
+          widgets: [
+            ...prev.widgets.filter((x) => x.type !== innerProps.widgetType),
+            currentWidget!,
+          ],
         };
       },
       true
@@ -54,8 +57,8 @@ export const ChangeWidgetPositionModal = ({
     closeModal(id);
   };
 
-  const widthData = useWidthData(innerProps.widgetId);
+  const widthData = useWidthData(innerProps.widgetType);
-  const heightData = useHeightData(innerProps.widgetId);
+  const heightData = useHeightData(innerProps.widgetType);
 
   return (
     <ChangePositionModal

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx

@@ -1,6 +1,5 @@
 import { Grid, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
-import { useConfigContext } from '../../../../../../config/provider';
 import widgets from '../../../../../../widgets';
 import { SelectorBackArrow } from '../Shared/SelectorBackArrow';
 import { WidgetElementType } from './WidgetElementType';
@@ -13,7 +12,6 @@ export const AvailableIntegrationElements = ({
   onClickBack,
 }: AvailableIntegrationElementsProps) => {
   const { t } = useTranslation('layout/element-selector/selector');
-  const activeWidgets = useConfigContext().config?.widgets ?? [];
   return (
     <>
       <SelectorBackArrow onClickBack={onClickBack} />
@@ -23,11 +21,9 @@ export const AvailableIntegrationElements = ({
       </Text>
 
       <Grid>
-        {Object.entries(widgets)
+        {Object.entries(widgets).map(([k, v]) => (
-          .filter(([widgetId]) => !activeWidgets.some((aw) => aw.id === widgetId))
+          <WidgetElementType key={k} id={k} image={v.icon} widget={v} />
-          .map(([k, v]) => (
+        ))}
-            <WidgetElementType key={k} id={k} image={v.icon} widget={v} />
-          ))}
       </Grid>
     </>
   );

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx

@@ -2,6 +2,7 @@ import { useModals } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
 import { IconChecks, TablerIcon } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
+import { v4 as uuidv4 } from 'uuid';
 import { useConfigContext } from '../../../../../../config/provider';
 import { useConfigStore } from '../../../../../../config/store';
 import { IWidget, IWidgetDefinition } from '../../../../../../widgets/widgets';
@@ -32,9 +33,10 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
       (prev) => ({
         ...prev,
         widgets: [
-          ...prev.widgets.filter((w) => w.id !== widget.id),
+          ...prev.widgets,
           {
-            id: widget.id,
+            id: uuidv4(),
+            type: widget.id,
             properties: Object.entries(widget.options).reduce((prev, [k, v]) => {
               const newPrev = prev;
               newPrev[k] = v.defaultValue;

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -25,7 +25,7 @@ import { IWidget } from '../../../../widgets/widgets';
 import { DraggableList } from './DraggableList';
 
 export type WidgetEditModalInnerProps = {
-  widgetId: string;
+  widgetType: string;
   options: IWidget<string, any>['properties'];
   widgetOptions: IWidget<string, any>['properties'];
 };
@@ -37,7 +37,8 @@ export const WidgetsEditModal = ({
   id,
   innerProps,
 }: ContextModalProps<WidgetEditModalInnerProps>) => {
-  const { t } = useTranslation([`modules/${innerProps.widgetId}`, 'common']);
+  console.log('?');
+  const { t } = useTranslation([`modules/${innerProps.widgetType}`, 'common']);
   const [moduleProperties, setModuleProperties] = useState(innerProps.options);
   const items = Object.entries(innerProps.widgetOptions ?? {}) as [
     string,
@@ -45,7 +46,7 @@ export const WidgetsEditModal = ({
   ][];
 
   // Find the Key in the "Widgets" Object that matches the widgetId
-  const currentWidgetDefinition = Widgets[innerProps.widgetId as keyof typeof Widgets];
+  const currentWidgetDefinition = Widgets[innerProps.widgetType as keyof typeof Widgets];
   const { name: configName } = useConfigContext();
   const updateConfig = useConfigStore((x) => x.updateConfig);
 
@@ -63,12 +64,15 @@ export const WidgetsEditModal = ({
     updateConfig(
       configName,
       (prev) => {
-        const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
+        const currentWidget = prev.widgets.find((x) => x.type === innerProps.widgetType);
         currentWidget!.properties = moduleProperties;
 
         return {
           ...prev,
-          widgets: [...prev.widgets.filter((x) => x.id !== innerProps.widgetId), currentWidget!],
+          widgets: [
+            ...prev.widgets.filter((x) => x.type !== innerProps.widgetType),
+            currentWidget!,
+          ],
         };
       },
       true
@@ -76,6 +80,8 @@ export const WidgetsEditModal = ({
     context.closeModal(id);
   };
 
+  console.log('??');
+
   return (
     <Stack>
       {items.map(([key, _], index) => {
@@ -100,7 +106,7 @@ export const WidgetsEditModal = ({
           <WidgetOptionTypeSwitch
             key={`${key}.${index}`}
             option={option}
-            widgetId={innerProps.widgetId}
+            widgetId={innerProps.widgetType}
             propName={key}
             value={value}
             handleChange={handleChange}

src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx

@@ -9,7 +9,7 @@ import { WidgetEditModalInnerProps } from './WidgetsEditModal';
 import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal';
 
 export type WidgetChangePositionModalInnerProps = {
-  widgetId: string;
+  widgetType: string;
   widget: IWidget<string, any>;
   wrapperColumnCount: number;
 };
@@ -27,8 +27,8 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
   // Match widget.id with WidgetsDefinitions
   // First get the keys
   const keys = Object.keys(WidgetsDefinitions);
-  // Then find the key that matches the widget.id
+  // Then find the key that matches the widget.type
-  const widgetDefinition = keys.find((key) => key === widget.id);
+  const widgetDefinition = keys.find((key) => key === widget.type);
   // Then get the widget definition
   const widgetDefinitionObject =
     WidgetsDefinitions[widgetDefinition as keyof typeof WidgetsDefinitions];
@@ -38,7 +38,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
       modal: 'integrationRemove',
       title: <Title order={4}>{t('common:remove')}</Title>,
       innerProps: {
-        widgetId: integration,
+        widgetType: integration,
       },
       styles: {
         inner: {
@@ -55,37 +55,24 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
       size: 'xl',
       title: null,
       innerProps: {
-        widgetId: integration,
+        widgetType: integration,
         widget,
         wrapperColumnCount,
       },
-      styles: {
-        inner: {
-          position: 'sticky',
-          top: 30,
-        },
-      },
     });
   };
 
   const handleEditClick = () => {
     openContextModalGeneric<WidgetEditModalInnerProps>({
       modal: 'integrationOptions',
-      title: <Title order={4}>{t('descriptor.settings.title')}</Title>,
+      title: t('descriptor.settings.title'),
       innerProps: {
-        widgetId: integration,
+        widgetType: integration,
         options: widget.properties,
         // Cast as the right type for the correct widget
         widgetOptions: widgetDefinitionObject.options as any,
       },
       zIndex: 5,
-      styles: {
-        inner: {
-          position: 'sticky',
-          top: 30,
-          maxHeight: '100%',
-        },
-      },
     });
   };
 

src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx

@@ -6,7 +6,7 @@ import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 
 export type WidgetsRemoveModalInnerProps = {
-  widgetId: string;
+  widgetType: string;
 };
 
 export const WidgetsRemoveModal = ({
@@ -14,7 +14,7 @@ export const WidgetsRemoveModal = ({
   id,
   innerProps,
 }: ContextModalProps<WidgetsRemoveModalInnerProps>) => {
-  const { t } = useTranslation([`modules/${innerProps.widgetId}`, 'common']);
+  const { t } = useTranslation([`modules/${innerProps.widgetType}`, 'common']);
   const { name: configName } = useConfigContext();
   if (!configName) return null;
   const updateConfig = useConfigStore((x) => x.updateConfig);
@@ -23,7 +23,7 @@ export const WidgetsRemoveModal = ({
       configName,
       (prev) => ({
         ...prev,
-        widgets: prev.widgets.filter((w) => w.id !== innerProps.widgetId),
+        widgets: prev.widgets.filter((w) => w.type !== innerProps.widgetType),
       }),
       true
     );
@@ -35,7 +35,7 @@ export const WidgetsRemoveModal = ({
       <Trans
         i18nKey="common:removeConfirm"
         components={[<Text weight={500} />]}
-        values={{ item: innerProps.widgetId }}
+        values={{ item: innerProps.widgetType }}
       />
       <Group position="right">
         <Button onClick={() => context.closeModal(id)} variant="light">

src/modules/common/MediaDisplay.tsx

@@ -153,7 +153,7 @@ export function RadarrMediaDisplay(props: any) {
 export function SonarrMediaDisplay(props: any) {
   const { media }: { media: any } = props;
   const { config } = useConfigContext();
-  const calendar = config?.widgets.find((w) => w.id === 'calendar');
+  const calendar = config?.widgets.find((w) => w.type === 'calendar');
   const useSonarrv4 = calendar?.properties.useSonarrv4 ?? false;
 
   // Find a poster CoverType

src/pages/api/modules/calendar.ts

@@ -39,7 +39,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
   const config = getConfig(configName);
 
   // Find the calendar widget in the config
-  const calendar = config.widgets.find((w) => w.id === 'calendar');
+  const calendar = config.widgets.find((w) => w.type === 'calendar');
   const useSonarrv4 = calendar?.properties.useSonarrv4 ?? false;
 
   const mediaAppIntegrationTypes: AppIntegrationType['type'][] = [

src/pages/api/modules/dashdot/info.ts

@@ -14,7 +14,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
 
   const config = getConfig(configName);
 
-  const dashDotWidget = config.widgets.find((x) => x.id === 'dashdot');
+  const dashDotWidget = config.widgets.find((x) => x.type === 'dashdot');
 
   if (!dashDotWidget) {
     return res.status(400).json({

src/pages/api/modules/dashdot/storage.ts

@@ -13,7 +13,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
   }
 
   const config = getConfig(configName);
-  const dashDotWidget = config.widgets.find((x) => x.id === 'dashdot');
+  const dashDotWidget = config.widgets.find((x) => x.type === 'dashdot');
 
   if (!dashDotWidget) {
     return res.status(400).json({

src/pages/api/modules/rss/index.ts

@@ -29,7 +29,7 @@ export const Get = async (request: NextApiRequest, response: NextApiResponse) =>
   const configName = getCookie('config-name', { req: request });
   const config = getConfig(configName?.toString() ?? 'default');
 
-  const rssWidget = config.widgets.find((x) => x.id === 'rss') as IRssWidget | undefined;
+  const rssWidget = config.widgets.find((x) => x.type === 'rss') as IRssWidget | undefined;
 
   if (
     !rssWidget ||

src/tools/config/migrateConfig.ts

@@ -183,7 +183,8 @@ const migrateModules = (config: Config): IWidget<string, any>[] => {
         case 'torrent-status':
         case 'Torrent':
           return {
-            id: 'torrents-status',
+            id: uuidv4(),
+            type: 'torrents-status',
             properties: {
               refreshInterval: 10,
               displayCompletedTorrents: oldModule.options?.hideComplete?.value ?? false,
@@ -199,7 +200,8 @@ const migrateModules = (config: Config): IWidget<string, any>[] => {
           } as ITorrent;
         case 'weather':
           return {
-            id: 'weather',
+            id: uuidv4(),
+            type: 'weather',
             properties: {
               displayInFahrenheit: oldModule.options?.freedomunit?.value ?? false,
               location: oldModule.options?.location?.value ?? 'Paris',
@@ -216,7 +218,8 @@ const migrateModules = (config: Config): IWidget<string, any>[] => {
         case 'Dash.': {
           const oldDashDotService = config.services.find((service) => service.type === 'Dash.');
           return {
-            id: 'dashdot',
+            id: uuidv4(),
+            type: 'dashdot',
             properties: {
               url: oldModule.options?.url?.value ?? oldDashDotService?.url ?? '',
               cpuMultiView: oldModule.options?.cpuMultiView?.value ?? false,
@@ -235,7 +238,8 @@ const migrateModules = (config: Config): IWidget<string, any>[] => {
         }
         case 'date':
           return {
-            id: 'date',
+            id: uuidv4(),
+            type: 'date',
             properties: {
               display24HourFormat: oldModule.options?.full?.value ?? true,
             },
@@ -249,7 +253,8 @@ const migrateModules = (config: Config): IWidget<string, any>[] => {
           } as IDateWidget;
         case 'Download Speed' || 'dlspeed':
           return {
-            id: 'dlspeed',
+            id: uuidv4(),
+            type: 'dlspeed',
             properties: {},
             area: {
               type: 'wrapper',
@@ -261,7 +266,8 @@ const migrateModules = (config: Config): IWidget<string, any>[] => {
           } as ITorrentNetworkTraffic;
         case 'calendar':
           return {
-            id: 'calendar',
+            id: uuidv4(),
+            type: 'calendar',
             properties: {},
             area: {
               type: 'wrapper',
@@ -273,7 +279,8 @@ const migrateModules = (config: Config): IWidget<string, any>[] => {
           } as ICalendarWidget;
         case 'usenet':
           return {
-            id: 'usenet',
+            id: uuidv4(),
+            type: 'usenet',
             properties: {},
             area: {
               type: 'wrapper',

src/widgets/WidgetWrapper.tsx

@@ -33,7 +33,7 @@ const useWidget = <T extends IWidget<string, any>>(widget: T): T => {
 };
 
 export const WidgetWrapper = ({
-  widgetType: widgetId,
+  widgetType,
   widget,
   className,
   WidgetComponent,
@@ -43,7 +43,7 @@ export const WidgetWrapper = ({
   return (
     <ErrorBoundary>
       <HomarrCardWrapper className={className}>
-        <WidgetsMenu integration={widgetId} widget={widgetWithDefaultProps} />
+        <WidgetsMenu integration={widgetType} widget={widgetWithDefaultProps} />
         <WidgetComponent widget={widgetWithDefaultProps} />
       </HomarrCardWrapper>
     </ErrorBoundary>

src/widgets/dashDot/DashDotCompactStorage.tsx

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