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

Updates to bookmarks

Browse Source
This commit is contained in:
Sean Edmunds
2025-09-03 16:11:10 -05:00
parent 16449dd48a
commit aef60a40c8
7 changed files with 119 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,6 +34,8 @@ function Applications({ contentType }: { contentType: string[] }) {
return -1;
case 'Custom':
return a.index > b.index ? 1 : -1;
default:
return 0;
}
})
?.filter(

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

@@ -47,6 +47,8 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
return -1;
case 'Custom':
return a.categoryIndex > b.categoryIndex ? 1 : -1;
default:
return 0;
}
})
?.filter(
@@ -84,18 +86,21 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`,
}}
>
{groups.map((category: BookmarkGroup) => {
return (
<BookmarkGroups
key={category.categoryName}
category={category.categoryName}
bookmarks={bookmarks.filter(
(bookmark: Bookmark) => bookmark.category === category.categoryName,
)}
bookmarkScale={bookmarkScale}
/>
);
})}
{groups
.filter((category: BookmarkGroup) => category.enabled === 1)
.map((category: BookmarkGroup) => {
return (
<BookmarkGroups
key={category.categoryName}
category={category.categoryName}
bookmarks={bookmarks.filter(
(bookmark: Bookmark) =>
bookmark.category === category.categoryName,
)}
bookmarkScale={bookmarkScale}
/>
);
})}
</Stack>
</Stack>
)}

70
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -1,10 +1,10 @@
import { Card, Group, Stack, Text, TextInput } from '@mantine/core';
import { Card, Group, Select, Stack, Text, TextInput } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, textInputClasses } from 'styles';
import type { Bookmark } from 'types';
import { cardClasses, selectClasses, textInputClasses } from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
function DebouncedBookmarkItem({
bookmarkItem,
@@ -16,8 +16,11 @@ function DebouncedBookmarkItem({
const { handleDelete, isMobile, theme } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: 'api/bookmarkCategories',
});
const [bookmark, setBookmark] = useState<Bookmark>(bookmarkItem);
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
const [update, setUpdate] = useState<any>({});
const [debounced] = useDebouncedValue(update, 1000);
const handleClose = () => {
@@ -36,6 +39,16 @@ function DebouncedBookmarkItem({
}
}, [update]);
useEffect(() => {
if (groupData) {
setGroups(
groupData.sort(
(a: BookmarkGroup, b: BookmarkGroup) => a.categoryName > b.categoryName,
),
);
}
}, [groupData, groupsIsFetched]);
return (
<Card
p={isMobile ? 'xl' : undefined}
@@ -75,7 +88,11 @@ function DebouncedBookmarkItem({
}}
openModal={openModal}
/>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<Group
justify='space-between'
pos={'relative'}
style={{ flexDirection: isMobile ? 'column' : 'row' }}
>
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
@@ -95,16 +112,29 @@ function DebouncedBookmarkItem({
: undefined
}
/>
<TextInput
<Select
label={'Category'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
defaultValue={bookmark.category}
onChange={(event) => {
setUpdate({
...bookmark,
category: event.target.value,
});
className={selectClasses.settingsItem}
classNames={{
wrapper: selectClasses.menuSelectWrapper,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
dropdown: selectClasses.dropdown,
}}
mt={'.75rem'}
limit={100}
defaultSearchValue={bookmark?.category}
data={groups.map((group) => {
return {
label: group.categoryName,
value: group.categoryName,
};
})}
defaultValue={bookmark?.category}
comboboxProps={{
zIndex: 3000,
}}
styles={
theme.textShadowsEnabled
@@ -113,6 +143,16 @@ function DebouncedBookmarkItem({
}
: undefined
}
onChange={(value: string | null) => {
setUpdate({
...bookmark,
category: value,
});
}}
searchable
maxDropdownHeight={175}
onDropdownOpen={() => setIsOpen(true)}
onDropdownClose={() => setIsOpen(false)}
/>
</Group>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>

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

@@ -15,15 +15,14 @@ import {
Stack,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal } from 'components';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaChevronLeft } from 'react-icons/fa';
import { FiPlus, FiTrash } from 'react-icons/fi';
import { FiPlus } from 'react-icons/fi';
import { buttonClasses, cardClasses, popoverClasses, textInputClasses } from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
import BookmarkSettingsItem from './BookmarkSettingsItem';
@@ -145,7 +144,7 @@ function DebouncedGroupSettingsItem({
mt={'-1.5rem'}
>
<Stack gap={0}>
<Group gap={0} align='end' justify='space-between'>
<Group w={'100%'} gap={8} align='end' justify='center' pos={'relative'}>
<TextInput
label={'Name'}
w={isMobile ? undefined : '56%'}
@@ -186,49 +185,53 @@ function DebouncedGroupSettingsItem({
: undefined
}
/>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
<Text
style={{
width: '30px',
height: '30px',
borderRadius: '100%',
backgroundColor: 'var(--mantine-color-accent-0)',
fontSize: '1.25rem',
textAlign: 'center',
textJustify: 'auto',
marginBottom: '.5rem',
marginLeft: '.5rem',
}}
>
<ActionIcon
color='red'
size={'2.75rem'}
onClick={() => {
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
{bookmarks.length}
</Text>
</Group>
<Text
style={{
width: '30px',
height: '30px',
borderRadius: '100%',
backgroundColor: 'var(--mantine-color-accent-0)',
position: 'absolute',
top: isMobile ? 156 : 78,
right: 22,
zIndex: 10,
fontSize: '1.25rem',
textAlign: 'center',
textJustify: 'auto',
}}
>
{bookmarks.length}
</Text>
</Stack>
</Card.Section>
<Card.Section mt={'1rem'} p={'1rem'}>
<Stack>
<Stack pos={'relative'}>
<Group
style={{
position: 'absolute',
width: '100%',
right: '6rem',
top: '-3.25rem',
}}
>
<ManagementPill
enabled={group.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...group,
enabled: event.target.checked ? 1 : 0,
});
}}
openModal={openModal}
/>
</Group>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={`${bookmarkGroup.id}`}>
{(provided: DroppableProvided) => (
<Stack ref={provided.innerRef} {...provided.droppableProps}>
<Stack
pos={'relative'}
ref={provided.innerRef}
{...provided.droppableProps}
>
{bookmarks.map((bookmark: Bookmark) => (
<Draggable
key={bookmark.id}

1
src/pages/settings/components/Theming/Themes/ThemeModal/ThemeModal.tsx
View File

@@ -47,6 +47,7 @@ export function ThemeModal({
if (playlist.themeList.includes(`${selectedTheme.id}`)) {
return playlist;
}
return null;
})
: [];

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

@@ -109,6 +109,7 @@ export function Themes() {
if (t.backgroundImage !== 'none') {
return t.backgroundImage;
}
return undefined;
})
.map((t) => t.backgroundImage),
),