🎨 Format with prettier

data/configs/default.json

@@ -26,64 +26,6 @@
     }
   ],
   "apps": [
-    {
-      "id": "76217a87-7151-42d0-b0cf-1b72aef63f83",
-      "name": "Small app",
-      "url": "https://homarr.dev",
-      "appearance": {
-        "iconUrl": "/imgs/logo/logo.png"
-      },
-      "network": {
-        "enabledStatusChecker": false,
-        "okStatus": []
-      },
-      "behaviour": {
-        "isOpeningNewTab": true,
-        "externalUrl": "https://homarr.dev"
-      },
-      "area": {
-        "type": "sidebar",
-        "properties": {
-          "location": "left"
-        }
-      },
-      "shape": {
-        "md": {
-          "location": {
-            "x": 0,
-            "y": 0
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        },
-        "sm": {
-          "location": {
-            "x": 0,
-            "y": 0
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        },
-        "lg": {
-          "location": {
-            "x": 0,
-            "y": 0
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        }
-      },
-      "integration": {
-        "type": null,
-        "properties": []
-      }
-    },
     {
       "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a990",
       "name": "Donate",
@@ -145,6 +87,64 @@
         }
       }
     },
+    {
+      "id": "76217a87-7151-42d0-b0cf-1b72aef63f83",
+      "name": "Small app",
+      "url": "https://homarr.dev",
+      "appearance": {
+        "iconUrl": "/imgs/logo/logo.png"
+      },
+      "network": {
+        "enabledStatusChecker": false,
+        "okStatus": []
+      },
+      "behaviour": {
+        "isOpeningNewTab": true,
+        "externalUrl": "https://homarr.dev"
+      },
+      "area": {
+        "type": "sidebar",
+        "properties": {
+          "location": "left"
+        }
+      },
+      "shape": {
+        "md": {
+          "location": {
+            "x": 0,
+            "y": 0
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        },
+        "sm": {
+          "location": {
+            "x": 0,
+            "y": 0
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        },
+        "lg": {
+          "location": {
+            "x": 0,
+            "y": 0
+          },
+          "size": {
+            "width": 1,
+            "height": 1
+          }
+        }
+      },
+      "integration": {
+        "type": null,
+        "properties": []
+      }
+    },
     {
       "id": "e41a11f5-9c6e-41bc-ac0e-4c4c47582faa",
       "name": "Haha",
@@ -169,8 +169,8 @@
       "shape": {
         "md": {
           "location": {
-            "x": 0,
+            "x": 5,
-            "y": 3
+            "y": 1
           },
           "size": {
             "width": 1,
@@ -189,8 +189,8 @@
         },
         "lg": {
           "location": {
-            "x": 0,
+            "x": 4,
-            "y": 6
+            "y": 2
           },
           "size": {
             "width": 1,
@@ -204,13 +204,13 @@
       }
     },
     {
-      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a",
+      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a337",
-      "name": "Documentation",
+      "name": "Discord",
-      "url": "https://homarr.dev",
+      "url": "https://discord.com/invite/aCsmEV5RgA",
       "behaviour": {
-        "onClickUrl": "https://homarr.dev",
+        "onClickUrl": "https://discord.com/invite/aCsmEV5RgA",
-        "externalUrl": "https://homarr.dev",
+        "isOpeningNewTab": true,
-        "isOpeningNewTab": true
+        "externalUrl": "https://discord.com/invite/aCsmEV5RgA"
       },
       "network": {
         "enabledStatusChecker": false,
@@ -219,7 +219,7 @@
         ]
       },
       "appearance": {
-        "iconUrl": "/imgs/logo/logo.png"
+        "iconUrl": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/discord.png"
       },
       "integration": {
         "type": null,
@@ -234,28 +234,28 @@
       "shape": {
         "md": {
           "location": {
-            "x": 0,
+            "x": 3,
-            "y": 10
+            "y": 0
           },
           "size": {
-            "width": 2,
+            "width": 1,
             "height": 1
           }
         },
         "sm": {
           "location": {
             "x": 0,
-            "y": 10
+            "y": 1
           },
           "size": {
-            "width": 2,
+            "width": 1,
             "height": 1
           }
         },
         "lg": {
           "location": {
-            "x": 3,
+            "x": 0,
-            "y": 1
+            "y": 0
           },
           "size": {
             "width": 1,
@@ -308,8 +308,8 @@
         },
         "lg": {
           "location": {
-            "x": 1,
+            "x": 2,
-            "y": 0
+            "y": 2
           },
           "size": {
             "width": 1,
@@ -322,67 +322,6 @@
         "properties": []
       }
     },
-    {
-      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a337",
-      "name": "Discord",
-      "url": "https://discord.com/invite/aCsmEV5RgA",
-      "behaviour": {
-        "onClickUrl": "https://discord.com/invite/aCsmEV5RgA",
-        "isOpeningNewTab": true,
-        "externalUrl": "https://discord.com/invite/aCsmEV5RgA"
-      },
-      "network": {
-        "enabledStatusChecker": false,
-        "okStatus": [
-          200
-        ]
-      },
-      "appearance": {
-        "iconUrl": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/discord.png"
-      },
-      "integration": {
-        "type": null,
-        "properties": []
-      },
-      "area": {
-        "type": "category",
-        "properties": {
-          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
-        }
-      },
-      "shape": {
-        "md": {
-          "location": {
-            "x": 0,
-            "y": 1
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        },
-        "sm": {
-          "location": {
-            "x": 0,
-            "y": 1
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        },
-        "lg": {
-          "location": {
-            "x": 0,
-            "y": 0
-          },
-          "size": {
-            "width": 1,
-            "height": 1
-          }
-        }
-      }
-    },
     {
       "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a330",
       "name": "Contribute",
@@ -414,8 +353,8 @@
       "shape": {
         "md": {
           "location": {
-            "x": 2,
+            "x": 0,
-            "y": 3
+            "y": 1
           },
           "size": {
             "width": 1,
@@ -434,8 +373,8 @@
         },
         "lg": {
           "location": {
-            "x": 2,
+            "x": 3,
-            "y": 3
+            "y": 2
           },
           "size": {
             "width": 1,
@@ -479,7 +418,7 @@
         "md": {
           "location": {
             "x": 0,
-            "y": 5
+            "y": 9
           },
           "size": {
             "width": 1,
@@ -501,29 +440,43 @@
         "type": null,
         "properties": []
       }
-    }
+    },
-  ],
-  "widgets": [
     {
-      "id": "weather",
+      "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33a",
-      "properties": {
+      "name": "Documentation",
-        "displayInFahrenheit": false,
+      "url": "https://homarr.dev",
-        "location": "Paris"
+      "behaviour": {
+        "onClickUrl": "https://homarr.dev",
+        "externalUrl": "https://homarr.dev",
+        "isOpeningNewTab": true
+      },
+      "network": {
+        "enabledStatusChecker": false,
+        "okStatus": [
+          200
+        ]
+      },
+      "appearance": {
+        "iconUrl": "/imgs/logo/logo.png"
+      },
+      "integration": {
+        "type": null,
+        "properties": []
       },
       "area": {
         "type": "category",
         "properties": {
-          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
+          "id": "c1c4bec3-1044-4a80-957f-afe7ff49f421"
         }
       },
       "shape": {
         "md": {
           "location": {
-            "x": 0,
+            "x": 2,
             "y": 0
           },
           "size": {
-            "width": 3,
+            "width": 2,
             "height": 1
           }
         },
@@ -533,66 +486,24 @@
             "y": 0
           },
           "size": {
-            "width": 3,
+            "width": 2,
             "height": 1
           }
         },
         "lg": {
           "location": {
-            "x": 0,
+            "x": 1,
-            "y": 0
+            "y": 2
           },
           "size": {
-            "width": 3,
+            "width": 1,
             "height": 1
           }
         }
       }
-    },
-    {
-      "id": "calendar",
-      "properties": {
-        "sundayStart": false
-      },
-      "area": {
-        "type": "wrapper",
-        "properties": {
-          "id": "default"
     }
-      },
+  ],
-      "shape": {
+  "widgets": [
-        "md": {
-          "location": {
-            "x": 0,
-            "y": 0
-          },
-          "size": {
-            "width": 3,
-            "height": 5
-          }
-        },
-        "sm": {
-          "location": {
-            "x": 0,
-            "y": 0
-          },
-          "size": {
-            "width": 3,
-            "height": 5
-          }
-        },
-        "lg": {
-          "location": {
-            "x": 0,
-            "y": 0
-          },
-          "size": {
-            "width": 3,
-            "height": 5
-          }
-        }
-      }
-    },
     {
       "id": "date",
       "properties": {
@@ -617,8 +528,8 @@
         },
         "md": {
           "location": {
-            "x": 1,
+            "x": 4,
-            "y": 1
+            "y": 0
           },
           "size": {
             "width": 2,
@@ -627,13 +538,102 @@
         },
         "lg": {
           "location": {
-            "x": 1,
+            "x": 7,
-            "y": 1
+            "y": 0
+          },
+          "size": {
+            "width": 5,
+            "height": 2
+          }
+        }
+      }
+    },
+    {
+      "id": "weather",
+      "properties": {
+        "displayInFahrenheit": false,
+        "location": "Paris"
+      },
+      "area": {
+        "type": "category",
+        "properties": {
+          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33f"
+        }
+      },
+      "shape": {
+        "md": {
+          "location": {
+            "x": 0,
+            "y": 0
           },
           "size": {
             "width": 2,
             "height": 1
           }
+        },
+        "sm": {
+          "location": {
+            "x": 0,
+            "y": 0
+          },
+          "size": {
+            "width": 3,
+            "height": 1
+          }
+        },
+        "lg": {
+          "location": {
+            "x": 0,
+            "y": 0
+          },
+          "size": {
+            "width": 7,
+            "height": 2
+          }
+        }
+      }
+    },
+    {
+      "id": "calendar",
+      "properties": {
+        "sundayStart": false
+      },
+      "area": {
+        "type": "wrapper",
+        "properties": {
+          "id": "default"
+        }
+      },
+      "shape": {
+        "md": {
+          "location": {
+            "x": 0,
+            "y": 4
+          },
+          "size": {
+            "width": 3,
+            "height": 5
+          }
+        },
+        "sm": {
+          "location": {
+            "x": 0,
+            "y": 0
+          },
+          "size": {
+            "width": 3,
+            "height": 5
+          }
+        },
+        "lg": {
+          "location": {
+            "x": 0,
+            "y": 0
+          },
+          "size": {
+            "width": 3,
+            "height": 5
+          }
         }
       }
     }
@@ -647,8 +647,8 @@
     },
     "customization": {
       "layout": {
-        "enabledLeftSidebar": true,
+        "enabledLeftSidebar": false,
-        "enabledRightSidebar": true,
+        "enabledRightSidebar": false,
         "enabledDocker": false,
         "enabledPing": false,
         "enabledSearchbar": true

src/components/Config/LoadConfig.tsx

@@ -36,7 +36,9 @@ export const LoadConfigComponent = () => {
         let newConfig: ConfigType = JSON.parse(fileText);
 
         if (!newConfig.schemaVersion) {
-          console.warn('a legacy configuration schema was deteced and migrated to the current schema');
+          console.warn(
+            'a legacy configuration schema was deteced and migrated to the current schema'
+          );
           const oldConfig = JSON.parse(fileText) as Config;
           newConfig = migrateConfig(oldConfig);
         }

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

@@ -14,7 +14,7 @@ export const ChangeWidgetPositionModal = ({
 }: ContextModalProps<WidgetChangePositionModalInnerProps>) => {
   const { name: configName } = useConfigContext();
   const updateConfig = useConfigStore((x) => x.updateConfig);
-  const shapeSize = useGridstackStore(x => x.currentShapeSize);
+  const shapeSize = useGridstackStore((x) => x.currentShapeSize);
 
   const handleSubmit = (x: number, y: number, width: number, height: number) => {
     if (!configName) {
@@ -72,13 +72,14 @@ const useWidthData = (integration: string): SelectItem[] => {
   const currentWidget = widgets[integration as keyof typeof widgets];
   if (!currentWidget) return [];
   const offset = currentWidget.gridstack.minWidth ?? 2;
-  const length = (currentWidget.gridstack.maxWidth > wrapperColumnCount!
+  const length =
+    (currentWidget.gridstack.maxWidth > wrapperColumnCount!
       ? wrapperColumnCount!
       : currentWidget.gridstack.maxWidth) - offset;
   return Array.from({ length: length + 1 }, (_, i) => i + offset).map((n) => ({
     value: n.toString(),
     // eslint-disable-next-line no-mixed-operators
-    label: `${(100 / wrapperColumnCount! * n).toFixed(2)}%`,
+    label: `${((100 / wrapperColumnCount!) * n).toFixed(2)}%`,
   }));
 };
 

src/components/Dashboard/Views/DashboardView.tsx

@@ -17,18 +17,20 @@ export const DashboardView = () => {
 
   return (
     <Group align="top" h="100%">
-      {sidebarsVisible.isLoading ?
+      {sidebarsVisible.isLoading ? (
         <Center w="100%">
           <Loader />
         </Center>
-      :
+      ) : (
         <>
           {sidebarsVisible.left ? (
             <DashboardSidebar location="left" isGridstackReady={isReady} />
           ) : null}
 
           <Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
-          {!isReady ? null : wrappers.map((item) =>
+            {!isReady
+              ? null
+              : wrappers.map((item) =>
                   item.type === 'category' ? (
                     <DashboardCategory key={item.id} category={item as unknown as CategoryType} />
                   ) : (
@@ -41,7 +43,7 @@ export const DashboardView = () => {
             <DashboardSidebar location="right" isGridstackReady={isReady} />
           ) : null}
         </>
-}
+      )}
     </Group>
   );
 };
@@ -49,8 +51,8 @@ export const DashboardView = () => {
 const usePrepareGridstack = () => {
   const mainAreaRef = useRef<HTMLDivElement>(null);
   const { width } = useResize(mainAreaRef, []);
-  const setMainAreaWidth = useGridstackStore(x => x.setMainAreaWidth);
+  const setMainAreaWidth = useGridstackStore((x) => x.setMainAreaWidth);
-  const mainAreaWidth = useGridstackStore(x => x.mainAreaWidth);
+  const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
 
   useEffect(() => {
     if (width === 0) return;

src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx

@@ -41,7 +41,8 @@ const SidebarInner = ({ location }: DashboardSidebarInnerProps) => {
       ref={refs.wrapper}
     >
       <WrapperContent apps={apps} refs={refs} widgets={widgets} />
-</div>);
+    </div>
+  );
 };
 
 const useMinRowForFullHeight = (wrapperRef: RefObject<HTMLDivElement>) =>

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -19,7 +19,7 @@ interface WrapperContentProps {
 }
 
 export function WrapperContent({ apps, refs, widgets }: WrapperContentProps) {
- const shapeSize = useGridstackStore(x => x.currentShapeSize);
+  const shapeSize = useGridstackStore((x) => x.currentShapeSize);
 
   if (!shapeSize) return null;
 

src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts

@@ -64,20 +64,16 @@ export const initializeGridstack = (
 
   grid.batchUpdate();
   grid.removeAll(false);
-  items.forEach(
+  items.forEach(({ id, shape }) => {
-    ({ id, shape }) => {
     const item = itemRefs.current[id]?.current;
     setAttributesFromShape(item, shape[shapeSize]);
     item && grid.makeWidget(item as HTMLDivElement);
-    }
+  });
-  );
+  widgets.forEach(({ id, shape }) => {
-  widgets.forEach(
-    ({ id, shape }) => {
     const item = itemRefs.current[id]?.current;
     setAttributesFromShape(item, shape[shapeSize]);
     item && grid.makeWidget(item as HTMLDivElement);
-    }
+  });
-  );
   grid.batchUpdate(false);
 };
 

src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts

@@ -1,11 +1,5 @@
 import { GridStack, GridStackNode } from 'fily-publish-gridstack';
-import {
+import { createRef, MutableRefObject, RefObject, useEffect, useMemo, useRef } from 'react';
-  createRef,
-  MutableRefObject,
-  RefObject,
-  useEffect, useMemo,
-  useRef,
-} from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { AppType } from '../../../../types/app';
@@ -39,12 +33,13 @@ export const useGridstack = (
   // reference of the gridstack object for modifications after initialization
   const gridRef = useRef<GridStack>();
   const wrapperColumnCount = useWrapperColumnCount();
-  const shapeSize = useGridstackStore(x => x.currentShapeSize);
+  const shapeSize = useGridstackStore((x) => x.currentShapeSize);
-  const mainAreaWidth = useGridstackStore(x => x.mainAreaWidth);
+  const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
   // width of the wrapper (updating on page resize)
   const root: HTMLHtmlElement = useMemo(() => document.querySelector(':root')!, []);
 
-  if (!mainAreaWidth || !shapeSize || !wrapperColumnCount) throw new Error('UseGridstack should not be executed before mainAreaWidth has been set!');
+  if (!mainAreaWidth || !shapeSize || !wrapperColumnCount)
+    throw new Error('UseGridstack should not be executed before mainAreaWidth has been set!');
 
   const items = useMemo(
     () =>

src/components/Settings/Customization/CustomizationSettings.tsx

@@ -47,7 +47,9 @@ export default function CustomizationSettings() {
         <OpacitySelector defaultValue={config?.settings.customization.appOpacity} />
       </ScrollArea>
 
-      <Button onClick={saveConfiguration} variant="light">Save Customizations</Button>
+      <Button onClick={saveConfiguration} variant="light">
+        Save Customizations
+      </Button>
     </Stack>
   );
 }

src/config/store.ts

@@ -70,7 +70,7 @@ interface UseConfigStoreType {
   addConfig: (
     name: string,
     config: ConfigType,
-    shouldSaveConfigToFileSystem: boolean,
+    shouldSaveConfigToFileSystem: boolean
   ) => Promise<void>;
   updateConfig: (
     name: string,

src/hooks/use-resize.ts

@@ -11,12 +11,8 @@ export const useResize = (myRef: MutableRefObject<HTMLDivElement | null>, depend
   }, [myRef]);
 
   useEffect(() => {
-    window.addEventListener('load', () =>
+    window.addEventListener('load', () => handleResize());
-    handleResize()
+    window.addEventListener('resize', () => handleResize());
-    );
-    window.addEventListener('resize', () =>
-    handleResize()
-    );
 
     return () => {
       window.removeEventListener('load', handleResize);

src/hooks/widgets/dashDot/api.ts

@@ -1,7 +1,10 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { Results } from 'sabnzbd-api';
-import { UsenetQueueRequestParams, UsenetQueueResponse } from '../../../pages/api/modules/usenet/queue';
+import {
+  UsenetQueueRequestParams,
+  UsenetQueueResponse,
+} from '../../../pages/api/modules/usenet/queue';
 import {
   UsenetHistoryRequestParams,
   UsenetHistoryResponse,

src/pages/api/modules/torrents.ts

@@ -40,7 +40,8 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
     );
     await Promise.all(
       delugeApp.map((app) => {
-        const password = app.integration?.properties.find((x) => x.field === 'password')?.value ?? undefined;
+        const password =
+          app.integration?.properties.find((x) => x.field === 'password')?.value ?? undefined;
         const test = new Deluge({
           baseUrl: app.url,
           password,

src/widgets/useNet/UseNetTile.tsx

@@ -17,7 +17,11 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../config/provider';
-import { useGetUsenetInfo, usePauseUsenetQueue, useResumeUsenetQueue } from '../../hooks/widgets/dashDot/api';
+import {
+  useGetUsenetInfo,
+  usePauseUsenetQueue,
+  useResumeUsenetQueue,
+} from '../../hooks/widgets/dashDot/api';
 import { humanFileSize } from '../../tools/humanFileSize';
 import { AppIntegrationType } from '../../types/app';
 import { defineWidget } from '../helper';