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

Mobile improvements and packages updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-06 14:07:58 -05:00
parent 44fc088b2a
commit a148335284
20 changed files with 391 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -280,16 +280,20 @@ export default function Search({
const [showFillButton, setShowFillButton] = useState(false);
if (item.option.searchTerm !== undefined) {
const m = new Date(item.option.dateTimeStamp);
const year = m.getUTCFullYear();
const year = `${m.getUTCFullYear()}`.slice(-2);
const month = `0${m.getUTCMonth() + 1}`.slice(-2);
const day = `0${m.getUTCDate()}`.slice(-2);
const hours = `0${m.getUTCHours()}`.slice(-2);
const minutes = `0${m.getUTCMinutes()}`.slice(-2);
const seconds = `0${m.getUTCSeconds()}`.slice(-2);
const dateString = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
const dateString = isMobile
? `${month}/${day}/${year}`
: `${month}/${day}/${year} ${hours}:${minutes}`;
return (
<Group
w={'100%'}
display={'flex'}
justify={'space-between'}
gap={0}
onClick={() => {
handleSearchHistoryItem(item);
}}
@@ -300,7 +304,7 @@ export default function Search({
setShowFillButton(false);
}}
>
<Group w={'15%'}>
<Group m={0} p={0} miw={'160px'} style={{ overflow: 'hidden' }}>
<Text
style={{
backgroundColor: `${theme.primaryColor}33`,
@@ -324,32 +328,57 @@ export default function Search({
</ActionIcon>
)}
</Group>
<Group justify='space-between' w={'80%'}>
<Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
<Group
m={0}
p={0}
gap={0}
justify='space-between'
w={'65%'}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
boxSizing: 'border-box',
position: 'relative',
}}
>
<Text
w={'75%'}
c={'var(--mantine-color-primary-0)'}
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{item.option.searchTerm}
</Text>
<Text
w={'25%'}
style={{
color: `${theme.primaryColor}55`,
textAlign: 'right',
}}
>
{dateString}
</Text>
</Group>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
mutateAsync({
method: 'DELETE',
endpoint: searchEndpoint,
body: { id: item.option.id },
});
}}
>
<FiTrash />
</ActionIcon>
)}
<Group m={0} p={0} right={16} w={'24px'}>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
mutateAsync({
method: 'DELETE',
endpoint: searchEndpoint,
body: { id: item.option.id },
});
}}
>
<FiTrash />
</ActionIcon>
)}
</Group>
</Group>
);
}

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

@@ -101,7 +101,15 @@ function SettingsButton() {
}, [allThemeData, allThemeDataIsFetched]);
return (
<>
{overlayOpened && <Overlay pos={'fixed'} />}
{overlayOpened && (
<Overlay
pos={'fixed'}
blur={3}
onTouchStart={(e) => {
e.stopPropagation();
}}
/>
)}
<Menu
classNames={menuClasses}
width={isMobile ? '98%' : 'auto'}
@@ -126,7 +134,15 @@ function SettingsButton() {
}}
>
<Group p={'1rem'} gap={12}>
<Stack display={'flex'} align='center'>
<Stack
justify='center'
align='center'
style={{
display: 'flex',
flexDirection: isMobile ? 'row' : 'column',
width: isMobile ? '100%' : undefined,
}}
>
<Stack
gap={0}
align='center'
@@ -167,6 +183,7 @@ function SettingsButton() {
}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
@@ -263,6 +280,7 @@ function SettingsButton() {
}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
@@ -270,7 +288,6 @@ function SettingsButton() {
}}
comboboxProps={{
withinPortal: false,
width: 'fit-content',
}}
onChange={(_value, option: ComboboxItem) => {
setCurrentThemePlaylist(option.value);
@@ -364,6 +381,7 @@ function SettingsButton() {
value={appSort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
@@ -451,6 +469,7 @@ function SettingsButton() {
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
root: selectClasses.menuSelectRoot,
}}
comboboxProps={{
withinPortal: false,