diff --git a/web/src/components/settings/ComposerToolbarLayoutControl.tsx b/web/src/components/settings/ComposerToolbarLayoutControl.tsx index dcec68d2..13247779 100644 --- a/web/src/components/settings/ComposerToolbarLayoutControl.tsx +++ b/web/src/components/settings/ComposerToolbarLayoutControl.tsx @@ -37,10 +37,10 @@ export function ComposerToolbarLayoutControl() { const moveDraggedItem = (group: ComposerToolbarGroup, index: number) => { if (draggedItem) { - const next = layout.mode === 'split' + const next = group === 'hidden' || layout.hidden.includes(draggedItem) || layout.mode === 'split' ? moveComposerToolbarItem(layout, draggedItem, group, index) : moveComposerToolbarItemInSingleLayout(layout, draggedItem, index) - const unchanged = next.left.join() === layout.left.join() && next.right.join() === layout.right.join() + const unchanged = next.left.join() === layout.left.join() && next.right.join() === layout.right.join() && next.hidden.join() === layout.hidden.join() if (!unchanged) { setLayout(next) } @@ -51,9 +51,10 @@ export function ComposerToolbarLayoutControl() { event.preventDefault() const item = draggedItem ?? event.dataTransfer.getData('text/plain') if ((COMPOSER_TOOLBAR_ITEM_IDS as readonly string[]).includes(item)) { - const next = layout.mode === 'split' - ? moveComposerToolbarItem(layout, item as ComposerToolbarItemId, group, index) - : moveComposerToolbarItemInSingleLayout(layout, item as ComposerToolbarItemId, index) + const typedItem = item as ComposerToolbarItemId + const next = group === 'hidden' || layout.hidden.includes(typedItem) || layout.mode === 'split' + ? moveComposerToolbarItem(layout, typedItem, group, index) + : moveComposerToolbarItemInSingleLayout(layout, typedItem, index) setLayout(next) } setDraggedItem(null) @@ -61,7 +62,7 @@ export function ComposerToolbarLayoutControl() { const moveItemByOffset = (item: ComposerToolbarItemId, group: ComposerToolbarGroup, index: number, offset: -1 | 1) => { const targetIndex = Math.max(0, index + offset) - const next = layout.mode === 'split' + const next = group === 'hidden' || layout.mode === 'split' ? moveComposerToolbarItem(layout, item, group, targetIndex) : moveComposerToolbarItemInSingleLayout(layout, item, targetIndex) setLayout(next) @@ -127,8 +128,10 @@ export function ComposerToolbarLayoutControl() { const singleAlignment = layout.mode === 'center' ? 'justify-center' : layout.mode === 'right' ? 'justify-end' : 'justify-start' const singleItems = [...layout.left, ...layout.right] - const selectedGroup: ComposerToolbarGroup = selectedItem && layout.right.includes(selectedItem) ? 'right' : 'left' - const selectedItems = layout.mode === 'split' ? layout[selectedGroup] : singleItems + const selectedGroup: ComposerToolbarGroup = selectedItem && layout.hidden.includes(selectedItem) + ? 'hidden' + : selectedItem && layout.right.includes(selectedItem) ? 'right' : 'left' + const selectedItems = selectedGroup === 'hidden' ? layout.hidden : layout.mode === 'split' ? layout[selectedGroup] : singleItems const selectedIndex = selectedItem ? selectedItems.indexOf(selectedItem) : -1 return ( @@ -173,6 +176,22 @@ export function ComposerToolbarLayoutControl() { +
+

{t('settings.chat.composerToolbar.hidden')}

+
+ {layout.hidden.length > 0 + ? renderGroup('hidden', layout.hidden, 'justify-start', true) + : ( +
event.preventDefault()} + onDrop={(event) => onDrop(event, 'hidden', 0)} + > + {t('settings.chat.composerToolbar.emptyHidden')} +
+ )} +
+
{selectedItem && selectedIndex >= 0 ? (
{t(ITEM_LABEL_KEYS[selectedItem])} @@ -197,7 +216,28 @@ export function ComposerToolbarLayoutControl() { > → - {layout.mode === 'split' ? ( + {selectedGroup !== 'hidden' ? ( + + ) : ( + + )} + {layout.mode === 'split' && selectedGroup !== 'hidden' ? (