💄 Polish layouts
This commit is contained in:
Meier Lukas
50
src/components/layout/header/ActionButton.tsx
Normal file
50
src/components/layout/header/ActionButton.tsx
Normal 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>
|
||||
);
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
};
|
||||
@@ -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 />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
118
src/components/layout/header/AvatarMenu.tsx
Normal file
118
src/components/layout/header/AvatarMenu.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { Avatar, Badge, Menu, UnstyledButton, useMantineTheme } from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import {
|
||||
IconDashboard,
|
||||
IconInfoCircle,
|
||||
IconLogin,
|
||||
IconLogout,
|
||||
IconMoonStars,
|
||||
IconSun,
|
||||
IconUserCog,
|
||||
} from '@tabler/icons-react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { User } from 'next-auth';
|
||||
import { signOut, useSession } from 'next-auth/react';
|
||||
import Link from 'next/link';
|
||||
import { forwardRef } from 'react';
|
||||
import { AboutModal } from '~/components/Dashboard/Modals/AboutModal/AboutModal';
|
||||
import { useColorScheme } from '~/hooks/use-colorscheme';
|
||||
import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
|
||||
|
||||
import { REPO_URL } from '../../../../data/constants';
|
||||
|
||||
export const AvatarMenu = () => {
|
||||
const [aboutModalOpened, aboutModal] = useDisclosure(false);
|
||||
const { data: sessionData } = useSession();
|
||||
const { colorScheme, toggleColorScheme } = useColorScheme();
|
||||
const newVersionAvailable = useNewVersionAvailable();
|
||||
|
||||
const Icon = colorScheme === 'dark' ? IconSun : IconMoonStars;
|
||||
|
||||
return (
|
||||
<>
|
||||
<UnstyledButton>
|
||||
<Menu width={192}>
|
||||
<Menu.Target>
|
||||
<CurrentUserAvatar user={sessionData?.user ?? null} />
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item icon={<Icon size="1rem" />} onClick={toggleColorScheme}>
|
||||
Switch theme
|
||||
</Menu.Item>
|
||||
{sessionData?.user && (
|
||||
<>
|
||||
<Menu.Item
|
||||
component={Link}
|
||||
href="/user/preferences"
|
||||
icon={<IconUserCog size="1rem" />}
|
||||
>
|
||||
User preferences
|
||||
</Menu.Item>
|
||||
<Menu.Item component={Link} href="/board" icon={<IconDashboard size="1rem" />}>
|
||||
Default Dashboard
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
</>
|
||||
)}
|
||||
<Menu.Item
|
||||
icon={<IconInfoCircle size="1rem" />}
|
||||
rightSection={
|
||||
newVersionAvailable && (
|
||||
<Badge variant="light" color="blue">
|
||||
New
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
onClick={() => aboutModal.open()}
|
||||
>
|
||||
About
|
||||
</Menu.Item>
|
||||
{sessionData?.user ? (
|
||||
<Menu.Item icon={<IconLogout size="1rem" />} color="red" onClick={() => signOut()}>
|
||||
Logout
|
||||
</Menu.Item>
|
||||
) : (
|
||||
<Menu.Item icon={<IconLogin size="1rem" />} component={Link} href="/auth/login">
|
||||
Login
|
||||
</Menu.Item>
|
||||
)}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
</UnstyledButton>
|
||||
|
||||
<AboutModal
|
||||
opened={aboutModalOpened}
|
||||
closeModal={aboutModal.close}
|
||||
newVersionAvailable={newVersionAvailable}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
type CurrentUserAvatarProps = {
|
||||
user: User | null;
|
||||
};
|
||||
|
||||
const CurrentUserAvatar = forwardRef<HTMLDivElement, CurrentUserAvatarProps>(
|
||||
({ user, ...others }, ref) => {
|
||||
const { primaryColor } = useMantineTheme();
|
||||
if (!user) return <Avatar ref={ref} {...others} />;
|
||||
return (
|
||||
<Avatar ref={ref} color={primaryColor} {...others}>
|
||||
{user.name?.slice(0, 2).toUpperCase()}
|
||||
</Avatar>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
const useNewVersionAvailable = () => {
|
||||
const { attributes } = usePackageAttributesStore();
|
||||
const { data } = useQuery({
|
||||
queryKey: ['github/latest'],
|
||||
cacheTime: 1000 * 60 * 60 * 24,
|
||||
staleTime: 1000 * 60 * 60 * 5,
|
||||
queryFn: () =>
|
||||
fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => res.json()),
|
||||
});
|
||||
return data?.tag_name > `v${attributes.packageVersion}` ? data?.tag_name : undefined;
|
||||
};
|
||||
@@ -1,72 +1,89 @@
|
||||
import { Box, Group, Indicator, Header as MantineHeader, createStyles } from '@mantine/core';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useSession } from 'next-auth/react';
|
||||
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 { REPO_URL } from '../../../../data/constants';
|
||||
import DockerMenuButton from '../../../modules/Docker/DockerModule';
|
||||
import { usePackageAttributesStore } from '../../../tools/client/zustands/usePackageAttributesStore';
|
||||
import { Logo } from '../Logo';
|
||||
import { useCardStyles } from '../useCardStyles';
|
||||
import { ToggleEditModeAction } from './Actions/ToggleEditMode/ToggleEditMode';
|
||||
import { Search } from './Search';
|
||||
import { SettingsMenu } from './SettingsMenu';
|
||||
import { AvatarMenu } from './AvatarMenu';
|
||||
import { Search } from './search';
|
||||
|
||||
export const HeaderHeight = 64;
|
||||
type MainHeaderProps = {
|
||||
logoHref?: string;
|
||||
showExperimental?: boolean;
|
||||
headerActions?: React.ReactNode;
|
||||
leftIcon?: React.ReactNode;
|
||||
};
|
||||
|
||||
export function Header(props: any) {
|
||||
const { classes } = useStyles();
|
||||
const { classes: cardClasses, cx } = useCardStyles(false);
|
||||
const { attributes } = usePackageAttributesStore();
|
||||
const { data: sessionData } = useSession();
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ['github/latest'],
|
||||
cacheTime: 1000 * 60 * 60 * 24,
|
||||
staleTime: 1000 * 60 * 60 * 5,
|
||||
queryFn: () =>
|
||||
fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => res.json()),
|
||||
});
|
||||
const newVersionAvailable =
|
||||
data?.tag_name > `v${attributes.packageVersion}` ? data?.tag_name : undefined;
|
||||
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 (
|
||||
<MantineHeader height="auto" className={cx(cardClasses.card, 'dashboard-header')}>
|
||||
<Group p="xs" noWrap grow>
|
||||
<Box className={cx(classes.hide, 'dashboard-header-logo-root')}>
|
||||
<Logo />
|
||||
</Box>
|
||||
<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>
|
||||
<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>
|
||||
</MantineHeader>
|
||||
);
|
||||
}
|
||||
|
||||
const useStyles = createStyles((theme) => ({
|
||||
hide: {
|
||||
[theme.fn.smallerThan('xs')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
}));
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
||||
204
src/components/layout/header/MovieModal.tsx
Normal file
204
src/components/layout/header/MovieModal.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
import {
|
||||
Button,
|
||||
Center,
|
||||
Divider,
|
||||
Group,
|
||||
Loader,
|
||||
Image as MantineImage,
|
||||
Modal,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { IconDownload, IconExternalLink, IconPlayerPlay } from '@tabler/icons-react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import Image from 'next/image';
|
||||
import { useRouter } from 'next/router';
|
||||
import React, { useMemo } from 'react';
|
||||
import { z } from 'zod';
|
||||
import { availableIntegrations } from '~/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector';
|
||||
import { useConfigContext } from '~/config/provider';
|
||||
import { RequestModal } from '~/modules/overseerr/RequestModal';
|
||||
import { RouterOutputs, api } from '~/utils/api';
|
||||
|
||||
type MovieModalProps = {
|
||||
opened: boolean;
|
||||
closeModal: () => void;
|
||||
};
|
||||
|
||||
const queryParamsSchema = z.object({
|
||||
movie: z.literal('true'),
|
||||
search: z.string().nonempty(),
|
||||
type: z.enum(['jellyseerr', 'overseerr']),
|
||||
});
|
||||
|
||||
type MovieResultsProps = z.infer<typeof queryParamsSchema> & {
|
||||
closeModal: () => void;
|
||||
};
|
||||
|
||||
const MovieResults = ({ search, type, closeModal }: MovieResultsProps) => {
|
||||
const { name: configName } = useConfigContext();
|
||||
const { data: overseerrResults, isLoading } = api.overseerr.search.useQuery(
|
||||
{
|
||||
query: search,
|
||||
configName: configName!,
|
||||
integration: type,
|
||||
},
|
||||
{
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnMount: false,
|
||||
refetchInterval: false,
|
||||
}
|
||||
);
|
||||
|
||||
if (isLoading)
|
||||
return (
|
||||
<Center>
|
||||
<Loader />
|
||||
</Center>
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Text>
|
||||
Found {overseerrResults?.length} results for <b>{search}</b>
|
||||
</Text>
|
||||
<Stack spacing="xs">
|
||||
{overseerrResults?.map((result, index: number) => (
|
||||
<React.Fragment key={index}>
|
||||
<MovieDisplay movie={result} type={type} closeModal={closeModal} />
|
||||
{index < overseerrResults.length - 1 && <Divider variant="dashed" my="xs" />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export const MovieModal = ({ opened, closeModal }: MovieModalProps) => {
|
||||
const query = useRouter().query;
|
||||
const queryParams = queryParamsSchema.safeParse(query);
|
||||
|
||||
if (!queryParams.success) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const integration = useMemo(() => {
|
||||
return availableIntegrations.find((x) => x.value === queryParams.data.type)!;
|
||||
}, [queryParams.data.type]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={closeModal}
|
||||
size="lg"
|
||||
scrollAreaComponent={ScrollArea.Autosize}
|
||||
title={
|
||||
<Group>
|
||||
<Image src={integration.image} width={30} height={30} alt={`${integration.label} icon`} />
|
||||
<Title order={4}>{integration.label} movies</Title>
|
||||
</Group>
|
||||
}
|
||||
>
|
||||
<MovieResults
|
||||
movie={queryParams.data.movie}
|
||||
search={queryParams.data.search}
|
||||
type={queryParams.data.type}
|
||||
closeModal={closeModal}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
type MovieDisplayProps = {
|
||||
movie: RouterOutputs['overseerr']['search'][number];
|
||||
type: 'jellyseerr' | 'overseerr';
|
||||
closeModal: () => void;
|
||||
};
|
||||
|
||||
const MovieDisplay = ({ movie, type, closeModal }: MovieDisplayProps) => {
|
||||
const { t } = useTranslation('modules/common-media-cards');
|
||||
const { config } = useConfigContext();
|
||||
const [requestModalOpened, requestModal] = useDisclosure(false);
|
||||
|
||||
if (!config) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const service = config.apps.find((service) => service.integration.type === type);
|
||||
|
||||
const mediaUrl = movie.mediaInfo?.plexUrl ?? movie.mediaInfo?.mediaUrl;
|
||||
const serviceUrl = service?.behaviour.externalUrl ? service.behaviour.externalUrl : service?.url;
|
||||
|
||||
return (
|
||||
<Group noWrap style={{ maxHeight: 250 }} p={0} m={0} spacing="xs" align="stretch">
|
||||
<MantineImage
|
||||
withPlaceholder
|
||||
src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2/${
|
||||
movie.posterPath ?? movie.backdropPath
|
||||
}`}
|
||||
height={200}
|
||||
width={150}
|
||||
radius="md"
|
||||
fit="cover"
|
||||
/>
|
||||
<Stack justify="space-between">
|
||||
<Stack spacing={4}>
|
||||
<Title lineClamp={2} order={5}>
|
||||
{movie.title ?? movie.name ?? movie.originalName}
|
||||
</Title>
|
||||
<Text color="dimmed" size="xs" lineClamp={4}>
|
||||
{movie.overview}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Group spacing="xs">
|
||||
{!movie.mediaInfo?.mediaAddedAt && (
|
||||
<>
|
||||
<RequestModal
|
||||
base={movie}
|
||||
opened={requestModalOpened}
|
||||
setOpened={requestModal.toggle}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
requestModal.open();
|
||||
}}
|
||||
variant="light"
|
||||
size="sm"
|
||||
rightIcon={<IconDownload size={15} />}
|
||||
>
|
||||
{t('buttons.request')}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{mediaUrl && (
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
variant="outline"
|
||||
href={mediaUrl}
|
||||
size="sm"
|
||||
rightIcon={<IconPlayerPlay size={15} />}
|
||||
>
|
||||
{t('buttons.play')}
|
||||
</Button>
|
||||
)}
|
||||
{serviceUrl && (
|
||||
<Button
|
||||
component="a"
|
||||
target="_blank"
|
||||
href={serviceUrl}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
rightIcon={<IconExternalLink size={15} />}
|
||||
>
|
||||
TMDb
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
</Stack>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
@@ -1,319 +1,203 @@
|
||||
import { Autocomplete, Group, Kbd, Modal, Text, Tooltip, useMantineTheme } from '@mantine/core';
|
||||
import { useDisclosure, useHotkeys } from '@mantine/hooks';
|
||||
import {
|
||||
ActionIcon,
|
||||
Autocomplete,
|
||||
Box,
|
||||
Divider,
|
||||
Kbd,
|
||||
Menu,
|
||||
Popover,
|
||||
ScrollArea,
|
||||
Tooltip,
|
||||
createStyles,
|
||||
} 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';
|
||||
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 { useConfigContext } from '../../../config/provider';
|
||||
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';
|
||||
import { MovieModal } from './MovieModal';
|
||||
|
||||
export const SearchModule: IModule = {
|
||||
title: 'Search',
|
||||
icon: IconSearch,
|
||||
component: Search,
|
||||
id: 'search',
|
||||
type SearchProps = {
|
||||
isMobile?: boolean;
|
||||
};
|
||||
|
||||
interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
|
||||
label: string;
|
||||
disabled: boolean;
|
||||
value: string;
|
||||
description: string;
|
||||
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');
|
||||
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 [searchQuery, setSearchQuery] = useState('');
|
||||
const [debounced] = useDebouncedValue(searchQuery, 250);
|
||||
const { classes: cardClasses, cx } = useCardStyles(true);
|
||||
const { colors } = useMantineTheme();
|
||||
const router = useRouter();
|
||||
const [showMovieModal, movieModal] = useDisclosure(router.query.movie === 'true');
|
||||
|
||||
const isOverseerrEnabled = config?.apps.some(
|
||||
(x) => x.integration.type === 'overseerr' || x.integration.type === 'jellyseerr'
|
||||
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 overseerrApp = config?.apps.find(
|
||||
(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 data = [...engines, ...apps];
|
||||
|
||||
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 (
|
||||
<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
|
||||
ref={textInput}
|
||||
onFocusCapture={() => setOpened(true)}
|
||||
autoFocus={typeof window !== 'undefined' && window.innerWidth > 768}
|
||||
rightSection={<SearchModuleMenu />}
|
||||
placeholder={t(`searchEngines.${selectedSearchEngine.value}.description`) ?? undefined}
|
||||
value={searchQuery}
|
||||
onChange={(currentString) => tryMatchSearchEngine(currentString, setSearchQuery)}
|
||||
itemComponent={AutoCompleteItem}
|
||||
data={autocompleteData}
|
||||
onItemSubmit={(item) => {
|
||||
setOpened(false);
|
||||
if (item.url) {
|
||||
setSearchQuery('');
|
||||
window.open(item.openedUrl ? item.openedUrl : item.url, openTarget);
|
||||
}
|
||||
}}
|
||||
// Replace %s if it is in selectedSearchEngine.url with searchQuery, otherwise append searchQuery at the end of it
|
||||
onKeyDown={(event) => {
|
||||
if (
|
||||
event.key === 'Enter' &&
|
||||
searchQuery.length > 0 &&
|
||||
autocompleteData.length === 0
|
||||
) {
|
||||
if (selectedSearchEngine.url.includes('%s')) {
|
||||
window.open(selectedSearchEngine.url.replace('%s', searchQuery), openTarget);
|
||||
} else {
|
||||
window.open(selectedSearchEngine.url + searchQuery, openTarget);
|
||||
}
|
||||
}
|
||||
}}
|
||||
classNames={{
|
||||
input: cx(cardClasses.card, 'dashboard-header-search-input'),
|
||||
root: 'dashboard-header-search-root',
|
||||
}}
|
||||
radius="lg"
|
||||
size="md"
|
||||
<>
|
||||
<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}
|
||||
/>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<ScrollArea style={{ height: '80vh', maxWidth: '90vw' }} offsetScrollbars>
|
||||
{overseerrResults &&
|
||||
overseerrResults.length > 0 &&
|
||||
searchQuery.length > 3 &&
|
||||
overseerrResults.slice(0, 4).map((result: any, index: number) => (
|
||||
<React.Fragment key={index}>
|
||||
<OverseerrMediaDisplay key={result.id} media={result} />
|
||||
{index < overseerrResults.length - 1 && index < 3 && (
|
||||
<Divider variant="dashed" my="xs" />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ScrollArea>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Box>
|
||||
}
|
||||
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 });
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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 SearchItemComponent = forwardRef<HTMLDivElement, SearchAutoCompleteItem>(
|
||||
({ icon, label, value, sort, ...others }, ref) => {
|
||||
let Icon = getItemComponent(icon);
|
||||
|
||||
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);
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Menu.Item>
|
||||
</Tooltip>
|
||||
))}
|
||||
<Menu.Divider />
|
||||
<Menu.Label>
|
||||
<Tip>
|
||||
{t('tip')} <Kbd>mod+k</Kbd>{' '}
|
||||
</Tip>
|
||||
</Menu.Label>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
<Group ref={ref} noWrap {...others}>
|
||||
<Icon size={20} />
|
||||
<Text>{label}</Text>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
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';
|
||||
const getItemComponent = (icon: SearchAutoCompleteItem['icon']) => {
|
||||
if (typeof icon !== 'string') {
|
||||
return icon;
|
||||
}
|
||||
|
||||
return config.settings.common.searchEngine.properties.openInNewTab ? '_blank' : '_self';
|
||||
};
|
||||
|
||||
export const useOverseerrSearchQuery = (query: string, isEnabled: boolean) => {
|
||||
const { name: configName } = useConfigContext();
|
||||
return api.overseerr.search.useQuery(
|
||||
{
|
||||
query,
|
||||
configName: configName!,
|
||||
integration: 'overseerr',
|
||||
},
|
||||
{
|
||||
enabled: isEnabled,
|
||||
refetchOnWindowFocus: false,
|
||||
refetchOnMount: false,
|
||||
refetchInterval: false,
|
||||
}
|
||||
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,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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user