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

Reworking Personalization
All checks were successful
Deploy to production / build (push) Successful in 1m4s
Details

Browse Source
This commit is contained in:
Sean Edmunds
2026-02-13 12:51:09 -06:00
parent dd5e3dd4f3
commit e24f1ece32
4 changed files with 151 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,11 @@
import {
Box,
Card,
Grid,
GridCol,
Group,
LoadingOverlay,
Overlay,
Stack,
Switch,
Text,
@@ -27,6 +30,7 @@ export function Personalization() {
personal?.enableGuacamole === 1,
);
const [defaultFont, setDefaultFont] = useState<string>(personal?.defaultFont);
const [customFont, setCustomFont] = useState<boolean>();
const [update, setUpdate] = useState<PersonalData>();
const [debounced] = useDebouncedValue(update, 1000);
const { mutateAsync } = useMutationAPI();
@@ -40,12 +44,12 @@ export function Personalization() {
useEffect(() => {
if (Object.keys(personal).length > 0) {
setCustomFont(personal.defaultFont !== 'Jost');
setWolEnabled(personal.enableWol === 1);
setGuacamoleEnabled(personal.enableGuacamole === 1);
setDefaultFont(personal.defaultFont);
}
}, [personal]);
useEffect(() => {
if (
Object.keys(personal).length > 0 &&
@@ -155,34 +159,6 @@ export function Personalization() {
</Card>
</GridCol>
<GridCol span={isMobile ? 12 : 4}>
<Card
className={cardClasses.settingsItem}
classNames={cardClasses}
pt={0}
>
<TextInput
label={'Email'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
defaultValue={personal?.email}
onChange={(event) => {
const updatedPersonal = {
...personal,
email: event.currentTarget.value,
};
setUpdate(updatedPersonal);
}}
styles={
theme.textShadowsEnabled
? {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
: undefined
}
/>
</Card>
</GridCol>
<GridCol span={12}>
<Card
className={cardClasses.settingsItem}
classNames={cardClasses}
@@ -210,7 +186,35 @@ export function Personalization() {
/>
</Card>
</GridCol>
<GridCol span={12}>
<GridCol span={4}>
<Card
className={cardClasses.settingsItem}
classNames={cardClasses}
pt={0}
>
<TextInput
label={'Email'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
defaultValue={personal?.email}
onChange={(event) => {
const updatedPersonal = {
...personal,
email: event.currentTarget.value,
};
setUpdate(updatedPersonal);
}}
styles={
theme.textShadowsEnabled
? {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
: undefined
}
/>
</Card>
</GridCol>
<GridCol span={8}>
<Card
className={cardClasses.settingsItem}
classNames={cardClasses}
@@ -253,43 +257,77 @@ export function Personalization() {
>
Extras
</Text>
<Text>Font Select</Text>
{defaultFont && (
<FontPicker
autoLoad
defaultValue={defaultFont || 'Jost'}
value={(font: string) => setDefaultFont(font)}
<Group justify='center'>
<Switch
label={'Enable Custom Default Font'}
className={switchClasses.default}
classNames={switchClasses}
checked={customFont}
onChange={(event) => {
setCustomFont(!customFont);
if (!event.target.checked) {
setDefaultFont('Jost');
}
}}
/>
<Switch
label={'Enable Wake on LAN'}
className={switchClasses.default}
classNames={switchClasses}
checked={wolEnabled}
onChange={(event) => {
setWolEnabled(!wolEnabled);
const updatedPersonal = {
...personal,
enableWol: event.target.checked ? 1 : 0,
};
setUpdate(updatedPersonal);
}}
/>
<Switch
label={'Enable Guacamole Clients'}
className={switchClasses.default}
classNames={switchClasses}
checked={guacamoleEnabled}
onChange={(event) => {
setGuacamoleEnabled(!guacamoleEnabled);
const updatedPersonal = {
...personal,
enableGuacamole: event.target.checked ? 1 : 0,
};
setUpdate(updatedPersonal);
}}
/>
</Group>
{defaultFont && (
<Box pos={'relative'} p={'1rem'}>
{!customFont && (
<Overlay
color='var(--mantine-color-background-0)'
blur={10}
backgroundOpacity={0.75}
style={{ borderRadius: '.5rem' }}
/>
)}
<Text>Default Font</Text>
<FontPicker
autoLoad
defaultValue={defaultFont || 'Jost'}
value={(font: string) => setDefaultFont(font)}
/>
</Box>
)}
<Switch
label={'Enable Wake on LAN'}
className={switchClasses.default}
classNames={switchClasses}
checked={wolEnabled}
onChange={(event) => {
setWolEnabled(!wolEnabled);
const updatedPersonal = {
...personal,
enableWol: event.target.checked ? 1 : 0,
};
setUpdate(updatedPersonal);
}}
/>
<Switch
label={'Enable Guacamole Clients'}
className={switchClasses.default}
classNames={switchClasses}
checked={guacamoleEnabled}
onChange={(event) => {
setGuacamoleEnabled(!guacamoleEnabled);
const updatedPersonal = {
...personal,
enableGuacamole: event.target.checked ? 1 : 0,
};
setUpdate(updatedPersonal);
}}
/>
{personal?.enableGuacamole === 1 && (
<Box pos={'relative'} p={'1rem'} style={{ overflow: 'clip' }}>
{!personal?.enableGuacamole && (
<Overlay
color='var(--mantine-color-background-0)'
zIndex={1}
blur={10}
backgroundOpacity={0.75}
style={{ borderRadius: '.5rem' }}
/>
)}
<TextInput
label={'Guacamole Host'}
className={textInputClasses.settingsItem}
@@ -302,17 +340,16 @@ export function Personalization() {
};
setUpdate(updatedPersonal);
}}
styles={
theme.textShadowsEnabled
? {
label: {
boxShadow: '2px 2px var(--mantine-color-border-0)',
},
}
: undefined
}
styles={{
label: {
zIndex: personal?.enableGuacamole ? 1 : -1,
boxShadow: theme.textShadowsEnabled
? '2px 2px var(--mantine-color-border-0)'
: undefined,
},
}}
/>
)}
</Box>
</Stack>
</Card>
</GridCol>