Merge pull request #167 from ajnart/build-optimization

Build optimization

.github/workflows/docker.yml

@@ -52,7 +52,7 @@ jobs:
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
-      - run: yarn install --frozen-lockfile
+      - run: yarn install --immutable
       - run: yarn build
       - name: Cache build output
       # to copy needed files to docker build job

.github/workflows/docker_dev.yml

@@ -62,7 +62,7 @@ jobs:
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
 
-      - run: yarn install --frozen-lockfile
+      - run: yarn install --immutable
       - run: yarn build
 
       - name: Cache build output

.gitignore

@@ -36,4 +36,14 @@ yarn-error.log*
 
 # storybook
 storybook-static
-data/configs
+data/configs
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+# Yarn v2
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.19.cjs"

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.2.1.cjs

package.json

@@ -1,7 +1,6 @@
 {
 	"name": "homarr",
 	"version": "0.6.0",
-	"private": "false",
 	"description": "Homarr - A homepage for your server.",
 	"repository": {
 		"type": "git",
@@ -27,8 +26,10 @@
 	"dependencies": {
 		"@ctrl/deluge": "^4.0.0",
 		"@ctrl/qbittorrent": "^4.0.0",
+		"@ctrl/shared-torrent": "^4.1.0",
 		"@dnd-kit/core": "^6.0.1",
 		"@dnd-kit/sortable": "^7.0.0",
+		"@dnd-kit/utilities": "^3.2.0",
 		"@mantine/core": "^4.2.6",
 		"@mantine/dates": "^4.2.6",
 		"@mantine/dropzone": "^4.2.6",
@@ -39,6 +40,7 @@
 		"@mantine/prism": "^4.2.6",
 		"@nivo/core": "^0.79.0",
 		"@nivo/line": "^0.79.1",
+		"@tabler/icons": "^1.68.0",
 		"axios": "^0.27.2",
 		"cookies-next": "^2.0.4",
 		"dayjs": "^1.11.2",
@@ -48,7 +50,6 @@
 		"prism-react-renderer": "^1.3.1",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
-		"tabler-icons-react": "^1.46.0",
 		"uuid": "^8.3.2"
 	},
 	"devDependencies": {
@@ -80,5 +81,6 @@
 	},
 	"resolutions": {
 		"@types/react": "17.0.30"
-	}
+	},
+	"packageManager": "yarn@3.2.1"
 }

src/components/AppShelf/AddAppShelfItem.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useState } from 'react';
-import { Apps } from 'tabler-icons-react';
+import { IconApps as Apps } from '@tabler/icons';
 import { v4 as uuidv4 } from 'uuid';
 import { useConfig } from '../../tools/state';
 import { ServiceTypeList } from '../../tools/types';

src/components/AppShelf/AppShelfMenu.tsx

@@ -1,7 +1,7 @@
 import { Menu, Modal, Text, useMantineTheme } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
-import { Check, Edit, Trash } from 'tabler-icons-react';
+import { IconCheck as Check, IconEdit as Edit, IconTrash as Trash } from '@tabler/icons';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import { AddAppShelfItemForm } from './AddAppShelfItem';

