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(
(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({
edge,
idFrom,
@@ -413,10 +416,10 @@ const GridRowConfig = ({
});
// 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, value],
[listKey, onChange],
);
return (
@@ -128,7 +128,7 @@ export const ListConfigMenu = (props: ListConfigMenuProps) => {
<Modal
handlers={handlers}
opened={isOpen}
size="lg"
size="xl"
title={t('common.configure', { postProcess: 'sentenceCase' })}
>
<Stack gap="xs">
@@ -486,7 +486,10 @@ const TableColumnConfig = ({
const handleReorder = useCallback(
(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({
edge,
idFrom,
@@ -495,10 +498,10 @@ const TableColumnConfig = ({
});
// 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, value],
[listKey, onChange],
);
return (
@@ -721,7 +724,7 @@ const TableColumnItem = memo(
postProcess: 'sentenceCase',
}),
}}
variant={item.pinned === 'left' ? 'filled' : 'subtle'}
variant={item.pinned === 'left' ? 'outline' : 'subtle'}
/>
<ActionIcon
icon="arrowRightToLine"
@@ -733,7 +736,7 @@ const TableColumnItem = memo(
postProcess: 'sentenceCase',
}),
}}
variant={item.pinned === 'right' ? 'filled' : 'subtle'}
variant={item.pinned === 'right' ? 'outline' : 'subtle'}
/>
</ActionIconGroup>
<ActionIconGroup className={styles.group}>
@@ -747,7 +750,7 @@ const TableColumnItem = memo(
postProcess: 'sentenceCase',
}),
}}
variant={item.align === 'start' ? 'filled' : 'subtle'}
variant={item.align === 'start' ? 'outline' : 'subtle'}
/>
<ActionIcon
icon="alignCenter"
@@ -759,7 +762,7 @@ const TableColumnItem = memo(
postProcess: 'sentenceCase',
}),
}}
variant={item.align === 'center' ? 'filled' : 'subtle'}
variant={item.align === 'center' ? 'outline' : 'subtle'}
/>
<ActionIcon
icon="alignRight"
@@ -41,6 +41,11 @@
&:focus-visible {
border: 1px solid lighten(var(--theme-colors-border), 10%);
}
svg {
color: var(--theme-colors-primary);
fill: var(--theme-colors-primary);
}
}
&[data-variant='filled'] {