Merge branch 'gridstack' of https://github.com/manuel-rw/homarr into gridstack

2025-11-10 23:45:48 +01:00 · 2022-12-20 07:50:08 +01:00
parent a633fb0182 5f1bddf864
commit c038078c5d
62 changed files with 453 additions and 574 deletions
--- a/data/configs/default.json
+++ b/data/configs/default.json
@@ -164,28 +164,30 @@
      }
    }
  ],
-  "widgets": [{
-    "id": "date",
-    "properties": {
-      "display24HourFormat": true
-    },
-    "area": {
-      "type": "wrapper",
+  "widgets": [
+    {
+      "id": "date",
      "properties": {
-        "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33e"
-      }
-    },
-    "shape": {
-      "location": {
-        "x": 0,
-        "y": 3
+        "display24HourFormat": true
      },
-      "size": {
-        "width": 4,
-        "height": 2
+      "area": {
+        "type": "wrapper",
+        "properties": {
+          "id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33e"
+        }
+      },
+      "shape": {
+        "location": {
+          "x": 0,
+          "y": 3
+        },
+        "size": {
+          "width": 4,
+          "height": 2
+        }
      }
    }
-  }],
+  ],
  "settings": {
    "common": {
      "searchEngine": {
--- a/next.config.js
+++ b/next.config.js
@@ -1,5 +1,3 @@
-const { env } = require('process');
-
 const { i18n } = require('./next-i18next.config');

 const withBundleAnalyzer = require('@next/bundle-analyzer')({
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -2,6 +2,8 @@
  "actions": {
    "save": "Save",
    "cancel": "Cancel",
+    "close": "Close",
+    "delete": "Delete",
    "ok": "Okay",
    "edit": "Edit",
    "changePosition": "Change position",
@@ -11,6 +13,11 @@
    "settings": "Settings",
    "dangerZone": "Danger zone"
  },
+  "secrets": {
+    "apiKey": "Api key",
+    "username": "Username",
+    "password": "Password"
+  },
  "tip": "Tip: ",
  "time": {
    "seconds": "seconds",
--- a/public/locales/en/layout/add-service-app-shelf.json
+++ b/public/locales/en/layout/add-service-app-shelf.json
@@ -1,128 +0,0 @@
-{
-    "actionIcon": {
-        "tooltip": "Add a service"
-    },
-    "modal": {
-        "title": "Add service",
-        "form": {
-            "validation": {
-                "invalidUrl": "Please enter a valid URL",
-                "noStatusCodeSelected": "Please select a status code"
-            }
-        },
-        "tabs": {
-            "options": {
-                "title": "Options",
-                "form": {
-                    "serviceName": {
-                        "label": "Service name",
-                        "placeholder": "Plex"
-                    },
-                    "iconUrl": {
-                        "label": "Icon URL"
-                    },
-                    "serviceUrl": {
-                        "label": "Service URL"
-                    },
-                    "onClickUrl": {
-                        "label": "On Click URL"
-                    },
-                    "serviceType": {
-                        "label": "Service type",
-                        "defaultValue": "Other",
-                        "placeholder": "Pick one"
-                    },
-                    "category": {
-                        "label": "Category",
-                        "placeholder": "Select a category or create a new one",
-                        "nothingFound": "Nothing found",
-                        "createLabel": "+ Create {{query}}"
-                    },
-                    "integrations": {
-                        "apiKey": {
-                            "label": "API key",
-                            "placeholder": "Your API key",
-                            "validation": {
-                                "noKey": "Invalid Key"
-                            },
-                            "tip": {
-                                "text": "Get your API key",
-                                "link": "here."
-                            }
-                        },
-                        "qBittorrent": {
-                            "username": {
-                                "label": "Username",
-                                "placeholder": "admin",
-                                "validation": {
-                                    "invalidUsername": "Invalid username"
-                                }
-                            },
-                            "password": {
-                                "label": "Password",
-                                "placeholder": "adminadmin",
-                                "validation": {
-                                    "invalidPassword": "Invalid password"
-                                }
-                            }
-                        },
-                        "deluge": {
-                            "password": {
-                                "label": "Password",
-                                "placeholder": "password",
-                                "validation": {
-                                    "invalidPassword": "Invalid password"
-                                }
-                            }
-                        },
-                        "transmission": {
-                            "username": {
-                                "label": "Username",
-                                "placeholder": "admin",
-                                "validation": {
-                                    "invalidUsername": "Invalid username"
-                                }
-                            },
-                            "password": {
-                                "label": "Password",
-                                "placeholder": "adminadmin",
-                                "validation": {
-                                    "invalidPassword": "Invalid password"
-                                }
-                            }
-                        },
-                        "nzbget": {
-                            "username": {
-                                "label": "Username",
-                                "placeholder": "admin",
-                                "validation": {
-                                    "invalidUsername": "Invalid username"
-                                }
-                            },
-                            "password": {
-                                "label": "Password",
-                                "placeholder": "password",
-                                "validation": {
-                                    "invalidPassword": "Invalid password"
-                                }
-                            }
-                        }
-                    }
-                }
-            },
-            "advancedOptions": {
-                "title": "Advanced options",
-                "form": {
-                    "openServiceInNewTab": {
-                        "label": "Open service in new tab"
-                    },
-                    "buttons": {
-                        "submit": {
-                            "content": "Add service"
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
--- a/public/locales/en/layout/app-shelf-menu.json
+++ b/public/locales/en/layout/app-shelf-menu.json
@@ -1,18 +0,0 @@
-{
-  "modal": {
-    "title": "Modify a service",
-    "buttons": {
-      "save": "Save service"
-    }
-  },
-  "menu": {
-    "labels": {
-      "settings": "Settings",
-      "dangerZone": "Danger zone"
-    },
-    "actions": {
-      "edit": "Edit",
-      "delete": "Delete"
-    }
-  }
-}
--- a/public/locales/en/layout/app-shelf.json
+++ b/public/locales/en/layout/app-shelf.json
@@ -1,12 +0,0 @@
-{
-  "accordions": {
-    "downloads": {
-      "text": "Your downloads",
-      "torrents": "Your Torrent downloads",
-      "usenet": "Your Usenet downloads"
-    },
-    "others": {
-      "text": "Others"
-    }
-  }
-}
--- a/public/locales/en/layout/element-selector/selector.json
+++ b/public/locales/en/layout/element-selector/selector.json
@@ -1,7 +1,7 @@
 {
    "modal": {
-        "title": "Add a new tile to your Dashboard",
-        "text": "You can use tiles, to make Homarr's dashboard yours. You may choose your desired tiles from the collection below and drag them anywhere on the dashboard where you like."
+        "title": "Add a new tile omegalaul",
+        "text": "Tiles are the main element of homarr. They allow you to configure the dashboard and display the information you want."
    },
    "actionIcon": {
        "tooltip": "Add a tile"
--- a/public/locales/en/layout/modals/add-app.json
+++ b/public/locales/en/layout/modals/add-app.json
@@ -0,0 +1,59 @@
+{
+	"tabs": {
+		"general": "General",
+		"behaviour": "Behaviour",
+		"network": "Network",
+		"appearance": "Appearance",
+		"integration": "Integration"
+	},
+	"general": {
+		"appname": {
+			"label": "App name",
+			"description": "Used for displaying the app on the dashboard"
+		},
+		"internalAddress": {
+			"label": "Internal address",
+			"description": "Internal IP of the app"
+		},
+		"externalAddress": {
+			"label": "External address",
+			"description": "Url that will be opened in the browser when clicking on the app"
+		}
+	},
+	"behaviour": {
+		"isOpeningNewTab": {
+			"label": "Open in new tab",
+			"description": "Open the link in a new tab"
+		}
+	},
+	"network": {
+		"statusChecker": {
+			"label": "Status checker",
+			"description": "Sends a simple HTTP / HTTPS request to check if your app is online"
+		},
+		"statusCodes": {
+			"label": "HTTP status codes",
+			"description": "Determines what response codes are allowed for this app to be 'Online'"
+		}
+	},
+	"appearance": {
+		"icon": {
+			"label": "App Icon",
+			"description": "Logo of your app displayed in your dashboard. (Must return a body content containg an image)"
+		}
+	},
+	"integration": {
+		"type": {
+			"label": "Integration configuration",
+			"description": "Treats this app as the selected integration and provides you with per-app configuration",
+			"placeholder": "Select an integration"
+		},
+		"secrets": {
+			"description": "To update a secret, enter a value and click the save button. To remove a secret, use the clear button.",
+			"warning": "Please note that Homarr removes secrets from the configuration for security reasons. Thus, you can only either define or unset any credentials. Your credentials act as the main access for your integrations and you should <strong>never</strong> share them with anybody else. Make sure to <strong>store and manage your secrets safely</strong>.",
+			"clear": "Clear secret",
+			"save": "Save secret",
+			"update": "Update secret"
+		}
+	}
+}
--- a/public/locales/en/settings/common.json
+++ b/public/locales/en/settings/common.json
@@ -11,5 +11,19 @@
  "credits": {
    "madeWithLove": "Made with ❤️ by @"
  },
-  "grow": "Grow grid (take all space)"
+  "grow": "Grow grid (take all space)",
+  "layout": {
+    "title": "Dashboard yayout",
+    "main": "Main",
+    "sidebar": "Sidebar",
+    "cannotturnoff": "Cannot be turned off",
+    "dashboardlayout": "Dashboard layout",
+    "enablersidebar": "Enable right sidebar",
+    "enablelsidebar": "Enable left sidebar",
+    "enablesearchbar": "Enable search bar",
+    "enabledocker": "Enable docker integration",
+    "enableping": "Enable pings",
+    "enablelsidebardescription": "Optional. Can be used for apps and integrations only",
+    "enablersidebardescription": "Optional. Can be used for apps and integrations only"
+  }
 }
--- a/src/components/About/AboutModal.tsx
+++ b/src/components/About/AboutModal.tsx
@@ -1,9 +1,11 @@
 import {
  ActionIcon,
+  Anchor,
  Badge,
  Button,
  createStyles,
  Group,
+  HoverCard,
  Modal,
  Table,
  Text,
@@ -17,6 +19,7 @@ import {
  IconVocabulary,
  IconWorldWww,
 } from '@tabler/icons';
+import { motion } from 'framer-motion';
 import { InitOptions } from 'i18next';
 import { i18n } from 'next-i18next';
 import Image from 'next/image';
@@ -27,12 +30,13 @@ import { usePrimaryGradient } from '../layout/useGradient';
 interface AboutModalProps {
  opened: boolean;
  closeModal: () => void;
+  newVersionAvailable?: string;
 }

-export const AboutModal = ({ opened, closeModal }: AboutModalProps) => {
+export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutModalProps) => {
  const { classes } = useStyles();
  const colorGradiant = usePrimaryGradient();
-  const informations = useInformationTableItems();
+  const informations = useInformationTableItems(newVersionAvailable);

  return (
    <Modal
@@ -50,8 +54,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">
@@ -123,7 +127,8 @@ interface ExtendedInitOptions extends InitOptions {
  locales: string[];
 }

-const useInformationTableItems = (): InformationTableItem[] => {
+const useInformationTableItems = (newVersionAvailable?: string): InformationTableItem[] => {
+  // TODO: Fix this to not request. Pass it as a prop.
  const colorGradiant = usePrimaryGradient();

  let items: InformationTableItem[] = [];
@@ -161,9 +166,41 @@ const useInformationTableItems = (): InformationTableItem[] => {
      icon: <IconVersions size={20} />,
      label: 'Homarr version',
      content: (
-        <Badge variant="gradient" gradient={colorGradiant}>
-          {CURRENT_VERSION}
-        </Badge>
+        <Group position="right">
+          <Badge variant="gradient" gradient={colorGradiant}>
+            {CURRENT_VERSION}
+          </Badge>
+          {newVersionAvailable && (
+            <HoverCard shadow="md" position="top" withArrow>
+              <HoverCard.Target>
+                <motion.div
+                  initial={{ scale: 1.2 }}
+                  animate={{
+                    scale: [0.8, 1.10, 1],
+                    rotate: [0, 10, 0],
+                  }}
+                  transition={{ duration: 0.8, ease: 'easeInOut' }}
+                >
+                  <Badge color="green" variant="filled">
+                    new: {newVersionAvailable}
+                  </Badge>
+                </motion.div>
+              </HoverCard.Target>
+              <HoverCard.Dropdown>
+                Version{' '}
+                <b>
+                  <Anchor
+                    target="_blank"
+                    href={`https://github.com/ajnart/homarr/releases/tag/${newVersionAvailable}`}
+                  >
+                    {newVersionAvailable}
+                  </Anchor>
+                </b>{' '}
+                is available ! Current version: {CURRENT_VERSION}
+              </HoverCard.Dropdown>
+            </HoverCard>
+          )}
+        </Group>
      ),
    },
  ];
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/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';

@@ -38,8 +37,6 @@ const AppShelf = (props: any) => {
  const [activeId, setActiveId] = useState(null);
  const { colorScheme } = useMantineColorScheme();

-  const { t } = useTranslation('layout/app-shelf');
-
  const sensors = useSensors(
    useSensor(TouchSensor, {
      activationConstraint: {
--- a/src/components/Config/ConfigChanger.tsx
+++ b/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[];
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/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);

--- a/src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx
+++ b/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>
  );
-};
--- a/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx
+++ b/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx
@@ -1,5 +1,6 @@
 import { Button, Flex, Grid, NumberInput, Select, SelectItem } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../../config/provider';

 interface ChangePositionModalProps {
@@ -44,6 +45,8 @@ export const ChangePositionModal = ({
    onSubmit(form.values.x, form.values.y, form.values.width, form.values.height);
  };

+  const { t } = useTranslation('common');
+
  return (
    <form onSubmit={form.onSubmit(handleSubmit)}>
      <Grid>
@@ -94,9 +97,9 @@ export const ChangePositionModal = ({

      <Flex justify="end" gap="sm" mt="md">
        <Button onClick={() => onCancel()} variant="light" color="gray">
-          Cancel
+          {t('cancel')}
        </Button>
-        <Button type="submit">Save</Button>
+        <Button type="submit">{t('save')}</Button>
      </Flex>
    </form>
  );
--- a/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx
+++ b/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,
--- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
@@ -1,4 +1,4 @@
-import { Alert, Button, createStyles, Group, Stack, Tabs, Text, ThemeIcon } from '@mantine/core';
+import { Alert, Button, Group, Stack, Tabs, Text, ThemeIcon } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { ContextModalProps } from '@mantine/modals';
 import {
@@ -30,7 +30,7 @@ export const EditAppModal = ({
  id,
  innerProps,
 }: ContextModalProps<{ app: AppType; allowAppNamePropagation: boolean }>) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(['layout/modals/add-app', 'common']);
  const { name: configName, config } = useConfigContext();
  const updateConfig = useConfigStore((store) => store.updateConfig);
  const [allowAppNamePropagation, setAllowAppNamePropagation] = useState<boolean>(
@@ -137,68 +137,76 @@ export const EditAppModal = ({
      </Stack>

      <form onSubmit={form.onSubmit(onSubmit)}>
-        <Tabs
-          value={activeTab}
-          onTabChange={(tab) => setActiveTab(tab as EditAppModalTab)}
-          defaultValue="general"
+        <Stack
+          justify="space-between"
+          style={{
+            minHeight: 300,
+          }}
        >
-          <Tabs.List grow>
-            <Tabs.Tab
-              rightSection={<ValidationErrorIndicator keys={['name', 'url']} />}
-              icon={<IconAdjustments size={14} />}
-              value="general"
-            >
-              General
-            </Tabs.Tab>
-            <Tabs.Tab
-              rightSection={<ValidationErrorIndicator keys={['behaviour.onClickUrl']} />}
-              icon={<IconClick size={14} />}
-              value="behaviour"
-            >
-              Behaviour
-            </Tabs.Tab>
-            <Tabs.Tab
-              rightSection={<ValidationErrorIndicator keys={[]} />}
-              icon={<IconAccessPoint size={14} />}
-              value="network"
-            >
-              Network
-            </Tabs.Tab>
-            <Tabs.Tab
-              rightSection={<ValidationErrorIndicator keys={['appearance.iconUrl']} />}
-              icon={<IconBrush size={14} />}
-              value="appearance"
-            >
-              Appearance
-            </Tabs.Tab>
-            <Tabs.Tab
-              rightSection={<ValidationErrorIndicator keys={[]} />}
-              icon={<IconPlug size={14} />}
-              value="integration"
-            >
-              Integration
-            </Tabs.Tab>
-          </Tabs.List>
+          <Tabs
+            value={activeTab}
+            onTabChange={(tab) => setActiveTab(tab as EditAppModalTab)}
+            defaultValue="general"
+            radius="md"
+          >
+            <Tabs.List grow>
+              <Tabs.Tab
+                rightSection={<ValidationErrorIndicator keys={['name', 'url']} />}
+                icon={<IconAdjustments size={14} />}
+                value="general"
+              >
+                {t('tabs.general')}
+              </Tabs.Tab>
+              <Tabs.Tab
+                rightSection={<ValidationErrorIndicator keys={['behaviour.onClickUrl']} />}
+                icon={<IconClick size={14} />}
+                value="behaviour"
+              >
+                {t('tabs.behaviour')}
+              </Tabs.Tab>
+              <Tabs.Tab
+                rightSection={<ValidationErrorIndicator keys={[]} />}
+                icon={<IconAccessPoint size={14} />}
+                value="network"
+              >
+                {t('tabs.network')}
+              </Tabs.Tab>
+              <Tabs.Tab
+                rightSection={<ValidationErrorIndicator keys={['appearance.iconUrl']} />}
+                icon={<IconBrush size={14} />}
+                value="appearance"
+              >
+                {t('tabs.appearance')}
+              </Tabs.Tab>
+              <Tabs.Tab
+                rightSection={<ValidationErrorIndicator keys={[]} />}
+                icon={<IconPlug size={14} />}
+                value="integration"
+              >
+                {t('tabs.integration')}
+              </Tabs.Tab>
+            </Tabs.List>

-          <GeneralTab form={form} openTab={(targetTab) => setActiveTab(targetTab)} />
-          <BehaviourTab form={form} />
-          <NetworkTab form={form} />
-          <AppearanceTab
-            form={form}
-            disallowAppNameProgagation={() => setAllowAppNamePropagation(false)}
-            allowAppNamePropagation={allowAppNamePropagation}
-          />
-          <IntegrationTab form={form} />
-        </Tabs>
+            <GeneralTab form={form} openTab={(targetTab) => setActiveTab(targetTab)} />
+            <BehaviourTab form={form} />
+            <NetworkTab form={form} />
+            <AppearanceTab
+              form={form}
+              disallowAppNameProgagation={() => setAllowAppNamePropagation(false)}
+              allowAppNamePropagation={allowAppNamePropagation}
+            />
+            <IntegrationTab form={form} />
+          </Tabs>

-        <Group position="right" mt={100}>
-          <Button onClick={closeModal} px={50} variant="light" color="gray">
-            Cancel
-          </Button>
-          <Button disabled={!form.isValid()} px={50} type="submit">
-            Save
-          </Button>
-        </Group>
+          <Group position="right" mt="md">
+            <Button onClick={closeModal} px={50} variant="light" color="gray">
+              {t('common:actions.cancel')}
+            </Button>
+            <Button disabled={!form.isValid()} px={50} type="submit">
+              {t('common:actions.save')}
+            </Button>
+          </Group>
+        </Stack>
      </form>
    </>
  );
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
@@ -16,7 +16,7 @@ export const AppearanceTab = ({
  disallowAppNameProgagation,
  allowAppNamePropagation,
 }: AppearanceTabProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
  const { classes } = useStyles();

  return (
@@ -26,8 +26,8 @@ export const AppearanceTab = ({
          defaultValue={form.values.appearance.iconUrl}
          className={classes.textInput}
          icon={<DebouncedAppIcon form={form} width={20} height={20} />}
-          label="App Icon"
-          description="Logo of your app displayed in your dashboard. Must return a body content containg an image"
+          label={t('appearance.icon.label')}
+          description={t('appearance.icon.description')}
          variant="default"
          withAsterisk
          required
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector/IconSelector.tsx
+++ b/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) => ({
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx
+++ b/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';

@@ -9,21 +8,13 @@ interface BehaviourTabProps {
 }

 export const BehaviourTab = ({ form }: BehaviourTabProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
+
  return (
    <Tabs.Panel value="behaviour" pt="xs">
-      <TextInput
-        icon={<IconClick size={16} />}
-        label="On click url"
-        description="Overrides the app URL when clicking on the app"
-        placeholder="URL that should be opened instead when clicking on the app"
-        variant="default"
-        mb="md"
-        {...form.getInputProps('behaviour.onClickUrl')}
-      />
-
      <Switch
-        label="Open in new tab"
+        label={t('behaviour.isOpeningNewTab.label')}
+        description={t('behaviour.isOpeningNewTab.description')}
        {...form.getInputProps('behaviour.isOpeningNewTab', { type: 'checkbox' })}
      />
    </Tabs.Panel>
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
@@ -1,6 +1,6 @@
-import { Tabs, Text, TextInput } from '@mantine/core';
+import { Tabs, TextInput } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
-import { IconCursorText, IconLink } from '@tabler/icons';
+import { IconClick, IconCursorText, IconLink } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { AppType } from '../../../../../../types/app';
 import { EditAppModalTab } from '../type';
@@ -11,43 +11,42 @@ interface GeneralTabProps {
 }

 export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
  return (
-    <Tabs.Panel value="general" pt="lg">
+    <Tabs.Panel value="general" pt="sm">
      <TextInput
        icon={<IconCursorText size={16} />}
-        label="App name"
-        description="Used for displaying the app on the dashboard"
+        label={t('general.appname.label')}
+        description={t('general.appname.description')}
        placeholder="My example app"
        variant="default"
        mb="md"
        withAsterisk
+        required
        {...form.getInputProps('name')}
      />
      <TextInput
        icon={<IconLink size={16} />}
-        label="App url"
-        description={
-          <Text>
-            URL that will be opened when clicking on the app. Can be overwritten using
-            <Text
-              onClick={() => openTab('behaviour')}
-              variant="link"
-              span
-              style={{
-                cursor: 'pointer',
-              }}
-            >
-              {' '}
-              on click URL{' '}
-            </Text>
-            when using external URLs to enhance security.
-          </Text>
-        }
+        label={t('general.internalAddress.label')}
+        description={t('general.internalAddress.description')}
        placeholder="https://google.com"
        variant="default"
        withAsterisk
+        required
        {...form.getInputProps('url')}
+        onChange={(e) => {
+          form.setFieldValue('behaviour.onClickUrl', e.target.value);
+          form.setFieldValue('url', e.target.value);
+        }}
+      />
+      <TextInput
+        icon={<IconClick size={16} />}
+        label={t('general.externalAddress.label')}
+        description={t('general.externalAddress.description')}
+        placeholder="https://homarr.mywebsite.com/"
+        variant="default"
+        mb="md"
+        {...form.getInputProps('behaviour.onClickUrl')}
      />
    </Tabs.Panel>
  );
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
@@ -11,6 +11,7 @@ import {
  Title,
 } from '@mantine/core';
 import { TablerIcon } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';

 interface GenericSecretInputProps {
@@ -32,6 +33,7 @@ export const GenericSecretInput = ({
  const Icon = setIcon;

  const [displayUpdateField, setDisplayUpdateField] = useState<boolean>(false);
+  const { t } = useTranslation(['layout/modals/add-app', 'common']);

  return (
    <Card withBorder>
@@ -43,7 +45,7 @@ export const GenericSecretInput = ({
            </ThemeIcon>
            <Stack spacing={0}>
              <Title className={classes.subtitle} order={6}>
-                {label}
+                {t(label)}
              </Title>
            </Stack>
          </Group>
@@ -51,13 +53,13 @@ export const GenericSecretInput = ({
        <Grid.Col xs={12} md={6}>
          <Flex gap={10} justify="end" align="end">
            <Button variant="subtle" color="gray" px="xl">
-              Clear Secret
+              {t('integration.secrets.clear')}
            </Button>
            {displayUpdateField === true ? (
              <PasswordInput placeholder="new secret" width={200} {...props} />
            ) : (
              <Button onClick={() => setDisplayUpdateField(true)} variant="light">
-                Set Secret
+                {t('integration.secrets.update')}
              </Button>
            )}
          </Flex>
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
@@ -17,7 +17,7 @@ interface IntegrationSelectorProps {
 }

 export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');

  // TODO: read this out from integrations dynamically.
  const data: SelectItem[] = [
@@ -76,9 +76,9 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {

  return (
    <Select
-      label="Integration configuration"
-      description="Treats this app as the selected integration and provides you with per-app configuration"
-      placeholder="Select your desired configuration"
+      label={t('integration.type.label')}
+      description={t('integration.type.description')}
+      placeholder={t('integration.type.placeholder')}
      itemComponent={SelectItemComponent}
      data={data}
      maxDropdownHeight={400}
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
+++ b/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,
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx
@@ -1,7 +1,7 @@
 import { Alert, Divider, Tabs, Text } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconAlertTriangle } from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
+import { Trans, useTranslation } from 'next-i18next';
 import { AppType } from '../../../../../../types/app';
 import { IntegrationSelector } from './Components/InputElements/IntegrationSelector';
 import { IntegrationOptionsRenderer } from './Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer';
@@ -11,7 +11,7 @@ interface IntegrationTabProps {
 }

 export const IntegrationTab = ({ form }: IntegrationTabProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
  const hasIntegrationSelected = form.values.integration?.type;

  return (
@@ -20,18 +20,14 @@ export const IntegrationTab = ({ form }: IntegrationTabProps) => {

      {hasIntegrationSelected && (
        <>
-          <Divider label="Integration Configuration" 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">
-            To update a secret, enter a value and click the save button. To remove a secret, use the
-            clear button.
+            {t('integration.secrets.description')}
          </Text>
          <IntegrationOptionsRenderer form={form} />
          <Alert icon={<IconAlertTriangle />} color="yellow">
            <Text>
-              Please note that Homarr removes secrets from the configuration for security reasons.
-              Thus, you can only either define or unset any credentials. Your credentials act as the
-              main access for your integrations and you should <b>never</b> share them with anybody
-              else. Make sure to <b>store and manage your secrets safely</b>.
+              <Trans i18nKey="integration.secrets.warning" />
            </Text>
          </Alert>
        </>
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
@@ -9,12 +9,12 @@ interface NetworkTabProps {
 }

 export const NetworkTab = ({ form }: NetworkTabProps) => {
-  const { t } = useTranslation('');
+  const { t } = useTranslation('layout/modals/add-app');
  return (
    <Tabs.Panel value="network" pt="lg">
      <Switch
-        label="Enable status checker"
-        description="Sends a simple HTTP / HTTPS request to check if your app is online"
+        label={t('network.statusChecker.label')}
+        description={t('network.statusChecker.description')}
        mb="md"
        defaultChecked={form.values.network.enabledStatusChecker}
        {...form.getInputProps('network.enabledStatusChecker')}
@@ -22,8 +22,8 @@ export const NetworkTab = ({ form }: NetworkTabProps) => {
      {form.values.network.enabledStatusChecker && (
        <MultiSelect
          required
-          label="HTTP status codes"
-          description="Determines what response codes are allowed for this app to be 'Online'"
+          label={t('network.statusCodes.label')}
+          description={t('network.statusCodes.description')}
          data={StatusCodes}
          clearable
          searchable
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/type.ts
+++ b/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';
--- a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx
+++ b/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(
--- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx
+++ b/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';
--- a/src/components/Dashboard/Tiles/EmptyTile.tsx
+++ b/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>
+);
--- a/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx
+++ b/src/components/Dashboard/Tiles/HomarrCardWrapper.tsx
@@ -1,6 +1,7 @@
 import { Card, CardProps } from '@mantine/core';
 import { ReactNode } from 'react';
 import { useCardStyles } from '../../layout/useCardStyles';
+import { useEditModeStore } from '../Views/useEditModeStore';

 interface HomarrCardWrapperProps extends CardProps {
  children: ReactNode;
@@ -11,11 +12,13 @@ export const HomarrCardWrapper = ({ ...props }: HomarrCardWrapperProps) => {
    cx,
    classes: { card: cardClass },
  } = useCardStyles();
+  const isEditMode = useEditModeStore((x) => x.enabled);
  return (
    <Card
      {...props}
      className={cx(props.className, cardClass)}
      withBorder
+      style={{ cursor: isEditMode ? 'move' : 'default' }}
      radius="lg"
      shadow="md"
    />
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/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 {
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
+++ b/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,
      },
    });
  };
--- a/src/components/Dashboard/Views/DashboardView.tsx
+++ b/src/components/Dashboard/Views/DashboardView.tsx
@@ -1,7 +1,6 @@
 import { Group, Stack } from '@mantine/core';
 import { useMemo } from 'react';
 import { useConfigContext } from '../../../config/provider';
-import { useScreenLargerThan } from '../../../tools/hooks/useScreenLargerThan';
 import { useScreenSmallerThan } from '../../../tools/hooks/useScreenSmallerThan';
 import { CategoryType } from '../../../types/category';
 import { WrapperType } from '../../../types/wrapper';
--- a/src/components/Dashboard/Views/DetailView.tsx
+++ b/src/components/Dashboard/Views/DetailView.tsx
@@ -1,5 +1,3 @@
 import { DashboardView } from './DashboardView';

-export const DashboardDetailView = () => {
-  return <DashboardView />;
-};
+export const DashboardDetailView = () => <DashboardView />;
--- a/src/components/Dashboard/Views/EditView.tsx
+++ b/src/components/Dashboard/Views/EditView.tsx
@@ -1,5 +1,3 @@
 import { DashboardView } from './DashboardView';

-export const DashboardEditView = () => {
-  return <DashboardView />;
-};
+export const DashboardEditView = () => <DashboardView />;
--- a/src/components/Dashboard/Wrappers/Category/Category.tsx
+++ b/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';
--- a/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx
+++ b/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx
@@ -1,6 +1,7 @@
 import { Button, Group, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { ContextModalProps } from '@mantine/modals';
+import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { CategoryType } from '../../../../types/category';
@@ -31,15 +32,17 @@ export const CategoryEditModal = ({
    context.closeModal(id);
  };

+  const { t } = useTranslation('common');
+
  return (
    <form onSubmit={form.onSubmit(handleSubmit)}>
      <TextInput data-autoFocus {...form.getInputProps('name')} label="Name of category" />

      <Group mt="md" grow>
        <Button onClick={() => context.closeModal(id)} variant="light" color="gray">
-          Cancel
+          {t('cancel')}
        </Button>
-        <Button type="submit">Save</Button>
+        <Button type="submit">{t('save')}</Button>
      </Group>
    </form>
  );
--- a/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx
+++ b/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;
--- a/src/components/Dashboard/Wrappers/WrapperContent.tsx
+++ b/src/components/Dashboard/Wrappers/WrapperContent.tsx
@@ -18,47 +18,45 @@ interface WrapperContentProps {
  };
 }

-export const WrapperContent = ({ apps, refs, widgets }: WrapperContentProps) => {
-  return (
-    <>
-      {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;
+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;

-        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>
+      );
+    })}
+  </>
+);
--- a/src/components/Settings/Common/CommonSettings.tsx
+++ b/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();
--- a/src/components/Settings/Common/Config/ConfigActions.tsx
+++ b/src/components/Settings/Common/Config/ConfigActions.tsx
@@ -39,7 +39,7 @@ export default function ConfigActions() {
      <Flex gap="xs" justify="stretch">
        <ActionIcon className={classes.actionIcon} onClick={handleDownload} variant="default">
          <IconDownload size={20} />
-          <Text>{t('buttons.download')}</Text>
+          <Text size="sm">{t('buttons.download')}</Text>
        </ActionIcon>
        <ActionIcon
          className={classes.actionIcon}
@@ -48,11 +48,11 @@ export default function ConfigActions() {
          variant="light"
        >
          <IconTrash color={colors.red[2]} size={20} />
-          <Text>{t('buttons.delete.text')}</Text>
+          <Text size="sm">{t('buttons.delete.text')}</Text>
        </ActionIcon>
        <ActionIcon className={classes.actionIcon} onClick={createCopyModal.open} variant="default">
          <IconCopy size={20} />
-          <Text>{t('buttons.saveCopy')}</Text>
+          <Text size="sm">{t('buttons.saveCopy')}</Text>
        </ActionIcon>
      </Flex>

--- a/src/components/Settings/Customization/Layout/LayoutSelector.tsx
+++ b/src/components/Settings/Customization/Layout/LayoutSelector.tsx
@@ -1,6 +1,5 @@
 import {
  ActionIcon,
-  Center,
  Checkbox,
  createStyles,
  Flex,
@@ -11,6 +10,7 @@ import {
  Title,
  useMantineTheme,
 } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
@@ -35,6 +35,7 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
  const [searchBar, setSearchBar] = useState(defaultLayout?.enabledSearchbar ?? false);

  const { colors, colorScheme } = useMantineTheme();
+  const { t } = useTranslation('settings/common');

  if (!configName) return null;

@@ -69,7 +70,7 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {

  return (
    <Stack spacing="xs">
-      <Title order={6}>Dashboard layout</Title>
+      <Title order={6}>{t('layout.title')}</Title>

      <Paper px="xs" py={4} withBorder>
        <Group position="apart">
@@ -94,7 +95,7 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
        {leftSidebar && (
          <Paper className={classes.secondaryWrapper} p="xs" withBorder>
            <Flex align="center" justify="center" direction="column">
-              <Text align="center">Sidebar</Text>
+              <Text align="center">{t('layout.sidebar')}</Text>
              <Text color="dimmed" size="xs" align="center">
                Only for
                <br />
@@ -106,16 +107,16 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
        )}

        <Paper className={classes.primaryWrapper} p="xs" withBorder>
-          <Text align="center">Main</Text>
+          <Text align="center">{t('layout.main')}</Text>
          <Text color="dimmed" size="xs" align="center">
-            Cannot be turned of.
+            {t('layout.cannotturnoff')}
          </Text>
        </Paper>

        {rightSidebar && (
          <Paper className={classes.secondaryWrapper} p="xs" withBorder>
            <Flex align="center" justify="center" direction="column">
-              <Text align="center">Sidebar</Text>
+              <Text align="center">{t('layout.sidebar')}</Text>
              <Text color="dimmed" size="xs" align="center">
                Only for
                <br />
@@ -129,29 +130,29 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {

      <Stack spacing="xs">
        <Checkbox
-          label="Enable left sidebar"
-          description="Optional. Can be used for apps and integrations only"
+          label={t('layout.enablelsidebar')}
+          description={t('layout.enablelsidebardesc')}
          checked={leftSidebar}
          onChange={(ev) => handleChange('enabledLeftSidebar', ev, setLeftSidebar)}
        />
        <Checkbox
-          label="Enable right sidebar"
-          description="Optional. Can be used for apps and integrations only"
+          label={t('layout.enablersidebar')}
+          description={t('layout.enablersidebardesc')}
          checked={rightSidebar}
          onChange={(ev) => handleChange('enabledRightSidebar', ev, setRightSidebar)}
        />
        <Checkbox
-          label="Enable search bar"
+          label={t('layout.enablesearchbar')}
          checked={searchBar}
          onChange={(ev) => handleChange('enabledSearchbar', ev, setSearchBar)}
        />
        <Checkbox
-          label="Enable docker"
+          label={t('layout.enabledocker')}
          checked={docker}
          onChange={(ev) => handleChange('enabledDocker', ev, setDocker)}
        />
        <Checkbox
-          label="Enable pings"
+          label={t('layout.enableping')}
          checked={ping}
          onChange={(ev) => handleChange('enabledPing', ev, setPing)}
        />
--- a/src/components/Settings/SettingsDrawer.tsx
+++ b/src/components/Settings/SettingsDrawer.tsx
@@ -1,14 +1,11 @@
-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';
 import CommonSettings from './Common/CommonSettings';
 import Credits from './Common/Credits';

-function SettingsMenu() {
+function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
  const { t } = useTranslation('settings/common');

  return (
@@ -36,7 +33,11 @@ interface SettingsDrawerProps {
  closeDrawer: () => void;
 }

-export function SettingsDrawer({ opened, closeDrawer }: SettingsDrawerProps) {
+export function SettingsDrawer({
+  opened,
+  closeDrawer,
+  newVersionAvailable,
+}: SettingsDrawerProps & { newVersionAvailable: string }) {
  const { t } = useTranslation('settings/common');

  return (
@@ -48,7 +49,7 @@ export function SettingsDrawer({ opened, closeDrawer }: SettingsDrawerProps) {
      opened={opened}
      onClose={closeDrawer}
    >
-      <SettingsMenu />
+      <SettingsMenu newVersionAvailable={newVersionAvailable} />
      <Credits />
    </Drawer>
  );
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,74 +0,0 @@
-import React, { useEffect } from 'react';
-import { createStyles, Footer as FooterComponent } from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
-import { IconAlertCircle as AlertCircle } from '@tabler/icons';
-import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
-
-const useStyles = createStyles((theme) => ({
-  footer: {
-    borderTop: `1px solid ${
-      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
-    }`,
-  },
-
-  inner: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: `${theme.spacing.md}px ${theme.spacing.md}px`,
-
-    [theme.fn.smallerThan('sm')]: {
-      flexDirection: 'column',
-    },
-  },
-
-  links: {
-    [theme.fn.smallerThan('sm')]: {
-      marginTop: theme.spacing.lg,
-      marginBottom: theme.spacing.sm,
-    },
-  },
-}));
-
-interface FooterCenteredProps {
-  links: { link: string; label: string }[];
-}
-
-export function Footer({ links }: FooterCenteredProps) {
-  useEffect(() => {
-    // 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) {
-          showNotification({
-            color: 'yellow',
-            autoClose: false,
-            title: 'New version available',
-            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 />,
-            message: 'This version of Homarr is still in development! Bugs are expected 🐛',
-          });
-        }
-      });
-    });
-  }, []);
-
-  return (
-    <FooterComponent
-      height="auto"
-      style={{
-        background: 'none',
-        border: 'none',
-        clear: 'both',
-      }}
-      children={undefined}
-    />
-  );
-}
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,9 +1,8 @@
 import { AppShell, createStyles } from '@mantine/core';
 import { useConfigContext } from '../../config/provider';
 import { Background } from './Background';
-import { Footer } from './Footer';
-import { Header } from './Header/Header';
-import { Head } from './Header/Meta/Head';
+import { Header } from './header/Header';
+import { Head } from './header/Meta/Head';

 const useStyles = createStyles(() => ({}));

@@ -15,7 +14,6 @@ export default function Layout({ children }: any) {
    <AppShell
      fixed={false}
      header={<Header />}
-      footer={<Footer links={[]} />}
      styles={{
        main: {
          minHeight: 'calc(100vh - var(--mantine-header-height))',
--- a/src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
+++ b/src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
@@ -4,7 +4,7 @@ import { IconApps } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';

 export const AddElementAction = () => {
-  const { t } = useTranslation('layout/add-service-app-shelf');
+  const { t } = useTranslation('layout/element-selector/selector');

  return (
    <Tooltip withinPortal label={t('actionIcon.tooltip')}>
@@ -16,7 +16,7 @@ export const AddElementAction = () => {
        onClick={() =>
          openContextModal({
            modal: 'selectElement',
-            title: 'Add an element to your dashboard',
+            title: t('modal.title'),
            size: 'xl',
            innerProps: {},
          })
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -1,4 +1,6 @@
-import { Box, createStyles, Group, Header as MantineHeader } from '@mantine/core';
+import { Box, createStyles, Group, Header as MantineHeader, Indicator } from '@mantine/core';
+import { useState, useEffect } from 'react';
+import { REPO_URL, CURRENT_VERSION } from '../../../../data/constants';
 import { useConfigContext } from '../../../config/provider';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
@@ -15,6 +17,18 @@ export function Header(props: any) {

  const { config } = useConfigContext();

+  const [newVersionAvailable, setNewVersionAvailable] = useState<string>('');
+  useEffect(() => {
+    // 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) {
+          setNewVersionAvailable(data.tag_name);
+        }
+      });
+    });
+  }, [CURRENT_VERSION]);
+
  return (
    <MantineHeader height={HeaderHeight} className={cardClasses.card}>
      <Group p="xs" noWrap grow>
@@ -25,7 +39,9 @@ export function Header(props: any) {
          <Search />
          <AddElementAction />
          <ToggleEditModeAction />
-          <SettingsMenu />
+          <Indicator size={15} color="blue" withBorder processing disabled={!newVersionAvailable}>
+            <SettingsMenu newVersionAvailable={newVersionAvailable} />
+          </Indicator>
        </Group>
      </Group>
    </MantineHeader>
--- a/src/components/layout/header/Search.tsx
+++ b/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
--- a/src/components/layout/header/SettingsMenu.tsx
+++ b/src/components/layout/header/SettingsMenu.tsx
@@ -1,12 +1,14 @@
-import { ActionIcon, Menu, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Menu, Tooltip } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 import { AboutModal } from '../../About/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';
 import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';

-export const SettingsMenu = () => {
+export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
  const [drawerOpened, drawer] = useDisclosure(false);
+  const { t } = useTranslation('common');
  const [aboutModalOpened, aboutModal] = useDisclosure(false);

  return (
@@ -22,19 +24,34 @@ export const SettingsMenu = () => {
            <ColorSchemeSwitch />
            <Menu.Divider />
            <Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
-              Homarr Settings
+              {t('sections.settings')}
            </Menu.Item>
            <Menu.Item
              icon={<IconInfoCircle strokeWidth={1.2} size={18} />}
-              onClick={aboutModal.open}
+              rightSection={
+                newVersionAvailable && (
+                  <Badge variant="light" color="blue">
+                    New
+                  </Badge>
+                )
+              }
+              onClick={() => aboutModal.open()}
            >
              About
            </Menu.Item>
          </Menu.Dropdown>
        </Menu>
      </Tooltip>
-      <SettingsDrawer opened={drawerOpened} closeDrawer={drawer.close} />
-      <AboutModal opened={aboutModalOpened} closeModal={aboutModal.close} />
+      <SettingsDrawer
+        opened={drawerOpened}
+        closeDrawer={drawer.close}
+        newVersionAvailable={newVersionAvailable}
+      />
+      <AboutModal
+        opened={aboutModalOpened}
+        closeModal={aboutModal.close}
+        newVersionAvailable={newVersionAvailable}
+      />
    </>
  );
-};
+}
--- a/src/components/layout/header/SettingsMenu/ColorSchemeSwitch.tsx
+++ b/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';

--- a/src/pages/api/modules/calendar.ts
+++ b/src/pages/api/modules/calendar.ts
@@ -41,8 +41,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
    'lidarr',
  ];
  const mediaApps = config.apps.filter(
-    (app) =>
-      app.integration && mediaAppIntegrationTypes.includes(app.integration.type)
+    (app) => app.integration && mediaAppIntegrationTypes.includes(app.integration.type)
  );

  const medias = await Promise.all(
--- a/src/pages/api/modules/overseerr/[id].tsx
+++ b/src/pages/api/modules/overseerr/[id].tsx
@@ -3,7 +3,6 @@ import { getCookie } from 'cookies-next';
 import axios from 'axios';
 import Consola from 'consola';
 import { getConfig } from '../../../../tools/config/getConfig';
-import { Config } from '../../../../tools/types';
 import { MediaType } from '../../../../modules/overseerr/SearchResult';

 async function Get(req: NextApiRequest, res: NextApiResponse) {
--- a/src/pages/api/modules/overseerr/index.ts
+++ b/src/pages/api/modules/overseerr/index.ts
@@ -2,7 +2,6 @@ import axios from 'axios';
 import { getCookie } from 'cookies-next';
 import { NextApiRequest, NextApiResponse } from 'next';
 import { getConfig } from '../../../../tools/config/getConfig';
-import { Config } from '../../../../tools/types';

 async function Get(req: NextApiRequest, res: NextApiResponse) {
  const configName = getCookie('config-name', { req });
--- a/src/pages/api/modules/ping.ts
+++ b/src/pages/api/modules/ping.ts
@@ -1,22 +1,28 @@
-import ping from 'ping';
+import axios from 'axios';
+import https from 'https';
 import { NextApiRequest, NextApiResponse } from 'next';

 async function Get(req: NextApiRequest, res: NextApiResponse) {
  // Parse req.body as a AppItem
  const { url } = req.query;
-  // Parse url as URL object
-  const parsedUrl = new URL(url as string);
-  // Ping the URL
-  const response = await ping.promise.probe(parsedUrl.hostname, {
-    timeout: 1,
-  });
-
-  // Return 200 if the alive property is true
-  if (response.alive) {
-    return res.status(200).end();
-  }
-  // Return 404 if the alive property is false
-  return res.status(404).end();
+  const agent = new https.Agent({ rejectUnauthorized: false });
+  await axios
+    .get(url as string, { httpsAgent: agent, timeout: 2000 })
+    .then((response) => {
+      res.status(response.status).json(response.statusText);
+    })
+    .catch((error) => {
+      if (error.response) {
+        res.status(error.response.status).json(error.response.statusText);
+      } else if (error.code === 'ECONNABORTED') {
+        res.status(408).json('Request Timeout');
+      } else {
+        res.status(500).json('Server Error');
+      }
+    });
+  // // Make a request to the URL
+  // const response = await axios.get(url);
+  // // Return the response
 }

 export default async (req: NextApiRequest, res: NextApiResponse) => {
--- a/src/pages/api/modules/usenet/index.ts
+++ b/src/pages/api/modules/usenet/index.ts
@@ -39,10 +39,8 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
        const options = {
          host: url.hostname,
          port: url.port,
-          login:
-            app.integration.properties.find((x) => x.field === 'username')?.value ?? undefined,
-          hash:
-            app.integration.properties.find((x) => x.field === 'password')?.value ?? undefined,
+          login: app.integration.properties.find((x) => x.field === 'username')?.value ?? undefined,
+          hash: app.integration.properties.find((x) => x.field === 'password')?.value ?? undefined,
        };

        const nzbGet = NzbgetClient(options);
--- a/src/pages/api/modules/usenet/pause.ts
+++ b/src/pages/api/modules/usenet/pause.ts
@@ -31,10 +31,8 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
        const options = {
          host: url.hostname,
          port: url.port,
-          login:
-            app.integration.properties.find((x) => x.field === 'username')?.value ?? undefined,
-          hash:
-            app.integration.properties.find((x) => x.field === 'password')?.value ?? undefined,
+          login: app.integration.properties.find((x) => x.field === 'username')?.value ?? undefined,
+          hash: app.integration.properties.find((x) => x.field === 'password')?.value ?? undefined,
        };

        const nzbGet = NzbgetClient(options);
--- a/src/pages/api/modules/usenet/resume.ts
+++ b/src/pages/api/modules/usenet/resume.ts
@@ -32,10 +32,8 @@ async function Post(req: NextApiRequest, res: NextApiResponse) {
        const options = {
          host: url.hostname,
          port: url.port,
-          login:
-            app.integration.properties.find((x) => x.field === 'username')?.value ?? undefined,
-          hash:
-            app.integration.properties.find((x) => x.field === 'password')?.value ?? undefined,
+          login: app.integration.properties.find((x) => x.field === 'username')?.value ?? undefined,
+          hash: app.integration.properties.find((x) => x.field === 'password')?.value ?? undefined,
        };

        const nzbGet = NzbgetClient(options);
--- a/src/tools/hooks/useGetServiceByType.ts
+++ b/src/tools/hooks/useGetServiceByType.ts
@@ -10,5 +10,4 @@ export const useGetServiceByType = (...serviceTypes: ServiceType[]) => {
 export const getServiceByType = (config: Config, ...serviceTypes: ServiceType[]) =>
  config.apps.filter((s) => serviceTypes.includes(s.type));

-export const getServiceById = (config: Config, id: string) =>
-  config.apps.find((s) => s.id === id);
+export const getServiceById = (config: Config, id: string) => config.apps.find((s) => s.id === id);
--- a/src/tools/translation-namespaces.ts
+++ b/src/tools/translation-namespaces.ts
@@ -1,10 +1,8 @@
 export const dashboardNamespaces = [
  'common',
-  'layout/app-shelf',
-  'layout/add-service-app-shelf',
-  'layout/app-shelf-menu',
  'layout/tools',
  'layout/element-selector/selector',
+  'layout/modals/add-app',
  'layout/header/actions/toggle-edit-mode',
  'settings/common',
  'settings/general/theme-selector',
--- a/src/types/app.ts
+++ b/src/types/app.ts
@@ -90,16 +90,16 @@ export const integrationFieldDefinitions: {
  apiKey: {
    type: 'private',
    icon: IconKey,
-    label: 'API Key',
+    label: 'common:secrets.apiKey',
  },
  username: {
    type: 'public',
    icon: IconUser,
-    label: 'Username',
+    label: 'common:secrets.username',
  },
  password: {
    type: 'private',
    icon: IconPassword,
-    label: 'Password',
+    label: 'common:secrets.password',
  },
 };
--- a/yarn.lock
+++ b/yarn.lock
@@ -4536,7 +4536,7 @@ __metadata:

 "fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
  version: 2.3.2
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
  dependencies:
    node-gyp: latest
  conditions: os=darwin
@@ -7489,7 +7489,7 @@ __metadata:

 "resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>":
  version: 1.22.1
-  resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=c3c19d"
+  resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=07638b"
  dependencies:
    is-core-module: ^2.9.0
    path-parse: ^1.0.7
@@ -7502,7 +7502,7 @@ __metadata:

 "resolve@patch:resolve@^2.0.0-next.3#~builtin<compat/resolve>":
  version: 2.0.0-next.4
-  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=c3c19d"
+  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=07638b"
  dependencies:
    is-core-module: ^2.9.0
    path-parse: ^1.0.7
@@ -8338,7 +8338,7 @@ __metadata:

 "typescript@patch:typescript@^4.7.4#~builtin<compat/typescript>":
  version: 4.9.4
-  resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=d73830"
+  resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=7ad353"
  bin:
    tsc: bin/tsc
    tsserver: bin/tsserver