refactor ListConfigMenu as modal

src/renderer/features/shared/components/list-config-menu.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import i18n from '/@/i18n/i18n';
 import { GridConfig } from '/@/renderer/features/shared/components/grid-config';
@@ -7,11 +8,11 @@ import { TableConfig } from '/@/renderer/features/shared/components/table-config
 import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
-import { Popover } from '/@/shared/components/popover/popover';
+import { Modal } from '/@/shared/components/modal/modal';
-import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
 import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Table } from '/@/shared/components/table/table';
+import { useDisclosure } from '/@/shared/hooks/use-disclosure';
 import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
 
 const DISPLAY_TYPES = [
@@ -82,21 +83,21 @@ interface ListConfigMenuProps {
 }
 
 export const ListConfigMenu = (props: ListConfigMenuProps) => {
+    const { t } = useTranslation();
     const displayType = useSettingsStore(
         (state) => state.lists[props.listKey]?.display,
     ) as ListDisplayType;
     const { setList } = useSettingsStoreActions();
+    const [isOpen, handlers] = useDisclosure(false);
 
     return (
-        <Popover position="bottom-end" trapFocus width={640}>
+        <>
-            <Popover.Target>
+            <SettingsButton onClick={handlers.toggle} />
-                <SettingsButton />
+            <Modal
-            </Popover.Target>
+                handlers={handlers}
-            <Popover.Dropdown>
+                opened={isOpen}
-                <ScrollArea
+                size="lg"
-                    allowDragScroll
+                title={t('common.configure', { postProcess: 'sentenceCase' })}
-                    scrollX
-                    style={{ height: 'auto', maxHeight: '70dvh', padding: '1rem' }}
             >
                 <Stack>
                     <SegmentedControl
@@ -114,9 +115,8 @@ export const ListConfigMenu = (props: ListConfigMenuProps) => {
                     />
                     <Config displayType={displayType} {...props} />
                 </Stack>
-                </ScrollArea>
+            </Modal>
-            </Popover.Dropdown>
+        </>
-        </Popover>
     );
 };