🔧 Tweak UI and change the name of the settings

src/components/AppShelf/AddAppShelfItem.tsx

@@ -15,6 +15,7 @@ import {
   Tabs,
   MultiSelect,
   ScrollArea,
+  Switch,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useEffect, useState } from 'react';
@@ -22,7 +23,7 @@ import { IconApps as Apps } from '@tabler/icons';
 import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList, StatusCodes, Targets } from '../../tools/types';
+import { ServiceTypeList, StatusCodes } from '../../tools/types';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -117,7 +118,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       password: props.password ?? (undefined as unknown as string),
       openedUrl: props.openedUrl ?? (undefined as unknown as string),
       status: props.status ?? ['200'],
-      target: props.target ?? '_blank',
+      newTab: props.newTab ?? true,
     },
     validate: {
       apiKey: () => null,
@@ -181,8 +182,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
             form.values.status = undefined;
           }
-          if (form.values.target === '_blank') {
-            form.values.target = undefined;
+          if (form.values.newTab === true) {
+            form.values.newTab = undefined;
           }
           // If service already exists, update it.
           if (config.services && config.services.find((s) => s.id === form.values.id)) {
@@ -208,155 +209,154 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           form.reset();
         })}
       >
-        <Tabs position="center">
-        <Tabs.Tab label="Options">
-          <ScrollArea style={{height:'42vh'}} scrollbarSize={4}>
-          <Group direction="column" grow>
-            <TextInput
-              required
-              label="Service name"
-              placeholder="Plex"
-              {...form.getInputProps('name')}
-            />
+        <Tabs grow>
+          <Tabs.Tab label="Options">
+            <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
+              <Group direction="column" grow>
+                <TextInput
+                  required
+                  label="Service name"
+                  placeholder="Plex"
+                  {...form.getInputProps('name')}
+                />
 
