From df890b8c0aff3faedc205006fc96dd7686a20743 Mon Sep 17 00:00:00 2001
From: Meier Lukas
Date: Tue, 1 Aug 2023 01:13:21 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Polish=20layouts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/layout/Layout.tsx | 31 --
.../layout/Templates/BoardLayout.tsx | 196 ++++++++
.../{main.tsx => Templates/MainLayout.tsx} | 11 +-
.../ManageLayout.tsx} | 34 +-
src/components/layout/header/ActionButton.tsx | 50 ++
.../AddElementAction/AddElementAction.tsx | 62 ---
.../Actions/ToggleEditMode/ToggleEditMode.tsx | 145 ------
.../{new-header => header}/AvatarMenu.tsx | 0
src/components/layout/header/Header.tsx | 143 +++---
.../{new-header => header}/MovieModal.tsx | 0
src/components/layout/header/Search.tsx | 476 +++++++-----------
src/components/layout/header/SettingsMenu.tsx | 81 ---
.../header/SettingsMenu/ColorSchemeSwitch.tsx | 23 -
src/components/layout/header/SmallAppItem.tsx | 17 -
src/components/layout/new-header/Header.tsx | 89 ----
src/components/layout/new-header/search.tsx | 203 --------
src/modules/index.ts | 1 -
src/modules/overseerr/OverseerrModule.tsx | 15 -
src/modules/overseerr/index.ts | 1 -
src/pages/board/[slug].tsx | 8 +-
src/pages/board/[slug]/customize.tsx | 2 +-
src/pages/board/index.tsx | 231 +--------
src/pages/docker.tsx | 2 +-
src/pages/manage/boards/index.tsx | 15 +-
src/pages/manage/index.tsx | 6 +-
src/pages/manage/settings/index.tsx | 8 +-
src/pages/manage/users/create.tsx | 19 +-
src/pages/manage/users/index.tsx | 11 +-
src/pages/manage/users/invites.tsx | 13 +-
src/pages/user/preferences.tsx | 8 +-
30 files changed, 556 insertions(+), 1345 deletions(-)
delete mode 100644 src/components/layout/Layout.tsx
create mode 100644 src/components/layout/Templates/BoardLayout.tsx
rename src/components/layout/{main.tsx => Templates/MainLayout.tsx} (58%)
rename src/components/layout/{admin/main-admin.layout.tsx => Templates/ManageLayout.tsx} (86%)
create mode 100644 src/components/layout/header/ActionButton.tsx
delete mode 100644 src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
delete mode 100644 src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
rename src/components/layout/{new-header => header}/AvatarMenu.tsx (100%)
rename src/components/layout/{new-header => header}/MovieModal.tsx (100%)
delete mode 100644 src/components/layout/header/SettingsMenu.tsx
delete mode 100644 src/components/layout/header/SettingsMenu/ColorSchemeSwitch.tsx
delete mode 100644 src/components/layout/header/SmallAppItem.tsx
delete mode 100644 src/components/layout/new-header/Header.tsx
delete mode 100644 src/components/layout/new-header/search.tsx
delete mode 100644 src/modules/index.ts
delete mode 100644 src/modules/overseerr/OverseerrModule.tsx
delete mode 100644 src/modules/overseerr/index.ts
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
deleted file mode 100644
index 5b3ccbd4b..000000000
--- a/src/components/layout/Layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { AppShell, createStyles } from '@mantine/core';
-
-import { useConfigContext } from '../../config/provider';
-import { Background } from './Background';
-import { Head } from './Meta/Head';
-import { Header } from './header/Header';
-
-const useStyles = createStyles(() => ({}));
-
-export default function Layout({ children }: any) {
- const { cx } = useStyles();
- const { config } = useConfigContext();
-
- return (
- }
- styles={{
- main: {
- minHeight: 'calc(100vh - var(--mantine-header-height))',
- },
- }}
- className="dashboard-app-shell"
- >
-
-
- {children}
-
-
- );
-}
diff --git a/src/components/layout/Templates/BoardLayout.tsx b/src/components/layout/Templates/BoardLayout.tsx
new file mode 100644
index 000000000..27ed51013
--- /dev/null
+++ b/src/components/layout/Templates/BoardLayout.tsx
@@ -0,0 +1,196 @@
+import { Button, Text, Title, Tooltip, clsx } from '@mantine/core';
+import { useHotkeys, useWindowEvent } from '@mantine/hooks';
+import { openContextModal } from '@mantine/modals';
+import { hideNotification, showNotification } from '@mantine/notifications';
+import {
+ IconApps,
+ IconBrandDocker,
+ IconEditCircle,
+ IconEditCircleOff,
+ IconSettings,
+} from '@tabler/icons-react';
+import Consola from 'consola';
+import { useSession } from 'next-auth/react';
+import { Trans, useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
+import { useNamedWrapperColumnCount } from '~/components/Dashboard/Wrappers/gridstack/store';
+import { useConfigContext } from '~/config/provider';
+import { env } from '~/env';
+import { api } from '~/utils/api';
+
+import { Background } from '../Background';
+import { HeaderActionButton } from '../Header/ActionButton';
+import { MainLayout } from './MainLayout';
+
+type BoardLayoutProps = {
+ children: React.ReactNode;
+};
+
+export const BoardLayout = ({ children }: BoardLayoutProps) => {
+ const { config } = useConfigContext();
+
+ return (
+ }>
+
+ {children}
+
+
+ );
+};
+
+export const HeaderActions = () => {
+ const { data: sessionData } = useSession();
+
+ if (!sessionData?.user?.isAdmin) return null;
+
+ return (
+ <>
+ {env.NEXT_PUBLIC_DOCKER_ENABLED && }
+
+
+
+ );
+};
+
+const DockerButton = () => {
+ const { t } = useTranslation('modules/docker');
+
+ return (
+
+
+
+
+
+ );
+};
+
+const CustomizeBoardButton = () => {
+ const { name } = useConfigContext();
+
+ return (
+
+
+
+
+
+ );
+};
+
+const beforeUnloadEventText = 'Exit the edit mode to save your changes';
+const editModeNotificationId = 'toggle-edit-mode';
+
+const ToggleEditModeButton = () => {
+ const { enabled, toggleEditMode } = useEditModeStore();
+ const { config, name: configName } = useConfigContext();
+ const { mutateAsync: saveConfig } = api.config.save.useMutation();
+ const namedWrapperColumnCount = useNamedWrapperColumnCount();
+ const { t } = useTranslation(['layout/header/actions/toggle-edit-mode', 'common']);
+ const translatedSize =
+ namedWrapperColumnCount !== null
+ ? t(`common:breakPoints.${namedWrapperColumnCount}`)
+ : t('common:loading');
+
+ useHotkeys([['mod+E', toggleEditMode]]);
+
+ useWindowEvent('beforeunload', (event: BeforeUnloadEvent) => {
+ if (enabled) {
+ // eslint-disable-next-line no-param-reassign
+ event.returnValue = beforeUnloadEventText;
+ return beforeUnloadEventText;
+ }
+
+ return undefined;
+ });
+
+ const save = async () => {
+ toggleEditMode();
+ if (!config || !configName) return;
+ await saveConfig({ name: configName, config });
+ Consola.log('Saved config to server', configName);
+ hideNotification(editModeNotificationId);
+ };
+
+ const enableEditMode = () => {
+ toggleEditMode();
+ showNotification({
+ styles: (theme) => ({
+ root: {
+ backgroundColor: theme.colors.orange[7],
+ borderColor: theme.colors.orange[7],
+
+ '&::before': { backgroundColor: theme.white },
+ },
+ title: { color: theme.white },
+ description: { color: theme.white },
+ closeButton: {
+ color: theme.white,
+ '&:hover': { backgroundColor: theme.colors.orange[7] },
+ },
+ }),
+ radius: 'md',
+ id: 'toggle-edit-mode',
+ autoClose: 10000,
+ title: (
+
+ <Trans
+ i18nKey="layout/header/actions/toggle-edit-mode:popover.title"
+ values={{ size: translatedSize }}
+ components={{
+ 1: (
+ <Text
+ component="a"
+ style={{ color: 'inherit', textDecoration: 'underline' }}
+ href="https://homarr.dev/docs/customizations/layout"
+ target="_blank"
+ />
+ ),
+ }}
+ />
+
+ ),
+ message: ,
+ });
+ };
+
+ if (enabled) {
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+ return (
+
+
+
+
+
+ );
+};
+
+const AddElementButton = () => {
+ const { t } = useTranslation('layout/element-selector/selector');
+
+ return (
+
+
+ openContextModal({
+ modal: 'selectElement',
+ title: t('modal.title'),
+ size: 'xl',
+ innerProps: {},
+ })
+ }
+ >
+
+
+
+ );
+};
diff --git a/src/components/layout/main.tsx b/src/components/layout/Templates/MainLayout.tsx
similarity index 58%
rename from src/components/layout/main.tsx
rename to src/components/layout/Templates/MainLayout.tsx
index fae324091..dd1e393f5 100644
--- a/src/components/layout/main.tsx
+++ b/src/components/layout/Templates/MainLayout.tsx
@@ -1,9 +1,7 @@
-import { AppShell, clsx, useMantineTheme } from '@mantine/core';
-import { useConfigContext } from '~/config/provider';
+import { AppShell, useMantineTheme } from '@mantine/core';
-import { Background } from './Background';
-import { Head } from './Meta/Head';
-import { MainHeader } from './new-header/Header';
+import { MainHeader } from '../Header/Header';
+import { Head } from '../Meta/Head';
type MainLayoutProps = {
headerActions?: React.ReactNode;
@@ -11,7 +9,6 @@ type MainLayoutProps = {
};
export const MainLayout = ({ headerActions, children }: MainLayoutProps) => {
- const { config } = useConfigContext();
const theme = useMantineTheme();
return (
@@ -25,9 +22,7 @@ export const MainLayout = ({ headerActions, children }: MainLayoutProps) => {
className="dashboard-app-shell"
>
-