Linting

src/components/About/AboutModal.tsx

@@ -50,8 +50,8 @@ export const AboutModal = ({ opened, closeModal }: AboutModalProps) => {
     >
       <Text mb="lg">
         Homarr is a simple and modern homepage for your server that helps you access all of your
-        apps in one place. It integrates with the apps you use to display useful information
-        or control them. It&apos;s easy to install and supports many different devices.
+        apps in one place. It integrates with the apps you use to display useful information or
+        control them. It&apos;s easy to install and supports many different devices.
       </Text>
 
       <Title order={6} mb="xs" align="center">

src/components/AppShelf/AppShelf.tsx

@@ -12,7 +12,6 @@ import {
 
 import { arrayMove, SortableContext } from '@dnd-kit/sortable';
 import { useLocalStorage } from '@mantine/hooks';
-import { useTranslation } from 'next-i18next';
 import * as Modules from '../../modules';
 import { useConfig } from '../../tools/state';
 

src/components/Config/ConfigChanger.tsx

@@ -47,11 +47,9 @@ export default function ConfigChanger() {
   );
 }
 
-const useConfigsQuery = () => {
-  return useQuery({
+const useConfigsQuery = () => useQuery({
     queryKey: ['config/get-all'],
     queryFn: fetchConfigs,
   });
-};
 
 const fetchConfigs = async () => (await (await fetch('/api/configs')).json()) as string[];

src/components/Dashboard/Dashboard.tsx

@@ -3,8 +3,6 @@ import { DashboardDetailView } from './Views/DetailView';
 import { DashboardEditView } from './Views/EditView';
 import { useEditModeStore } from './Views/useEditModeStore';
 
-interface DashboardProps {}
-
 export const Dashboard = () => {
   const isEditMode = useEditModeStore((x) => x.enabled);
 

src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx

@@ -10,8 +10,7 @@ interface MobileRibbonSidebarDrawerProps {
 export const MobileRibbonSidebarDrawer = ({
   location,
   ...props
-}: MobileRibbonSidebarDrawerProps) => {
-  return (
+}: MobileRibbonSidebarDrawerProps) => (
     <Drawer
       position={location}
       title={<Title order={4}>{location} sidebar</Title>}
@@ -24,4 +23,3 @@ export const MobileRibbonSidebarDrawer = ({
       <DashboardSidebar location={location} />
     </Drawer>
   );
-};

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

@@ -22,7 +22,7 @@ export const ChangeWidgetPositionModal = ({
     updateConfig(
       configName,
       (prev) => {
-        let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
+        const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
         currentWidget!.shape = {
           location: {
             x,

src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx

@@ -29,11 +29,7 @@ interface IconSelectorProps {
   allowAppNamePropagation: boolean;
 }
 
-export const IconSelector = ({
-  onChange,
-  allowAppNamePropagation,
-  form,
-}: IconSelectorProps) => {
+export const IconSelector = ({ onChange, allowAppNamePropagation, form }: IconSelectorProps) => {
   const { data, isLoading } = useRepositoryIconsQuery<WalkxcodeRepositoryIcon>({
     url: 'https://api.github.com/repos/walkxcode/Dashboard-Icons/contents/png',
     converter: (item) => ({

src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx

@@ -1,6 +1,5 @@
-import { Tabs, TextInput, Switch, Text } from '@mantine/core';
+import { Tabs, Switch } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
-import { IconClick } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { AppType } from '../../../../../../types/app';
 

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx

@@ -31,9 +31,9 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
         let indexInFormValue =
           form.values.integration?.properties.findIndex((p) => p.field === property) ?? -1;
         if (indexInFormValue === -1) {
-          const type = Object.entries(integrationFieldDefinitions).find(
+          const { type } = Object.entries(integrationFieldDefinitions).find(
             ([k, v]) => k === property
-          )![1].type;
+          )![1];
           const newProperty: AppIntegrationPropertyType = {
             type,
             field: property as IntegrationField,

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx

@@ -20,12 +20,7 @@ export const IntegrationTab = ({ form }: IntegrationTabProps) => {
 
       {hasIntegrationSelected && (
         <>
-          <Divider
-            label={t('integration.type.label')}
-            labelPosition="center"
-            mt="xl"
-            mb="md"
-          />
+          <Divider label={t('integration.type.label')} labelPosition="center" mt="xl" mb="md" />
           <Text size="sm" color="dimmed" mb="lg">
             {t('integration.secrets.description')}
           </Text>

src/components/Dashboard/Modals/EditAppModal/Tabs/type.ts

@@ -1,6 +1 @@
-export type EditAppModalTab =
-  | 'general'
-  | 'behaviour'
-  | 'network'
-  | 'appereance'
-  | 'integration';
+export type EditAppModalTab = 'general' | 'behaviour' | 'network' | 'appereance' | 'integration';

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

@@ -21,9 +21,7 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
 
   if (!configName) return null;
 
-  const getLowestWrapper = () => {
-    return config?.wrappers.sort((a, b) => a.position - b.position)[0];
-  };
+  const getLowestWrapper = () => config?.wrappers.sort((a, b) => a.position - b.position)[0];
 
   const handleAddition = async () => {
     updateConfig(

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

@@ -1,4 +1,4 @@
-import { Card, Center, Text, UnstyledButton } from '@mantine/core';
+import { Center, Text, UnstyledButton } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import { createStyles } from '@mantine/styles';
 import { AppType } from '../../../../types/app';

src/components/Dashboard/Tiles/EmptyTile.tsx

@@ -1,6 +1,6 @@
 import { HomarrCardWrapper } from './HomarrCardWrapper';
 import { BaseTileProps } from './type';
 
-export const EmptyTile = ({ className }: BaseTileProps) => {
-  return <HomarrCardWrapper className={className}>Empty</HomarrCardWrapper>;
-};
+export const EmptyTile = ({ className }: BaseTileProps) => (
+  <HomarrCardWrapper className={className}>Empty</HomarrCardWrapper>
+);

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

@@ -1,8 +1,8 @@
-import Widgets from '../../../../widgets';
 import { Button, Group, MultiSelect, Stack, Switch, TextInput } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
+import Widgets from '../../../../widgets';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { IWidget } from '../../../../widgets/widgets';
@@ -48,7 +48,7 @@ export const WidgetsEditModal = ({
     updateConfig(
       configName,
       (prev) => {
-        let currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
+        const currentWidget = prev.widgets.find((x) => x.id === innerProps.widgetId);
         currentWidget!.properties = moduleProperties;
 
         return {

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

@@ -38,7 +38,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
       title: null,
       innerProps: {
         widgetId: integration,
-        widget: widget,
+        widget,
       },
     });
   };

src/components/Dashboard/Views/DetailView.tsx

@@ -1,5 +1,3 @@
 import { DashboardView } from './DashboardView';
 
-export const DashboardDetailView = () => {
-  return <DashboardView />;
-};
+export const DashboardDetailView = () => <DashboardView />;

src/components/Dashboard/Wrappers/Category/Category.tsx

@@ -1,10 +1,6 @@
-import { Card, Group, Title } from '@mantine/core';
+import { Group, Title } from '@mantine/core';
 import { CategoryType } from '../../../../types/category';
-import { IWidgetDefinition } from '../../../../widgets/widgets';
 import { HomarrCardWrapper } from '../../Tiles/HomarrCardWrapper';
-import { Tiles } from '../../Tiles/tilesDefinitions';
-import Widgets from '../../../../widgets';
-import { GridstackTileWrapper } from '../../Tiles/TileWrapper';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { useGridstack } from '../gridstack/use-gridstack';
 import { CategoryEditMenu } from './CategoryEditMenu';

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

@@ -1,9 +1,5 @@
 import { Card } from '@mantine/core';
 import { RefObject } from 'react';
-import { IWidgetDefinition } from '../../../../widgets/widgets';
-import { Tiles } from '../../Tiles/tilesDefinitions';
-import Widgets from '../../../../widgets';
-import { GridstackTileWrapper } from '../../Tiles/TileWrapper';
 import { useGridstack } from '../gridstack/use-gridstack';
 import { WrapperContent } from '../WrapperContent';
 
@@ -38,6 +34,5 @@ export const DashboardSidebar = ({ location }: DashboardSidebarProps) => {
   );
 };
 
-const useMinRowForFullHeight = (wrapperRef: RefObject<HTMLDivElement>) => {
-  return wrapperRef.current ? Math.floor(wrapperRef.current!.offsetHeight / 64) : 2;
-};
+const useMinRowForFullHeight = (wrapperRef: RefObject<HTMLDivElement>) =>
+  wrapperRef.current ? Math.floor(wrapperRef.current!.offsetHeight / 64) : 2;

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -19,44 +19,44 @@ interface WrapperContentProps {
 }
 
 export const WrapperContent = ({ apps, refs, widgets }: WrapperContentProps) => (
-    <>
-      {apps?.map((app) => {
-        const { component: TileComponent, ...tile } = Tiles.app;
-        return (
-          <GridstackTileWrapper
-            id={app.id}
-            type="app"
-            key={app.id}
-            itemRef={refs.items.current[app.id]}
-            {...tile}
-            {...app.shape.location}
-            {...app.shape.size}
-          >
-            <TileComponent className="grid-stack-item-content" app={app} />
-          </GridstackTileWrapper>
-        );
-      })}
-      {widgets.map((widget) => {
-        const definition = Widgets[widget.id as keyof typeof Widgets] as
-          | IWidgetDefinition
-          | undefined;
-        if (!definition) return null;
+  <>
+    {apps?.map((app) => {
+      const { component: TileComponent, ...tile } = Tiles.app;
+      return (
+        <GridstackTileWrapper
+          id={app.id}
+          type="app"
+          key={app.id}
+          itemRef={refs.items.current[app.id]}
+          {...tile}
+          {...app.shape.location}
+          {...app.shape.size}
+        >
+          <TileComponent className="grid-stack-item-content" app={app} />
+        </GridstackTileWrapper>
+      );
+    })}
+    {widgets.map((widget) => {
+      const definition = Widgets[widget.id as keyof typeof Widgets] as
+        | IWidgetDefinition
+        | undefined;
+      if (!definition) return null;
 
-        return (
-          <GridstackTileWrapper
-            type="widget"
-            key={widget.id}
-            itemRef={refs.items.current[widget.id]}
-            id={definition.id}
-            {...definition.gridstack}
-            {...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>
-        );
-      })}
-    </>
-  );
+      return (
+        <GridstackTileWrapper
+          type="widget"
+          key={widget.id}
+          itemRef={refs.items.current[widget.id]}
+          id={definition.id}
+          {...definition.gridstack}
+          {...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/components/Settings/Common/CommonSettings.tsx

@@ -4,7 +4,6 @@ import ConfigChanger from '../../Config/ConfigChanger';
 import ConfigActions from './Config/ConfigActions';
 import LanguageSelect from './Language/LanguageSelect';
 import { SearchEngineSelector } from './SearchEngine/SearchEngineSelector';
-import { SearchNewTabSwitch } from './SearchNewTabSwitch';
 
 export default function CommonSettings() {
   const { config } = useConfigContext();

src/components/Settings/Customization/Layout/LayoutSelector.tsx

@@ -1,6 +1,5 @@
 import {
   ActionIcon,
-  Center,
   Checkbox,
   createStyles,
   Flex,

src/components/Settings/SettingsDrawer.tsx

@@ -1,7 +1,4 @@
-import { ActionIcon, Title, Tooltip, Drawer, Tabs, ScrollArea } from '@mantine/core';
-import { useHotkeys } from '@mantine/hooks';
-import { useState } from 'react';
-import { IconSettings } from '@tabler/icons';
+import { Title, Drawer, Tabs, ScrollArea } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 
 import CustomizationSettings from './Customization/CustomizationSettings';

src/components/layout/header/Search.tsx

@@ -60,8 +60,7 @@ export function Search() {
   // Overseerr is not use anywhere else, so it makes no sense to add a standalone toggle for displaying results
   const isOverseerrEnabled = false; //config?.settings.common.enabledModules.overseerr;
   const overseerrApp = config?.apps.find(
-    (app) =>
-      app.integration?.type === 'overseerr' || app.integration?.type === 'jellyseerr'
+    (app) => app.integration?.type === 'overseerr' || app.integration?.type === 'jellyseerr'
   );
   const searchEngineSettings = config?.settings.common.searchEngine;
   const searchEngineUrl = !searchEngineSettings

src/components/layout/header/SettingsMenu/ColorSchemeSwitch.tsx

@@ -1,4 +1,4 @@
-import { Menu, useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import { Menu, useMantineColorScheme } from '@mantine/core';
 import { IconMoonStars, IconSun } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';