smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Updates to styles; misc bugfixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-10 14:37:44 -05:00
parent 9ef9cde336
commit c0b020a569
34 changed files with 475 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/Applications/AppItem.tsx Normal file
View File

@@ -0,0 +1,125 @@
import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
import { useElementSize } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import * as fa6 from 'react-icons/fa6';
import { FiAlertCircle } from 'react-icons/fi';
import * as si from 'react-icons/si';
import * as vsc from 'react-icons/vsc';
import { actionIconClasses, boxClasses, textClasses } from 'styles';
export function AppItem({
url,
icon,
name,
enabled,
scale,
linksActive,
}: {
url: string;
icon: string;
name: string;
enabled: number | null;
scale: number;
linksActive: boolean;
}) {
const { ref, width, height } = useElementSize();
const allIcons: any = { ...fa6, ...vsc, ...si };
const Icon = allIcons[icon];
const { isMobile } = useCommonHooks();
const [textDecoration, setTextDecoration] = useState<string>('none');
const [hover, setHover] = useState<boolean>(false);
const validUrl =
url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
return (
<Box
component='a'
href={linksActive ? validUrl : undefined}
onMouseOver={() => {
setTextDecoration('underline');
setHover(true);
}}
onMouseOut={() => {
setTextDecoration('none');
setHover(false);
}}
className={boxClasses.appItemBox}
h={scale * 64}
ref={ref}
style={{
justifyContent: width / height < 2 ? 'center' : undefined,
}}
>
{enabled === 0 && (
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
label='This app is disabled.'
>
<ActionIcon
className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses}
pos={'absolute'}
right={0}
size={'xl'}
variant='subtle'
style={{ zIndex: 1 }}
>
<FiAlertCircle color='red' />
</ActionIcon>
</Tooltip>
)}
{hover && (
<svg
style={{ position: 'absolute', borderRadius: '6px' }}
height='100%'
width='100%'
xmlns='http://www.w3.org/2000/svg'
>
<rect
rx={(scale * 64) / 8}
ry={(scale * 64) / 8}
height='100%'
width='100%'
strokeLinejoin='round'
/>
</svg>
)}
<Stack
// align={isMobile ? 'center' : undefined}
justify={isMobile ? 'center' : undefined}
style={{
marginRight: scale * 16,
marginLeft: scale * 16,
paddingTop: isMobile ? scale : scale * 16,
}}
>
{Icon && <Icon style={{ height: scale * 32, width: scale * 32 }} />}
</Stack>
{width / height > 2 && (
<Stack
justify='center'
style={{
overflow: 'hidden',
whiteSpace: 'nowrap',
gap: 0,
}}
>
<Text fz={scale * 11} className={textClasses.appName} classNames={textClasses}>
{name}
</Text>
<Text
fz={scale * 11}
className={textClasses.appUrl}
classNames={textClasses}
style={{
textDecoration: textDecoration,
}}
>
{url}
</Text>
</Stack>
)}
</Box>
);
}

1
src/components/index.ts
View File

@@ -1,3 +1,4 @@
export { AppItem } from './Applications/AppItem';
export { HelpModal } from './HelpModal/HelpModal';
export { Loading } from './Loading';
export { MainLayout } from './MainLayout';

12
src/hooks/useCommonHooks.ts
View File

