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

Bugfixes and updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-24 16:20:29 -05:00
parent 81aecb261a
commit 9aa8dba56c
36 changed files with 1000 additions and 967 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/HelpModal/HelpModal.tsx
View File

@@ -1,4 +1,4 @@
import { Divider, Modal, Stack } from '@mantine/core';
import { Modal, Stack } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { modalClasses } from 'styles';
import type { Application, Provider } from 'types';
@@ -56,7 +56,7 @@ export function HelpModal({
};
})}
/>
<Divider my={'.5rem'} color={'var(--mantine-color-accent-0)'} />
<Stack my={'.5rem'} />
<HelpSection
name={'Available Applications'}
items={applicationData.map((application: Application) => {

5
src/components/HelpModal/HelpSection.tsx
View File

@@ -1,4 +1,4 @@
import { Divider, Group } from '@mantine/core';
import { Group } from '@mantine/core';
import type { SearchShortcut } from 'types';
import HintItem from './HintItem';
@@ -10,7 +10,7 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
zIndex: 0,
padding: '.5rem',
marginTop: 0,
marginBottom: '-2rem',
marginBottom: '-1.25rem',
borderRadius: '8px',
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-border-0)',
@@ -18,7 +18,6 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
>
{name}
</h3>
<Divider py={'.5rem'} color={'var(--mantine-color-accent-0)'} />
<Group
style={{
width: '100%',

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

@@ -42,7 +42,6 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
align={isMobile ? 'center' : undefined}
justify={isMobile ? 'center' : undefined}
style={{
height: '64px',
width: isMobile ? '100%' : undefined,
marginRight: isMobile ? 0 : '1rem',
marginLeft: isMobile ? 0 : '1rem',

4
src/pages/homepage/components/Header/Header.tsx
View File

@@ -72,7 +72,7 @@ function Header({
<Stack
style={{
borderBottom: '0px solid',
zIndex: '1',
zIndex: 1,
clear: 'both',
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
@@ -123,7 +123,6 @@ function Header({
}}
>
<Group
gap={0}
align='end'
style={{
display: 'flex',
@@ -131,6 +130,7 @@ function Header({
bottom: isMobile ? -32 : 0,
right: 16,
cursor: 'pointer',
gap: 0,
}}
onClick={openWeatherModal}
>

233
src/pages/homepage/components/Search/Search.tsx
View File

@@ -1,4 +1,4 @@
import { Group, type OptionsFilter, Select, Stack, Text } from '@mantine/core';
import { Group, type OptionsFilter, Overlay, Select, Stack, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { HelpModal, WeatherModal } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -61,7 +61,7 @@ export default function Search({
searchValue,
setSearchValue,
} = useCommonHooks();
const [placeholderValue, setPlaceholderValue] = useState('');
const [placeholderValue, setPlaceholderValue] = useState<string>('');
const [value, setValue] = useState(0);
const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
@@ -322,118 +322,125 @@ export default function Search({
}, [searchValue]);
return (
<Stack
style={{
height: '100px',
backgroundColor: 'transparent',
textAlign: 'center',
position: 'relative',
padding: '.3rem',
display: 'inline-block',
gap: 0,
}}
>
<Select
classNames={selectClasses}
className={selectClasses.search}
data={searchHistory.map((item: SearchHistoryItem) => ({
label: `${item.provider}`,
value: `${item.prefix} ${item.searchTerm} ${item.dateTimeStamp}`,
...item,
}))}
filter={optionsFilter}
value={searchValue}
searchValue={searchValue}
placeholder={placeholderValue}
nothingFoundMessage={
<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
}
data-active={searchValue !== ''}
dropdownOpened={dropdownOpened}
comboboxProps={{
transitionProps: { transition: 'fade', duration: 200 },
<>
{dropdownOpened && <Overlay pos={'absolute'} h={'100%'} w={'100%'} blur={1} />}
<Stack
style={{
height: '100px',
backgroundColor: 'transparent',
textAlign: 'center',
position: 'relative',
padding: '.3rem',
display: 'inline-block',
gap: 0,
}}
spellCheck='true'
searchable
autoFocus={!isMobile}
leftSection={providerLabel}
rightSection={<Stack />}
renderOption={(item: any) => {
const Icon = allIcons[item.option.icon];
return !searchValue.startsWith('!') ? (
<SearchSelectItem
item={item}
handleSearchHistoryItem={handleSearchHistoryItem}
searchEndpoint={searchEndpoint}
/>
) : (
<Group
pos={'relative'}
m={0}
p={0}
gap={0}
justify='center'
w={'100%'}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleAppLaunchItem(item);
}}
>
<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
Launch
</Text>
{Icon && (
<Icon
style={{
color: 'var(--mantine-color-primary-0)',
height: '2rem',
width: '2rem',
}}
/>
)}
<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
{item.option.name}
</Text>
</Group>
);
}}
onBlur={() => {
setPlaceholderValue('');
setListIndex(0);
closeDropdown();
}}
onFocus={() => {
if (searchValue !== '') {
openDropdown();
>
<Select
classNames={selectClasses}
data={searchHistory.map((item: SearchHistoryItem) => ({
label: `${item.provider}`,
value: `${item.prefix} ${item.searchTerm} ${item.dateTimeStamp}`,
...item,
}))}
filter={optionsFilter}
value={searchValue}
searchValue={searchValue}
placeholder={placeholderValue}
nothingFoundMessage={
<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
}
}}
onKeyDown={(e) => {
if (e.key === 'Tab') {
e.preventDefault();
}
}}
onInput={onInput}
onKeyUp={handleKeyUp}
/>
<HelpModal
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
applicationData={applications}
providerData={providers}
providerModalOpened={providerModalOpened}
closeProviderModal={closeProviderModal}
/>
<WeatherModal
current={current}
extendedForecast={extendedForecast}
weatherModalOpened={weatherModalOpened}
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
closeWeatherModal={closeWeatherModal}
/>
</Stack>
data-active={searchValue !== ''}
dropdownOpened={dropdownOpened}
comboboxProps={{
transitionProps: { transition: 'fade', duration: 200 },
}}
styles={{
input: {
zIndex: 1000,
},
}}
spellCheck={true}
searchable
autoFocus={!isMobile}
leftSection={providerLabel}
rightSection={<div />}
renderOption={(item: any) => {
const Icon = allIcons[item.option.icon];
return !searchValue.startsWith('!') ? (
<SearchSelectItem
item={item}
handleSearchHistoryItem={handleSearchHistoryItem}
searchEndpoint={searchEndpoint}
/>
) : (
<Group
pos={'relative'}
m={0}
p={0}
gap={0}
justify='center'
w={'100%'}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleAppLaunchItem(item);
}}
>
<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
Launch
</Text>
{Icon && (
<Icon
style={{
color: 'var(--mantine-color-primary-0)',
height: '2rem',
width: '2rem',
}}
/>
)}
<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
{item.option.name}
</Text>
</Group>
);
}}
onBlur={() => {
setPlaceholderValue('');
setListIndex(0);
closeDropdown();
}}
onFocus={() => {
if (searchValue !== '') {
openDropdown();
}
}}
onKeyDown={(e) => {
if (e.key === 'Tab') {
e.preventDefault();
}
}}
onInput={onInput}
onKeyUp={handleKeyUp}
/>
<HelpModal
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
applicationData={applications}
providerData={providers}
providerModalOpened={providerModalOpened}
closeProviderModal={closeProviderModal}
/>
<WeatherModal
current={current}
extendedForecast={extendedForecast}
weatherModalOpened={weatherModalOpened}
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
closeWeatherModal={closeWeatherModal}
/>
</Stack>
</>
);
}

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

@@ -1,32 +1,13 @@
import {
ActionIcon,
Button,
type ComboboxItem,
Group,
Menu,
MultiSelect,
Overlay,
Select,
Slider,
Stack,
Text,
Tooltip,
} from '@mantine/core';
import { Button, Group, Menu, Stack } from '@mantine/core';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa';
import { FiMenu, FiPower, FiSettings, FiShuffle } from 'react-icons/fi';
import { FiMenu, FiSettings } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';
import {
actionIconClasses,
buttonClasses,
menuClasses,
multiSelectClasses,
selectClasses,
sliderClasses,
stackClasses,
} from 'styles';
import type { AppCategory, Theme, ThemePlaylist, WolClient } from 'types';
import { buttonClasses, menuClasses } from 'styles';
import type { AppCategory, WolClient } from 'types';
import SettingsCard from './SettingsCard';
import ThemingCard from './ThemingCard';
import WakeOnLan from './WakeOnLanCard';
function SettingsButton() {
const { data: appCategoryData, isFetched: appCategoryDataIsFetched } = useQueryAPI({
@@ -36,24 +17,14 @@ function SettingsButton() {
endpoint: 'api/wolClients',
});
const [wolClients, setWolClients] = useState<WolClient[]>([]);
const { data: allThemeData, isFetched: allThemeDataIsFetched } = useQueryAPI({
endpoint: 'api/themes',
});
const { data: themePlaylistData } = useQueryAPI({
endpoint: 'api/themePlaylists',
});
const { mutateAsync } = useMutationAPI();
const [allThemes, setAllThemes] = useState<Theme[]>([]);
const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
const [selectedClient] = useState<WolClient>(wolClientData?.[0]);
const [overlayOpened, setOverlayOpened] = useState(false);
const navigate = useNavigate();
const {
currentTheme,
setCurrentTheme,
setThemeName,
handleThemeChange,
theme,
isMobile,
appFilter,
setAppFilter,
appSort,
@@ -66,10 +37,8 @@ function SettingsButton() {
setBookmarkFilter,
bookmarkDensity,
setBookmarkDensity,
isMobile,
currentThemePlaylist,
setCurrentThemePlaylist,
} = useCommonHooks();
const handleWakeRequest = () => {
mutateAsync({
method: 'POST',
@@ -94,459 +63,84 @@ function SettingsButton() {
}
}, [wolClientData, wolClientDataIsFetched]);
useEffect(() => {
if (allThemeData && allThemeDataIsFetched) {
setAllThemes(allThemeData);
}
}, [allThemeData, allThemeDataIsFetched]);
return (
<>
{overlayOpened && (
<Overlay
pos={'fixed'}
blur={3}
onTouchStart={(e) => {
e.stopPropagation();
}}
/>
)}
<Menu
classNames={menuClasses}
width={isMobile ? '98%' : 'auto'}
withArrow
shadow='md'
position='top'
onOpen={() => setOverlayOpened(true)}
onClose={() => setOverlayOpened(false)}
<Menu
classNames={menuClasses}
width={isMobile ? '98%' : 'auto'}
withArrow
shadow='md'
position='top'
withOverlay
overlayProps={{
blur: 5,
}}
>
<Menu.Target>
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
<FiMenu />
</Button>
</Menu.Target>
<Menu.Dropdown
style={{
backgroundColor:
theme.backgroundImage.toLowerCase() !== 'none' &&
theme.backgroundImage !== undefined
? 'transparent'
: 'var(--mantine-color-background-0)',
}}
>
<Menu.Target>
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
<FiMenu />
<Group p={'1rem'} gap={12}>
<Stack
justify='center'
align='center'
style={{
display: 'flex',
flexDirection: isMobile ? 'row' : 'column',
width: isMobile ? '100%' : undefined,
}}
>
<WakeOnLan
wolClients={wolClients}
selectedClient={selectedClient}
handleWakeRequest={handleWakeRequest}
/>
<ThemingCard />
</Stack>
<Stack display={'flex'} align='center'>
<SettingsCard
categories={categories}
sectionTitle={'Applications'}
filter={appFilter}
setFilter={setAppFilter}
sort={appSort}
setSort={setAppSort}
density={appDensity}
setDensity={setAppDensity}
/>
<SettingsCard
categories={categories}
sectionTitle={'Bookmarks'}
filter={bookmarkFilter}
setFilter={setBookmarkFilter}
sort={bookmarkSort}
setSort={setBookmarkSort}
density={bookmarkDensity}
setDensity={setBookmarkDensity}
/>
</Stack>
</Group>
<Group mt={'-.75rem'} w={'100%'} align='center' justify='center'>
<Button
leftSection={<FiSettings />}
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
className={buttonClasses.settingsMenuButton}
classNames={buttonClasses}
>
Settings
</Button>
</Menu.Target>
<Menu.Dropdown
style={{
backgroundColor:
theme.backgroundImage.toLowerCase() !== 'none' &&
theme.backgroundImage !== undefined
? 'transparent'
: 'var(--mantine-color-background-0)',
}}
>
<Group p={'1rem'} gap={12}>
<Stack
justify='center'
align='center'
style={{
display: 'flex',
flexDirection: isMobile ? 'row' : 'column',
width: isMobile ? '100%' : undefined,
}}
>
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
style={{ aspectRatio: '1/1' }}
>
<Menu.Label>Wake on LAN</Menu.Label>
<Button
classNames={buttonClasses}
className={buttonClasses.wakeButton}
disabled={!wolClients?.length || selectedClient === null}
onClick={() => {
handleWakeRequest();
}}
>
<Stack gap={0} align='center'>
<FiPower size={32} />
</Stack>
</Button>
<Select
labelProps={{ display: 'none' }}
placeholder='Pick a host...'
defaultValue={wolClients?.[0]?.hostname}
data={
wolClients
?.map((wolClient: WolClient) => {
return {
value: wolClient.hostname,
label: `${wolClient.hostname} (${wolClient.macAddress})`,
hostname: wolClient.hostname,
macAddress: wolClient.macAddress,
};
})
.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []
}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
width: 'fit-content',
}}
/>
</Stack>
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
style={{ aspectRatio: '1/1' }}
>
<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
<Tooltip
label='Shuffle Themes'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
withArrow
>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
disabled={currentThemePlaylist === 'Time of Day'}
style={{
backgroundColor:
currentTheme === 'random'
? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
: 'transparent',
color:
currentTheme === 'random'
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-primary-0)',
}}
onClick={() => {
setCurrentTheme(
currentTheme === 'random' ? theme.name : 'random',
);
setCurrentThemePlaylist('All');
}}
>
<FiShuffle />
</ActionIcon>
</Tooltip>
<Tooltip
label='Random Theme'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
withArrow
>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
style={{
backgroundColor: 'transparent',
color: 'var(--mantine-color-primary-0)',
}}
disabled={currentThemePlaylist === 'Time of Day'}
onClick={() => {
const themeList = JSON.parse(
themePlaylistData?.find(
(t: ThemePlaylist) => t?.name === currentThemePlaylist,
)?.themeList ?? '[]',
);
if (themeList.length > 0) {
const filteredThemes = allThemes.filter((t: Theme) =>
themeList.includes(t.id),
);
handleThemeChange(filteredThemes, false);
} else if (currentThemePlaylist === 'All') {
handleThemeChange(allThemes, false);
} else if (currentThemePlaylist === 'Backgrounds') {
handleThemeChange(
allThemes.filter(
(a: any) =>
!a.backgroundImage.toLowerCase().includes('none'),
),
false,
);
} else if (currentThemePlaylist === 'No Backgrounds') {
handleThemeChange(
allThemes.filter((a: any) =>
a.backgroundImage.toLowerCase().includes('none'),
),
false,
);
}
}}
>
<FaDice />
</ActionIcon>
</Tooltip>
</Group>
<Text fw={'bold'} fz={'1.125rem'}>
Currently:{' '}
</Text>
{theme.name}
<Text fw={'bold'} fz={'1.125rem'}>
Playlist:{' '}
</Text>
<Select
labelProps={{ display: 'none' }}
placeholder='Pick a playlist...'
value={currentThemePlaylist}
data={[
{ value: 'All', label: 'All' },
{
value: 'Backgrounds',
label: 'Backgrounds',
disabled:
allThemes.filter(
(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
).length === 0,
},
{
value: 'No Backgrounds',
label: 'No Backgrounds',
disabled:
allThemes.filter((a: any) =>
a.backgroundImage.toLowerCase().includes('none'),
).length === 0,
},
...(themePlaylistData
?.map((playlist: ThemePlaylist) => {
return {
value: playlist.name,
label: playlist.name,
disabled: JSON.parse(playlist.themeList).length === 0,
};
})
.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []),
]}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
onChange={(_value, option: ComboboxItem) => {
setCurrentThemePlaylist(option.value);
if (option.value !== 'Time of Day') {
setThemeName('random');
} else {
const themeList = JSON.parse(
themePlaylistData.find(
(t: ThemePlaylist) => t.name === 'Time of Day',
).themeList,
);
setThemeName(
allThemeData.find(
(t: Theme) =>
t.id ===
Number(themeList[Math.floor(new Date().getHours() / 6)]),
).name,
);
}
}}
/>
</Stack>
</Stack>
<Stack display={'flex'} align='center'>
<Stack
gap={0}
align='center'
justify='space-between'
className={stackClasses.menuStack}
classNames={stackClasses}
pos={'relative'}
>
<Text
style={{
fontSize: '.75rem',
paddingLeft: '.5rem',
paddingRight: '.5rem',
paddingTop: '.125rem',
paddingBottom: '.125rem',
borderRadius: 8,
position: 'absolute',
left: -12,
top: -8,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
Apps
</Text>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
restrictToMarks
value={appDensity}
onChange={(value) => setAppDensity(value)}
min={1}
max={8}
/>
</Stack>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'
data={
categories.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []
}
placeholder={
appFilter.length > 0
? appFilter.length === 1
? appFilter[0]
: `${appFilter.length} apps selected`
: 'No apps selected'
}
defaultValue={appFilter}
onChange={(data: string[]) => {
setAppFilter(data);
}}
classNames={multiSelectClasses}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
/>
<Select
label={'Sorting'}
placeholder='Sort Applications...'
value={appSort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
onChange={(_value, option: ComboboxItem) => {
setAppSort(option.value);
}}
/>
</Group>
</Stack>
<Stack
gap={0}
align='center'
justify='space-between'
className={stackClasses.menuStack}
classNames={stackClasses}
pos={'relative'}
>
<Text
style={{
fontSize: '.75rem',
paddingLeft: '.5rem',
paddingRight: '.5rem',
paddingTop: '.125rem',
paddingBottom: '.125rem',
borderRadius: 8,
position: 'absolute',
left: -12,
top: -8,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
Bookmarks
</Text>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
restrictToMarks
value={bookmarkDensity}
onChange={(value) => setBookmarkDensity(value)}
min={1}
max={8}
/>
</Stack>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'
data={
categories.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []
}
placeholder={
bookmarkFilter.length > 0
? bookmarkFilter.length === 1
? bookmarkFilter[0]
: `${bookmarkFilter.length} bookmarks selected`
: 'No bookmarks selected'
}
defaultValue={bookmarkFilter}
onChange={(data: string[]) => {
setBookmarkFilter(data);
}}
classNames={multiSelectClasses}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
/>
<Select
label={'Sorting'}
placeholder='Sort Bookmarks...'
value={bookmarkSort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
classNames={{
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
root: selectClasses.menuSelectRoot,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
onChange={(_value, option: ComboboxItem) => {
setBookmarkSort(option.value);
}}
/>
</Group>
</Stack>
</Stack>
</Group>
<Group mt={'-.75rem'} w={'100%'} align='center' justify='center'>
<Button
leftSection={<FiSettings />}
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
className={buttonClasses.settingsMenuButton}
classNames={buttonClasses}
>
Settings
</Button>
</Group>
</Menu.Dropdown>
</Menu>
</>
</Group>
</Menu.Dropdown>
</Menu>
);
}

121
src/pages/homepage/components/SettingsButton/SettingsCard.tsx Normal file
View File

@@ -0,0 +1,121 @@
import {
type ComboboxItem,
Group,
MultiSelect,
Select,
Slider,
Stack,
Text,
} from '@mantine/core';
import { multiSelectClasses, selectClasses, sliderClasses, stackClasses } from 'styles';
function SettingsCard({
categories,
sectionTitle,
filter,
setFilter,
sort,
setSort,
density,
setDensity,
}: {
categories: ComboboxItem[];
sectionTitle: string;
filter: any;
setFilter: any;
sort: any;
setSort: any;
density: any;
setDensity: any;
}) {
return (
<Stack
gap={0}
align='center'
justify='space-between'
className={stackClasses.menuStack}
classNames={stackClasses}
pos={'relative'}
>
<Text
style={{
fontSize: '.75rem',
paddingLeft: '.5rem',
paddingRight: '.5rem',
paddingTop: '.125rem',
paddingBottom: '.125rem',
borderRadius: 8,
position: 'absolute',
left: -12,
top: -8,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
{sectionTitle}
</Text>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
restrictToMarks
value={density}
onChange={(value) => setDensity(value)}
min={1}
max={8}
/>
</Stack>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'
data={
categories.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []
}
placeholder={
filter.length > 0
? filter.length === 1
? filter[0]
: `${filter.length} ${sectionTitle.toLocaleLowerCase()}s selected`
: `No ${sectionTitle.toLocaleLowerCase()}s selected`
}
defaultValue={filter}
onChange={(data: string[]) => {
setFilter(data);
}}
classNames={multiSelectClasses}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
/>
<Select
label={'Sorting'}
placeholder={`Sort ${sectionTitle}...`}
value={sort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
onChange={(_value, option: ComboboxItem) => {
setSort(option.value);
}}
/>
</Group>
</Stack>
);
}
export default SettingsCard;

201
src/pages/homepage/components/SettingsButton/ThemingCard.tsx Normal file
View File

@@ -0,0 +1,201 @@
import {
ActionIcon,
type ComboboxItem,
Group,
Menu,
Select,
Stack,
Text,
Tooltip,
} from '@mantine/core';
import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa';
import { FiShuffle } from 'react-icons/fi';
import { actionIconClasses, selectClasses, stackClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
function ThemingCard() {
const { data: themePlaylistData } = useQueryAPI({
endpoint: 'api/themePlaylists',
});
const { data: allThemeData, isFetched: allThemeDataIsFetched } = useQueryAPI({
endpoint: 'api/themes',
});
const [allThemes, setAllThemes] = useState<Theme[]>([]);
useEffect(() => {
if (allThemeData && allThemeDataIsFetched) {
setAllThemes(allThemeData);
}
}, [allThemeData, allThemeDataIsFetched]);
const {
currentTheme,
setCurrentTheme,
setThemeName,
handleThemeChange,
theme,
currentThemePlaylist,
setCurrentThemePlaylist,
} = useCommonHooks();
return (
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
style={{ aspectRatio: '1/1' }}
>
<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
<Tooltip
label='Shuffle Themes'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
withArrow
>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
disabled={currentThemePlaylist === 'Time of Day'}
style={{
backgroundColor:
currentTheme === 'random'
? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
: 'transparent',
color:
currentTheme === 'random'
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-primary-0)',
}}
onClick={() => {
setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
setCurrentThemePlaylist('All');
}}
>
<FiShuffle />
</ActionIcon>
</Tooltip>
<Tooltip
label='Random Theme'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
withArrow
>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
style={{
backgroundColor: 'transparent',
color: 'var(--mantine-color-primary-0)',
}}
disabled={currentThemePlaylist === 'Time of Day'}
onClick={() => {
const themeList = JSON.parse(
themePlaylistData?.find(
(t: ThemePlaylist) => t?.name === currentThemePlaylist,
)?.themeList ?? '[]',
);
if (themeList.length > 0) {
const filteredThemes = allThemes.filter((t: Theme) =>
themeList.includes(t.id),
);
handleThemeChange(filteredThemes, false);
} else if (currentThemePlaylist === 'All') {
handleThemeChange(allThemes, false);
} else if (currentThemePlaylist === 'Backgrounds') {
handleThemeChange(
allThemes.filter(
(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
),
false,
);
} else if (currentThemePlaylist === 'No Backgrounds') {
handleThemeChange(
allThemes.filter((a: any) =>
a.backgroundImage.toLowerCase().includes('none'),
),
false,
);
}
}}
>
<FaDice />
</ActionIcon>
</Tooltip>
</Group>
<Text fw={'bold'} fz={'1.125rem'}>
Currently:{' '}
</Text>
{theme.name}
<Text fw={'bold'} fz={'1.125rem'}>
Playlist:{' '}
</Text>
<Select
labelProps={{ display: 'none' }}
placeholder='Pick a playlist...'
value={currentThemePlaylist}
data={[
{ value: 'All', label: 'All' },
{
value: 'Backgrounds',
label: 'Backgrounds',
disabled:
allThemes.filter(
(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
).length === 0,
},
{
value: 'No Backgrounds',
label: 'No Backgrounds',
disabled:
allThemes.filter((a: any) =>
a.backgroundImage.toLowerCase().includes('none'),
).length === 0,
},
...(themePlaylistData
?.map((playlist: ThemePlaylist) => {
return {
value: playlist.name,
label: playlist.name,
disabled: JSON.parse(playlist.themeList).length === 0,
};
})
.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []),
]}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
onChange={(_value, option: ComboboxItem) => {
setCurrentThemePlaylist(option.value);
if (option.value !== 'Time of Day') {
setThemeName('random');
} else {
const themeList = JSON.parse(
themePlaylistData.find((t: ThemePlaylist) => t.name === 'Time of Day')
.themeList,
);
setThemeName(
allThemeData.find(
(t: Theme) =>
t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
).name,
);
}
}}
/>
</Stack>
);
}
export default ThemingCard;

72
src/pages/homepage/components/SettingsButton/WakeOnLanCard.tsx Normal file
View File

@@ -0,0 +1,72 @@
import { Button, type ComboboxItem, Menu, Select, Stack } from '@mantine/core';
import { FiPower } from 'react-icons/fi';
import { buttonClasses, selectClasses, stackClasses } from 'styles';
import type { WolClient } from 'types';
function WakeOnLan({
wolClients,
selectedClient,
handleWakeRequest,
}: {
wolClients: WolClient[];
selectedClient: WolClient | null;
handleWakeRequest: () => void;
}) {
return (
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
style={{ aspectRatio: '1/1' }}
>
<Menu.Label>Wake on LAN</Menu.Label>
<Button
classNames={buttonClasses}
className={buttonClasses.wakeButton}
disabled={!wolClients?.length || selectedClient === null}
onClick={() => {
handleWakeRequest();
}}
>
<Stack gap={0} align='center'>
<FiPower size={32} />
</Stack>
</Button>
<Select
labelProps={{ display: 'none' }}
placeholder='Pick a host...'
defaultValue={wolClients?.[0]?.hostname}
data={
wolClients
?.map((wolClient: WolClient) => {
return {
value: wolClient.hostname,
label: `${wolClient.hostname} (${wolClient.macAddress})`,
hostname: wolClient.hostname,
macAddress: wolClient.macAddress,
};
})
.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []
}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
width: 'fit-content',
}}
/>
</Stack>
);
}
export default WakeOnLan;

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

@@ -4,7 +4,6 @@ import {
Button,
type ComboboxItem,
type ComboboxLikeRenderOptionInput,
Divider,
Grid,
GridCol,
Group,
@@ -223,14 +222,8 @@ const ApplicationSettings = () => {
withAsterisk
/>
</Group>
<Divider color='black' my='lg' />
<Group pos={'absolute'} bottom={8}>
<Button
type='submit'
color={'green'}
styles={{ label: { color: 'black' } }}
>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
Save
</Button>
<Button

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

@@ -1,5 +1,5 @@
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import { Box, Button, Card, Divider, Group, Stack, Text, TextInput } from '@mantine/core';
import { Box, Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -160,14 +160,8 @@ const BookmarkSettings = () => {
withAsterisk
/>
</Group>
<Divider color='black' my='lg' />
<Group pos={'absolute'} bottom={8}>
<Button
type='submit'
color={'green'}
styles={{ label: { color: 'black' } }}
>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
Save
</Button>
<Button

6
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -388,11 +388,7 @@ function DebouncedGroupSettingsItem({
align='center'
justify='center'
>
<Button
type='submit'
color={'green'}
styles={{ label: { color: 'black' } }}
>
<Button type='submit' color={'green'}>
Save
</Button>
<Button

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

@@ -1,4 +1,4 @@
import { Button, Divider, Grid, GridCol, Group, Stack, TextInput } from '@mantine/core';
import { Button, Grid, GridCol, Group, Stack, TextInput } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
@@ -92,11 +92,9 @@ const MessageSettings = () => {
}}
error={newMessageError}
/>
<Divider color='black' my='lg' />
<Group pos={'absolute'} bottom={8}>
<Group mt={'1rem'}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newMessage) {
mutateAsync({

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

@@ -76,7 +76,7 @@ const PersonalizationSettings = () => {
style={{
borderRadius: '10px',
margin: '-.5rem',
backdropFilter: 'blur(10px) brightness(1.2)',
backdropFilter: 'blur(5px) brightness(1.2)',
}}
/>
)}

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

@@ -1,7 +1,6 @@
import {
Box,
Button,
Divider,
Grid,
GridCol,
Group,
@@ -121,13 +120,8 @@ const SearchProviderSettings = () => {
withAsterisk
/>
</Stack>
<Divider color='black' my='lg' />
<Group pos={'absolute'} bottom={8}>
<Button
type='submit'
color={'green'}
styles={{ label: { color: 'black' } }}
>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
Save
</Button>
<Button

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

@@ -27,8 +27,8 @@ function AddItemModal({
closeOnClickOutside
centered
>
<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
<Modal.Overlay />
<Modal.Content h={'auto'}>
<Modal.Header>
<Modal.Title>{title}</Modal.Title>
<Modal.CloseButton />

2
src/pages/settings/components/Shared/DeleteItemModal.tsx
View File

@@ -28,7 +28,7 @@ function DeleteItemModal({
closeOnClickOutside
centered
>
<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
<Modal.Overlay />
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
<Modal.Header>
<Modal.Title>{title}</Modal.Title>

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

@@ -53,7 +53,7 @@ function SettingsHeader({
align='center'
justify='center'
style={{
backdropFilter: 'blur(10px) brightness(.75)',
backdropFilter: 'blur(5px) brightness(.75)',
zIndex: 199,
paddingTop: '1.5rem',
paddingBottom: '1.5rem',

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

@@ -63,7 +63,7 @@ function BackgroundModal({
fullScreen={isMobile}
centered
>
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
<Modal.Overlay />
<Modal.Content>
<Modal.Header style={{ justifyContent: 'center' }}>
<Group pos={'absolute'}>

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

@@ -3,7 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
import { actionIconClasses } from 'styles';
import { actionIconClasses, boxClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
@@ -143,7 +143,7 @@ function ThemeCard({
<Group w={'100%'}>
<Box
style={{
height: '5px',
height: '.25rem',
width: '40px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
@@ -152,42 +152,24 @@ function ThemeCard({
</Group>
<Group w={'100%'}>
<Box
className={boxClasses.appItemExampleText}
style={{
height: '10px',
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '.375rem',
justifyContent: 'center',
alignContent: 'center',
color: cardTheme.primaryColor,
}}
>
lorem ipsum
</Box>
<Box
className={boxClasses.appItemExampleText}
style={{
height: '10px',
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '.375rem',
justifyContent: 'center',
alignContent: 'center',
color: cardTheme.primaryColor,
}}
>
lorem ipsum
</Box>
<Box
className={boxClasses.appItemExampleText}
style={{
height: '10px',
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '.375rem',
justifyContent: 'center',
alignContent: 'center',
color: cardTheme.primaryColor,
}}
>
@@ -230,6 +212,7 @@ function ThemeCard({
fontSize: '2rem',
fontWeight: 'bold',
color: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
cursor: 'pointer',
}}
/>
</Group>
@@ -291,6 +274,7 @@ function ThemeCard({
fontSize: '2rem',
fontWeight: 'bold',
color: shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
cursor: 'pointer',
}}
/>
</Group>

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

@@ -1,8 +1,6 @@
import {
Button,
ColorPicker,
ColorSwatch,
Divider,
Group,
Modal,
ScrollArea,
@@ -14,8 +12,9 @@ import {
import { useCommonHooks } from 'hooks';
import { useEffect, useRef, useState } from 'react';
import { FiSave, FiX } from 'react-icons/fi';
import { modalClasses, scrollAreaClasses, textClasses, textInputClasses } from 'styles';
import { modalClasses, scrollAreaClasses, textInputClasses } from 'styles';
import type { Theme } from 'types';
import ThemeModalColorSwatches from './ThemeModalColorSwatches';
import ThemeModalContent from './ThemeModalContent';
function ThemeModal({
@@ -86,7 +85,7 @@ function ThemeModal({
<Text
style={{
width: 'min-content',
backdropFilter: 'blur(10px) brightness(.25)',
backdropFilter: 'blur(5px) brightness(.25)',
padding: '.5rem',
borderBottomRightRadius: 4,
marginTop: '-2.15rem',
@@ -100,7 +99,7 @@ function ThemeModal({
<Text
style={{
width: 'min-content',
backdropFilter: 'blur(10px) brightness(.25)',
backdropFilter: 'blur(5px) brightness(.25)',
padding: '.5rem',
marginTop: '2rem',
marginBottom: -1,
@@ -136,7 +135,7 @@ function ThemeModal({
fullScreen={isMobile}
centered
>
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
<Modal.Overlay />
<Modal.Content>
<Modal.Header style={{ justifyContent: 'center' }}>
<Group pos={'absolute'}>
@@ -164,7 +163,6 @@ function ThemeModal({
</Modal.Header>
<Modal.Body p={'2rem'}>
<ThemeModalContent selectedTheme={selectedTheme} />
<Divider color='black' my='sm' />
<Group
w={'100%'}
h={'100%'}
@@ -191,7 +189,6 @@ function ThemeModal({
/>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
switch (colorId) {
case 'primaryColor':
@@ -241,103 +238,12 @@ function ThemeModal({
</Group>
</Group>
) : (
<Stack h={isMobile ? '100%' : 256} justify='center'>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Primary Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('primaryColor');
openPicker();
setColorValue(selectedTheme.primaryColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.primaryColor}
style={{
cursor: 'pointer',
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Accent Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('accentColor');
openPicker();
setColorValue(selectedTheme.accentColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.accentColor}
style={{
cursor: 'pointer',
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('background');
openPicker();
setColorValue(selectedTheme.backgroundColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.backgroundColor}
style={{
cursor: 'pointer',
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Border Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('borderColor');
openPicker();
setColorValue(selectedTheme.borderColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.borderColor}
style={{
cursor: 'pointer',
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Search Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('searchBackground');
openPicker();
setColorValue(selectedTheme.searchColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.searchColor}
style={{
cursor: 'pointer',
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
</Stack>
<ThemeModalColorSwatches
selectedTheme={selectedTheme}
openPicker={openPicker}
setColorId={setColorId}
setColorValue={setColorValue}
/>
)}
</Stack>
<Stack
@@ -409,13 +315,8 @@ function ThemeModal({
</ScrollArea.Autosize>
</Stack>
</Group>
<Divider color='black' my='sm' />
<Group pos={'absolute'} bottom={isMobile ? -72 : 8}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={handleSaveTheme}
>
<Group>
<Button color={'green'} onClick={handleSaveTheme}>
Save
</Button>
<Button

99
src/pages/settings/components/Theming/ThemeModalColorSwatches.tsx Normal file
View File

@@ -0,0 +1,99 @@
import { ColorSwatch, Group, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { colorSwatchClasses, textClasses } from 'styles';
import type { Theme } from 'types';
function ThemeModalColorSwatches({
selectedTheme,
openPicker,
setColorId,
setColorValue,
}: {
selectedTheme: Theme;
openPicker: () => void;
setColorId: (colorId: string) => void;
setColorValue: (colorValue: string) => void;
}) {
const { isMobile } = useCommonHooks();
return (
<Stack h={isMobile ? '100%' : 256} justify='center'>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Primary Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('primaryColor');
openPicker();
setColorValue(selectedTheme.primaryColor);
}}
color={selectedTheme.primaryColor}
className={colorSwatchClasses.default}
classNames={colorSwatchClasses}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Accent Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('accentColor');
openPicker();
setColorValue(selectedTheme.accentColor);
}}
color={selectedTheme.accentColor}
className={colorSwatchClasses.default}
classNames={colorSwatchClasses}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('background');
openPicker();
setColorValue(selectedTheme.backgroundColor);
}}
color={selectedTheme.backgroundColor}
className={colorSwatchClasses.default}
classNames={colorSwatchClasses}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Border Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('borderColor');
openPicker();
setColorValue(selectedTheme.borderColor);
}}
color={selectedTheme.borderColor}
className={colorSwatchClasses.default}
classNames={colorSwatchClasses}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Search Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('searchBackground');
openPicker();
setColorValue(selectedTheme.searchColor);
}}
color={selectedTheme.searchColor}
className={colorSwatchClasses.default}
classNames={colorSwatchClasses}
/>
</Group>
</Stack>
);
}
export default ThemeModalColorSwatches;

21
src/pages/settings/components/Theming/ThemePlaylistModal.tsx
View File

@@ -1,12 +1,4 @@
import {
Button,
Divider,
Group,
Modal,
SimpleGrid,
Text,
TextInput,
} from '@mantine/core';
import { Button, Group, Modal, SimpleGrid, Text, TextInput } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useEffect, useState } from 'react';
import { modalClasses, textInputClasses } from 'styles';
@@ -59,7 +51,7 @@ function ThemePlaylistModal({
setThemeList('[]');
}}
>
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
<Modal.Overlay />
<Modal.Content>
<Modal.Header style={{ justifyContent: 'center' }}>
<Group pos={'absolute'}>
@@ -113,13 +105,8 @@ function ThemePlaylistModal({
);
})}
</SimpleGrid>
<Divider color='black' my='sm' />
<Group>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={handleSavePlaylist}
>
<Group mt={'1rem'}>
<Button color={'green'} onClick={handleSavePlaylist}>
Save
</Button>
<Button

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

@@ -252,7 +252,7 @@ function ThemesSettings() {
</Group>
<Group
style={{
backdropFilter: 'blur(10px) brightness(.75)',
backdropFilter: 'blur(5px) brightness(.75)',
zIndex: 199,
paddingTop: isMobile ? '.5rem' : '1.5rem',
paddingBottom: '1.5rem',

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

@@ -1,13 +1,4 @@
import {
Button,
Divider,
Grid,
GridCol,
Group,
Popover,
Stack,
TextInput,
} from '@mantine/core';
import { Button, Grid, GridCol, Group, Popover, Stack, TextInput } from '@mantine/core';
import { isNotEmpty, matches, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -105,13 +96,8 @@ const WolClientSettings = () => {
withAsterisk
/>
</Group>
<Divider color='black' my='lg' />
<Group pos={'absolute'} bottom={8}>
<Button
type='submit'
color={'green'}
styles={{ label: { color: 'black' } }}
>
<Group mt={'1rem'}>
<Button type='submit' color={'green'}>
Save
</Button>
<Button

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

@@ -17,7 +17,7 @@
flex-wrap: wrap;
height: 128px;
margin: 0;
backdrop-filter: blur(10px) brightness(1.2);
backdrop-filter: blur(5px) brightness(1.2);
border-radius: 6px;
font-size: 2rem;
font-weight: 400;
@@ -34,7 +34,7 @@
}
.appItemBox rect::after {
filter: blur(10px);
filter: blur(5px);
}
@keyframes svgAnimation {
@@ -45,3 +45,13 @@
stroke-dashoffset: 1000;
}
}
.appItemExampleText {
height: 10px;
width: 40px;
border-radius: 4px;
backdrop-filter: blur(5px) brightness(1.5);
font-size: .375rem;
justify-content: center;
align-content: center;
}

4
src/styles/Card.module.css
View File

@@ -2,7 +2,7 @@
&.root {
color: var(--mantine-color-primary-0);
background-color: transparent;
backdrop-filter: blur(10px) brightness(1.25) !important;
backdrop-filter: blur(5px) brightness(1.25) !important;
}
}
@@ -10,7 +10,7 @@
&.root {
color: var(--mantine-color-primary-0);
background-color: transparent;
backdrop-filter: blur(10px) brightness(1.25) !important;
backdrop-filter: blur(5px) brightness(1.25) !important;
cursor: pointer;
&:hover {
color: var(--mantine-color-accent-0);

21
src/styles/ColorSwatch.module.css Normal file
View File

@@ -0,0 +1,21 @@
.default {
&.root {
width: 100px;
cursor: pointer;
border: 2px dashed var(--mantine-color-primary-0);
border-radius: .25rem;
.alphaOverlay {
border-radius: .25rem;
}
.colorOverlay {
border-radius: .25rem;
}
.shadowOverlay {
border-radius: .25rem;
}
.childrenOverlay {
border-radius: .25rem;
}
}
}

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

@@ -1,7 +1,7 @@
.dropdown {
color: var(--mantine-color-primary-0);
border-color: var(--mantine-color-primary-0) !important;
backdrop-filter: blur(10px) brightness(3) !important;
backdrop-filter: blur(5px) brightness(3) !important;
}
.item {
&:hover {

10
src/styles/Modal.module.css
View File

@@ -12,8 +12,6 @@
.close {
color: white;
background-color: var(--mantine-color-red-6);
max-width: 20px !important;
max-height: 20px !important;
&:hover {
color: var(--mantine-color-red-1);
background-color: var(--mantine-color-red-4);
@@ -24,6 +22,9 @@
margin-top: 1rem;
}
}
.overlay {
backdrop-filter: blur(5px);
}
}
}
.editThemeModal {
@@ -39,8 +40,6 @@
.close {
color: white;
background-color: var(--mantine-color-red-6);
max-width: 20px !important;
max-height: 20px !important;
&:hover {
color: var(--mantine-color-red-1);
background-color: var(--mantine-color-red-4);
@@ -53,5 +52,8 @@
align-items: center;
}
}
.overlay {
backdrop-filter: blur(5px);
}
}
}

4
src/styles/Popover.module.css
View File

@@ -1,3 +1,7 @@
.dropdown {
border: solid 2px var(--mantine-color-border-0) !important;
}
.overlay {
backdrop-filter: blur(5px) !important;
}

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

@@ -45,7 +45,7 @@
.dropdown {
border: none !important;
background-color: var(--mantine-color-search-0) !important;
backdrop-filter: blur(10px) !important;
backdrop-filter: blur(5px) !important;
}
.options {

4
src/styles/Stack.module.css
View File

@@ -18,7 +18,7 @@
flex-wrap: wrap;
height: 64px;
margin: 0;
backdrop-filter: blur(10px) brightness(1.2);
backdrop-filter: blur(5px) brightness(1.2);
border-radius: 6px;
font-size: 1rem;
font-weight: 400;
@@ -35,7 +35,7 @@
}
.appItemBox rect::after {
filter: blur(10px);
filter: blur(5px);
}
@keyframes svgAnimation {

2
src/styles/index.ts
View File

@@ -2,6 +2,7 @@ import actionIconClasses from './ActionIcon.module.css';
import boxClasses from './Box.module.css';
import buttonClasses from './Button.module.css';
import cardClasses from './Card.module.css';
import colorSwatchClasses from './ColorSwatch.module.css';
import menuClasses from './Menu.module.css';
import modalClasses from './Modal.module.css';
import multiSelectClasses from './MultiSelect.module.css';
@@ -21,6 +22,7 @@ export {
boxClasses,
buttonClasses,
cardClasses,
colorSwatchClasses,
menuClasses,
modalClasses,
multiSelectClasses,