🚸 Improve UX and QoL

.yarnrc

@@ -1,5 +0,0 @@
-# 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

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

data/configs/default.json

@@ -2,11 +2,11 @@
   "name": "default",
   "services": [
     {
-      "name": "example",
+      "id": "1ed0e82b-c432-4371-8e1e-876b76d4ce20",
-      "id": "09c45847-8afc-4c1a-9697-f03192de948a",
+      "type": "Plex",
-      "type": "Other",
+      "name": "Plex",
-      "icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
+      "icon": "https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/plex.png",
-      "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+      "url": "https://plex.com"
     }
   ],
   "settings": {
@@ -17,7 +17,22 @@
       "enabled": true
     },
     "Date": {
-      "enabled": false
+      "enabled": true
+    },
+    "Download Speed": {
+      "enabled": true
+    },
+    "Torrent": {
+      "enabled": true
+    },
+    "Ping Services": {
+      "enabled": true
+    },
+    "Calendar": {
+      "enabled": true
+    },
+    "Weather (beta)": {
+      "enabled": true
     }
   }
 }

src/components/AppShelf/AddAppShelfItem.tsx

@@ -256,14 +256,14 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                   color: 'gray',
                 }}
               >
-                tip: Get your API key{' '}
+                Tip: Get your API key{' '}
                 <Anchor
                   target="_blank"
                   weight="bold"
                   style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
                   href={`${hostname}/settings/general`}
                 >
-                  here
+                  here.
                 </Anchor>
               </Text>
             </>

src/components/AppShelf/AppShelfItem.tsx

