From 79ebb1b9e9a2a9cb160cf971bcbab0da574e7641 Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Fri, 23 May 2025 13:32:38 -0500 Subject: [PATCH] Theme updates and style fixes --- src/App.tsx | 10 + .../SettingsButton/SettingsButton.tsx | 6 +- .../Applications/AppSettingsItem.tsx | 5 +- .../components/Applications/Applications.tsx | 221 ++++++------- .../Applications/DebouncedApplication.tsx | 6 +- .../Bookmarks/DebouncedBookmarkItem.tsx | 3 +- .../Bookmarks/DebouncedGroupSettingsItem.tsx | 3 +- .../components/Messages/DebouncedMessage.tsx | 3 +- .../Search/DebouncedSearchProvider.tsx | 3 +- .../components/Shared/SettingsHeader.tsx | 4 + .../settings/components/Theming/ThemeCard.tsx | 26 +- .../components/Theming/ThemePlaylistCard.tsx | 133 ++------ .../components/Theming/ThemePlaylists.tsx | 296 ++++++++++++------ .../settings/components/Theming/Themes.tsx | 143 +++++++-- .../components/WoL/DebouncedWolClient.tsx | 3 +- src/styles/Tabs.module.css | 9 +- 16 files changed, 488 insertions(+), 386 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index e96d5c9..fbe4348 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -88,6 +88,16 @@ function App() { t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]), ), ); + } 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, + ); } else { const themeList = JSON.parse( themePlaylists.find((t: ThemePlaylist) => t.name === currentThemePlaylist) diff --git a/src/pages/homepage/components/SettingsButton/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx index 5c30a2a..3a56593 100644 --- a/src/pages/homepage/components/SettingsButton/SettingsButton.tsx +++ b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx @@ -189,7 +189,8 @@ function SettingsButton() { {enabled === 0 && ( This app is disabled} + c={'var(--mantine-color-primary-0)'} + bg={'var(--mantine-color-background-0)'} + label='This app is disabled.' > { isLoading={isLoading} setIsLoading={setIsLoading} /> - {dragging ? ( - - - - {(provided) => ( - - {applications?.map((app: Application) => ( - - {(provided) => ( - - - - - - Name - - - {app.name} - - - - - Filter Name - - - {app.filterName} - - - - - - )} - - ))} - {provided.placeholder} - - )} - - - - ) : ( + - - {applications.length > 0 ? ( - applications?.map((application: Application) => ( - - - - { - e.stopPropagation(); - }} - > - - - - - - - - - )) - ) : ( - - - - )} - + {applications.length > 0 ? ( + + {(provided) => ( + + {applications?.map((application: Application, index: number) => ( + + {dragging ? ( + + {(provided) => ( + + + + #{index + 1} + + + + + )} + + ) : ( + + + { + e.stopPropagation(); + }} + > + + + + + + + + )} + + ))} + {provided.placeholder} + + )} + + ) : ( + + )} - )} + ); }; diff --git a/src/pages/settings/components/Applications/DebouncedApplication.tsx b/src/pages/settings/components/Applications/DebouncedApplication.tsx index 0c3faf9..f63285f 100644 --- a/src/pages/settings/components/Applications/DebouncedApplication.tsx +++ b/src/pages/settings/components/Applications/DebouncedApplication.tsx @@ -72,7 +72,8 @@ function DebouncedApplication({ } /> @@ -89,7 +90,8 @@ function DebouncedApplication({ diff --git a/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx index 56ae6a3..0167b59 100644 --- a/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx +++ b/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx @@ -60,7 +60,8 @@ function DebouncedBookmarkItem({ title='Delete Bookmark' /> diff --git a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx index 47ba72e..703eb17 100644 --- a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx +++ b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx @@ -168,7 +168,8 @@ function DebouncedGroupSettingsItem({ }} /> diff --git a/src/pages/settings/components/Messages/DebouncedMessage.tsx b/src/pages/settings/components/Messages/DebouncedMessage.tsx index bf47eec..05db482 100644 --- a/src/pages/settings/components/Messages/DebouncedMessage.tsx +++ b/src/pages/settings/components/Messages/DebouncedMessage.tsx @@ -43,7 +43,8 @@ function DebouncedMessage({ } /> diff --git a/src/pages/settings/components/Search/DebouncedSearchProvider.tsx b/src/pages/settings/components/Search/DebouncedSearchProvider.tsx index fb985a2..1b0cfe0 100644 --- a/src/pages/settings/components/Search/DebouncedSearchProvider.tsx +++ b/src/pages/settings/components/Search/DebouncedSearchProvider.tsx @@ -65,7 +65,8 @@ function DebouncedSearchProvider({ } /> diff --git a/src/pages/settings/components/Shared/SettingsHeader.tsx b/src/pages/settings/components/Shared/SettingsHeader.tsx index c2beadc..1095874 100644 --- a/src/pages/settings/components/Shared/SettingsHeader.tsx +++ b/src/pages/settings/components/Shared/SettingsHeader.tsx @@ -10,6 +10,7 @@ import { TextInput, } from '@mantine/core'; import { useCommonHooks } from 'hooks'; +import { useState } from 'react'; import { FiHelpCircle, FiLoader, FiPlus } from 'react-icons/fi'; import { actionIconClasses, @@ -46,6 +47,7 @@ function SettingsHeader({ setIsLoading: (isLoading: boolean) => void; }) { const { isMobile } = useCommonHooks(); + const [disabled, setDisabled] = useState(false); return ( {searchValue !== undefined && ( { setDragging(e.target.checked); + setDisabled(e.target.checked); }} /> )} diff --git a/src/pages/settings/components/Theming/ThemeCard.tsx b/src/pages/settings/components/Theming/ThemeCard.tsx index 208e19a..377aa77 100644 --- a/src/pages/settings/components/Theming/ThemeCard.tsx +++ b/src/pages/settings/components/Theming/ThemeCard.tsx @@ -197,7 +197,7 @@ function ThemeCard({ setShiftEdit(0); }} onClick={() => { - setShiftEdit(0); + handleOpen(cardTheme); }} gap={0} style={{ @@ -216,9 +216,6 @@ function ThemeCard({ }} > { - handleOpen(cardTheme); - }} style={{ fontSize: '2em', fontWeight: 'bold', @@ -234,7 +231,15 @@ function ThemeCard({ setShiftShuffle(0); }} onClick={() => { - setShiftShuffle(0); + const themeList = JSON.parse( + themePlaylists?.find( + (t: ThemePlaylist) => t?.name === currentThemePlaylist, + )?.themeList ?? '[]', + ); + const filteredThemes = allThemes.filter((t: Theme) => + themeList.includes(t.id), + ); + handleThemeChange(filteredThemes, false); }} gap={0} style={{ @@ -254,17 +259,6 @@ function ThemeCard({ }} > { - const themeList = JSON.parse( - themePlaylists?.find( - (t: ThemePlaylist) => t?.name === currentThemePlaylist, - )?.themeList ?? '[]', - ); - const filteredThemes = allThemes.filter((t: Theme) => - themeList.includes(t.id), - ); - handleThemeChange(filteredThemes, false); - }} style={{ fontSize: '2em', fontWeight: 'bold', diff --git a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx index 79e898b..f553ba0 100644 --- a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx +++ b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx @@ -8,9 +8,9 @@ import { Text, } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; -import { useCommonHooks, useMutationAPI } from 'hooks'; +import { useCommonHooks } from 'hooks'; import { useState } from 'react'; -import { FiEdit, FiRefreshCcw, FiTrash } from 'react-icons/fi'; +import { FiEdit, FiTrash } from 'react-icons/fi'; import type { Theme, ThemePlaylist } from 'types'; import DeleteItemModal from '../Shared/DeleteItemModal'; import ThemeMiniCard from './ThemeMiniCard'; @@ -24,14 +24,12 @@ function ThemePlaylistCard({ handleOpen: (cardPlaylist: ThemePlaylist) => void; allThemes: Theme[]; }) { - const themePlaylistEndpoint = 'api/themePlaylists'; const [hover, setHover] = useState(false); const { setThemeName, setCurrentThemePlaylist, theme, handleDelete } = useCommonHooks(); - const syncableLists = ['All', 'Backgrounds', 'No Backgrounds']; - const { mutateAsync } = useMutationAPI(); + 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, + cardPlaylist?.themeList?.name === 'Time of Day' ? '[]' : cardPlaylist.themeList, ); return ( {cardPlaylist.name} - {syncableLists.includes(cardPlaylist.name) ? ( + {!defaultLists.includes(cardPlaylist.name) && ( { - event.stopPropagation(); - if (cardPlaylist.name === 'All') { - mutateAsync({ - method: 'PATCH', - endpoint: themePlaylistEndpoint, - body: { - id: cardPlaylist.id, - name: 'All', - themeList: JSON.stringify(allThemes.map((theme: Theme) => theme.id)), - }, - }); - } - if (cardPlaylist.name === 'Backgrounds') { - mutateAsync({ - method: 'PATCH', - endpoint: themePlaylistEndpoint, - body: { - id: cardPlaylist.id, - name: 'Backgrounds', - themeList: JSON.stringify( - allThemes - .filter( - (theme: Theme) => theme.backgroundImage.toLowerCase() !== 'none', - ) - .map((theme: Theme) => theme.id), - ), - }, - }); - } - if (cardPlaylist.name === 'No Backgrounds') { - mutateAsync({ - method: 'PATCH', - endpoint: themePlaylistEndpoint, - body: { - id: cardPlaylist.id, - name: 'No Backgrounds', - themeList: JSON.stringify( - allThemes - .filter( - (theme: Theme) => theme.backgroundImage.toLowerCase() === 'none', - ) - .map((theme: Theme) => theme.id), - ), - }, - }); - } + onClick={() => { + handleOpen(cardPlaylist); }} > - + + + )} + {cardPlaylist.default === 0 && ( + { + openModal(); + }} + > + - ) : ( - <> - { - handleOpen(cardPlaylist); - }} - > - - - {cardPlaylist.default === 0 && ( - { - openModal(); - }} - > - - - )} - )} + + + + ) : ( + Shuffle Enabled + ) + } + labelPosition='left' + checked={currentTheme === 'random'} + onChange={(e) => { + setCurrentTheme(e.target.checked ? 'random' : theme.name); + setCurrentThemePlaylist('All'); + }} + className={switchClasses.default} + classNames={switchClasses} + style={{ + zIndex: 250, + }} + /> + + + + + ); } diff --git a/src/pages/settings/components/WoL/DebouncedWolClient.tsx b/src/pages/settings/components/WoL/DebouncedWolClient.tsx index 50bfa40..4b1878a 100644 --- a/src/pages/settings/components/WoL/DebouncedWolClient.tsx +++ b/src/pages/settings/components/WoL/DebouncedWolClient.tsx @@ -64,7 +64,8 @@ function DebouncedWolClient({ } /> diff --git a/src/styles/Tabs.module.css b/src/styles/Tabs.module.css index fd98bc6..04949f7 100644 --- a/src/styles/Tabs.module.css +++ b/src/styles/Tabs.module.css @@ -22,11 +22,16 @@ &[data-active="true"] { border-color: var(--mantine-color-primary-0); } + width: 100%; + border-radius: 0%; + } + .tabLabel { + text-align: end; } .list { border-top: solid 2px var(--mantine-color-accent-0); - padding-left: 2rem; - padding-top: 2rem; + padding-top: 1.75rem; + align-items: end; } .list::before { border-color: var(--mantine-color-accent-0);