@@ -25,6 +25,10 @@ export function useCommonHooks() {
key: 'appDensity',
defaultValue: 6,
});
const [appScale, setAppScale] = useLocalStorage<number>({
key: 'appScale',
defaultValue: 1,
});
const [bookmarkSort, setBookmarkSort] = useLocalStorage<string>({
key: 'bookmarkSort',
defaultValue: 'A>Z',
@@ -37,6 +41,10 @@ export function useCommonHooks() {
key: 'bookmarkDensity',
defaultValue: 6,
});
const [bookmarkScale, setBookmarkScale] = useLocalStorage<number>({
key: 'bookmarkScale',
defaultValue: 1,
});
const [currentTheme, setCurrentTheme] = useLocalStorage<string>({
key: 'theme',
defaultValue: 'random',
@@ -134,12 +142,16 @@ export function useCommonHooks() {
setAppSort,
appDensity,
setAppDensity,
appScale,
setAppScale,
bookmarkSort,
setBookmarkSort,
bookmarkFilter,
setBookmarkFilter,
bookmarkDensity,
setBookmarkDensity,
bookmarkScale,
setBookmarkScale,
currentTheme,
setCurrentTheme,
currentThemePlaylist,

80
src/pages/homepage/components/Applications/AppItem.tsx
View File

@@ -1,80 +0,0 @@
import { Box, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import * as fa6 from 'react-icons/fa6';
import * as si from 'react-icons/si';
import * as vsc from 'react-icons/vsc';
import { boxClasses, textClasses } from 'styles';
function AppItem({ url, icon, name }: { url: string; icon: string; name: string }) {
const allIcons: any = { ...fa6, ...vsc, ...si };
const Icon = allIcons[icon];
const { isMobile } = useCommonHooks();
const [textDecoration, setTextDecoration] = useState<string>('none');
const [hover, setHover] = useState<boolean>(false);
const validUrl =
url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
return (
<Box
component='a'
href={validUrl}
onMouseOver={() => {
setTextDecoration('underline');
setHover(true);
}}
onMouseOut={() => {
setTextDecoration('none');
setHover(false);
}}
className={boxClasses.appItemBox}
h={'64px'}
>
{hover && (
<svg
style={{ position: 'absolute', borderRadius: '6px' }}
height='100%'
width='100%'
xmlns='http://www.w3.org/2000/svg'
>
<rect rx='8' ry='8' height='100%' width='100%' strokeLinejoin='round' />
</svg>
)}
<Stack
align={isMobile ? 'center' : undefined}
justify={isMobile ? 'center' : undefined}
style={{
width: isMobile ? '100%' : undefined,
marginRight: isMobile ? 0 : '1rem',
marginLeft: isMobile ? 0 : '1rem',
paddingTop: isMobile ? 0 : '1rem',
}}
>
{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
</Stack>
<Stack
justify='center'
style={{
overflow: 'hidden',
whiteSpace: 'nowrap',
gap: 0,
flex: 1,
}}
>
<Text className={textClasses.appName} classNames={textClasses}>
{name}
</Text>
<Text
className={textClasses.appUrl}
classNames={textClasses}
style={{
textDecoration: textDecoration,
}}
>
{url}
</Text>
</Stack>
</Box>
);
}
export default AppItem;

13
src/pages/homepage/components/Applications/Applications.tsx
View File

@@ -1,15 +1,15 @@
import { Stack, Text } from '@mantine/core';
import { AppItem } from 'components';
import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
import type { Application } from 'types';
import AppItem from './AppItem';
function Applications({ contentType }: { contentType: string[] }) {
const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
endpoint: 'api/enabledApplications',
});
const { appSort, appDensity } = useCommonHooks();
const { appSort, appDensity, appScale } = useCommonHooks();
const [applications, setApplications] = useState<Application[]>([]);
useEffect(() => {
@@ -42,7 +42,11 @@ function Applications({ contentType }: { contentType: string[] }) {
<>
{applications.length > 0 && contentType.length > 0 && (
<Stack gap={0}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
<Text
fz={appScale * 20}
className={textClasses.sectionTitle}
classNames={textClasses}
>
Applications
</Text>
<Stack
@@ -65,6 +69,9 @@ function Applications({ contentType }: { contentType: string[] }) {
name={application.name}
url={application.url}
icon={application.icon}
enabled={application.enabled}
scale={appScale}
linksActive
/>
);
})}

14
src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx
View File

@@ -6,9 +6,11 @@ import BookmarkItem from './BookmarkItem';
function BookmarkGroups({
bookmarks,
category,
bookmarkScale,
}: {
bookmarks: Bookmark[];
category: string;
bookmarkScale: number;
}) {
return (
<Stack
@@ -18,13 +20,21 @@ function BookmarkGroups({
whiteSpace: 'nowrap',
}}
>
<Text className={textClasses.bookmarkCategory} classNames={textClasses}>
<Text
fz={bookmarkScale * 14}
className={textClasses.bookmarkCategory}
classNames={textClasses}
>
{category}
</Text>
{bookmarks
?.toSorted((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))
.map((bookmark: Bookmark) => (
<BookmarkItem key={bookmark.name} bookmark={bookmark} />
<BookmarkItem
key={bookmark.name}
bookmark={bookmark}
bookmarkScale={bookmarkScale}
/>
))}
</Stack>
);

9
src/pages/homepage/components/Bookmarks/BookmarkItem.tsx
View File

@@ -2,13 +2,20 @@ import { Text } from '@mantine/core';
import { textClasses } from 'styles';
import type { Bookmark } from 'types';
function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
function BookmarkItem({
bookmark,
bookmarkScale,
}: {
bookmark: Bookmark;
bookmarkScale: number;
}) {
return (
<Text
className={textClasses.bookmarkItem}
classNames={textClasses}
component='a'
href={bookmark.url}
fz={bookmarkScale * 14}
>
{bookmark.name}
</Text>

9
src/pages/homepage/components/Bookmarks/Bookmarks.tsx
View File

@@ -12,7 +12,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: 'api/bookmarkCategories',
});
const { bookmarkSort, bookmarkDensity } = useCommonHooks();
const { bookmarkSort, bookmarkDensity, bookmarkScale } = useCommonHooks();
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
@@ -59,7 +59,11 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
groups?.length > 0 &&
contentType.length > 0 && (
<Stack gap={0}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
<Text
fz={bookmarkScale * 20}
className={textClasses.sectionTitle}
classNames={textClasses}
>
Bookmarks
</Text>
<Stack
@@ -85,6 +89,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
(bookmark: Bookmark) =>
bookmark.category === category.categoryName,
)}
bookmarkScale={bookmarkScale}
/>
);
})}

30
src/pages/homepage/components/SettingsButton/SettingsButton.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Group, Menu, Stack } from '@mantine/core';
import { Box, Button, Group, Menu, Overlay, Stack } from '@mantine/core';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiMenu, FiSettings } from 'react-icons/fi';
@@ -31,12 +31,16 @@ function SettingsButton() {
setAppSort,
appDensity,
setAppDensity,
appScale,
setAppScale,
bookmarkSort,
setBookmarkSort,
bookmarkFilter,
setBookmarkFilter,
bookmarkDensity,
setBookmarkDensity,
bookmarkScale,
setBookmarkScale,
} = useCommonHooks();
const handleWakeRequest = () => {
@@ -96,12 +100,20 @@ function SettingsButton() {
width: isMobile ? '100%' : undefined,
}}
>
<WakeOnLan
wolClients={wolClients}
selectedClient={selectedClient}
setSelectedClient={setSelectedClient}
handleWakeRequest={handleWakeRequest}
/>
<Box
pos={'relative'}
style={{ filter: wolClients.length === 0 ? 'grayscale(1)' : undefined }}
>
{wolClients.length === 0 && (
<Overlay opacity={0.75} style={{ borderRadius: '10px' }} />
)}
<WakeOnLan
wolClients={wolClients}
selectedClient={selectedClient}
setSelectedClient={setSelectedClient}
handleWakeRequest={handleWakeRequest}
/>
</Box>
<ThemingCard />
</Stack>
<Stack>
@@ -114,6 +126,8 @@ function SettingsButton() {
setSort={setAppSort}
density={appDensity}
setDensity={setAppDensity}
scale={appScale}
setScale={setAppScale}
/>
<SettingsCard
categories={categories}
@@ -124,6 +138,8 @@ function SettingsButton() {
setSort={setBookmarkSort}
density={bookmarkDensity}
setDensity={setBookmarkDensity}
scale={bookmarkScale}
setScale={setBookmarkScale}
/>
</Stack>
</Group>

52
src/pages/homepage/components/SettingsButton/SettingsCard.tsx
View File

@@ -18,6 +18,8 @@ function SettingsCard({
setSort,
density,
setDensity,
scale,
setScale,
}: {
categories: ComboboxItem[];
sectionTitle: string;
@@ -27,6 +29,8 @@ function SettingsCard({
setSort: any;
density: any;
setDensity: any;
scale: any;
setScale: any;
}) {
return (
<Stack
@@ -53,19 +57,41 @@ function SettingsCard({
>
{sectionTitle}
</Text>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
value={density}
onChange={(value) => setDensity(value)}
min={1}
max={8}
/>
</Stack>
<Group w={'100%'} justify='center'>
<Stack w={scale !== undefined ? '60%' : '90%'} align='center'>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
value={density}
onChange={(value) => setDensity(value)}
min={1}
max={8}
marks={[{ value: 6, label: 'Default' }]}
onDoubleClick={() => setDensity(6)}
/>
</Stack>
{scale !== undefined && (
<Stack w={'33%'} align='center'>
<Text fz={'.875rem'} mt={'1rem'}>
Scale
</Text>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
value={scale}
onChange={(value) => setScale(value)}
step={0.1}
min={0.5}
max={2}
marks={[{ value: 1, label: 'Default' }]}
onDoubleClick={() => setScale(1)}
/>
</Stack>
)}
</Group>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'

2
src/pages/homepage/components/SettingsButton/WakeOnLanCard.tsx
View File

@@ -27,7 +27,7 @@ function WakeOnLan({
<Button
classNames={buttonClasses}
className={buttonClasses.wakeButton}
disabled={!wolClients?.length || selectedClient === null}
disabled={!wolClients?.length || selectedClient?.macAddress === undefined}
onClick={() => {
handleWakeRequest();
}}

109
src/pages/settings/components/Applications/AppSettingsItem.tsx
View File

@@ -1,109 +0,0 @@
import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import { FiAlertCircle } from 'react-icons/fi';
import { actionIconClasses, boxClasses, textClasses } from 'styles';
function AppSettingsItem({
url,
icon,
name,
enabled,
allIcons,
}: {
url: string;
icon: string;
name: string;
enabled: number;
allIcons: any;
}) {
const Icon = allIcons[icon];
const [textDecoration, setTextDecoration] = useState<string>('none');
const [hover, setHover] = useState<boolean>(false);
const { isMobile } = useCommonHooks();
return (
<Box pos={'relative'}>
{enabled === 0 && (
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
label='This app is disabled.'
>
<ActionIcon
className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses}
pos={'absolute'}
right={0}
size={'xl'}
variant='subtle'
style={{ zIndex: 1 }}
>
<FiAlertCircle color='red' />
</ActionIcon>
</Tooltip>
)}
<Box
component='a'
onMouseOver={() => {
setTextDecoration('underline');
setHover(true);
}}
onMouseOut={() => {
setTextDecoration('none');
setHover(false);
}}
className={boxClasses.appItemBox}
>
{hover && (
<svg
style={{ position: 'absolute', borderRadius: '6px' }}
height='100%'
width='100%'
xmlns='http://www.w3.org/2000/svg'
>
<rect rx='16' ry='16' height='100%' width='100%' strokeLinejoin='round' />
</svg>
)}
<Stack
align={isMobile ? 'center' : undefined}
justify={isMobile ? 'center' : undefined}
style={{
height: '128px',
width: isMobile ? '100%' : undefined,
marginRight: isMobile ? '0' : '1rem',
marginLeft: isMobile ? '0' : '2rem',
paddingTop: isMobile ? '0' : '2rem',
}}
>
{Icon && <Icon style={{ height: '4rem', width: '4rem' }} />}
</Stack>
<Stack
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
overflow: 'hidden',
gap: 0,
}}
>
<Text fz={'1.5rem'} className={textClasses.appName} classNames={textClasses}>
{name}
</Text>
<Text
fz={'1rem'}
className={textClasses.appUrl}
classNames={textClasses}
style={{
textDecoration: textDecoration,
}}
>
{url}
</Text>
</Stack>
</Box>
</Box>
);
}
export default AppSettingsItem;

24
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -15,6 +15,7 @@ import {
} from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AppItem } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import * as fa6 from 'react-icons/fa6';
@@ -25,7 +26,6 @@ import type { Application } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import AppSettingsItem from './AppSettingsItem';
import DebouncedApplication from './DebouncedApplication';
const ApplicationSettings = () => {
@@ -267,7 +267,11 @@ const ApplicationSettings = () => {
}
/>
<DragDropContext onDragEnd={onDragEnd}>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
align='center'
>
{applications.length > 0 ? (
<Droppable droppableId={'groupList'}>
{(provided) => (
@@ -303,12 +307,14 @@ const ApplicationSettings = () => {
>
#{index + 1}
</Text>
<AppSettingsItem
<AppItem
key={application.name}
name={application.name}
url={application.url}
icon={application.icon}
name={application.name}
enabled={application.enabled}
allIcons={allIcons}
scale={2}
linksActive={false}
/>
</Box>
</Box>
@@ -331,12 +337,14 @@ const ApplicationSettings = () => {
e.stopPropagation();
}}
>
<AppSettingsItem
<AppItem
key={application.name}
name={application.name}
url={application.url}
icon={application.icon}
name={application.name}
enabled={application.enabled}
allIcons={allIcons}
scale={2}
linksActive={false}
/>
</Box>
</Popover.Target>

79
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -1,23 +1,20 @@
import {
ActionIcon,
Card,
type ComboboxItem,
type ComboboxLikeRenderOptionInput,
Group,
Select,
Stack,
Switch,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiPower, FiTrash } from 'react-icons/fi';
import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles';
import { cardClasses, selectClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
import ManagementPill from '../Shared/ManagementPill';
function DebouncedApplication({
application,
@@ -79,70 +76,16 @@ function DebouncedApplication({
</Stack>
}
/>
<Group
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
width: 'fit-content',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
padding: '.5rem',
borderRadius: '10px',
color: 'var(--mantine-color-search-0)',
backdropFilter: 'brightness(0.5)',
<ManagementPill
enabled={app.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
}}
>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Enabled'}
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
withArrow
>
<Switch
className={switchClasses.enable}
classNames={switchClasses}
defaultChecked={app.enabled === 1}
defaultValue={app.enabled}
thumbIcon={
<FiPower
style={{
color: app.enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
}}
/>
}
onChange={(event) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
}}
/>
</Tooltip>
|
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
>
<ActionIcon
color='red'
onClick={() => {
setIsOpen(true);
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
</Group>
openModal={openModal}
/>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'Name'}

2
src/pages/settings/components/Bookmarks/BookmarkSettingsItem.tsx
View File

@@ -10,7 +10,7 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
style={{
cursor: 'pointer',
borderRadius: '4px',
color: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
padding: '.5rem',
}}

12
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -203,7 +203,11 @@ const BookmarkSettings = () => {
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
align='center'
>
<Droppable droppableId={'groupList'}>
{(provided) => (
<Stack
@@ -279,7 +283,11 @@ const BookmarkSettings = () => {
</Stack>
</DragDropContext>
) : (
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
align='center'
>
<Group w={isMobile ? undefined : '80%'} align='start' justify='center'>
{groups.length > 0 ? (
groups?.map((group: BookmarkGroup) => (

89
src/pages/settings/components/Messages/DebouncedMessage.tsx
View File

@@ -1,19 +1,10 @@
import {
ActionIcon,
Card,
Group,
Stack,
Switch,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { Card, Stack, Text, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { FiPower, FiTrash } from 'react-icons/fi';
import { cardClasses, switchClasses, textInputClasses } from 'styles';
import { cardClasses, textInputClasses } from 'styles';
import type { Message } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
import ManagementPill from '../Shared/ManagementPill';
function DebouncedMessage({
label,
@@ -56,72 +47,16 @@ function DebouncedMessage({
</Stack>
}
/>
<Group
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
width: 'fit-content',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
padding: '.5rem',
borderRadius: '10px',
color: 'var(--mantine-color-search-0)',
backdropFilter: 'brightness(0.5)',
<ManagementPill
enabled={message.customGreeting}
onChange={() => {
setMessage({
...message,
customGreeting: message.customGreeting === 1 ? 0 : 1,
});
}}
>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={message.customGreeting === 1 ? 'Enabled' : 'Disabled'}
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
withArrow
>
<Switch
className={switchClasses.enable}
classNames={switchClasses}
defaultChecked={message.customGreeting === 1}
defaultValue={message.customGreeting}
thumbIcon={
<FiPower
style={{
color:
message.customGreeting === 1
? 'var(--mantine-color-accent-0)'
: 'red',
}}
/>
}
onChange={(event) => {
setMessage({
...message,
customGreeting: event.target.checked ? 1 : 0,
});
}}
/>
</Tooltip>
|
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
>
<ActionIcon
color='red'
onClick={() => {
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
</Group>
openModal={openModal}
/>
<TextInput
label={label}
disabled={message.customGreeting === 0}

6
src/pages/settings/components/Messages/Messages.tsx
View File

@@ -120,7 +120,11 @@ const MessageSettings = () => {
</Stack>
}
/>
<Stack mb={isMobile ? '6rem' : undefined} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : undefined}
align='center'
>
<Grid w={'75%'}>
{messages.length > 0 ? (
messages?.map((message: Message) => (

2
src/pages/settings/components/Personalization/Personalization.tsx
View File

@@ -66,7 +66,7 @@ const PersonalizationSettings = () => {
isLoading={false}
setIsLoading={() => {}}
/>
<Stack align='center'>
<Stack align='center' mt={'6rem'}>
<Grid w={'75%'}>
{personalIsFetching && (
<Overlay

7
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -152,7 +152,12 @@ const SearchProviderSettings = () => {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}>
{providers.length > 0 ? (
providers?.map((provider: Provider) => (

76
src/pages/settings/components/Shared/ManagementPill.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { ActionIcon, Group, Switch, Tooltip } from '@mantine/core';
import { FiPower, FiTrash } from 'react-icons/fi';
import { switchClasses } from 'styles';
function ManagementPill({
enabled,
onChange,
openModal,
}: {
enabled: number;
onChange: any;
openModal: () => void;
}) {
return (
<Group
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
width: 'fit-content',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
padding: '.5rem',
borderRadius: '10px',
color: 'var(--mantine-color-search-0)',
backdropFilter: 'brightness(0.5)',
}}
>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={enabled === 1 ? 'Enabled' : 'Disabled'}
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
withArrow
>
<Switch
className={switchClasses.enable}
classNames={switchClasses}
defaultChecked={enabled === 1}
defaultValue={enabled}
thumbIcon={
<FiPower
style={{
color: enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
}}
/>
}
onChange={onChange}
/>
</Tooltip>
|
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
>
<ActionIcon
color='red'
onClick={() => {
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
</Group>
);
}
export default ManagementPill;

4
src/pages/settings/components/Shared/SettingsHeader.tsx
View File

@@ -58,6 +58,10 @@ function SettingsHeader({
paddingTop: '1.5rem',
paddingBottom: '1.5rem',
paddingLeft: '1rem',
height: 'min-content',
width: '100%',
marginTop: 0,
position: 'absolute',
}}
>
<Group w={isMobile ? undefined : '100%'}>

11
src/pages/settings/components/Theming/BackgroundModal.tsx
View File

@@ -12,7 +12,7 @@ import {
Text,
TextInput,
} from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { useDebouncedValue, useElementSize } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { useFileUploadAPI } from 'hooks/useAPI';
import { useEffect, useState } from 'react';
@@ -38,6 +38,7 @@ function BackgroundModal({
backgroundList: string[];
inUseBackgrounds: string[];
}) {
const { ref, width } = useElementSize();
const [background, setBackground] = useState<File | null>(null);
const [fileName, setFileName] = useState<string>('');
const [newFileName, setNewFileName] = useState<string>('');
@@ -173,7 +174,7 @@ function BackgroundModal({
backgroundFilter: 'blur(5px)',
}}
>
<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
<SimpleGrid w={'100%'} cols={3} p={'.75rem'}>
{backgroundList
.filter((background) => background !== 'None')
.filter(
@@ -195,11 +196,17 @@ function BackgroundModal({
top: '-.5rem',
left: 0,
zIndex: 3,
boxShadow: '2px -2px var(--mantine-color-primary-0)',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
maxWidth: width,
}}
>
{background}
</Text>
<Card
ref={ref}
style={{
aspectRatio: '16/9',
width: '100%',

11
src/pages/settings/components/Theming/ThemeCard.tsx
View File

@@ -1,5 +1,5 @@
import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useDisclosure, useElementSize } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
@@ -18,6 +18,7 @@ function ThemeCard({
allThemes: Theme[];
themePlaylists: ThemePlaylist[];
}) {
const { ref, width } = useElementSize();
const [hover, setHover] = useState(false);
const [shiftEdit, setShiftEdit] = useState<number>(0);
const [shiftShuffle, setShiftShuffle] = useState<number>(0);
@@ -73,18 +74,24 @@ function ThemeCard({
left: 6,
paddingRight: '.25rem',
paddingLeft: '.25rem',
backgroundColor: cardTheme.borderColor,
backgroundColor: cardTheme.backgroundColor,
borderRadius: '4px',
color:
cardTheme.borderColor === cardTheme.primaryColor
? cardTheme.accentColor
: cardTheme.primaryColor,
zIndex: 3,
boxShadow: `2px -2px ${cardTheme.borderColor}`,
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
maxWidth: width,
}}
>
{cardTheme.name}
</Text>
<Button
ref={ref}
w={'275px'}
h={'115px'}
disabled={currentTheme === 'random'}

8
src/pages/settings/components/Theming/ThemeModal.tsx
View File

@@ -171,7 +171,7 @@ function ThemeModal({
</Modal.Header>
<Modal.Body>
<Group p={'2rem'} w={'100%'} align='flex-start' justify='space-between'>
<Stack display={'flex'} pos={'relative'} w={'70%'}>
<Stack display={'flex'} pos={'relative'} w={isMobile ? '100%' : '70%'}>
<ThemeModalContent selectedTheme={designerTheme} />
<Tooltip
label={'Change Primary Color'}
@@ -242,7 +242,7 @@ function ThemeModal({
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
top={'4.5rem'}
right={'7rem'}
right={'15%'}
/>
</Tooltip>
<Tooltip
@@ -260,7 +260,7 @@ function ThemeModal({
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
top={'3.25rem'}
left={'14.5rem'}
left={'6.5rem'}
/>
</Tooltip>
<Tooltip
@@ -282,7 +282,7 @@ function ThemeModal({
</Tooltip>
</Stack>
<Stack
w={'28%'}
w={isMobile ? '100%' : '28%'}
h={'436px'}
p={'1rem'}
style={{

2
src/pages/settings/components/Theming/ThemePlaylists.tsx
View File

@@ -97,7 +97,7 @@ function ThemePlaylists() {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack>
<Stack mt={isMobile ? '10rem' : '6rem'}>
{allThemeData && (
<>
<Group justify='center' align='center' pos={'relative'}>

28
src/pages/settings/components/Theming/Themes.tsx
View File

@@ -170,7 +170,7 @@ function ThemesSettings() {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack mt={'1rem'} align='center'>
<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
<Group
w={'85%'}
justify='center'
@@ -258,24 +258,34 @@ function ThemesSettings() {
bottom: isMobile ? '3.25rem' : 0,
}}
>
<Group w={isMobile ? undefined : '100%'} justify='space-between'>
<Group w={'100%'} justify={isMobile ? 'center' : 'space-between'}>
<Text
miw={isMobile ? 100 : undefined}
w={'fit-content'}
className={textClasses.settingsSubTitle}
classNames={textClasses}
fz={isMobile ? '1rem' : undefined}
style={
isMobile
? {
position: 'absolute',
top: -16,
left: 4,
padding: '.25rem',
backgroundColor: 'var(--mantine-color-background-0)',
backdropFilter: 'blur(5px) brightness(.25)',
borderRadius: '10px',
boxShadow: '2px -2px var(--mantine-color-accent-0)',
}
: undefined
}
>
Current Settings:
</Text>
<Group
pos={isMobile ? undefined : 'absolute'}
w={isMobile ? undefined : '100%'}
justify='center'
>
<Group>
<Group>
<Text
style={{
color: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-primary-0)',
fontWeight: 'bold',
}}
>

14
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -127,7 +127,12 @@ const WolClientSettings = () => {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}>
{wolClients.length > 0 ? (
wolClients?.map((client: WolClient) => (
@@ -143,12 +148,7 @@ const WolClientSettings = () => {
offset={isMobile ? -100 : 0}
>
<Popover.Target>
<Group
onClick={(e) => {
e.stopPropagation();
}}
justify='center'
>
<Group justify='center'>
<WolClientSettingsItem client={client} />
</Group>
</Popover.Target>

2
src/styles/Box.module.css
View File

@@ -13,14 +13,12 @@
.appItemBox {
display: flex;
flex: 1;
margin: 0;
backdrop-filter: blur(5px) brightness(1.2);
border-radius: 6px;
font-size: 2rem;
text-transform: uppercase;
overflow: hidden;
text-overflow: ellipsis;
}
.appItemBox rect {

1
src/styles/Slider.module.css
View File

@@ -1,4 +1,5 @@
.default {
width: 100%;
.trackContainer {
.track::before {
background-color: var(--mantine-color-border-0);

9
src/styles/Switch.module.css
View File

@@ -1,13 +1,4 @@
.default {
@media (max-width: 600px) {
&.root {
.label {
position: absolute;
top: -22px;
left: -8px;
}
}
}
&.root {
.label {
font-size: 1rem;

9
src/styles/Text.module.css
View File

@@ -29,13 +29,10 @@
.sectionTitle {
&.root {
text-decoration: underline;
font-size: 1.25rem;
font-weight: 200;
font-style: italic;
height: 10px;
text-transform: uppercase;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
color: var(--mantine-color-primary-0);
}
}
@@ -53,6 +50,8 @@
color: var(--mantine-color-primary-0);
font-family: "Jost", sans-serif;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}
}
@@ -63,12 +62,13 @@
text-transform: uppercase;
color: var(--mantine-color-accent-0);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}
}
.bookmarkCategory {
&.root {
font-size: .875rem;
color: var(--mantine-color-accent-0);
text-transform: uppercase;
margin-top: 1rem;
@@ -80,7 +80,6 @@
.bookmarkItem {
&.root {
display: block;
font-size: .875rem;
line-height: 2;
color: var(--mantine-color-primary-0);
text-overflow: ellipsis;