@@ -91,11 +91,11 @@ export function AppShelfItem(props: any) {
             >
               <motion.i
                 whileHover={{
-                  cursor: 'pointer',
                   scale: 1.1,
                 }}
               >
                 <Image
+                  styles={{ root: { cursor: 'pointer' } }}
                   width={80}
                   height={80}
                   src={service.icon}

src/components/AppShelf/AppShelfMenu.tsx

@@ -66,7 +66,7 @@ export default function AppShelfMenu(props: any) {
               autoClose: 5000,
               title: (
                 <Text>
-                  Service <b>{service.name}</b> removed successfully
+                  Service <b>{service.name}</b> removed successfully!
                 </Text>
               ),
               color: 'green',

src/components/Config/SaveConfig.tsx

@@ -60,7 +60,7 @@ export default function SaveConfigComponent(props: any) {
         </form>
       </Modal>
       <Button leftIcon={<Download />} variant="outline" onClick={onClick}>
-        Download your config
+        Download config
       </Button>
       <Button
         leftIcon={<Trash />}
@@ -91,10 +91,10 @@ export default function SaveConfigComponent(props: any) {
           setConfig({ ...config, name: 'default' });
         }}
       >
-        Delete current config
+        Delete config
       </Button>
       <Button leftIcon={<Plus />} variant="outline" onClick={() => setOpened(true)}>
-        Save a copy of your config
+        Save a copy
       </Button>
     </Group>
   );

src/components/Settings/ModuleEnabler.tsx

@@ -12,7 +12,7 @@ export default function ModuleEnabler(props: any) {
           key={module.title}
           size="md"
           checked={config.modules?.[module.title]?.enabled ?? false}
-          label={`Enable ${module.title} module`}
+          label={`Enable ${module.title}`}
           onChange={(e) => {
             setConfig({
               ...config,

src/components/Settings/SettingsMenu.tsx

@@ -92,7 +92,7 @@ function SettingsMenu(props: any) {
           color: 'gray',
         }}
       >
-        tip: You can upload your config file by dragging and dropping it onto the page
+        Tip: You can upload your config file by dragging and dropping it onto the page!
       </Text>
       <Group position="center" direction="row" mr="xs">
         <Group spacing={0}>

src/components/layout/Footer.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { createStyles, Footer as FooterComponent } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
+import { IconAlertCircle as AlertCircle } from '@tabler/icons';
 
 const useStyles = createStyles((theme) => ({
   footer: {
@@ -38,12 +39,22 @@ export function Footer({ links }: FooterCenteredProps) {
     // Fetch Data here when component first mounted
     fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
       res.json().then((data) => {
-        if (data.tag_name !== CURRENT_VERSION) {
+        if (data.tag_name >= CURRENT_VERSION) {
           showNotification({
             color: 'yellow',
             autoClose: false,
             title: 'New version available',
-            message: `Version ${data.tag_name} is available, update now! 😡`,
+            icon: <AlertCircle />,
+            message: `Version ${data.tag_name} is available, update now!`,
+          });
+        } else if (data.tag_name <= CURRENT_VERSION) {
+          showNotification({
+            color: 'orange',
+            autoClose: 5000,
+            title: 'You are using a development version',
+            icon: <AlertCircle />,
+            loading: true,
+            message: 'This version of Homarr is still in development! Bugs are expected 🐛',
           });
         }
       });

src/components/layout/Logo.tsx

@@ -13,11 +13,11 @@ export function Logo({ style }: any) {
         }}
       />
       <NextLink
+        href="/"
         style={{
           textDecoration: 'none',
           position: 'relative',
         }}
-        href="/"
       >
         <Text
           sx={style}

src/components/modules/downloads/DownloadsModule.tsx

@@ -1,13 +1,4 @@
-import {
+import { Table, Text, Tooltip, Title, Group, Progress, Skeleton, ScrollArea } from '@mantine/core';
-  Table,
-  Text,
-  Tooltip,
-  Title,
-  Group,
-  Progress,
-  Skeleton,
-  ScrollArea,
-} from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
@@ -63,9 +54,9 @@ export default function DownloadComponent() {
   if (!qBittorrentService && !delugeService) {
     return (
       <Group direction="column">
-        <Title>Critical: No qBittorrent/Deluge instance found in services.</Title>
+        <Title order={3}>No supported download clients found!</Title>
         <Group>
-          <Title order={3}>Add a qBittorrent/Deluge service to view current downloads</Title>
+          <Text>Add a download service to view your current downloads...</Text>
           <AddItemShelfButton />
         </Group>
       </Group>

src/components/modules/downloads/TotalDownloadsModule.tsx

@@ -43,7 +43,7 @@ function humanFileSize(initialBytes: number, si = true, dp = 1) {
 }
 
 export const TotalDownloadsModule: IModule = {
-  title: 'Download speed',
+  title: 'Download Speed',
   description: 'Show the current download speed of supported services',
   icon: Download,
   component: TotalDownloadsComponent,
@@ -104,9 +104,9 @@ export default function TotalDownloadsComponent() {
   if (!qBittorrentService && !delugeService) {
     return (
       <Group direction="column">
-        <Title order={3}>Critical: No qBittorrent/Deluge instance found in services.</Title>
+        <Title order={4}>No supported download clients found!</Title>
         <Group noWrap>
-          <Title order={5}>Add a qBittorrent/Deluge service to view current downloads</Title>
+          <Text>Add a download service to view your current downloads...</Text>
           <AddItemShelfButton />
         </Group>
       </Group>

src/components/modules/search/SearchModule.tsx

@@ -116,7 +116,7 @@ export default function SearchBar(props: any) {
         }
       >
         <Text>
-          tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube
+          Tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube
           or for a Torrent respectively.
         </Text>
       </Popover>

src/pages/_app.tsx

@@ -9,6 +9,7 @@ import { useHotkeys } from '@mantine/hooks';
 import Layout from '../components/layout/Layout';
 import { ConfigProvider } from '../tools/state';
 import { theme } from '../tools/theme';
+import { styles } from '../tools/styles';
 
 export default function App(props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
@@ -35,6 +36,9 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
             ...theme,
             colorScheme,
           }}
+          styles={{
+            ...styles,
+          }}
           withGlobalStyles
           withNormalizeCSS
         >

src/tools/styles.ts

@@ -0,0 +1,12 @@
+import { MantineProviderProps } from '@mantine/core';
+
+export const styles: MantineProviderProps['styles'] = {
+  Checkbox: {
+    input: { cursor: 'pointer' },
+    label: { cursor: 'pointer' },
+  },
+  Switch: {
+    input: { cursor: 'pointer' },
+    label: { cursor: 'pointer' },
+  },
+};

src/tools/theme.ts

@@ -1,3 +1,6 @@
 import { MantineProviderProps } from '@mantine/core';
 
-export const theme: MantineProviderProps['theme'] = {};
+export const theme: MantineProviderProps['theme'] = {
+  primaryColor: 'red',
+  primaryShade: 6,
+};