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

Adding sorting to items in settings
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 17:10:03 -05:00
parent 78e6bd3374
commit 01dd6b1aa2
9 changed files with 200 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/components/SettingsHeader.tsx
View File

@@ -3,6 +3,7 @@ import {
Button,
Group,
Highlight,
Menu,
Popover,
Stack,
Switch,
@@ -10,7 +11,8 @@ import {
} from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import { FiHelpCircle, FiLoader, FiPlus, FiX } from 'react-icons/fi';
import { FaSort } from 'react-icons/fa';
import { FiHelpCircle, FiPlus, FiX } from 'react-icons/fi';
import {
actionIconClasses,
buttonClasses,
@@ -31,6 +33,8 @@ export function SettingsHeader({
searchPlaceholder,
isLoading,
setIsLoading,
sortBy,
setSortBy,
}: {
setDragging: undefined | ((dragging: boolean) => void);
openModal: undefined | (() => void);
@@ -45,6 +49,8 @@ export function SettingsHeader({
searchPlaceholder: string | undefined;
isLoading: boolean;
setIsLoading: (isLoading: boolean) => void;
sortBy: string;
setSortBy: undefined | ((sortBy: string) => void);
}) {
const { isMobile, theme } = useCommonHooks();
const [disabled, setDisabled] = useState(false);
@@ -123,50 +129,141 @@ export function SettingsHeader({
)}
</Group>
{searchValue !== undefined && (
<DebouncedInput
disabled={disabled}
<Group
gap={4}
w={isMobile ? undefined : '35%'}
pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.default}
classNames={textInputClasses}
autoFocus={!isMobile}
placeholder={searchPlaceholder ?? 'Search...'}
value={searchValue}
onInput={() => setIsLoading(true)}
onChange={(value: any) => {
setSearchValue(value);
}}
style={{
zIndex: 100,
}}
styles={
theme.textShadowsEnabled
? {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
: undefined
}
rightSection={
isLoading ? (
<ActionIcon
className={actionIconClasses.loadingSpinner}
classNames={actionIconClasses}
>
<FiLoader />
</ActionIcon>
) : (
searchValue && (
>
<DebouncedInput
disabled={disabled}
w={'90%'}
// pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.default}
classNames={textInputClasses}
autoFocus={!isMobile}
placeholder={searchPlaceholder ?? 'Search...'}
value={searchValue}
onInput={() => setIsLoading(true)}
onChange={(value: any) => {
setSearchValue(value);
}}
style={{
zIndex: 100,
}}
styles={
theme.textShadowsEnabled
? {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
: undefined
}
rightSection={
isLoading ? (
<ActionIcon
className={actionIconClasses.settingsTooltip}
className={actionIconClasses.loadingSpinner}
classNames={actionIconClasses}
onClick={() => setSearchValue('')}
>
<FiX />
</ActionIcon>
/>
) : (
searchValue && (
<ActionIcon
className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses}
onClick={() => setSearchValue('')}
>
<FiX />
</ActionIcon>
)
)
)
}
/>
}
/>
{setSortBy !== undefined && (
<Menu>
<Menu.Target>
<ActionIcon>
<FaSort />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
<Menu.Label>Sort By</Menu.Label>
<Menu.Item
onClick={() => {
setSortBy('A>Z');
}}
style={{
color:
sortBy === 'A>Z'
? 'var(--mantine-color-background-0)'
: 'var(--mantine-color-primary-0)',
backgroundColor:
sortBy === 'A>Z' ? 'var(--mantine-color-primary-0)' : undefined,
}}
>
{'A>Z'}
</Menu.Item>
<Menu.Item
onClick={() => {
setSortBy('Z>A');
}}
style={{
color:
sortBy === 'Z>A'
? 'var(--mantine-color-background-0)'
: 'var(--mantine-color-primary-0)',
backgroundColor:
sortBy === 'Z>A' ? 'var(--mantine-color-primary-0)' : undefined,
}}
>
{'Z>A'}
</Menu.Item>
<Menu.Item
onClick={() => {
setSortBy('Newest');
}}
style={{
color:
sortBy === 'Newest'
? 'var(--mantine-color-background-0)'
: 'var(--mantine-color-primary-0)',
backgroundColor:
sortBy === 'Newest' ? 'var(--mantine-color-primary-0)' : undefined,
}}
>
{'Newest'}
</Menu.Item>
<Menu.Item
onClick={() => {
setSortBy('Oldest');
}}
style={{
color:
sortBy === 'Oldest'
? 'var(--mantine-color-background-0)'
: 'var(--mantine-color-primary-0)',
backgroundColor:
sortBy === 'Oldest' ? 'var(--mantine-color-primary-0)' : undefined,
}}
>
{'Oldest'}
</Menu.Item>
<Menu.Item
onClick={() => {
setSortBy('Custom');
}}
style={{
color:
sortBy === 'Custom'
? 'var(--mantine-color-background-0)'
: 'var(--mantine-color-primary-0)',
backgroundColor:
sortBy === 'Custom' ? 'var(--mantine-color-primary-0)' : undefined,
}}
>
{'Custom'}
</Menu.Item>
</Menu.Dropdown>
</Menu>
)}
</Group>
)}
{setDragging && (
<Switch