src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createStyles, Switch, Group, useMantineColorScheme, Kbd } from '@mantine/core';
-import { Sun, MoonStars } from 'tabler-icons-react';
+import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
 
 const useStyles = createStyles((theme) => ({
   root: {

src/components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -1,5 +1,5 @@
 import { Box, useMantineColorScheme } from '@mantine/core';
-import { Sun, MoonStars } from 'tabler-icons-react';
+import { IconSun as Sun, IconMoonStars as MoonStars } from '@tabler/icons';
 import { motion } from 'framer-motion';
 
 export function ColorSchemeToggle() {

src/components/Config/LoadConfig.tsx

@@ -1,5 +1,11 @@
 import { Group, Text, useMantineTheme, MantineTheme } from '@mantine/core';
-import { Upload, Photo, X, Icon as TablerIcon, Check } from 'tabler-icons-react';
+import {
+  IconUpload as Upload,
+  IconPhoto as Photo,
+  IconX as X,
+  IconCheck as Check,
+  TablerIcon,
+} from '@tabler/icons';
 import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
 import { useRef } from 'react';

src/components/Config/SaveConfig.tsx

@@ -4,7 +4,13 @@ import { showNotification } from '@mantine/notifications';
 import axios from 'axios';
 import fileDownload from 'js-file-download';
 import { useState } from 'react';
-import { Check, Download, Plus, Trash, X } from 'tabler-icons-react';
+import {
+  IconCheck as Check,
+  IconDownload as Download,
+  IconPlus as Plus,
+  IconTrash as Trash,
+  IconX as X,
+} from '@tabler/icons';
 import { useConfig } from '../../tools/state';
 
 export default function SaveConfigComponent(props: any) {

src/components/Settings/SettingsMenu.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mantine/core';
 import { useColorScheme, useHotkeys } from '@mantine/hooks';
 import { useState } from 'react';
-import { BrandGithub, Settings as SettingsIcon } from 'tabler-icons-react';
+import { IconBrandGithub as BrandGithub, IconSettings } from '@tabler/icons';
 import { CURRENT_VERSION } from '../../../data/constants';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
@@ -154,7 +154,7 @@ export function SettingsMenuButton(props: any) {
         onClick={() => setOpened(true)}
       >
         <Tooltip label="Settings">
-          <SettingsIcon />
+          <IconSettings />
         </Tooltip>
       </ActionIcon>
     </>

src/components/modules/calendar/CalendarModule.tsx

@@ -3,7 +3,7 @@ import { Box, Divider, Indicator, Popover, ScrollArea, useMantineTheme } from '@
 import React, { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import { showNotification } from '@mantine/notifications';
-import { Calendar as CalendarIcon, Check } from 'tabler-icons-react';
+import { IconCalendar as CalendarIcon, IconCheck as Check } from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 import {

src/components/modules/calendar/MediaDisplay.tsx

@@ -1,5 +1,5 @@
 import { Image, Group, Title, Badge, Text, ActionIcon, Anchor, ScrollArea } from '@mantine/core';
-import { Link } from 'tabler-icons-react';
+import { IconLink as Link } from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { serviceItem } from '../../../tools/types';
 

src/components/modules/date/DateModule.tsx

@@ -1,7 +1,7 @@
 import { Group, Text, Title } from '@mantine/core';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
-import { Clock } from 'tabler-icons-react';
+import { IconClock as Clock } from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 

src/components/modules/downloads/DownloadsModule.tsx

@@ -1,5 +1,5 @@
 import { Table, Text, Tooltip, Title, Group, Progress, Skeleton } from '@mantine/core';
-import { Download } from 'tabler-icons-react';
+import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { NormalizedTorrent } from '@ctrl/shared-torrent';

src/components/modules/downloads/TotalDownloadsModule.tsx

@@ -1,5 +1,5 @@
 import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch } from '@mantine/core';
-import { Download } from 'tabler-icons-react';
+import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
 import { NormalizedTorrent } from '@ctrl/shared-torrent';

src/components/modules/ping/PingModule.tsx

@@ -2,7 +2,7 @@ import { Indicator, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
-import { Plug } from 'tabler-icons-react';
+import { IconPlug as Plug } from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 

src/components/modules/search/SearchModule.tsx

@@ -1,7 +1,11 @@
 import { TextInput, Kbd, createStyles, Text, Popover } from '@mantine/core';
 import { useForm, useHotkeys } from '@mantine/hooks';
 import { useRef, useState } from 'react';
-import { Search, BrandYoutube, Download } from 'tabler-icons-react';
+import {
+  IconSearch as Search,
+  IconBrandYoutube as BrandYoutube,
+  IconDownload as Download,
+} from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 

src/components/modules/weather/WeatherModule.tsx

@@ -2,17 +2,17 @@ import { Group, Space, Title, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import {
-  ArrowDownRight,
+  IconArrowDownRight as ArrowDownRight,
-  ArrowUpRight,
+  IconArrowUpRight as ArrowUpRight,
-  Cloud,
+  IconCloud as Cloud,
-  CloudFog,
+  IconCloudFog as CloudFog,
-  CloudRain,
+  IconCloudRain as CloudRain,
-  CloudSnow,
+  IconCloudSnow as CloudSnow,
-  CloudStorm,
+  IconCloudStorm as CloudStorm,
-  QuestionMark,
+  IconQuestionMark as QuestionMark,
-  Snowflake,
+  IconSnowflake as Snowflake,
-  Sun,
+  IconSun as Sun,
-} from 'tabler-icons-react';
+} from '@tabler/icons';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 import { WeatherResponse } from './WeatherInterface';

src/tools/state.tsx

@@ -2,7 +2,7 @@
 import { showNotification } from '@mantine/notifications';
 import axios from 'axios';
 import { createContext, ReactNode, useContext, useState } from 'react';
-import { Check, X } from 'tabler-icons-react';
+import { IconCheck as Check, IconX as X } from '@tabler/icons';
 import { Config } from './types';
 
 type configContextType = {

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -15,6 +19,13 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next.config.js"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "next.config.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }