Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-06 21:45:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

💄 Polish layouts

Browse Source
This commit is contained in:
Meier Lukas
2023-08-01 01:13:21 +02:00
parent fff6e6c077
commit df890b8c0a
30 changed files with 556 additions and 1345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/layout/Layout.tsx
View File

@@ -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 (
<AppShell
fixed={false}
header={<Header />}
styles={{
main: {
minHeight: 'calc(100vh - var(--mantine-header-height))',
},
}}
className="dashboard-app-shell"
>
<Head />
<Background />
{children}
<style>{cx(config?.settings.customization.customCss)}</style>
</AppShell>
);
}

196
src/components/layout/Templates/BoardLayout.tsx Normal file
View File

@@ -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 (
<MainLayout headerActions={<HeaderActions />}>
<Background />
{children}
<style>{clsx(config?.settings.customization.customCss)}</style>
</MainLayout>
);
};
export const HeaderActions = () => {
const { data: sessionData } = useSession();
if (!sessionData?.user?.isAdmin) return null;
return (
<>
{env.NEXT_PUBLIC_DOCKER_ENABLED && <DockerButton />}
<ToggleEditModeButton />
<CustomizeBoardButton />
</>
);
};
const DockerButton = () => {
const { t } = useTranslation('modules/docker');
return (
<Tooltip label={t('actionIcon.tooltip')}>
<HeaderActionButton component={Link} href="/docker">
<IconBrandDocker size={20} stroke={1.5} />
</HeaderActionButton>
</Tooltip>
);
};
const CustomizeBoardButton = () => {
const { name } = useConfigContext();
return (
<Tooltip label="Customize board">
<HeaderActionButton component={Link} href={`/board/${name}/customize`}>
<IconSettings size={20} stroke={1.5} />
</HeaderActionButton>
</Tooltip>
);
};
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: (
<Title order={4}>
<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"
/>
),
}}
/>
</Title>
),
message: <Trans i18nKey="layout/header/actions/toggle-edit-mode:popover.text" />,
});
};
if (enabled) {
return (
<Button.Group>
<Tooltip label={t('button.disabled')}>
<HeaderActionButton onClick={save}>
<IconEditCircleOff size={20} stroke={1.5} />
</HeaderActionButton>
</Tooltip>
<AddElementButton />
</Button.Group>
);
}
return (
<Tooltip label={t('button.disabled')}>
<HeaderActionButton onClick={enableEditMode}>
<IconEditCircle size={20} stroke={1.5} />
</HeaderActionButton>
</Tooltip>
);
};
const AddElementButton = () => {
const { t } = useTranslation('layout/element-selector/selector');
return (
<Tooltip label={t('actionIcon.tooltip')}>
<HeaderActionButton
onClick={() =>
openContextModal({
modal: 'selectElement',
title: t('modal.title'),
size: 'xl',
innerProps: {},
})
}
>
<IconApps size={20} stroke={1.5} />
</HeaderActionButton>
</Tooltip>
);
};

11
src/components/layout/main.tsx → src/components/layout/Templates/MainLayout.tsx
View File

@@ -1,9 +1,7 @@
import { AppShell, clsx, useMantineTheme } from '@mantine/core'; import { AppShell, useMantineTheme } from '@mantine/core';
import { useConfigContext } from '~/config/provider';
import { Background } from './Background'; import { MainHeader } from '../Header/Header';
import { Head } from './Meta/Head'; import { Head } from '../Meta/Head';
import { MainHeader } from './new-header/Header';
type MainLayoutProps = { type MainLayoutProps = {
headerActions?: React.ReactNode; headerActions?: React.ReactNode;
@@ -11,7 +9,6 @@ type MainLayoutProps = {
}; };
export const MainLayout = ({ headerActions, children }: MainLayoutProps) => { export const MainLayout = ({ headerActions, children }: MainLayoutProps) => {
const { config } = useConfigContext();
const theme = useMantineTheme(); const theme = useMantineTheme();
return ( return (
@@ -25,9 +22,7 @@ export const MainLayout = ({ headerActions, children }: MainLayoutProps) => {
className="dashboard-app-shell" className="dashboard-app-shell"
> >
<Head /> <Head />
<Background />
{children} {children}
<style>{clsx(config?.settings.customization.customCss)}</style>
</AppShell> </AppShell>
); );
}; };

34
src/components/layout/admin/main-admin.layout.tsx → src/components/layout/Templates/ManageLayout.tsx
View File

@@ -1,61 +1,45 @@
import { import {
AppShell, AppShell,
Avatar,
Box,
Burger, Burger,
Drawer, Drawer,
Flex, Flex,
Footer, Footer,
Group, Group,
Header,
Menu,
NavLink, NavLink,
Navbar, Navbar,
Paper, Paper,
Text, Text,
TextInput,
ThemeIcon, ThemeIcon,
UnstyledButton,
useMantineTheme, useMantineTheme,
} from '@mantine/core'; } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { import {
IconAlertTriangle,
IconBook2, IconBook2,
IconBrandDiscord, IconBrandDiscord,
IconBrandGithub, IconBrandGithub,
IconDashboard,
IconGitFork, IconGitFork,
IconHome, IconHome,
IconLayoutDashboard, IconLayoutDashboard,
IconLogout,
IconMailForward, IconMailForward,
IconQuestionMark, IconQuestionMark,
IconSettings2, IconSettings2,
IconSun,
IconUser, IconUser,
IconUserSearch,
IconUsers, IconUsers,
} from '@tabler/icons-react'; } from '@tabler/icons-react';
import { signOut } from 'next-auth/react';
import { useTranslation } from 'next-i18next';
import Head from 'next/head';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { useScreenLargerThan } from '~/hooks/useScreenLargerThan'; import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore'; import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
import { Logo } from '../Logo'; import { MainHeader } from '../Header/Header';
import { CommonHeader } from '../common-header'; import { CommonHeader } from '../common-header';
import { MainHeader } from '../new-header/Header';
interface MainLayoutProps { interface ManageLayoutProps {
children: ReactNode; children: ReactNode;
} }
export const MainLayout = ({ children }: MainLayoutProps) => { export const ManageLayout = ({ children }: ManageLayoutProps) => {
const { t } = useTranslation();
const { attributes } = usePackageAttributesStore(); const { attributes } = usePackageAttributesStore();
const theme = useMantineTheme(); const theme = useMantineTheme();
@@ -153,7 +137,9 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
</> </>
); );
const burgerMenu = screenLargerThanMd ? undefined : <Burger opened={burgerMenuOpen} onClick={toggleBurgerMenu} />; const burgerMenu = screenLargerThanMd ? undefined : (
<Burger opened={burgerMenuOpen} onClick={toggleBurgerMenu} />
);
return ( return (
<> <>
@@ -171,13 +157,7 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
</Navbar.Section> </Navbar.Section>
</Navbar> </Navbar>
} }
header={ header={<MainHeader showExperimental logoHref="/manage" leftIcon={burgerMenu} />}
<MainHeader
showExperimental
logoHref="/manage"
leftIcon={burgerMenu}
/>
}
footer={ footer={
<Footer height={25}> <Footer height={25}>
<Group position="apart" px="md"> <Group position="apart" px="md">

50
src/components/layout/header/ActionButton.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { Button, ButtonProps } from '@mantine/core';
import Link from 'next/link';
import { ForwardedRef, forwardRef } from 'react';
import { useCardStyles } from '../useCardStyles';
type SpecificLinkProps = {
component: typeof Link;
href: string;
};
type SpecificButtonProps = {
onClick: HTMLButtonElement['onclick'];
};
type HeaderActionButtonProps = Omit<ButtonProps, 'variant' | 'className' | 'h' | 'w' | 'px'> &
(SpecificLinkProps | SpecificButtonProps);
export const HeaderActionButton = forwardRef<
HTMLButtonElement | HTMLAnchorElement,
HeaderActionButtonProps
>(({ children, ...props }, ref) => {
const { classes } = useCardStyles(true);
const buttonProps: ButtonProps = {
variant: 'default',
className: classes.card,
h: 38,
w: 38,
px: 0,
...props,
};
if ('component' in props) {
return (
<Button
ref={ref as ForwardedRef<HTMLAnchorElement>}
component={props.component}
href={props.href}
{...buttonProps}
>
{children}
</Button>
);
}
return (
<Button ref={ref as ForwardedRef<HTMLButtonElement>} {...buttonProps}>
{children}
</Button>
);
});

62
src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
View File

@@ -1,62 +0,0 @@
import { ActionIcon, Button, Tooltip } from '@mantine/core';
import { openContextModal } from '@mantine/modals';
import { IconApps } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { useCardStyles } from '../../../useCardStyles';
interface AddElementActionProps {
type: 'action-icon' | 'button';
}
export const AddElementAction = ({ type }: AddElementActionProps) => {
const { t } = useTranslation('layout/element-selector/selector');
const { classes } = useCardStyles(true);
switch (type) {
case 'button':
return (
<Tooltip label={t('actionIcon.tooltip')} withinPortal withArrow>
<Button
radius="md"
variant="default"
style={{ height: 43 }}
className={classes.card}
onClick={() =>
openContextModal({
modal: 'selectElement',
title: t('modal.title'),
size: 'xl',
innerProps: {},
})
}
>
<IconApps />
</Button>
</Tooltip>
);
case 'action-icon':
return (
<Tooltip label={t('actionIcon.tooltip')} withinPortal withArrow>
<ActionIcon
variant="default"
radius="md"
size="xl"
color="blue"
onClick={() =>
openContextModal({
modal: 'selectElement',
title: t('modal.title'),
size: 'xl',
innerProps: {},
})
}
>
<IconApps />
</ActionIcon>
</Tooltip>
);
default:
return null;
}
};

145
src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
View File

@@ -1,145 +0,0 @@
import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core';
import { useHotkeys, useWindowEvent } from '@mantine/hooks';
import { hideNotification, showNotification } from '@mantine/notifications';
import { IconEditCircle, IconEditCircleOff } from '@tabler/icons-react';
import Consola from 'consola';
import { getCookie } from 'cookies-next';
import { Trans, useTranslation } from 'next-i18next';
import { api } from '~/utils/api';
import { useConfigContext } from '../../../../../config/provider';
import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan';
import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/gridstack/store';
import { useCardStyles } from '../../../useCardStyles';
import { AddElementAction } from '../AddElementAction/AddElementAction';
const beforeUnloadEventText = 'Exit the edit mode to save your changes';
export const ToggleEditModeAction = () => {
const { enabled, toggleEditMode } = useEditModeStore();
const namedWrapperColumnCount = useNamedWrapperColumnCount();
const { t } = useTranslation(['layout/header/actions/toggle-edit-mode', 'common']);
const translatedSize =
namedWrapperColumnCount !== null
? t(`common:breakPoints.${namedWrapperColumnCount}`)
: t('common:loading');
const smallerThanSm = useScreenSmallerThan('sm');
const { config } = useConfigContext();
const { classes } = useCardStyles(true);
const { mutateAsync: saveConfig } = api.config.save.useMutation();
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 toggleButtonClicked = async () => {
toggleEditMode();
if (config === undefined || config?.schemaVersion === undefined) return;
if (enabled) {
const configName = getCookie('config-name')?.toString() ?? 'default';
await saveConfig({ name: configName, config });
Consola.log('Saved config to server', configName);
hideNotification('toggle-edit-mode');
} else if (!enabled) {
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: (
<Title order={4}>
<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"
/>
),
}}
/>
</Title>
),
message: <Trans i18nKey="layout/header/actions/toggle-edit-mode:popover.text" />,
});
} else {
hideNotification('toggle-edit-mode');
}
};
const ToggleButtonDesktop = () => (
<Tooltip label={enabled ? t('button.enabled') : t('button.disabled')}>
<Button
className={classes.card}
onClick={() => toggleButtonClicked()}
radius="md"
variant="default"
style={{ height: 43 }}
>
{enabled ? <IconEditCircleOff /> : <IconEditCircle />}
</Button>
</Tooltip>
);
const ToggleActionIconMobile = () => (
<ActionIcon
className={classes.card}
onClick={() => toggleButtonClicked()}
variant="default"
radius="md"
size="xl"
color="blue"
>
{enabled ? <IconEditCircleOff /> : <IconEditCircle />}
</ActionIcon>
);
return (
<>
{smallerThanSm ? (
enabled ? (
<Group style={{ flexWrap: 'nowrap' }}>
<AddElementAction type="action-icon" />
<ToggleActionIconMobile />
</Group>
) : (
<ToggleActionIconMobile />
)
) : enabled ? (
<Button.Group>
<ToggleButtonDesktop />
{enabled && <AddElementAction type="button" />}
</Button.Group>
) : (
<ToggleButtonDesktop />
)}
</>
);
};

0
src/components/layout/new-header/AvatarMenu.tsx → src/components/layout/header/AvatarMenu.tsx
View File

143
src/components/layout/header/Header.tsx
View File

@@ -1,72 +1,89 @@
import { Box, Group, Indicator, Header as MantineHeader, createStyles } from '@mantine/core'; import {
import { useQuery } from '@tanstack/react-query'; Box,
import { useSession } from 'next-auth/react'; Center,
Flex,
Group,
Header,
Text,
UnstyledButton,
useMantineTheme,
} from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { IconAlertTriangle } from '@tabler/icons-react';
import Link from 'next/link';
import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
import { REPO_URL } from '../../../../data/constants';
import DockerMenuButton from '../../../modules/Docker/DockerModule';
import { usePackageAttributesStore } from '../../../tools/client/zustands/usePackageAttributesStore';
import { Logo } from '../Logo'; import { Logo } from '../Logo';
import { useCardStyles } from '../useCardStyles'; import { AvatarMenu } from './AvatarMenu';
import { ToggleEditModeAction } from './Actions/ToggleEditMode/ToggleEditMode'; import { Search } from './search';
import { Search } from './Search';
import { SettingsMenu } from './SettingsMenu';
export const HeaderHeight = 64; type MainHeaderProps = {
logoHref?: string;
showExperimental?: boolean;
headerActions?: React.ReactNode;
leftIcon?: React.ReactNode;
};
export function Header(props: any) { export const MainHeader = ({
const { classes } = useStyles(); showExperimental = false,
const { classes: cardClasses, cx } = useCardStyles(false); logoHref = '/',
const { attributes } = usePackageAttributesStore(); headerActions,
const { data: sessionData } = useSession(); leftIcon,
}: MainHeaderProps) => {
const { data } = useQuery({ const { breakpoints } = useMantineTheme();
queryKey: ['github/latest'], const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
cacheTime: 1000 * 60 * 60 * 24, const experimentalHeaderNoteHeight = isSmallerThanMd ? 50 : 30;
staleTime: 1000 * 60 * 60 * 5, const headerBaseHeight = isSmallerThanMd ? 60 + 46 : 60;
queryFn: () => const headerHeight = showExperimental
fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => res.json()), ? headerBaseHeight + experimentalHeaderNoteHeight
}); : headerBaseHeight;
const newVersionAvailable =
data?.tag_name > `v${attributes.packageVersion}` ? data?.tag_name : undefined;
return ( return (
<MantineHeader height="auto" className={cx(cardClasses.card, 'dashboard-header')}> <Header height={headerHeight} pb="sm" pt={0}>
<Group p="xs" noWrap grow> <ExperimentalHeaderNote visible={showExperimental} height={experimentalHeaderNoteHeight} />
<Box className={cx(classes.hide, 'dashboard-header-logo-root')}> <Group spacing="xl" mt="xs" px="md" position="apart" noWrap>
<Group noWrap style={{ flex: 1 }}>
{leftIcon}
<UnstyledButton component={Link} href={logoHref}>
<Logo /> <Logo />
</Box> </UnstyledButton>
<Group
className="dashboard-header-group-right"
position="right"
style={{ maxWidth: 'none' }}
noWrap
>
<Search />
{sessionData?.user?.isAdmin && (
<>
<ToggleEditModeAction />
<DockerMenuButton />
</>
)}
<Indicator
size={15}
color="blue"
withBorder
processing
disabled={newVersionAvailable === undefined}
>
<SettingsMenu newVersionAvailable={newVersionAvailable} />
</Indicator>
</Group> </Group>
</Group>
</MantineHeader>
);
}
const useStyles = createStyles((theme) => ({ {!isSmallerThanMd && <Search />}
hide: {
[theme.fn.smallerThan('xs')]: { <Group noWrap style={{ flex: 1 }} position="right">
display: 'none', <Group noWrap spacing={8}>
}, {headerActions}
}, </Group>
})); <AvatarMenu />
</Group>
</Group>
{isSmallerThanMd && (
<Center mt="xs" px="md">
<Search isMobile />
</Center>
)}
</Header>
);
};
type ExperimentalHeaderNoteProps = {
height?: 30 | 50;
visible?: boolean;
};
const ExperimentalHeaderNote = ({ visible = false, height = 30 }: ExperimentalHeaderNoteProps) => {
if (!visible) return null;
return (
<Box bg="red" h={height} p={3} px={6}>
<Flex h="100%" align="center" columnGap={7}>
<IconAlertTriangle color="white" size="1rem" style={{ minWidth: '1rem' }} />
<Text color="white" lineClamp={height === 30 ? 1 : 2}>
This is an experimental feature of Homarr. Please report any issues to the official Homarr
team.
</Text>
</Flex>
</Box>
);
};

0
src/components/layout/new-header/MovieModal.tsx → src/components/layout/header/MovieModal.tsx
View File

470
src/components/layout/header/Search.tsx
View File

@@ -1,319 +1,203 @@
import { Autocomplete, Group, Kbd, Modal, Text, Tooltip, useMantineTheme } from '@mantine/core';
import { useDisclosure, useHotkeys } from '@mantine/hooks';
import { import {
ActionIcon, IconBrandYoutube,
Autocomplete, IconDownload,
Box, IconMovie,
Divider, IconSearch,
Kbd, IconWorld,
Menu, TablerIconsProps,
Popover, } from '@tabler/icons-react';
ScrollArea, import { useRouter } from 'next/router';
Tooltip, import { ReactNode, forwardRef, useMemo, useRef, useState } from 'react';
createStyles, import { useConfigContext } from '~/config/provider';
} from '@mantine/core';
import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
import { showNotification } from '@mantine/notifications';
import { IconBrandYoutube, IconDownload, IconMovie, IconSearch } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import React, { forwardRef, useEffect, useRef, useState } from 'react';
import { api } from '~/utils/api'; import { api } from '~/utils/api';
import { useConfigContext } from '../../../config/provider'; import { MovieModal } from './MovieModal';
import { IModule } from '../../../modules/ModuleTypes';
import { OverseerrMediaDisplay } from '../../../modules/common';
import { ConfigType } from '../../../types/config';
import { searchUrls } from '../../Settings/Common/SearchEngine/SearchEngineSelector';
import Tip from '../Tip';
import { useCardStyles } from '../useCardStyles';
import SmallAppItem from './SmallAppItem';
export const SearchModule: IModule = { type SearchProps = {
title: 'Search', isMobile?: boolean;
icon: IconSearch,
component: Search,
id: 'search',
}; };
interface ItemProps extends React.ComponentPropsWithoutRef<'div'> { export const Search = ({ isMobile }: SearchProps) => {
label: string; const [search, setSearch] = useState('');
disabled: boolean; const ref = useRef<HTMLInputElement>(null);
value: string; useHotkeys([['mod+K', () => ref.current?.focus()]]);
description: string; const { data: userWithSettings } = api.user.getWithSettings.useQuery();
icon: React.ReactNode;
url: string;
shortcut: string;
}
const useStyles = createStyles((theme) => ({
item: {
'&[data-hovered]': {
backgroundColor: theme.colors[theme.primaryColor][theme.fn.primaryShade()],
color: theme.white,
},
},
}));
export function Search() {
const { t } = useTranslation('modules/search');
const { config } = useConfigContext(); const { config } = useConfigContext();
const [searchQuery, setSearchQuery] = useState(''); const { colors } = useMantineTheme();
const [debounced] = useDebouncedValue(searchQuery, 250); const router = useRouter();
const { classes: cardClasses, cx } = useCardStyles(true); const [showMovieModal, movieModal] = useDisclosure(router.query.movie === 'true');
const isOverseerrEnabled = config?.apps.some( const apps = useConfigApps(search);
(x) => x.integration.type === 'overseerr' || x.integration.type === 'jellyseerr' const engines = generateEngines(
search,
userWithSettings?.settings.searchTemplate ?? 'https://www.google.com/search?q=%s'
).filter(
(engine) =>
engine.sort !== 'movie' || config?.apps.some((app) => app.integration.type === engine.value)
); );
const overseerrApp = config?.apps.find( const data = [...engines, ...apps];
(app) => app.integration?.type === 'overseerr' || app.integration?.type === 'jellyseerr'
);
const searchEngineSettings = config?.settings.common.searchEngine;
const searchEngineUrl = !searchEngineSettings
? searchUrls.google
: searchEngineSettings.type === 'custom'
? searchEngineSettings.properties.template
: searchUrls[searchEngineSettings.type];
const searchEnginesList: ItemProps[] = [
{
icon: <IconSearch />,
disabled: false,
label: t('searchEngines.search.name'),
value: 'search',
description: t('searchEngines.search.description'),
url: searchEngineUrl,
shortcut: 's',
},
{
icon: <IconDownload />,
disabled: false,
label: t('searchEngines.torrents.name'),
value: 'torrents',
description: t('searchEngines.torrents.description'),
url: 'https://www.torrentdownloads.me/search/?search=',
shortcut: 't',
},
{
icon: <IconBrandYoutube />,
disabled: false,
label: t('searchEngines.youtube.name'),
value: 'youtube',
description: t('searchEngines.youtube.description'),
url: 'https://www.youtube.com/results?search_query=',
shortcut: 'y',
},
{
icon: <IconMovie />,
disabled: !(isOverseerrEnabled === true && overseerrApp !== undefined),
label: t('searchEngines.overseerr.name'),
value: 'overseerr',
description: t('searchEngines.overseerr.description'),
url: `${overseerrApp?.url}search?query=`,
shortcut: 'm',
},
];
const [selectedSearchEngine, setSearchEngine] = useState<ItemProps>(searchEnginesList[0]);
const matchingApps =
config?.apps.filter((app) => {
if (searchQuery === '' || searchQuery === undefined) {
return false;
}
return app.name.toLowerCase().includes(searchQuery.toLowerCase());
}) ?? [];
const autocompleteData = matchingApps.map((app) => ({
label: app.name,
value: app.name,
icon: app.appearance.iconUrl,
url: app.behaviour.externalUrl ?? app.url,
}));
const AutoCompleteItem = forwardRef<HTMLDivElement, any>(
({ label, value, icon, url, ...others }: any, ref) => (
<div ref={ref} {...others}>
<SmallAppItem app={{ label, value, icon, url }} />
</div>
)
);
useEffect(() => {
// Refresh the default search engine every time the config for it changes #521
setSearchEngine(searchEnginesList[0]);
}, [searchEngineUrl]);
const textInput = useRef<HTMLInputElement>(null);
useHotkeys([['mod+K', () => textInput.current?.focus()]]);
const { classes } = useStyles();
const openTarget = getOpenTarget(config);
const [opened, setOpened] = useState(false);
const isOverseerrSearchEnabled =
isOverseerrEnabled === true &&
selectedSearchEngine.value === 'overseerr' &&
debounced.length > 3;
const { data: overseerrResults } = useOverseerrSearchQuery(debounced, isOverseerrSearchEnabled);
const isModuleEnabled = config?.settings.customization.layout.enabledSearchbar;
if (!isModuleEnabled) {
return null;
}
//TODO: Fix the bug where clicking anything inside the Modal to ask for a movie
// will close it (Because it closes the underlying Popover)
return ( return (
<Box style={{ width: '100%', maxWidth: 400 }}> <>
<Popover
opened={
(overseerrResults && overseerrResults.length > 0 && opened && searchQuery.length > 3) ??
false
}
position="bottom"
withinPortal
shadow="md"
radius="md"
zIndex={100}
>
<Popover.Target>
<Autocomplete <Autocomplete
ref={textInput} ref={ref}
onFocusCapture={() => setOpened(true)} radius="xl"
w={isMobile ? '100%' : 400}
variant="filled"
placeholder="Search..."
hoverOnSearchChange
autoFocus={typeof window !== 'undefined' && window.innerWidth > 768} autoFocus={typeof window !== 'undefined' && window.innerWidth > 768}
rightSection={<SearchModuleMenu />} rightSection={
placeholder={t(`searchEngines.${selectedSearchEngine.value}.description`) ?? undefined} <IconSearch
value={searchQuery} onClick={() => ref.current?.focus()}
onChange={(currentString) => tryMatchSearchEngine(currentString, setSearchQuery)} color={colors.gray[5]}
itemComponent={AutoCompleteItem} size={16}
data={autocompleteData} stroke={1.5}
onItemSubmit={(item) => { />
setOpened(false);
if (item.url) {
setSearchQuery('');
window.open(item.openedUrl ? item.openedUrl : item.url, openTarget);
} }
}} limit={8}
// Replace %s if it is in selectedSearchEngine.url with searchQuery, otherwise append searchQuery at the end of it value={search}
onKeyDown={(event) => { onChange={setSearch}
if ( data={data}
event.key === 'Enter' && itemComponent={SearchItemComponent}
searchQuery.length > 0 && filter={(value, item: SearchAutoCompleteItem) =>
autocompleteData.length === 0 engines.some((engine) => engine.sort === item.sort) ||
) { item.value.toLowerCase().includes(value.trim().toLowerCase())
if (selectedSearchEngine.url.includes('%s')) {
window.open(selectedSearchEngine.url.replace('%s', searchQuery), openTarget);
} else {
window.open(selectedSearchEngine.url + searchQuery, openTarget);
} }
}
}}
classNames={{ classNames={{
input: cx(cardClasses.card, 'dashboard-header-search-input'), input: 'dashboard-header-search-input',
root: 'dashboard-header-search-root', root: 'dashboard-header-search-root',
}} }}
radius="lg" onItemSubmit={(item: SearchAutoCompleteItem) => {
size="md" setSearch('');
/> if (item.sort === 'movie') {
</Popover.Target> // TODO: show movie modal
<Popover.Dropdown> const url = new URL(`${window.location.origin}${router.asPath}`);
<ScrollArea style={{ height: '80vh', maxWidth: '90vw' }} offsetScrollbars> url.searchParams.set('movie', 'true');
{overseerrResults && url.searchParams.set('search', search);
overseerrResults.length > 0 && url.searchParams.set('type', item.value);
searchQuery.length > 3 && router.push(url, undefined, { shallow: true });
overseerrResults.slice(0, 4).map((result: any, index: number) => ( movieModal.open();
<React.Fragment key={index}> return;
<OverseerrMediaDisplay key={result.id} media={result} />
{index < overseerrResults.length - 1 && index < 3 && (
<Divider variant="dashed" my="xs" />
)}
</React.Fragment>
))}
</ScrollArea>
</Popover.Dropdown>
</Popover>
</Box>
);
function tryMatchSearchEngine(query: string, setSearchQuery: (value: string) => void) {
const foundSearchEngine = searchEnginesList.find(
(engine) => query.includes(`!${engine.shortcut}`) && !engine.disabled
);
if (foundSearchEngine) {
setSearchQuery(query.replace(`!${foundSearchEngine.shortcut}`, ''));
changeSearchEngine(foundSearchEngine);
} else {
setSearchQuery(query);
} }
} const target = userWithSettings?.settings.openSearchInNewTab ? '_blank' : '_self';
window.open(item.metaData.url, target);
function SearchModuleMenu() {
return (
<Menu shadow="md" width={200} withinPortal classNames={classes}>
<Menu.Target>
<ActionIcon>{selectedSearchEngine.icon}</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
{searchEnginesList.map((item) => (
<Tooltip
multiline
label={item.description}
withinPortal
width={200}
position="left"
key={item.value}
>
<Menu.Item
key={item.value}
icon={item.icon}
rightSection={<Kbd>!{item.shortcut}</Kbd>}
disabled={item.disabled}
onClick={() => {
changeSearchEngine(item);
}} }}
> aria-label="Search"
{item.label} />
</Menu.Item> <MovieModal
</Tooltip> opened={showMovieModal}
))} closeModal={() => {
<Menu.Divider /> movieModal.close();
<Menu.Label> router.push(router.pathname, undefined, { shallow: true });
<Tip> }}
{t('tip')} <Kbd>mod+k</Kbd>{' '} />
</Tip> </>
</Menu.Label>
</Menu.Dropdown>
</Menu>
); );
}
function changeSearchEngine(item: ItemProps) {
setSearchEngine(item);
showNotification({
radius: 'lg',
withCloseButton: false,
id: 'spotlight',
autoClose: 1000,
icon: <ActionIcon size="sm">{item.icon}</ActionIcon>,
message: t('switchedSearchEngine', { searchEngine: t(`searchEngines.${item.value}.name`) }),
});
}
}
const getOpenTarget = (config: ConfigType | undefined): '_blank' | '_self' => {
if (!config || config.settings.common.searchEngine.properties.openInNewTab === undefined) {
return '_blank';
}
return config.settings.common.searchEngine.properties.openInNewTab ? '_blank' : '_self';
}; };
export const useOverseerrSearchQuery = (query: string, isEnabled: boolean) => { const SearchItemComponent = forwardRef<HTMLDivElement, SearchAutoCompleteItem>(
const { name: configName } = useConfigContext(); ({ icon, label, value, sort, ...others }, ref) => {
return api.overseerr.search.useQuery( let Icon = getItemComponent(icon);
return (
<Group ref={ref} noWrap {...others}>
<Icon size={20} />
<Text>{label}</Text>
</Group>
);
}
);
const getItemComponent = (icon: SearchAutoCompleteItem['icon']) => {
if (typeof icon !== 'string') {
return icon;
}
return (props: TablerIconsProps) => (
<img src={icon} height={props.size} width={props.size} style={{ objectFit: 'contain' }} />
);
};
const useConfigApps = (search: string) => {
const { config } = useConfigContext();
return useMemo(() => {
if (search.trim().length === 0) return [];
const apps = config?.apps.filter((app) =>
app.name.toLowerCase().includes(search.toLowerCase())
);
return (
apps?.map((app) => ({
icon: app.appearance.iconUrl,
label: app.name,
value: app.name,
sort: 'app',
metaData: {
url: app.behaviour.externalUrl,
},
})) ?? []
);
}, [search, config]);
};
type SearchAutoCompleteItem = {
icon: ((props: TablerIconsProps) => ReactNode) | string;
label: string;
value: string;
} & (
| {
sort: 'web' | 'torrent' | 'youtube' | 'app';
metaData: {
url: string;
};
}
| {
sort: 'movie';
}
);
const movieApps = ['overseerr', 'jellyseerr'] as const;
const generateEngines = (searchValue: string, webTemplate: string) =>
searchValue.trim().length > 0
? ([
{ {
query, icon: IconWorld,
configName: configName!, label: `Search for ${searchValue} in the web`,
integration: 'overseerr', value: `web`,
sort: 'web',
metaData: {
url: webTemplate.includes('%s')
? webTemplate.replace('%s', searchValue)
: webTemplate + searchValue,
},
}, },
{ {
enabled: isEnabled, icon: IconDownload,
refetchOnWindowFocus: false, label: `Search for ${searchValue} torrents`,
refetchOnMount: false, value: `torrent`,
refetchInterval: false, sort: 'torrent',
} metaData: {
); url: `https://www.torrentdownloads.me/search/?search=${searchValue}`,
}; },
},
{
icon: IconBrandYoutube,
label: `Search for ${searchValue} on youtube`,
value: 'youtube',
sort: 'youtube',
metaData: {
url: `https://www.youtube.com/results?search_query=${searchValue}`,
},
},
...movieApps.map(
(name) =>
({
icon: IconMovie,
label: `Search for ${searchValue} on ${name}`,
value: name,
sort: 'movie',
}) as const
),
] as const satisfies Readonly<SearchAutoCompleteItem[]>)
: [];

81
src/components/layout/header/SettingsMenu.tsx
View File

@@ -1,81 +0,0 @@
import { Badge, Button, Menu } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import {
IconInfoCircle,
IconLogin,
IconLogout,
IconMenu2,
IconSettings,
} from '@tabler/icons-react';
import { signOut, useSession } from 'next-auth/react';
import { useTranslation } from 'next-i18next';
import Link from 'next/link';
import { AboutModal } from '../../Dashboard/Modals/AboutModal/AboutModal';
import { SettingsDrawer } from '../../Settings/SettingsDrawer';
import { useCardStyles } from '../useCardStyles';
import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
const [drawerOpened, drawer] = useDisclosure(false);
const { t } = useTranslation('common');
const [aboutModalOpened, aboutModal] = useDisclosure(false);
const { classes } = useCardStyles(true);
const { data: sessionData } = useSession();
return (
<>
<Menu width={250}>
<Menu.Target>
<Button className={classes.card} variant="default" radius="md" style={{ height: 43 }}>
<IconMenu2 />
</Button>
</Menu.Target>
<Menu.Dropdown>
<ColorSchemeSwitch />
{sessionData?.user?.isAdmin && (
<Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
{t('sections.settings')}
</Menu.Item>
)}
<Menu.Item
icon={<IconInfoCircle strokeWidth={1.2} size={18} />}
rightSection={
newVersionAvailable && (
<Badge variant="light" color="blue">
New
</Badge>
)
}
onClick={() => aboutModal.open()}
>
{t('about')}
</Menu.Item>
{sessionData?.user ? (
<Menu.Item icon={<IconLogout strokeWidth={1.2} size={18} />} onClick={() => signOut()}>
{t('header.logout')}
</Menu.Item>
) : (
<Menu.Item
icon={<IconLogin strokeWidth={1.2} size={18} />}
component={Link}
href="/login"
>
{t('header.sign-in')}
</Menu.Item>
)}
</Menu.Dropdown>
</Menu>
<SettingsDrawer
opened={drawerOpened}
closeDrawer={drawer.close}
newVersionAvailable={newVersionAvailable}
/>
<AboutModal
opened={aboutModalOpened}
closeModal={aboutModal.close}
newVersionAvailable={newVersionAvailable}
/>
</>
);
}

23
src/components/layout/header/SettingsMenu/ColorSchemeSwitch.tsx
View File

@@ -1,23 +0,0 @@
import { Menu } from '@mantine/core';
import { IconMoonStars, IconSun } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { useColorScheme } from '~/hooks/use-colorscheme';
export const ColorSchemeSwitch = () => {
const { colorScheme, toggleColorScheme } = useColorScheme();
const { t } = useTranslation('settings/general/theme-selector');
const Icon = colorScheme === 'dark' ? IconSun : IconMoonStars;
return (
<Menu.Item
closeMenuOnClick={false}
icon={<Icon strokeWidth={1.2} size={18} />}
onClick={() => toggleColorScheme()}
>
{t('label', {
theme: colorScheme === 'dark' ? 'light' : 'dark',
})}
</Menu.Item>
);
};

17
src/components/layout/header/SmallAppItem.tsx
View File

@@ -1,17 +0,0 @@
import { Avatar, Group, Text } from '@mantine/core';
interface smallAppItem {
label: string;
icon?: string;
url?: string;
}
export default function SmallAppItem(props: any) {
const { app }: { app: smallAppItem } = props;
return (
<Group>
{app.icon && <Avatar src={app.icon} />}
<Text>{app.label}</Text>
</Group>
);
}

89
src/components/layout/new-header/Header.tsx
View File

@@ -1,89 +0,0 @@
import {
Box,
Center,
Flex,
Group,
Header,
Text,
UnstyledButton,
useMantineTheme,
} from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { IconAlertTriangle } from '@tabler/icons-react';
import Link from 'next/link';
import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
import { Logo } from '../Logo';
import { AvatarMenu } from './AvatarMenu';
import { Search } from './search';
type MainHeaderProps = {
logoHref?: string;
showExperimental?: boolean;
headerActions?: React.ReactNode;
leftIcon?: React.ReactNode;
};
export const MainHeader = ({
showExperimental = false,
logoHref = '/',
headerActions,
leftIcon,
}: MainHeaderProps) => {
const { breakpoints } = useMantineTheme();
const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
const experimentalHeaderNoteHeight = isSmallerThanMd ? 50 : 30;
const headerBaseHeight = isSmallerThanMd ? 60 + 46 : 60;
const headerHeight = showExperimental
? headerBaseHeight + experimentalHeaderNoteHeight
: headerBaseHeight;
return (
<Header height={headerHeight} pb="sm" pt={0}>
<ExperimentalHeaderNote visible={showExperimental} height={experimentalHeaderNoteHeight} />
<Group spacing="xl" mt="xs" px="md" position="apart" noWrap>
<Group noWrap style={{ flex: 1 }}>
{leftIcon}
<UnstyledButton component={Link} href={logoHref}>
<Logo />
</UnstyledButton>
</Group>
{!isSmallerThanMd && <Search />}
<Group noWrap style={{ flex: 1 }} position="right">
<Group noWrap spacing={8}>
{headerActions}
</Group>
<AvatarMenu />
</Group>
</Group>
{isSmallerThanMd && (
<Center mt="xs" px="md">
<Search isMobile />
</Center>
)}
</Header>
);
};
type ExperimentalHeaderNoteProps = {
height?: 30 | 50;
visible?: boolean;
};
const ExperimentalHeaderNote = ({ visible = false, height = 30 }: ExperimentalHeaderNoteProps) => {
if (!visible) return null;
return (
<Box bg="red" h={height} p={3} px={6}>
<Flex h="100%" align="center" columnGap={7}>
<IconAlertTriangle color="white" size="1rem" style={{ minWidth: '1rem' }} />
<Text color="white" lineClamp={height === 30 ? 1 : 2}>
This is an experimental feature of Homarr. Please report any issues to the official Homarr
team.
</Text>
</Flex>
</Box>
);
};

203
src/components/layout/new-header/search.tsx
View File

@@ -1,203 +0,0 @@
import { Autocomplete, Group, Kbd, Modal, Text, Tooltip, useMantineTheme } from '@mantine/core';
import { useDisclosure, useHotkeys } from '@mantine/hooks';
import {
IconBrandYoutube,
IconDownload,
IconMovie,
IconSearch,
IconWorld,
TablerIconsProps,
} from '@tabler/icons-react';
import { useRouter } from 'next/router';
import { ReactNode, forwardRef, useMemo, useRef, useState } from 'react';
import { useConfigContext } from '~/config/provider';
import { api } from '~/utils/api';
import { MovieModal } from './MovieModal';
type SearchProps = {
isMobile?: boolean;
};
export const Search = ({ isMobile }: SearchProps) => {
const [search, setSearch] = useState('');
const ref = useRef<HTMLInputElement>(null);
useHotkeys([['mod+K', () => ref.current?.focus()]]);
const { data: userWithSettings } = api.user.getWithSettings.useQuery();
const { config } = useConfigContext();
const { colors } = useMantineTheme();
const router = useRouter();
const [showMovieModal, movieModal] = useDisclosure(router.query.movie === 'true');
const apps = useConfigApps(search);
const engines = generateEngines(
search,
userWithSettings?.settings.searchTemplate ?? 'https://www.google.com/search?q=%s'
).filter(
(engine) =>
engine.sort !== 'movie' || config?.apps.some((app) => app.integration.type === engine.value)
);
const data = [...engines, ...apps];
return (
<>
<Autocomplete
ref={ref}
radius="xl"
w={isMobile ? '100%' : 400}
variant="filled"
placeholder="Search..."
hoverOnSearchChange
autoFocus={typeof window !== 'undefined' && window.innerWidth > 768}
rightSection={
<IconSearch
onClick={() => ref.current?.focus()}
color={colors.gray[5]}
size={16}
stroke={1.5}
/>
}
limit={8}
value={search}
onChange={setSearch}
data={data}
itemComponent={SearchItemComponent}
filter={(value, item: SearchAutoCompleteItem) =>
engines.some((engine) => engine.sort === item.sort) ||
item.value.toLowerCase().includes(value.trim().toLowerCase())
}
classNames={{
input: 'dashboard-header-search-input',
root: 'dashboard-header-search-root',
}}
onItemSubmit={(item: SearchAutoCompleteItem) => {
setSearch('');
if (item.sort === 'movie') {
// TODO: show movie modal
const url = new URL(`${window.location.origin}${router.asPath}`);
url.searchParams.set('movie', 'true');
url.searchParams.set('search', search);
url.searchParams.set('type', item.value);
router.push(url, undefined, { shallow: true });
movieModal.open();
return;
}
const target = userWithSettings?.settings.openSearchInNewTab ? '_blank' : '_self';
window.open(item.metaData.url, target);
}}
aria-label="Search"
/>
<MovieModal
opened={showMovieModal}
closeModal={() => {
movieModal.close();
router.push(router.pathname, undefined, { shallow: true });
}}
/>
</>
);
};
const SearchItemComponent = forwardRef<HTMLDivElement, SearchAutoCompleteItem>(
({ icon, label, value, sort, ...others }, ref) => {
let Icon = getItemComponent(icon);
return (
<Group ref={ref} noWrap {...others}>
<Icon size={20} />
<Text>{label}</Text>
</Group>
);
}
);
const getItemComponent = (icon: SearchAutoCompleteItem['icon']) => {
if (typeof icon !== 'string') {
return icon;
}
return (props: TablerIconsProps) => (
<img src={icon} height={props.size} width={props.size} style={{ objectFit: 'contain' }} />
);
};
const useConfigApps = (search: string) => {
const { config } = useConfigContext();
return useMemo(() => {
if (search.trim().length === 0) return [];
const apps = config?.apps.filter((app) =>
app.name.toLowerCase().includes(search.toLowerCase())
);
return (
apps?.map((app) => ({
icon: app.appearance.iconUrl,
label: app.name,
value: app.name,
sort: 'app',
metaData: {
url: app.behaviour.externalUrl,
},
})) ?? []
);
}, [search, config]);
};
type SearchAutoCompleteItem = {
icon: ((props: TablerIconsProps) => ReactNode) | string;
label: string;
value: string;
} & (
| {
sort: 'web' | 'torrent' | 'youtube' | 'app';
metaData: {
url: string;
};
}
| {
sort: 'movie';
}
);
const movieApps = ['overseerr', 'jellyseerr'] as const;
const generateEngines = (searchValue: string, webTemplate: string) =>
searchValue.trim().length > 0
? ([
{
icon: IconWorld,
label: `Search for ${searchValue} in the web`,
value: `web`,
sort: 'web',
metaData: {
url: webTemplate.includes('%s')
? webTemplate.replace('%s', searchValue)
: webTemplate + searchValue,
},
},
{
icon: IconDownload,
label: `Search for ${searchValue} torrents`,
value: `torrent`,
sort: 'torrent',
metaData: {
url: `https://www.torrentdownloads.me/search/?search=${searchValue}`,
},
},
{
icon: IconBrandYoutube,
label: `Search for ${searchValue} on youtube`,
value: 'youtube',
sort: 'youtube',
metaData: {
url: `https://www.youtube.com/results?search_query=${searchValue}`,
},
},
...movieApps.map(
(name) =>
({
icon: IconMovie,
label: `Search for ${searchValue} on ${name}`,
value: name,
sort: 'movie',
}) as const
),
] as const satisfies Readonly<SearchAutoCompleteItem[]>)
: [];

1
src/modules/index.ts
View File

@@ -1 +0,0 @@
export * from './overseerr';

15
src/modules/overseerr/OverseerrModule.tsx
View File

@@ -1,15 +0,0 @@
import { IconEyeglass } from '@tabler/icons-react';
import { IModule } from '../ModuleTypes';
import { OverseerrMediaDisplay } from '../common';
export const OverseerrModule: IModule = {
title: 'Overseerr',
icon: IconEyeglass,
component: OverseerrMediaDisplay,
id: 'overseerr',
};
export interface OverseerSearchProps {
query: string;
}

1
src/modules/overseerr/index.ts
View File

@@ -1 +0,0 @@
export { OverseerrModule } from './OverseerrModule';

8
src/pages/board/[slug].tsx
View File

@@ -2,7 +2,7 @@ import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { SSRConfig } from 'next-i18next'; import { SSRConfig } from 'next-i18next';
import { z } from 'zod'; import { z } from 'zod';
import { Dashboard } from '~/components/Dashboard/Dashboard'; import { Dashboard } from '~/components/Dashboard/Dashboard';
import { MainLayout } from '~/components/layout/main'; import { BoardLayout } from '~/components/layout/Templates/BoardLayout';
import { useInitConfig } from '~/config/init'; import { useInitConfig } from '~/config/init';
import { configExists } from '~/tools/config/configExists'; import { configExists } from '~/tools/config/configExists';
import { getFrontendConfig } from '~/tools/config/getFrontendConfig'; import { getFrontendConfig } from '~/tools/config/getFrontendConfig';
@@ -10,17 +10,15 @@ import { getServerSideTranslations } from '~/tools/server/getServerSideTranslati
import { dashboardNamespaces } from '~/tools/server/translation-namespaces'; import { dashboardNamespaces } from '~/tools/server/translation-namespaces';
import { ConfigType } from '~/types/config'; import { ConfigType } from '~/types/config';
import { HeaderActions } from '.';
export default function BoardPage({ export default function BoardPage({
config: initialConfig, config: initialConfig,
}: InferGetServerSidePropsType<typeof getServerSideProps>) { }: InferGetServerSidePropsType<typeof getServerSideProps>) {
useInitConfig(initialConfig); useInitConfig(initialConfig);
return ( return (
<MainLayout headerActions={<HeaderActions />}> <BoardLayout>
<Dashboard /> <Dashboard />
</MainLayout> </BoardLayout>
); );
} }

2
src/pages/board/[slug]/customize.tsx
View File

@@ -24,7 +24,7 @@ import {
BoardCustomizationFormProvider, BoardCustomizationFormProvider,
useBoardCustomizationForm, useBoardCustomizationForm,
} from '~/components/Board/Customize/form'; } from '~/components/Board/Customize/form';
import { MainLayout } from '~/components/layout/main'; import { MainLayout } from '~/components/layout/Templates/MainLayout';
import { createTrpcServersideHelpers } from '~/server/api/helper'; import { createTrpcServersideHelpers } from '~/server/api/helper';
import { getServerAuthSession } from '~/server/auth'; import { getServerAuthSession } from '~/server/auth';
import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations'; import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';

231
src/pages/board/index.tsx
View File

@@ -1,35 +1,14 @@
import { Button, ButtonProps, Text, Title, Tooltip } 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 { GetServerSideProps, InferGetServerSidePropsType } from 'next'; import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { useSession } from 'next-auth/react'; import { SSRConfig } from 'next-i18next';
import { SSRConfig, Trans, useTranslation } from 'next-i18next';
import Link from 'next/link';
import { ForwardedRef, forwardRef } from 'react';
import { Dashboard } from '~/components/Dashboard/Dashboard'; import { Dashboard } from '~/components/Dashboard/Dashboard';
import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore'; import { BoardLayout } from '~/components/layout/Templates/BoardLayout';
import { useNamedWrapperColumnCount } from '~/components/Dashboard/Wrappers/gridstack/store';
import { MainLayout } from '~/components/layout/main';
import { useCardStyles } from '~/components/layout/useCardStyles';
import { useInitConfig } from '~/config/init'; import { useInitConfig } from '~/config/init';
import { useConfigContext } from '~/config/provider';
import { env } from '~/env';
import { getServerAuthSession } from '~/server/auth'; import { getServerAuthSession } from '~/server/auth';
import { prisma } from '~/server/db'; import { prisma } from '~/server/db';
import { getFrontendConfig } from '~/tools/config/getFrontendConfig'; import { getFrontendConfig } from '~/tools/config/getFrontendConfig';
import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations'; import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
import { dashboardNamespaces } from '~/tools/server/translation-namespaces'; import { dashboardNamespaces } from '~/tools/server/translation-namespaces';
import { ConfigType } from '~/types/config'; import { ConfigType } from '~/types/config';
import { api } from '~/utils/api';
export default function BoardPage({ export default function BoardPage({
config: initialConfig, config: initialConfig,
@@ -37,9 +16,9 @@ export default function BoardPage({
useInitConfig(initialConfig); useInitConfig(initialConfig);
return ( return (
<MainLayout headerActions={<HeaderActions />}> <BoardLayout>
<Dashboard /> <Dashboard />
</MainLayout> </BoardLayout>
); );
} }
@@ -72,205 +51,3 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
}, },
}; };
}; };
export const HeaderActions = () => {
const { data: sessionData } = useSession();
if (!sessionData?.user?.isAdmin) return null;
return (
<>
{env.NEXT_PUBLIC_DOCKER_ENABLED && <DockerButton />}
<ToggleEditModeButton />
<CustomizeBoardButton />
</>
);
};
const DockerButton = () => {
const { t } = useTranslation('modules/docker');
return (
<Tooltip label={t('actionIcon.tooltip')}>
<HeaderActionButton component={Link} href="/docker">
<IconBrandDocker size={20} stroke={1.5} />
</HeaderActionButton>
</Tooltip>
);
};
const CustomizeBoardButton = () => {
const { name } = useConfigContext();
return (
<Tooltip label="Customize board">
<HeaderActionButton component={Link} href={`/board/${name}/customize`}>
<IconSettings size={20} stroke={1.5} />
</HeaderActionButton>
</Tooltip>
);
};
type SpecificLinkProps = {
component: typeof Link;
href: string;
};
type SpecificButtonProps = {
onClick: HTMLButtonElement['onclick'];
};
type HeaderActionButtonProps = Omit<ButtonProps, 'variant' | 'className' | 'h' | 'w' | 'px'> &
(SpecificLinkProps | SpecificButtonProps);
const HeaderActionButton = forwardRef<
HTMLButtonElement | HTMLAnchorElement,
HeaderActionButtonProps
>(({ children, ...props }, ref) => {
const { classes } = useCardStyles(true);
const buttonProps: ButtonProps = {
variant: 'default',
className: classes.card,
h: 38,
w: 38,
px: 0,
...props,
};
if ('component' in props) {
return (
<Button
ref={ref as ForwardedRef<HTMLAnchorElement>}
component={props.component}
href={props.href}
{...buttonProps}
>
{children}
</Button>
);
}
return (
<Button ref={ref as ForwardedRef<HTMLButtonElement>} {...buttonProps}>
{children}
</Button>
);
});
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: (
<Title order={4}>
<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"
/>
),
}}
/>
</Title>
),
message: <Trans i18nKey="layout/header/actions/toggle-edit-mode:popover.text" />,
});
};
if (enabled) {
return (
<Button.Group>
<Tooltip label={t('button.disabled')}>
<HeaderActionButton onClick={save}>
<IconEditCircleOff size={20} stroke={1.5} />
</HeaderActionButton>
</Tooltip>
<AddElementButton />
</Button.Group>
);
}
return (
<Tooltip label={t('button.disabled')}>
<HeaderActionButton onClick={enableEditMode}>
<IconEditCircle size={20} stroke={1.5} />
</HeaderActionButton>
</Tooltip>
);
};
const AddElementButton = () => {
const { t } = useTranslation('layout/element-selector/selector');
const { classes } = useCardStyles(true);
return (
<Tooltip label={t('actionIcon.tooltip')}>
<HeaderActionButton
onClick={() =>
openContextModal({
modal: 'selectElement',
title: t('modal.title'),
size: 'xl',
innerProps: {},
})
}
>
<IconApps size={20} stroke={1.5} />
</HeaderActionButton>
</Tooltip>
);
};

2
src/pages/docker.tsx
View File

@@ -2,7 +2,7 @@ import { Stack } from '@mantine/core';
import { ContainerInfo } from 'dockerode'; import { ContainerInfo } from 'dockerode';
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { useState } from 'react'; import { useState } from 'react';
import { MainLayout } from '~/components/layout/main'; import { MainLayout } from '~/components/layout/Templates/MainLayout';
import { env } from '~/env'; import { env } from '~/env';
import ContainerActionBar from '~/modules/Docker/ContainerActionBar'; import ContainerActionBar from '~/modules/Docker/ContainerActionBar';
import DockerTable from '~/modules/Docker/DockerTable'; import DockerTable from '~/modules/Docker/DockerTable';

15
src/pages/manage/boards/index.tsx
View File

@@ -8,21 +8,14 @@ import {
LoadingOverlay, LoadingOverlay,
Menu, Menu,
SimpleGrid, SimpleGrid,
Table,
Text, Text,
Title, Title,
} from '@mantine/core'; } from '@mantine/core';
import { useListState } from '@mantine/hooks'; import { useListState } from '@mantine/hooks';
import { modals } from '@mantine/modals'; import { modals } from '@mantine/modals';
import { import { IconDotsVertical, IconFolderFilled, IconPlus, IconTrash } from '@tabler/icons-react';
IconDotsVertical,
IconFile,
IconFolderFilled,
IconPlus,
IconTrash,
} from '@tabler/icons-react';
import Link from 'next/link'; import Link from 'next/link';
import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
import { CommonHeader } from '~/components/layout/common-header'; import { CommonHeader } from '~/components/layout/common-header';
import { sleep } from '~/tools/client/time'; import { sleep } from '~/tools/client/time';
import { api } from '~/utils/api'; import { api } from '~/utils/api';
@@ -39,7 +32,7 @@ const BoardsPage = () => {
const [deletingDashboards, { append, filter }] = useListState<string>([]); const [deletingDashboards, { append, filter }] = useListState<string>([]);
return ( return (
<MainLayout> <ManageLayout>
<CommonHeader> <CommonHeader>
<title>Boards • Homarr</title> <title>Boards • Homarr</title>
</CommonHeader> </CommonHeader>
@@ -136,7 +129,7 @@ const BoardsPage = () => {
))} ))}
</SimpleGrid> </SimpleGrid>
)} )}
</MainLayout> </ManageLayout>
); );
}; };

6
src/pages/manage/index.tsx
View File

@@ -14,7 +14,7 @@ import { useSession } from 'next-auth/react';
import Head from 'next/head'; import Head from 'next/head';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
import { useScreenLargerThan } from '~/hooks/useScreenLargerThan'; import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
const ManagementPage = () => { const ManagementPage = () => {
@@ -23,7 +23,7 @@ const ManagementPage = () => {
const { data: sessionData } = useSession(); const { data: sessionData } = useSession();
return ( return (
<MainLayout> <ManageLayout>
<Head> <Head>
<title>Manage • Homarr</title> <title>Manage • Homarr</title>
</Head> </Head>
@@ -98,7 +98,7 @@ const ManagementPage = () => {
</Card> </Card>
</UnstyledButton> </UnstyledButton>
</SimpleGrid> </SimpleGrid>
</MainLayout> </ManageLayout>
); );
}; };

8
src/pages/manage/settings/index.tsx
View File

@@ -1,17 +1,17 @@
import { Title, Text } from '@mantine/core'; import { Text, Title } from '@mantine/core';
import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
import { CommonHeader } from '~/components/layout/common-header'; import { CommonHeader } from '~/components/layout/common-header';
const SettingsPage = () => { const SettingsPage = () => {
return ( return (
<MainLayout> <ManageLayout>
<CommonHeader> <CommonHeader>
<title>Settings • Homarr</title> <title>Settings • Homarr</title>
</CommonHeader> </CommonHeader>
<Title>Settings</Title> <Title>Settings</Title>
<Text>Coming soon!</Text> <Text>Coming soon!</Text>
</MainLayout> </ManageLayout>
); );
}; };

19
src/pages/manage/users/create.tsx
View File

@@ -1,15 +1,4 @@
import { import { Alert, Button, Card, Flex, Group, Stepper, Table, Text, Title } from '@mantine/core';
Alert,
Button,
Card,
Flex,
Group,
PasswordInput,
Stepper,
Table,
Text,
Title,
} from '@mantine/core';
import { useForm, zodResolver } from '@mantine/form'; import { useForm, zodResolver } from '@mantine/form';
import { import {
IconArrowLeft, IconArrowLeft,
@@ -33,7 +22,7 @@ import {
CreateAccountSecurityStep, CreateAccountSecurityStep,
createAccountSecurityStepValidationSchema, createAccountSecurityStepValidationSchema,
} from '~/components/Admin/CreateNewUser/security-step'; } from '~/components/Admin/CreateNewUser/security-step';
import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
import { api } from '~/utils/api'; import { api } from '~/utils/api';
const CreateNewUserPage = () => { const CreateNewUserPage = () => {
@@ -70,7 +59,7 @@ const CreateNewUserPage = () => {
}); });
return ( return (
<MainLayout> <ManageLayout>
<Head> <Head>
<title>Create user • Homarr</title> <title>Create user • Homarr</title>
</Head> </Head>
@@ -217,7 +206,7 @@ const CreateNewUserPage = () => {
</Group> </Group>
</Stepper.Completed> </Stepper.Completed>
</Stepper> </Stepper>
</MainLayout> </ManageLayout>
); );
}; };

11
src/pages/manage/users/index.tsx
View File

@@ -7,7 +7,6 @@ import {
Flex, Flex,
Group, Group,
Pagination, Pagination,
SegmentedControl,
Table, Table,
Text, Text,
Title, Title,
@@ -18,7 +17,7 @@ import { IconPlus, IconTrash } from '@tabler/icons-react';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
import { useState } from 'react'; import { useState } from 'react';
import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
import { api } from '~/utils/api'; import { api } from '~/utils/api';
const ManageUsersPage = () => { const ManageUsersPage = () => {
@@ -31,7 +30,7 @@ const ManageUsersPage = () => {
}); });
return ( return (
<MainLayout> <ManageLayout>
<Head> <Head>
<title>Users • Homarr</title> <title>Users • Homarr</title>
</Head> </Head>
@@ -107,7 +106,9 @@ const ManageUsersPage = () => {
<tr> <tr>
<td colSpan={1}> <td colSpan={1}>
<Box p={15}> <Box p={15}>
<Text>Your search does not match any entries. Please adjust your filter.</Text> <Text>
Your search does not match any entries. Please adjust your filter.
</Text>
</Box> </Box>
</td> </td>
</tr> </tr>
@@ -129,7 +130,7 @@ const ManageUsersPage = () => {
/> />
</> </>
)} )}
</MainLayout> </ManageLayout>
); );
}; };

11
src/pages/manage/users/invites.tsx
View File

@@ -14,14 +14,13 @@ import { IconPlus, IconTrash } from '@tabler/icons-react';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import Head from 'next/head'; import Head from 'next/head';
import { useState } from 'react'; import { useState } from 'react';
import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
import { api } from '~/utils/api'; import { api } from '~/utils/api';
const ManageUserInvitesPage = () => { const ManageUserInvitesPage = () => {
const [activePage, setActivePage] = useState(0); const [activePage, setActivePage] = useState(0);
const { data } = const { data } = api.registrationTokens.getAllInvites.useQuery({
api.registrationTokens.getAllInvites.useQuery({ page: activePage,
page: activePage
}); });
const { classes } = useStyles(); const { classes } = useStyles();
@@ -35,7 +34,7 @@ const ManageUserInvitesPage = () => {
}; };
return ( return (
<MainLayout> <ManageLayout>
<Head> <Head>
<title>User invites • Homarr</title> <title>User invites • Homarr</title>
</Head> </Head>
@@ -133,7 +132,7 @@ const ManageUserInvitesPage = () => {
/> />
</> </>
)} )}
</MainLayout> </ManageLayout>
); );
}; };

8
src/pages/user/preferences.tsx
View File

@@ -5,7 +5,7 @@ import { GetServerSidePropsContext } from 'next';
import { forwardRef } from 'react'; import { forwardRef } from 'react';
import { z } from 'zod'; import { z } from 'zod';
import { AccessibilitySettings } from '~/components/Settings/Customization/Accessibility/AccessibilitySettings'; import { AccessibilitySettings } from '~/components/Settings/Customization/Accessibility/AccessibilitySettings';
import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
import { CommonHeader } from '~/components/layout/common-header'; import { CommonHeader } from '~/components/layout/common-header';
import { languages } from '~/tools/language'; import { languages } from '~/tools/language';
import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations'; import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
@@ -17,14 +17,14 @@ const PreferencesPage = ({ locale }: InferGetServerSidePropsType<typeof getServe
const { data } = api.user.getWithSettings.useQuery(); const { data } = api.user.getWithSettings.useQuery();
return ( return (
<MainLayout> <ManageLayout>
<CommonHeader> <CommonHeader>
<title>Preferences • Homarr</title> <title>Preferences • Homarr</title>
</CommonHeader> </CommonHeader>
<Title mb="xl">Preferences</Title> <Title mb="xl">Preferences</Title>
{data && <SettingsComponent settings={data.settings} />} {data && <SettingsComponent settings={data.settings} />}
</MainLayout> </ManageLayout>
); );
}; };
@@ -78,7 +78,7 @@ const SettingsComponent = ({
searchable searchable
maxDropdownHeight={400} maxDropdownHeight={400}
filter={(value, item) => filter={(value, item) =>
item.label.toLowerCase().includes(value.toLowerCase().trim()) || item.label!.toLowerCase().includes(value.toLowerCase().trim()) ||
item.description.toLowerCase().includes(value.toLowerCase().trim()) item.description.toLowerCase().includes(value.toLowerCase().trim())
} }
defaultValue={settings.language} defaultValue={settings.language}