fix potential stale state on list config reorder, slight redesign

This commit is contained in:
jeffvli
2025-12-02 17:40:00 -08:00
parent 7701ea0a8c
commit d22b24d98f
4 changed files with 22 additions and 11 deletions
@@ -404,7 +404,10 @@ const GridRowConfig = ({
const handleReorder = useCallback( const handleReorder = useCallback(
(idFrom: string, idTo: string, edge: Edge | null) => { (idFrom: string, idTo: string, edge: Edge | null) => {
const idList = value.map((item) => item.id); const currentValue = useSettingsStore.getState().lists[listKey]?.grid.rows;
if (!currentValue) return;
const idList = currentValue.map((item) => item.id);
const newIdOrder = dndUtils.reorderById({ const newIdOrder = dndUtils.reorderById({
edge, edge,
idFrom, idFrom,
@@ -413,10 +416,10 @@ const GridRowConfig = ({
}); });
// Map the new ID order back to full items // Map the new ID order back to full items
const newOrder = newIdOrder.map((id) => value.find((item) => item.id === id)!); const newOrder = newIdOrder.map((id) => currentValue.find((item) => item.id === id)!);
onChange(newOrder); onChange(newOrder);
}, },
[onChange, value], [listKey, onChange],
); );
return ( return (
@@ -128,7 +128,7 @@ export const ListConfigMenu = (props: ListConfigMenuProps) => {
<Modal <Modal
handlers={handlers} handlers={handlers}
opened={isOpen} opened={isOpen}
size="lg" size="xl"
title={t('common.configure', { postProcess: 'sentenceCase' })} title={t('common.configure', { postProcess: 'sentenceCase' })}
> >
<Stack gap="xs"> <Stack gap="xs">
@@ -486,7 +486,10 @@ const TableColumnConfig = ({
const handleReorder = useCallback( const handleReorder = useCallback(
(idFrom: string, idTo: string, edge: Edge | null) => { (idFrom: string, idTo: string, edge: Edge | null) => {
const idList = value.map((item) => item.id); const currentValue = useSettingsStore.getState().lists[listKey]?.table.columns;
if (!currentValue) return;
const idList = currentValue.map((item) => item.id);
const newIdOrder = dndUtils.reorderById({ const newIdOrder = dndUtils.reorderById({
edge, edge,
idFrom, idFrom,
@@ -495,10 +498,10 @@ const TableColumnConfig = ({
}); });
// Map the new ID order back to full items // Map the new ID order back to full items
const newOrder = newIdOrder.map((id) => value.find((item) => item.id === id)!); const newOrder = newIdOrder.map((id) => currentValue.find((item) => item.id === id)!);
onChange(newOrder); onChange(newOrder);
}, },
[onChange, value], [listKey, onChange],
); );
return ( return (
@@ -721,7 +724,7 @@ const TableColumnItem = memo(
postProcess: 'sentenceCase', postProcess: 'sentenceCase',
}), }),
}} }}
variant={item.pinned === 'left' ? 'filled' : 'subtle'} variant={item.pinned === 'left' ? 'outline' : 'subtle'}
/> />
<ActionIcon <ActionIcon
icon="arrowRightToLine" icon="arrowRightToLine"
@@ -733,7 +736,7 @@ const TableColumnItem = memo(
postProcess: 'sentenceCase', postProcess: 'sentenceCase',
}), }),
}} }}
variant={item.pinned === 'right' ? 'filled' : 'subtle'} variant={item.pinned === 'right' ? 'outline' : 'subtle'}
/> />
</ActionIconGroup> </ActionIconGroup>
<ActionIconGroup className={styles.group}> <ActionIconGroup className={styles.group}>
@@ -747,7 +750,7 @@ const TableColumnItem = memo(
postProcess: 'sentenceCase', postProcess: 'sentenceCase',
}), }),
}} }}
variant={item.align === 'start' ? 'filled' : 'subtle'} variant={item.align === 'start' ? 'outline' : 'subtle'}
/> />
<ActionIcon <ActionIcon
icon="alignCenter" icon="alignCenter"
@@ -759,7 +762,7 @@ const TableColumnItem = memo(
postProcess: 'sentenceCase', postProcess: 'sentenceCase',
}), }),
}} }}
variant={item.align === 'center' ? 'filled' : 'subtle'} variant={item.align === 'center' ? 'outline' : 'subtle'}
/> />
<ActionIcon <ActionIcon
icon="alignRight" icon="alignRight"
@@ -41,6 +41,11 @@
&:focus-visible { &:focus-visible {
border: 1px solid lighten(var(--theme-colors-border), 10%); border: 1px solid lighten(var(--theme-colors-border), 10%);
} }
svg {
color: var(--theme-colors-primary);
fill: var(--theme-colors-primary);
}
} }
&[data-variant='filled'] { &[data-variant='filled'] {