🎨 Format with prettier

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!
-    ? wrapperColumnCount!
-    : currentWidget.gridstack.maxWidth) - offset;
+  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,31 +17,33 @@ 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}
+      ) : (
+        <>
+          {sidebarsVisible.left ? (
+            <DashboardSidebar location="left" isGridstackReady={isReady} />
+          ) : null}
 
-        <Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
-          {!isReady ? null : wrappers.map((item) =>
-            item.type === 'category' ? (
-              <DashboardCategory key={item.id} category={item as unknown as CategoryType} />
-            ) : (
-              <DashboardWrapper key={item.id} wrapper={item as WrapperType} />
-            )
-          )}
-        </Stack>
+          <Stack ref={mainAreaRef} mx={-10} style={{ flexGrow: 1 }}>
+            {!isReady
+              ? null
+              : wrappers.map((item) =>
+                  item.type === 'category' ? (
+                    <DashboardCategory key={item.id} category={item as unknown as CategoryType} />
+                  ) : (
+                    <DashboardWrapper key={item.id} wrapper={item as WrapperType} />
+                  )
+                )}
+          </Stack>
 
-        {sidebarsVisible.right ? (
-          <DashboardSidebar location="right" isGridstackReady={isReady} />
-        ) : null}
-      </>
-}
+          {sidebarsVisible.right ? (
+            <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 mainAreaWidth = useGridstackStore(x => x.mainAreaWidth);
+  const setMainAreaWidth = useGridstackStore((x) => x.setMainAreaWidth);
+  const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
 
   useEffect(() => {
     if (width === 0) return;

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

@@ -9,21 +9,21 @@ interface DashboardSidebarProps extends DashboardSidebarInnerProps {
 }
 
 export const DashboardSidebar = ({ location, isGridstackReady }: DashboardSidebarProps) => (
-    <Card
-      withBorder
-      w={300}
-      style={{
-        background: 'none',
-        borderStyle: 'dashed',
-      }}
-    >
-      {isGridstackReady && <SidebarInner location={location} />}
-    </Card>
-  );
+  <Card
+    withBorder
+    w={300}
+    style={{
+      background: 'none',
+      borderStyle: 'dashed',
+    }}
+  >
+    {isGridstackReady && <SidebarInner location={location} />}
+  </Card>
+);
 
-  interface DashboardSidebarInnerProps {
-    location: 'right' | 'left';
-  }
+interface DashboardSidebarInnerProps {
+  location: 'right' | 'left';
+}
 
 // Is Required because of the gridstack main area width.
 const SidebarInner = ({ location }: DashboardSidebarInnerProps) => {
@@ -32,16 +32,17 @@ const SidebarInner = ({ location }: DashboardSidebarInnerProps) => {
   const minRow = useMinRowForFullHeight(refs.wrapper);
 
   return (
-<div
-  className="grid-stack grid-stack-sidebar"
-  style={{ transitionDuration: '0s', height: '100%' }}
-  data-sidebar={location}
-  // eslint-disable-next-line react/no-unknown-property
-  gs-min-row={minRow}
-  ref={refs.wrapper}
->
-  <WrapperContent apps={apps} refs={refs} widgets={widgets} />
-</div>);
+    <div
+      className="grid-stack grid-stack-sidebar"
+      style={{ transitionDuration: '0s', height: '100%' }}
+      data-sidebar={location}
+      // eslint-disable-next-line react/no-unknown-property
+      gs-min-row={minRow}
+      ref={refs.wrapper}
+    >
+      <WrapperContent apps={apps} refs={refs} widgets={widgets} />
+    </div>
+  );
 };
 
 const useMinRowForFullHeight = (wrapperRef: RefObject<HTMLDivElement>) =>

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -19,9 +19,9 @@ 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;
+  if (!shapeSize) return null;
 
   return (
     <>

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

@@ -64,20 +64,16 @@ export const initializeGridstack = (
 
   grid.batchUpdate();
   grid.removeAll(false);
-  items.forEach(
-    ({ id, shape }) => {
-      const item = itemRefs.current[id]?.current;
-      setAttributesFromShape(item, shape[shapeSize]);
-      item && grid.makeWidget(item as HTMLDivElement);
-    }
-  );
-  widgets.forEach(
-    ({ id, shape }) => {
-      const item = itemRefs.current[id]?.current;
-      setAttributesFromShape(item, shape[shapeSize]);
-      item && grid.makeWidget(item as HTMLDivElement);
-    }
-  );
+  items.forEach(({ id, shape }) => {
+    const item = itemRefs.current[id]?.current;
+    setAttributesFromShape(item, shape[shapeSize]);
+    item && grid.makeWidget(item as HTMLDivElement);
+  });
+  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 {
-  createRef,
-  MutableRefObject,
-  RefObject,
-  useEffect, useMemo,
-  useRef,
-} from 'react';
+import { 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 mainAreaWidth = useGridstackStore(x => x.mainAreaWidth);
+  const shapeSize = useGridstackStore((x) => x.currentShapeSize);
+  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(
     () =>
@@ -86,7 +81,7 @@ export const useGridstack = (
   }, [mainAreaWidth, wrapperColumnCount, gridRef.current]);
 
   useEffect(() => {
-        // column count is used to define count of columns of gridstack within global.scss
+    // column count is used to define count of columns of gridstack within global.scss
     root.style.setProperty('--gridstack-column-count', wrapperColumnCount.toString());
   }, [wrapperColumnCount]);
 

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', () =>
-    handleResize()
-    );
-    window.addEventListener('resize', () =>
-    handleResize()
-    );
+    window.addEventListener('load', () => 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/WidgetWrapper.tsx

@@ -11,8 +11,8 @@ interface WidgetWrapperProps {
 }
 
 export const WidgetWrapper = ({ widgetId, widget, className, children }: WidgetWrapperProps) => (
-    <HomarrCardWrapper className={className}>
-      <WidgetsMenu integration={widgetId} widget={widget} />
-      {children}
-    </HomarrCardWrapper>
-  );
+  <HomarrCardWrapper className={className}>
+    <WidgetsMenu integration={widgetId} widget={widget} />
+    {children}
+  </HomarrCardWrapper>
+);

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';