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

Updates to the stack for performance
All checks were successful
Deploy to production / build (push) Successful in 18s
Details

Browse Source
This commit is contained in:
Sean Edmunds
2026-10-12 16:04:09 -05:00
parent ea56aa8402
commit bd9e77c382
3 changed files with 256 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -119,8 +119,6 @@ sudo pm2 start server.cjs
- New Carosel on weather description
- Updates to weather modal
- Add mantine-led for monitoring status (https://gfazioli.github.io/mantine-led)
- Update Theme playlists
- Include mantine-reflection (https://gfazioli.github.io/mantine-reflection#example-complex-components)
- Explore https://gfazioli.github.io/mantine-scene/
- Explore https://gfazioli.github.io/mantine-window/
- Upgrade spinners/loaders (https://gfazioli.github.io/mantine-spinner#example-random)

249
src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistStack.tsx
View File

@@ -1,14 +1,15 @@
import { Parallax } from '@gfazioli/mantine-parallax';
import { Reflection } from '@gfazioli/mantine-reflection';
import { ActionIcon, Box, Group, Stack, Text } from '@mantine/core';
import { useDebouncedCallback, useDisclosure } from '@mantine/hooks';
import { ActionIcon, Box, Group, Overlay, Popover, Stack, Text } from '@mantine/core';
import { useDebouncedCallback, useDisclosure, useLongPress } from '@mantine/hooks';
import { DeleteItemModal } from 'components';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { FiEdit, FiTrash } from 'react-icons/fi';
import { textClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import { ThemeCardPreview } from '../../Themes/ThemeCard';
import { ThemeModalContent } from '../../Themes/ThemeModal/components/ThemeModalContent';
export function ThemePlaylistStack({
cardPlaylist,
@@ -19,16 +20,14 @@ export function ThemePlaylistStack({
handleOpen: (cardPlaylist: ThemePlaylist) => void;
allThemes: Theme[];
}) {
const [pressed, setPressed] = useState<boolean>(false);
const handlers = useLongPress(() => {
setPressed(true);
});
const [hover, setHover] = useState(false);
const { setThemeName, setCurrentThemePlaylist, handleDelete, currentUser } =
useCommonHooks();
const [indexOffset, setIndexOffset] = useState(0);
const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const themeList = JSON.parse(
cardPlaylist?.themeList?.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
);
const missingTheme = {
id: undefined,
name: 'default',
@@ -43,6 +42,12 @@ export function ThemePlaylistStack({
appShadowsEnabled: 0,
themeFont: currentUser.defaultFont,
};
const [topTheme, setTopTheme] = useState<Theme>(missingTheme);
const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const themeList = JSON.parse(
cardPlaylist?.themeList?.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
);
const presentationProps = {
initialRotationX: 60,
@@ -62,7 +67,75 @@ export function ThemePlaylistStack({
}
}, 75);
const sortedItems = useMemo(
() =>
(themeList.length > 0 &&
themeList.sort((a: number, b: number) => (a > b ? 1 : -1))) ||
[],
[themeList],
);
const items = sortedItems?.map((item: number, index: number) => {
let spot = index + indexOffset;
if (spot <= -1) {
spot = index + indexOffset + themeList.length;
} else if (spot >= themeList.length) {
spot = index + indexOffset - themeList.length;
} else {
spot = index + indexOffset;
}
const theme: any = allThemes.find((theme: Theme) => theme.id === item);
return (
<Box
key={theme.id}
style={{
transition: 'all 0.3s ease-in-out',
position: 'absolute',
top: 16 * (spot + 1),
zIndex: themeList.length - spot,
}}
>
<Parallax {...presentationProps}>
<ThemeCardPreview key={theme.id} cardTheme={theme} />
</Parallax>
</Box>
);
});
useEffect(() => {
if (cardPlaylist.name === 'Time of Day') {
setTopTheme(
allThemes.find(
(t: Theme) => t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
) || missingTheme,
);
} else if (indexOffset > 0 && indexOffset < themeList.length) {
setTopTheme(
allThemes.find(
(theme: Theme) => theme.id === themeList[themeList.length - indexOffset],
) || missingTheme,
);
} else if (indexOffset < 0 && Math.abs(indexOffset) < themeList.length) {
setTopTheme(
allThemes.find((theme: Theme) => theme.id === themeList[Math.abs(indexOffset)]) ||
missingTheme,
);
} else if (indexOffset === 0) {
setTopTheme(
allThemes.find((theme: Theme) => theme.id === themeList[0]) || missingTheme,
);
}
}, [indexOffset]);
return (
<Popover
withArrow
opened={pressed}
{...handlers}
arrowSize={16}
transitionProps={{ duration: 200, timingFunction: 'ease' }}
>
<Popover.Target>
<Reflection reflectionStart={75} reflectionEnd={100} shadowOpacity={0.25}>
<Stack
gap={0}
@@ -100,61 +173,6 @@ export function ThemePlaylistStack({
}
/>
)}
{cardPlaylist?.name === 'Time of Day' ? (
<Stack
w='100%'
h='200px'
justify='center'
pos='relative'
gap={16}
style={{ overflow: 'hidden' }}
>
<Parallax
{...presentationProps}
style={{ position: 'absolute', top: -60, zIndex: 3 }}
>
<ThemeCardPreview
cardTheme={
allThemes.find((theme: Theme) => theme.id === Number(themeList[0])) ||
missingTheme
}
/>
</Parallax>
<Parallax
{...presentationProps}
style={{ position: 'absolute', top: -60, zIndex: 2 }}
>
<ThemeCardPreview
cardTheme={
allThemes.find((theme: Theme) => theme.id === Number(themeList[1])) ||
missingTheme
}
/>
</Parallax>
<Parallax
{...presentationProps}
style={{ position: 'absolute', top: -60, zIndex: 1 }}
>
<ThemeCardPreview
cardTheme={
allThemes.find((theme: Theme) => theme.id === Number(themeList[2])) ||
missingTheme
}
/>
</Parallax>
<Parallax
{...presentationProps}
style={{ position: 'absolute', top: -60, zIndex: 0 }}
>
<ThemeCardPreview
cardTheme={
allThemes.find((theme: Theme) => theme.id === Number(themeList[3])) ||
missingTheme
}
/>
</Parallax>
</Stack>
) : (
<Stack
w='100%'
h='200px'
@@ -168,36 +186,61 @@ export function ThemePlaylistStack({
}}
onWheel={handleMouseWheel}
>
{themeList
.sort((a: number, b: number) => (a > b ? 1 : -1))
.map((item: number, index: number) => {
let spot = index + indexOffset;
if (spot <= -1) {
spot = index + indexOffset + themeList.length;
} else if (spot >= themeList.length) {
spot = index + indexOffset - themeList.length;
} else {
spot = index + indexOffset;
}
const theme: any = allThemes.find((theme: Theme) => theme.id === item);
return (
<Box
key={theme.id}
style={{
transition: 'all 0.3s ease-in-out',
position: 'absolute',
top: 16 * (spot + 1),
zIndex: themeList.length - spot,
}}
{cardPlaylist?.name === 'Time of Day' ? (
<>
<Parallax
{...presentationProps}
style={{ position: 'absolute', top: 16 * 1, zIndex: 3 }}
>
<Parallax {...presentationProps}>
<ThemeCardPreview key={theme.id} cardTheme={theme} />
<ThemeCardPreview
cardTheme={
allThemes.find(
(theme: Theme) => theme.id === Number(themeList[0]),
) || missingTheme
}
/>
</Parallax>
</Box>
);
})}
</Stack>
<Parallax
{...presentationProps}
style={{ position: 'absolute', top: 16 * 2, zIndex: 2 }}
>
<ThemeCardPreview
cardTheme={
allThemes.find(
(theme: Theme) => theme.id === Number(themeList[1]),
) || missingTheme
}
/>
</Parallax>
<Parallax
{...presentationProps}
style={{ position: 'absolute', top: 16 * 3, zIndex: 1 }}
>
<ThemeCardPreview
cardTheme={
allThemes.find(
(theme: Theme) => theme.id === Number(themeList[2]),
) || missingTheme
}
/>
</Parallax>
<Parallax
{...presentationProps}
style={{ position: 'absolute', top: 16 * 4, zIndex: 0 }}
>
<ThemeCardPreview
cardTheme={
allThemes.find(
(theme: Theme) => theme.id === Number(themeList[3]),
) || missingTheme
}
/>
</Parallax>
</>
) : (
items
)}
</Stack>
<Group
w={'100%'}
@@ -253,5 +296,29 @@ export function ThemePlaylistStack({
</Group>
</Stack>
</Reflection>
</Popover.Target>
<Popover.Dropdown
bg={'var(--mantine-color-primary-0)'}
p={0}
style={{ border: 'none' }}
onClick={() => {
pressed && setPressed(false);
}}
>
<Overlay
w={'calc(300%)'}
h={'calc(300%)'}
pos={'absolute'}
left={'-100%'}
top={'-100%'}
zIndex={-1}
opacity={0.8}
bg={
'radial-gradient(circle, var(--mantine-color-primary-0) 0%, transparent 60%)'
}
/>
<ThemeModalContent selectedTheme={topTheme} />
</Popover.Dropdown>
</Popover>
);
}

3
src/pages/settings/components/Theming/Themes/ThemePreviewMiddleware.tsx
View File

@@ -61,6 +61,9 @@ export function ThemePreviewMiddleware({
bg={'var(--mantine-color-primary-0)'}
p={0}
style={{ border: 'none' }}
onClick={() => {
pressed && setPressed(false);
}}
>
<Overlay
w={'calc(300%)'}