jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

💄 Prettier codebase

Browse Source
This commit is contained in:
ajnart
2023-10-25 15:29:45 +02:00
parent 01ab01d159
commit 5ab0e5207b
99 changed files with 375 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/widgets/WidgetWrapper.tsx
View File

@@ -1,8 +1,8 @@
import { ComponentType } from 'react';
import Widgets from '.';
import { HomarrCardWrapper } from '~/components/Dashboard/Tiles/HomarrCardWrapper';
import { WidgetsMenu } from '~/components/Dashboard/Tiles/Widgets/WidgetsMenu';
import Widgets from '.';
import ErrorBoundary from './boundary';
import { IWidget } from './widgets';

108
src/widgets/bookmark/BookmarkWidgetTile.tsx
View File

@@ -3,11 +3,11 @@ import {
Box,
Button,
Card,
Divider,
Flex,
Group,
Image,
ScrollArea,
Divider,
Stack,
Switch,
Text,
@@ -27,12 +27,12 @@ import {
} from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { useEffect } from 'react';
import React from 'react';
import { v4 } from 'uuid';
import { z } from 'zod';
import React from 'react';
import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
import { IconSelector } from '~/components/IconSelector/IconSelector';
import { defineWidget } from '../helper';
import { IDraggableEditableListInputValue, IWidget } from '../widgets';
@@ -54,7 +54,7 @@ const definition = defineWidget({
type: 'text',
defaultValue: '',
info: true,
infoLink: "https://homarr.dev/docs/widgets/bookmarks/",
infoLink: 'https://homarr.dev/docs/widgets/bookmarks/',
},
items: {
type: 'draggable-editable-list',
@@ -84,11 +84,11 @@ const definition = defineWidget({
return undefined;
}
return t('item.validation.length', {shortest: "1", longest: "100"});
return t('item.validation.length', { shortest: '1', longest: '100' });
},
href: (value) => {
if (!z.string().min(1).max(200).safeParse(value).success) {
return t('item.validation.length', {shortest: "1", longest: "200"});
return t('item.validation.length', { shortest: '1', longest: '200' });
}
if (!z.string().url().safeParse(value).success) {
@@ -102,7 +102,7 @@ const definition = defineWidget({
return undefined;
}
return t('item.validation.length', {shortest: "1", longest: "400"});
return t('item.validation.length', { shortest: '1', longest: '400' });
},
},
validateInputOnChange: true,
@@ -174,11 +174,7 @@ const definition = defineWidget({
} satisfies IDraggableEditableListInputValue<BookmarkItem>,
layout: {
type: 'select',
data: [
{ value: 'autoGrid', },
{ value: 'horizontal', },
{ value: 'vertical', },
],
data: [{ value: 'autoGrid' }, { value: 'horizontal' }, { value: 'vertical' }],
defaultValue: 'autoGrid',
},
},
@@ -223,10 +219,12 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
case 'autoGrid':
return (
<Stack h="100%" spacing={0}>
<Title size="h4" px="0.25rem">{widget.properties.name}</Title>
<Title size="h4" px="0.25rem">
{widget.properties.name}
</Title>
<Box
className={classes.grid}
mr={isEditModeEnabled && widget.properties.name === "" ? 'xl' : undefined}
mr={isEditModeEnabled && widget.properties.name === '' ? 'xl' : undefined}
h="100%"
>
{widget.properties.items.map((item: BookmarkItem, index) => (
@@ -239,10 +237,12 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
href={item.href}
target={item.openNewTab ? '_blank' : undefined}
withBorder
bg={colorScheme === 'dark' ? colors.dark[5].concat('80') : colors.blue[0].concat('80')}
bg={
colorScheme === 'dark' ? colors.dark[5].concat('80') : colors.blue[0].concat('80')
}
sx={{
'&:hover': { backgroundColor: fn.primaryColor().concat('40'), }, //'40' = 25% opacity
flex:'1 1 auto',
'&:hover': { backgroundColor: fn.primaryColor().concat('40') }, //'40' = 25% opacity
flex: '1 1 auto',
}}
display="flex"
>
@@ -265,29 +265,29 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
type="auto"
h="100%"
offsetScrollbars
mr={isEditModeEnabled && widget.properties.name === ""? 'xl' : undefined}
mr={isEditModeEnabled && widget.properties.name === '' ? 'xl' : undefined}
styles={{
viewport:{
viewport: {
//mantine being mantine again... this might break. Needed for taking 100% of widget space
'& div[style="min-width: 100%; display: table;"]':{
'& div[style="min-width: 100%; display: table;"]': {
display: 'flex !important',
height:'100%',
height: '100%',
},
},
}}
>
<Flex
direction={flexDirection}
gap="0"
h="100%"
w="100%"
>
<Flex direction={flexDirection} gap="0" h="100%" w="100%">
{widget.properties.items.map((item: BookmarkItem, index) => (
<div key={index} style={{ display: 'flex', flex: '1', flexDirection: flexDirection, }}>
<div
key={index}
style={{ display: 'flex', flex: '1', flexDirection: flexDirection }}
>
<Divider
m="3px"
orientation={ widget.properties.layout !== 'vertical' ? 'vertical' : 'horizontal' }
color={index === 0 ? "transparent" : undefined}
orientation={
widget.properties.layout !== 'vertical' ? 'vertical' : 'horizontal'
}
color={index === 0 ? 'transparent' : undefined}
/>
<Card
px="md"
@@ -298,13 +298,13 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
radius="md"
bg="transparent"
sx={{
'&:hover': { backgroundColor: fn.primaryColor().concat('40'),}, //'40' = 25% opacity
flex:'1 1 auto',
'&:hover': { backgroundColor: fn.primaryColor().concat('40') }, //'40' = 25% opacity
flex: '1 1 auto',
overflow: 'unset',
}}
display="flex"
>
<BookmarkItemContent item={item}/>
<BookmarkItemContent item={item} />
</Card>
</div>
))}
@@ -320,26 +320,28 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
const BookmarkItemContent = ({ item }: { item: BookmarkItem }) => {
const { colorScheme } = useMantineTheme();
return (
<Group spacing="0rem 1rem">
<Image
hidden={item.hideIcon}
src={item.iconUrl}
width={47}
height={47}
fit="contain"
withPlaceholder />
<Stack spacing={0}>
<Text size="md">{item.name}</Text>
<Text
color={colorScheme === 'dark' ? "gray.6" : "gray.7"}
size="sm"
hidden={item.hideHostname}
>
{new URL(item.href).hostname}
</Text>
</Stack>
</Group>
)};
<Group spacing="0rem 1rem">
<Image
hidden={item.hideIcon}
src={item.iconUrl}
width={47}
height={47}
fit="contain"
withPlaceholder
/>
<Stack spacing={0}>
<Text size="md">{item.name}</Text>
<Text
color={colorScheme === 'dark' ? 'gray.6' : 'gray.7'}
size="sm"
hidden={item.hideHostname}
>
{new URL(item.href).hostname}
</Text>
</Stack>
</Group>
);
};
const useStyles = createStyles(() => ({
grid: {

2
src/widgets/boundary.tsx
View File

@@ -4,8 +4,8 @@ import { IconBrandGithub, IconBug, IconInfoCircle, IconRefresh } from '@tabler/i
import Consola from 'consola';
import { withTranslation } from 'next-i18next';
import React, { ReactNode } from 'react';
import { WidgetsMenu } from '~/components/Dashboard/Tiles/Widgets/WidgetsMenu';
import { IWidget } from './widgets';
type ErrorBoundaryState = {

2
src/widgets/calendar/MediaList.tsx
View File

@@ -1,13 +1,13 @@
import { Divider, ScrollArea, createStyles } from '@mantine/core';
import { useViewportSize } from '@mantine/hooks';
import React from 'react';
import {
LidarrMediaDisplay,
RadarrMediaDisplay,
ReadarrMediaDisplay,
SonarrMediaDisplay,
} from '~/modules/common';
import { MediasType } from './type';
interface MediaListProps {

1
src/widgets/calendar/bg-calculator.ts
View File

@@ -1,5 +1,4 @@
import { ColorScheme, useMantineTheme } from '@mantine/core';
import { isToday } from '~/tools/shared/time/date.tool';
export const getBgColorByDateAndTheme = (colorScheme: ColorScheme, date: Date) => {

3
src/widgets/dashDot/DashDotCompactNetwork.tsx
View File

@@ -1,9 +1,8 @@
import { Group, Stack, Text } from '@mantine/core';
import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { RouterOutputs } from '~/utils/api';
import { bytes } from '~/tools/bytesHelper';
import { RouterOutputs } from '~/utils/api';
interface DashDotCompactNetworkProps {
info: DashDotInfo;

4
src/widgets/dashDot/DashDotCompactStorage.tsx
View File

@@ -1,9 +1,9 @@
import { Group, Stack, Text } from '@mantine/core';
import { useTranslation } from 'next-i18next';
import { api } from '~/utils/api';
import { bytes } from '~/tools/bytesHelper';
import { percentage } from '~/tools/shared/math/percentage.tool';
import { api } from '~/utils/api';
import { DashDotInfo } from './DashDotCompactNetwork';
interface DashDotCompactStorageProps {

9
src/widgets/dashDot/api.ts
View File

@@ -1,6 +1,13 @@
import { useConfigContext } from '~/config/provider';
import { RouterInputs, api } from '~/utils/api';
import { UsenetHistoryRequestParams, UsenetInfoRequestParams, UsenetPauseRequestParams, UsenetQueueRequestParams, UsenetResumeRequestParams } from '../useNet/types';
import {
UsenetHistoryRequestParams,
UsenetInfoRequestParams,
UsenetPauseRequestParams,
UsenetQueueRequestParams,
UsenetResumeRequestParams,
} from '../useNet/types';
const POLLING_INTERVAL = 2000;

16
src/widgets/date/DateTile.tsx
View File

@@ -6,10 +6,10 @@ import timezones from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import { useSession } from 'next-auth/react';
import { useEffect, useRef, useState } from 'react';
import { useSetSafeInterval } from '~/hooks/useSetSafeInterval';
import { getLanguageByCode } from '~/tools/language';
import { api } from '~/utils/api';
import { useSetSafeInterval } from '~/hooks/useSetSafeInterval';
import { defineWidget } from '../helper';
import { IWidget } from '../widgets';
@@ -108,8 +108,8 @@ function DateTile({ widget }: DateTileProps) {
);
}
const useStyles = createStyles(()=>({
wrapper:{
const useStyles = createStyles(() => ({
wrapper: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-evenly',
@@ -117,17 +117,17 @@ const useStyles = createStyles(()=>({
height: '100%',
gap: 0,
},
clock:{
clock: {
lineHeight: '1',
whiteSpace: 'nowrap',
fontWeight: 700,
fontSize: '2.125rem',
},
extras:{
extras: {
lineHeight: '1',
whiteSpace: 'nowrap',
}
}))
},
}));
/**
* State which updates when the minute is changing
@@ -142,7 +142,7 @@ const useDateState = (location?: { latitude: number; longitude: number }) => {
const { data: userWithSettings } = api.user.withSettings.useQuery(undefined, {
enabled: !!sessionData?.user,
});
const userLanguage = userWithSettings?.settings.language;
const userLanguage = userWithSettings?.settings.language;
const [date, setDate] = useState(getNewDate(timezone));
const setSafeInterval = useSetSafeInterval();
const timeoutRef = useRef<NodeJS.Timeout>(); // reference for initial timeout until first minute change

54
src/widgets/dnshole/DnsHoleControls.tsx
View File

@@ -16,9 +16,9 @@ import { useElementSize } from '@mantine/hooks';
import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
import { useSession } from 'next-auth/react';
import { useTranslation } from 'next-i18next';
import { useConfigContext } from '~/config/provider';
import { api } from '~/utils/api';
import { useConfigContext } from '~/config/provider';
import { defineWidget } from '../helper';
import { WidgetLoading } from '../loading';
import { IWidget } from '../widgets';
@@ -84,15 +84,19 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
}
if (data.status.length === 0) {
return(
return (
<Center h="100%">
<Stack align="center">
<IconDeviceGamepad size={40} strokeWidth={1}/>
<Title align="center" order={6}>{t('modules/dns-hole-controls:descriptor.errors.general.title')}</Title>
<Text align="center">{t('modules/dns-hole-controls:descriptor.errors.general.text')}</Text>
<IconDeviceGamepad size={40} strokeWidth={1} />
<Title align="center" order={6}>
{t('modules/dns-hole-controls:descriptor.errors.general.title')}
</Title>
<Text align="center">
{t('modules/dns-hole-controls:descriptor.errors.general.text')}
</Text>
</Stack>
</Center>
)
);
}
console.log(data);
@@ -136,15 +140,18 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
>
<Button
onClick={async () => {
await mutateAsync({
action: 'enable',
configName,
appsToChange: getDnsStatus()?.disabled,
},{
onSettled: () => {
reFetchSummaryDns();
await mutateAsync(
{
action: 'enable',
configName,
appsToChange: getDnsStatus()?.disabled,
},
{
onSettled: () => {
reFetchSummaryDns();
},
}
});
);
}}
disabled={getDnsStatus()?.disabled.length === 0 || fetchingDnsSummary || changingStatus}
leftIcon={<IconPlayerPlay size={20} />}
@@ -156,15 +163,18 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
</Button>
<Button
onClick={async () => {
await mutateAsync({
action: 'disable',
configName,
appsToChange: getDnsStatus()?.enabled,
},{
onSettled: () => {
reFetchSummaryDns();
await mutateAsync(
{
action: 'disable',
configName,
appsToChange: getDnsStatus()?.enabled,
},
{
onSettled: () => {
reFetchSummaryDns();
},
}
});
);
}}
disabled={getDnsStatus()?.enabled.length === 0 || fetchingDnsSummary || changingStatus}
leftIcon={<IconPlayerStop size={20} />}

2
src/widgets/dnshole/DnsHoleSummary.tsx
View File

@@ -10,9 +10,9 @@ import {
} from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { useConfigContext } from '~/config/provider';
import { formatNumber, formatPercentage } from '~/tools/client/math';
import { RouterOutputs, api } from '~/utils/api';
import { formatNumber, formatPercentage } from '~/tools/client/math';
import { defineWidget } from '../helper';
import { WidgetLoading } from '../loading';
import { IWidget } from '../widgets';

4
src/widgets/download-speed/Tile.tsx
View File

@@ -15,17 +15,17 @@ import { Datum, ResponsiveLine, Serie } from '@nivo/line';
import { IconDownload, IconUpload } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { useEffect } from 'react';
import { AppAvatar } from '~/components/AppAvatar';
import { useConfigContext } from '~/config/provider';
import { useGetDownloadClientsQueue } from './useGetNetworkSpeed';
import { useColorTheme } from '~/tools/color';
import { humanFileSize } from '~/tools/humanFileSize';
import {
NormalizedDownloadQueueResponse,
TorrentTotalDownload,
} from '~/types/api/downloads/queue/NormalizedDownloadQueueResponse';
import definition, { ITorrentNetworkTraffic } from './TorrentNetworkTrafficTile';
import { useGetDownloadClientsQueue } from './useGetNetworkSpeed';
interface TorrentNetworkTrafficTileProps {
widget: ITorrentNetworkTraffic;

2
src/widgets/index.ts
View File

@@ -9,12 +9,12 @@ import iframe from './iframe/IFrameTile';
import mediaRequestsList from './media-requests/MediaRequestListTile';
import mediaRequestsStats from './media-requests/MediaRequestStatsTile';
import mediaServer from './media-server/MediaServerTile';
import notebook from './notebook/NotebookWidgetTile';
import rss from './rss/RssWidgetTile';
import torrent from './torrent/TorrentTile';
import usenet from './useNet/UseNetTile';
import videoStream from './video/VideoStreamTile';
import weather from './weather/WeatherTile';
import notebook from './notebook/NotebookWidgetTile';
export default {
calendar,

4
src/widgets/media-requests/MediaRequestStatsTile.tsx
View File

@@ -57,7 +57,7 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
const {
data: usersData,
isFetching: usersFetching,
isLoading: usersLoading
isLoading: usersLoading,
} = useUsersQuery(widget);
const { ref, height } = useElementSize();
const { colorScheme } = useMantineTheme();
@@ -128,7 +128,7 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
p={0}
component="a"
href={user.userLink}
target={widget.properties.openInNewTab ? "_blank" : "_self"}
target={widget.properties.openInNewTab ? '_blank' : '_self'}
mah={95}
mih={55}
radius="md"

9
src/widgets/media-requests/media-request-query.tsx
View File

@@ -1,9 +1,10 @@
import { useConfigContext } from '~/config/provider';
import { MediaRequestListWidget } from './MediaRequestListTile';
import { MediaRequestStatsWidget } from './MediaRequestStatsTile';
import { api } from '~/utils/api';
export const useMediaRequestQuery = (widget: MediaRequestListWidget|MediaRequestStatsWidget) => {
import { MediaRequestListWidget } from './MediaRequestListTile';
import { MediaRequestStatsWidget } from './MediaRequestStatsTile';
export const useMediaRequestQuery = (widget: MediaRequestListWidget | MediaRequestStatsWidget) => {
const { name: configName } = useConfigContext();
return api.mediaRequest.allMedia.useQuery(
{ configName: configName!, widget: widget },
@@ -13,7 +14,7 @@ export const useMediaRequestQuery = (widget: MediaRequestListWidget|MediaRequest
);
};
export const useUsersQuery = (widget: MediaRequestListWidget|MediaRequestStatsWidget) => {
export const useUsersQuery = (widget: MediaRequestListWidget | MediaRequestStatsWidget) => {
const { name: configName } = useConfigContext();
return api.mediaRequest.users.useQuery(
{ configName: configName!, widget: widget },

4
src/widgets/media-server/MediaServerTile.tsx
View File

@@ -11,13 +11,13 @@ import {
} from '@mantine/core';
import { IconAlertTriangle, IconMovie } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { AppAvatar } from '~/components/AppAvatar';
import { useConfigContext } from '~/config/provider';
import { useGetMediaServers } from './useGetMediaServers';
import { defineWidget } from '../helper';
import { IWidget } from '../widgets';
import { TableRow } from './TableRow';
import { useGetMediaServers } from './useGetMediaServers';
const definition = defineWidget({
id: 'media-server',

2
src/widgets/media-server/NowPlayingDisplay.tsx
View File

@@ -6,11 +6,9 @@ import {
IconQuestionMark,
IconVideo,
} from '@tabler/icons-react';
import { GenericSessionInfo } from '~/types/api/media-server/session-info';
export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo }) => {
if (!session.currentlyPlaying) {
return null;
}

2
src/widgets/torrent/TorrentTile.tsx
View File

@@ -18,10 +18,10 @@ import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useTranslation } from 'next-i18next';
import { useCardStyles } from '~/components/layout/Common/useCardStyles';
import { MIN_WIDTH_MOBILE } from '~/constants/constants';
import { NormalizedDownloadQueueResponse } from '~/types/api/downloads/queue/NormalizedDownloadQueueResponse';
import { AppIntegrationType } from '~/types/app';
import { useGetDownloadClientsQueue } from '../download-speed/useGetNetworkSpeed';
import { defineWidget } from '../helper';
import { IWidget } from '../widgets';

2
src/widgets/useNet/UseNetTile.tsx
View File

@@ -6,11 +6,11 @@ import duration from 'dayjs/plugin/duration';
import { useSession } from 'next-auth/react';
import { useTranslation } from 'next-i18next';
import { useEffect, useState } from 'react';
import { useConfigContext } from '~/config/provider';
import { MIN_WIDTH_MOBILE } from '~/constants/constants';
import { humanFileSize } from '~/tools/humanFileSize';
import { AppIntegrationType } from '~/types/app';
import {
useGetUsenetInfo,
usePauseUsenetQueueMutation,

2
src/widgets/weather/WeatherIcon.tsx
View File

@@ -22,7 +22,7 @@ interface WeatherIconProps {
* @param code weather code from api
* @returns weather tile component
*/
export const WeatherIcon = ({ code, size=50 }: WeatherIconProps) => {
export const WeatherIcon = ({ code, size = 50 }: WeatherIconProps) => {
const { t } = useTranslation('modules/weather');
const { icon: Icon, name } =

2
src/widgets/weather/WeatherTile.tsx
View File

@@ -6,12 +6,12 @@ import {
IconCloudRain,
IconMapPin,
} from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';
import { api } from '~/utils/api';
import { defineWidget } from '../helper';
import { IWidget } from '../widgets';
import { WeatherIcon } from './WeatherIcon';
import { useTranslation } from 'react-i18next';
const definition = defineWidget({
id: 'weather',

1
src/widgets/widgets.ts
View File

@@ -8,7 +8,6 @@ import {
} from '@mantine/core';
import { Icon } from '@tabler/icons-react';
import React from 'react';
import { AreaType } from '~/types/area';
import { ShapeType } from '~/types/shape';