diff --git a/public/locales/en/layout/common.json b/public/locales/en/layout/common.json
new file mode 100644
index 000000000..6d0489729
--- /dev/null
+++ b/public/locales/en/layout/common.json
@@ -0,0 +1,18 @@
+{
+ "modals": {
+ "blockedPopups": {
+ "title": "Popups blocked",
+ "text": "Your browser has blocked Homarr from accessing it's API. This is most commonly caused by AdBlockers or denied permissions. Homarr is unable to request permissions automatically.",
+ "list": {
+ "browserPermission": "Click on the icon besides the URL and check the permisions. Allow Popups and windows",
+ "adBlockers": "Disable ad blockers and security tools from your browser",
+ "otherBrowser": "Try a different browser"
+ }
+ }
+ },
+ "actions": {
+ "category": {
+ "openAllInNewTab": "Open all in new tab"
+ }
+ }
+}
diff --git a/src/components/Dashboard/Tiles/GenericTileMenu.tsx b/src/components/Dashboard/Tiles/GenericTileMenu.tsx
index 8256cca08..ce7735f66 100644
--- a/src/components/Dashboard/Tiles/GenericTileMenu.tsx
+++ b/src/components/Dashboard/Tiles/GenericTileMenu.tsx
@@ -1,5 +1,5 @@
import { ActionIcon, Menu } from '@mantine/core';
-import { IconDots, IconLayoutKanban, IconPencil, IconTrash } from '@tabler/icons-react';
+import { IconLayoutKanban, IconPencil, IconSettings, IconTrash } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { useEditModeStore } from '../Views/useEditModeStore';
@@ -35,7 +35,7 @@ export const GenericTileMenu = ({
right={8}
style={{ zIndex: 1 }}
>
-
+
diff --git a/src/components/Dashboard/Wrappers/Category/Category.tsx b/src/components/Dashboard/Wrappers/Category/Category.tsx
index fe5badc78..23efd72e8 100644
--- a/src/components/Dashboard/Wrappers/Category/Category.tsx
+++ b/src/components/Dashboard/Wrappers/Category/Category.tsx
@@ -1,5 +1,18 @@
-import { Accordion, Title } from '@mantine/core';
+import {
+ Accordion,
+ ActionIcon,
+ Box,
+ Menu,
+ Title,
+ Text,
+ Stack,
+ List,
+ createStyles,
+} from '@mantine/core';
import { useLocalStorage } from '@mantine/hooks';
+import { IconDotsVertical, IconShare3 } from '@tabler/icons-react';
+import { modals } from '@mantine/modals';
+import { useTranslation } from 'next-i18next';
import { useConfigContext } from '../../../../config/provider';
import { CategoryType } from '../../../../types/category';
import { useCardStyles } from '../../../layout/useCardStyles';
@@ -17,6 +30,8 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
const isEditMode = useEditModeStore((x) => x.enabled);
const { config } = useConfigContext();
const { classes: cardClasses, cx } = useCardStyles(true);
+ const { classes } = useStyles();
+ const { t } = useTranslation(['layout/common', 'common']);
const categoryList = config?.categories.map((x) => x.name) ?? [];
const [toggledCategories, setToggledCategories] = useLocalStorage({
@@ -25,6 +40,44 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
defaultValue: categoryList,
});
+ const handleMenuClick = () => {
+ for (let i = 0; i < apps.length; i += 1) {
+ const app = apps[i];
+ const popUp = window.open(app.url, app.id);
+
+ if (popUp === null) {
+ modals.openConfirmModal({
+ title: {t('modals.blockedPopups.title')},
+ children: (
+
+ {t('modals.blockedPopups.text')}
+
+
+ {t('modals.blockedPopups.list.browserPermission')}
+
+
+ {t('modals.blockedPopups.list.adBlockers')}
+
+
+ {t('modals.blockedPopups.list.otherBrowser')}
+
+
+
+ ),
+ labels: {
+ confirm: t('common:close'),
+ cancel: '',
+ },
+ cancelProps: {
+ display: 'none',
+ },
+ closeOnClickOutside: false,
+ });
+ break;
+ }
+ }
+ };
+
return (
{
}}
>
- }>
- {category.name}
-
+
+ }>
+ {category.name}
+
+ {!isEditMode && (
+
+ )}
+
{
);
};
+
+const useStyles = createStyles(() => ({
+ listItem: {
+ '& div': {
+ maxWidth: 'calc(100% - 23px)',
+ },
+ },
+}));
diff --git a/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx b/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx
index 127ec5216..75b604d4f 100644
--- a/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx
+++ b/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx
@@ -1,12 +1,12 @@
import { ActionIcon, Menu } from '@mantine/core';
import {
- IconDots,
IconTransitionTop,
IconTransitionBottom,
IconRowInsertTop,
IconRowInsertBottom,
IconEdit,
IconTrash,
+ IconSettings,
} from '@tabler/icons-react';
import { useConfigContext } from '../../../../config/provider';
import { CategoryType } from '../../../../types/category';
@@ -25,7 +25,7 @@ export const CategoryEditMenu = ({ category }: CategoryEditMenuProps) => {