🔖 v0.7.2

Tag version v0.7.2

.dockerignore

@@ -2,5 +2,8 @@ Dockerfile
 .dockerignore
 node_modules
 npm-debug.log
-README.md
+*.md
 .git
+.github
+LICENSE
+docs/

README.md

@@ -33,7 +33,7 @@ Homarr is a simple and lightweight homepage for your server, that helps you easi
 
 It integrates with the services you use to display information on the homepage (E.g. Show upcoming Sonarr/Radarr releases).
 
-For a full list of integrations look at: [wiki/integrations](#).
+For a full list of integrations look at: [wiki/integrations](https://github.com/ajnart/homarr/wiki/Integrations)
 
 If you have any questions about Homarr or want to share information with us, please go to one of the following places:
 

data/constants.ts

@@ -1,2 +1,2 @@
 export const REPO_URL = 'ajnart/homarr';
-export const CURRENT_VERSION = 'v0.7.1';
+export const CURRENT_VERSION = 'v0.7.2';

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "homarr",
-	"version": "0.7.1",
+	"version": "0.7.2",
 	"description": "Homarr - A homepage for your server.",
 	"repository": {
 		"type": "git",

src/components/AppShelf/AddAppShelfItem.tsx

@@ -123,13 +123,9 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
     validate: {
       apiKey: () => null,
       // Validate icon with a regex
-      icon: (value: string) => {
+      icon: (value: string) =>
-        // Regex to match everything that ends with and icon extension
+        // Disable matching to allow any values
-        if (!value.match(/\.(png|jpg|jpeg|gif|svg)$/)) {
+        null,
-          return 'Please enter a valid icon URL';
-        }
-        return null;
-      },
       // Validate url with a regex http/https
       url: (value: string) => {
         try {
@@ -321,9 +317,20 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                     />
                   </>
                 )}
-                {(form.values.type === 'Deluge' ||
+                {form.values.type === 'Deluge' && (
-                  form.values.type === 'Transmission' ||
+                  <>
-                  form.values.type === 'qBittorrent') && (
+                    <TextInput
+                      label="Password"
+                      placeholder="password"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+                {form.values.type === 'Transmission' && (
                   <>
                     <TextInput
                       label="Username"
@@ -336,7 +343,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                     />
                     <TextInput
                       label="Password"
-                      placeholder="password"
+                      placeholder="adminadmin"
                       value={form.values.password}
                       onChange={(event) => {
                         form.setFieldValue('password', event.currentTarget.value);

src/components/AppShelf/AppShelf.tsx

@@ -20,15 +20,30 @@ import DownloadComponent from '../modules/downloads/DownloadsModule';
 
 const useStyles = createStyles((theme, _params) => ({
   item: {
-    borderBottom: 0,
     overflow: 'hidden',
-    border: '1px solid transparent',
+    borderLeft: '3px solid transparent',
-    borderRadius: theme.radius.lg,
+    borderRight: '3px solid transparent',
+    borderBottom: '3px solid transparent',
+    borderRadius: '20px',
+    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
     marginTop: theme.spacing.md,
   },
 
-  itemOpened: {
+  control: {
-    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[3],
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    borderRadius: theme.spacing.md,
+
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    },
+  },
+
+  content: {
+    margin: theme.spacing.md,
+  },
+
+  label: {
+    overflow: 'visible',
   },
 }));
 
@@ -147,11 +162,6 @@ const AppShelf = (props: any) => {
           order={2}
           iconPosition="right"
           multiple
-          styles={{
-            item: {
-              borderRadius: '20px',
-            },
-          }}
           initialState={toggledCategories}
           onChange={(idx) => settoggledCategories(idx)}
         >

src/components/AppShelf/AppShelfMenu.tsx

@@ -20,11 +20,7 @@ export default function AppShelfMenu(props: any) {
         onClose={() => setOpened(false)}
         title="Modify a service"
       >
-        <AddAppShelfItemForm
+        <AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
-          setOpened={setOpened}
-          {...service}
-          message="Save service"
-        />
       </Modal>
       <Menu
         position="right"

src/components/Settings/CommonSettings.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Group, Text, SegmentedControl, TextInput, Anchor } from '@mantine/core';
 import { useState } from 'react';
-import { IconBrandGithub as BrandGithub } from '@tabler/icons';
+import { IconBrandGithub as BrandGithub, IconBrandDiscord as BrandDiscord } from '@tabler/icons';
 import { CURRENT_VERSION } from '../../../data/constants';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
@@ -28,6 +28,15 @@ export default function CommonSettings(args: any) {
     <Group direction="column" grow>
       <Group grow direction="column" spacing={0}>
         <Text>Search engine</Text>
+        <Text
+          style={{
+            fontSize: '0.75rem',
+            color: 'gray',
+            marginBottom: '0.5rem',
+          }}
+        >
+          Tip: %s can be used as a placeholder for the query.
+        </Text>
         <SegmentedControl
           fullWidth
           title="Search engine"
@@ -53,7 +62,7 @@ export default function CommonSettings(args: any) {
         {searchUrl === 'Custom' && (
           <TextInput
             label="Query URL"
-            placeholder="Custom query url"
+            placeholder="Custom query URL"
             value={customSearchUrl}
             onChange={(event) => {
               setCustomSearchUrl(event.currentTarget.value);
@@ -98,6 +107,7 @@ export default function CommonSettings(args: any) {
             {CURRENT_VERSION}
           </Text>
         </Group>
+        <Group spacing={1}>
           <Text
             style={{
               fontSize: '0.90rem',
@@ -113,6 +123,10 @@ export default function CommonSettings(args: any) {
               ajnart
             </Anchor>
           </Text>
+          <ActionIcon<'a'> component="a" href="https://discord.gg/aCsmEV5RgA" size="lg">
+            <BrandDiscord size={18} />
+          </ActionIcon>
+        </Group>
       </Group>
     </Group>
   );

src/components/layout/Header.tsx

@@ -78,7 +78,7 @@ export function Header(props: any) {
             >
               {(styles) => (
                 <div style={styles}>
-                  <ScrollArea style={{ height: '90vh' }}>
+                  <ScrollArea offsetScrollbars style={{ height: '90vh' }}>
                     <Group my="sm" grow direction="column" style={{ width: 300 }}>
                       <ModuleWrapper module={CalendarModule} />
                       <ModuleWrapper module={TotalDownloadsModule} />

src/components/modules/calendar/CalendarModule.tsx

@@ -71,9 +71,11 @@ export default function CalendarComponent(props: any) {
     const currentSonarrMedias: any[] = [];
     Promise.all(
       sonarrServices.map((service) =>
-        getMedias(service, 'sonarr').then((res) => {
+        getMedias(service, 'sonarr')
+          .then((res) => {
             currentSonarrMedias.push(...res.data);
-        }).catch(() => {
+          })
+          .catch(() => {
             currentSonarrMedias.push([]);
           })
       )
@@ -83,9 +85,11 @@ export default function CalendarComponent(props: any) {
     const currentRadarrMedias: any[] = [];
     Promise.all(
       radarrServices.map((service) =>
-        getMedias(service, 'radarr').then((res) => {
+        getMedias(service, 'radarr')
+          .then((res) => {
             currentRadarrMedias.push(...res.data);
-        }).catch(() => {
+          })
+          .catch(() => {
             currentRadarrMedias.push([]);
           })
       )
@@ -95,9 +99,11 @@ export default function CalendarComponent(props: any) {
     const currentLidarrMedias: any[] = [];
     Promise.all(
       lidarrServices.map((service) =>
-        getMedias(service, 'lidarr').then((res) => {
+        getMedias(service, 'lidarr')
+          .then((res) => {
             currentLidarrMedias.push(...res.data);
-        }).catch(() => {
+          })
+          .catch(() => {
             currentLidarrMedias.push([]);
           })
       )
@@ -107,9 +113,11 @@ export default function CalendarComponent(props: any) {
     const currentReadarrMedias: any[] = [];
     Promise.all(
       readarrServices.map((service) =>
-        getMedias(service, 'readarr').then((res) => {
+        getMedias(service, 'readarr')
+          .then((res) => {
             currentReadarrMedias.push(...res.data);
-        }).catch(() => {
+          })
+          .catch(() => {
             currentReadarrMedias.push([]);
           })
       )

src/components/modules/downloads/DownloadsModule.tsx

@@ -59,7 +59,7 @@ export default function DownloadComponent() {
         setIsLoading(false);
       });
     }, 5000);
-  }, [config.services]);
+  }, []);
 
   if (downloadServices.length === 0) {
     return (

src/components/modules/ping/PingModule.tsx

@@ -30,12 +30,12 @@ export default function PingComponent(props: any) {
       acceptableStatus = status;
     }
     // Checks if reported status is in acceptable status array
-    if (acceptableStatus.indexOf((response.status).toString()) >= 0) {
+    if (acceptableStatus.indexOf(response.status.toString()) >= 0) {
       setOnline('online');
       setResponse(response.status);
     } else {
       setOnline('down');
-      setResponse(response.status)
+      setResponse(response.status);
     }
   }
 
@@ -59,7 +59,13 @@ export default function PingComponent(props: any) {
     <Tooltip
       radius="lg"
       style={{ position: 'absolute', bottom: 20, right: 20 }}
-      label={isOnline === 'loading' ? 'Loading...' : isOnline === 'online' ? `Online - ${response}` : `Offline - ${response}`}
+      label={
+        isOnline === 'loading'
+          ? 'Loading...'
+          : isOnline === 'online'
+          ? `Online - ${response}`
+          : `Offline - ${response}`
+      }
     >
       <motion.div
         animate={{

src/components/modules/search/SearchModule.tsx

@@ -96,7 +96,13 @@ export default function SearchBar(props: any) {
           } else if (isTorrent) {
             window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
           } else {
-            window.open(`${queryUrl}${values.query}`);
+            window.open(
+              `${
+                queryUrl.includes('%s')
+                  ? queryUrl.replace('%s', values.query)
+                  : queryUrl + values.query
+              }`
+            );
           }
         }, 20);
       })}
@@ -114,6 +120,7 @@ export default function SearchBar(props: any) {
         onBlurCapture={() => setOpened(false)}
         target={
           <Autocomplete
+            autoFocus
             variant="filled"
             data={autocompleteData}
             icon={icon}

src/pages/api/modules/calendar.ts

@@ -44,9 +44,9 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
     });
   }
   // Get the origin URL
-  var { href: origin } = new URL(service.url);
+  let { href: origin } = new URL(service.url);
-  if (origin.endsWith("/")) {
+  if (origin.endsWith('/')) {
-    origin = origin.slice(0, -1)
+    origin = origin.slice(0, -1);
   }
   const pined = `${origin}${url?.url}?apiKey=${service.apiKey}&end=${nextMonth}&start=${lastMonth}`;
   const data = await axios.get(

src/pages/api/modules/downloads.ts

@@ -7,53 +7,52 @@ import { Config } from '../../../tools/types';
 
 async function Post(req: NextApiRequest, res: NextApiResponse) {
   // Get the type of service from the request url
-  const torrents: NormalizedTorrent[] = [];
   const { config }: { config: Config } = req.body;
-  const qBittorrentService = config.services
+  const qBittorrentServices = config.services.filter((service) => service.type === 'qBittorrent');
-    .filter((service) => service.type === 'qBittorrent')
+  const delugeServices = config.services.filter((service) => service.type === 'Deluge');
-    .at(0);
+  const transmissionServices = config.services.filter((service) => service.type === 'Transmission');
-  const delugeService = config.services.filter((service) => service.type === 'Deluge').at(0);
+
-  const transmissionService = config.services
+  const torrents: NormalizedTorrent[] = [];
-    .filter((service) => service.type === 'Transmission')
+
-    .at(0);
+  if (!qBittorrentServices && !delugeServices && !transmissionServices) {
-  if (!qBittorrentService && !delugeService && !transmissionService) {
     return res.status(500).json({
       statusCode: 500,
-      message: 'Missing service',
+      message: 'Missing services',
     });
   }
-  if (qBittorrentService) {
+  await Promise.all(
-    torrents.push(
+    qBittorrentServices.map((service) =>
-      ...(
+      new QBittorrent({
-        await new QBittorrent({
+        baseUrl: service.url,
-          baseUrl: qBittorrentService.url,
+        username: service.username,
-          username: qBittorrentService.username,
+        password: service.password,
-          password: qBittorrentService.password,
+      })
-        }).getAllData()
+        .getAllData()
-      ).torrents
+        .then((e) => torrents.push(...e.torrents))
+    )
   );
-  }
+  await Promise.all(
-  if (delugeService) {
+    delugeServices.map((service) =>
-    torrents.push(
+      new Deluge({
-      ...(
+        baseUrl: service.url,
-        await new Deluge({
+        password: 'password' in service ? service.password : '',
-          baseUrl: delugeService.url,
+      })
-          password: 'password' in delugeService ? delugeService.password : '',
+        .getAllData()
-        }).getAllData()
+        .then((e) => torrents.push(...e.torrents))
-      ).torrents
+    )
   );
-  }
+  // Map transmissionServices
-  if (transmissionService) {
+  await Promise.all(
-    torrents.push(
+    transmissionServices.map((service) =>
-      ...(
+      new Transmission({
-        await new Transmission({
+        baseUrl: service.url,
-          baseUrl: transmissionService.url,
+        username: 'username' in service ? service.username : '',
-          username: transmissionService.username,
+        password: 'password' in service ? service.password : '',
-          password: 'password' in transmissionService ? transmissionService.password : '',
+      })
-        }).getAllData()
+        .getAllData()
-      ).torrents
+        .then((e) => torrents.push(...e.torrents))
+    )
   );
-  }
   res.status(200).json(torrents);
 }
 

src/tools/types.ts

@@ -55,8 +55,8 @@ export const StatusCodes = [
 
 export const Targets = [
   { value: '_blank', label: 'New Tab' },
-  {value: '_top', label: 'Same Window'}
+  { value: '_top', label: 'Same Window' },
-]
+];
 
 export const ServiceTypeList = [
   'Other',