-            <TextInput
-              required
-              label="Icon URL"
-              placeholder="/favicon.svg"
-              {...form.getInputProps('icon')}
-            />
-            <TextInput
-              required
-              label="Service URL"
-              placeholder="http://localhost:7575"
-              {...form.getInputProps('url')}
-            />
-            <TextInput
-              label="On Click URL"
-              placeholder="http://sonarr.example.com"
-              {...form.getInputProps('openedUrl')}
-            />
-            <Select
-              label="Service type"
-              defaultValue="Other"
-              placeholder="Pick one"
-              required
-              searchable
-              data={ServiceTypeList}
-              {...form.getInputProps('type')}
-            />
-            <Select
-              label="Category"
-              data={categoryList}
-              placeholder="Select a category or create a new one"
-              nothingFound="Nothing found"
-              searchable
-              clearable
-              creatable
-              onClick={(e) => {
-                e.preventDefault();
-              }}
-              getCreateLabel={(query) => `+ Create "${query}"`}
-              onCreate={(query) => {}}
-              {...form.getInputProps('category')}
-            />
-            <LoadingOverlay visible={isLoading} />
-            {(form.values.type === 'Sonarr' ||
-              form.values.type === 'Radarr' ||
-              form.values.type === 'Lidarr' ||
-              form.values.type === 'Readarr') && (
-              <>
                 <TextInput
                   required
-                  label="API key"
-                  placeholder="Your API key"
-                  value={form.values.apiKey}
-                  onChange={(event) => {
-                    form.setFieldValue('apiKey', event.currentTarget.value);
-                  }}
-                  error={form.errors.apiKey && 'Invalid API key'}
-                />
-                <Text
-                  style={{
-                    alignSelf: 'center',
-                    fontSize: '0.75rem',
-                    textAlign: 'center',
-                    color: 'gray',
-                  }}
-                >
-                  Tip: Get your API key{' '}
-                  <Anchor
-                    target="_blank"
-                    weight="bold"
-                    style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
-                    href={`${hostname}/settings/general`}
-                  >
-                    here.
-                  </Anchor>
-                </Text>
-              </>
-            )}
-            {form.values.type === 'qBittorrent' && (
-              <>
-                <TextInput
-                  required
-                  label="Username"
-                  placeholder="admin"
-                  value={form.values.username}
-                  onChange={(event) => {
-                    form.setFieldValue('username', event.currentTarget.value);
-                  }}
-                  error={form.errors.username && 'Invalid username'}
+                  label="Icon URL"
+                  placeholder="/favicon.svg"
+                  {...form.getInputProps('icon')}
                 />
                 <TextInput
                   required
-                  label="Password"
-                  placeholder="adminadmin"
-                  value={form.values.password}
-                  onChange={(event) => {
-                    form.setFieldValue('password', event.currentTarget.value);
-                  }}
-                  error={form.errors.password && 'Invalid password'}
+                  label="Service URL"
+                  placeholder="http://localhost:7575"
+                  {...form.getInputProps('url')}
                 />
-              </>
-            )}
-            {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
-              <>
                 <TextInput
-                  label="Password"
-                  placeholder="password"
-                  value={form.values.password}
-                  onChange={(event) => {
-                    form.setFieldValue('password', event.currentTarget.value);
-                  }}
-                  error={form.errors.password && 'Invalid password'}
+                  label="On Click URL"
+                  placeholder="http://sonarr.example.com"
+                  {...form.getInputProps('openedUrl')}
                 />
-              </>
-            )}
-          </Group>
-          </ScrollArea>
-        </Tabs.Tab>
-        <Tabs.Tab label="Advanced Options">
-          <Group direction="column" grow>
-          <MultiSelect
-            required 
-            label="HTTP Status Codes"
-            data={StatusCodes}
-            placeholder="Select valid status codes"
-            clearButtonLabel="Clear selection"
-            nothingFound="Nothing found"
-            defaultValue={['200']}
-            clearable
-            searchable
-            {...form.getInputProps('status')}
-            />
-            <Select
-              label="Open Tab in: "
-              data={Targets}
-              defaultValue="_blank"
-              placeholder="Pick one"
-              {...form.getInputProps('target')}
-            />
+                <Select
+                  label="Service type"
+                  defaultValue="Other"
+                  placeholder="Pick one"
+                  required
+                  searchable
+                  data={ServiceTypeList}
+                  {...form.getInputProps('type')}
+                />
+                <Select
+                  label="Category"
+                  data={categoryList}
+                  placeholder="Select a category or create a new one"
+                  nothingFound="Nothing found"
+                  searchable
+                  clearable
+                  creatable
+                  onClick={(e) => {
+                    e.preventDefault();
+                  }}
+                  getCreateLabel={(query) => `+ Create "${query}"`}
+                  onCreate={(query) => {}}
+                  {...form.getInputProps('category')}
+                />
+                <LoadingOverlay visible={isLoading} />
+                {(form.values.type === 'Sonarr' ||
+                  form.values.type === 'Radarr' ||
+                  form.values.type === 'Lidarr' ||
+                  form.values.type === 'Readarr') && (
+                  <>
+                    <TextInput
+                      required
+                      label="API key"
+                      placeholder="Your API key"
+                      value={form.values.apiKey}
+                      onChange={(event) => {
+                        form.setFieldValue('apiKey', event.currentTarget.value);
+                      }}
+                      error={form.errors.apiKey && 'Invalid API key'}
+                    />
+                    <Text
+                      style={{
+                        alignSelf: 'center',
+                        fontSize: '0.75rem',
+                        textAlign: 'center',
+                        color: 'gray',
+                      }}
+                    >
+                      Tip: Get your API key{' '}
+                      <Anchor
+                        target="_blank"
+                        weight="bold"
+                        style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                        href={`${hostname}/settings/general`}
+                      >
+                        here.
+                      </Anchor>
+                    </Text>
+                  </>
+                )}
+                {form.values.type === 'qBittorrent' && (
+                  <>
+                    <TextInput
+                      required
+                      label="Username"
+                      placeholder="admin"
+                      value={form.values.username}
+                      onChange={(event) => {
+                        form.setFieldValue('username', event.currentTarget.value);
+                      }}
+                      error={form.errors.username && 'Invalid username'}
+                    />
+                    <TextInput
+                      required
+                      label="Password"
+                      placeholder="adminadmin"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+                {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
+                  <>
+                    <TextInput
+                      label="Password"
+                      placeholder="password"
+                      value={form.values.password}
+                      onChange={(event) => {
+                        form.setFieldValue('password', event.currentTarget.value);
+                      }}
+                      error={form.errors.password && 'Invalid password'}
+                    />
+                  </>
+                )}
+              </Group>
+            </ScrollArea>
+          </Tabs.Tab>
+          <Tabs.Tab label="Advanced Options">
+            <Group direction="column" grow>
+              <MultiSelect
+                required
+                label="HTTP Status Codes"
+                data={StatusCodes}
+                placeholder="Select valid status codes"
+                clearButtonLabel="Clear selection"
+                nothingFound="Nothing found"
+                defaultValue={['200']}
+                clearable
+                searchable
+                {...form.getInputProps('status')}
+              />
+              <Switch
+                label="Open service in new tab"
+                defaultChecked={form.values.newTab}
+                {...form.getInputProps('newTab')}
+              />
+            </Group>
           </Tabs.Tab>
         </Tabs>
         <Group grow position="center" mt="xl">

src/components/AppShelf/AppShelfItem.tsx

@@ -83,7 +83,7 @@ export function AppShelfItem(props: any) {
       >
         <Card.Section>
           <Anchor
-            target={service.target !== undefined ? service.target : '_blank'}
+            target={service.newTab === false ? '_top' : '_blank'}
             href={service.openedUrl ? service.openedUrl : service.url}
             style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
           >
@@ -127,13 +127,9 @@ export function AppShelfItem(props: any) {
                   src={service.icon}
                   fit="contain"
                   onClick={() => {
-                    if (service.target === undefined || service.target === '_blank') {
-                      if (service.openedUrl) window.open(service.openedUrl, '_blank');
-                      else window.open(service.url);
-                    } else {
-                      if (service.openedUrl) window.location.href = service.openedUrl;
-                      else window.location.href = service.url;
-                    }
+                    if (service.openedUrl) {
+                      window.open(service.openedUrl, service.newTab === false ? '_top' : '_blank');
+                    } else window.open(service.url, service.newTab === false ? '_top' : '_blank');
                   }}
                 />
               </motion.i>

src/components/AppShelf/AppShelfMenu.tsx

@@ -22,18 +22,7 @@ export default function AppShelfMenu(props: any) {
       >
         <AddAppShelfItemForm
           setOpened={setOpened}
-          name={service.name}
-          id={service.id}
-          category={service.category}
-          type={service.type}
-          url={service.url}
-          icon={service.icon}
-          apiKey={service.apiKey}
-          username={service.username}
-          password={service.password}
-          openedUrl={service.openedUrl}
-          status={service.status}
-          target={service.target}
+          {...service}
           message="Save service"
         />
       </Modal>

src/pages/api/modules/ping.ts

@@ -10,7 +10,11 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
       res.status(response.status).json(response.statusText);
     })
     .catch((error) => {
-      res.status(error.response.status).json(error.response.statusText);
+      if (error.response) {
+        res.status(error.response.status).json(error.response.statusText);
+      } else {
+        res.status(500).json('Server Error');
+      }
     });
   // // Make a request to the URL
   // const response = await axios.get(url);

src/tools/types.ts

@@ -92,6 +92,6 @@ export interface serviceItem {
   password?: string;
   username?: string;
   openedUrl?: string;
-  status: string[];
-  target: string;
+  newTab?: boolean;
+  status?: string[];
 }