feat(frontend/table): improve column visibility UI

frontend/packages/ui/src/features/table/components/control-button.tsx

@@ -0,0 +1,45 @@
+import { type ElementType } from 'react'
+import { forwardRef } from 'react'
+import { Badge, Button, Group, Text, type BadgeProps } from '@mantine/core'
+import { type IconProps } from '@tabler/icons-react'
+
+type ControlButtonProps = {
+  onClick: () => void
+  isActive?: boolean
+
+  icon: ElementType<IconProps>
+  label: string
+
+  badgeCount: number
+  badgeColor?: BadgeProps['color']
+}
+
+export const ControlButton = forwardRef<HTMLButtonElement, ControlButtonProps>(
+  (
+    { isActive = false, onClick, icon: Icon, label, badgeCount, badgeColor },
+    ref
+  ) => {
+    return (
+      <Button
+        ref={ref}
+        variant={isActive ? 'light' : 'white'}
+        color="gray"
+        c="black"
+        size="xs"
+        leftSection={<Icon size={14} />}
+        onClick={onClick}
+      >
+        <Group gap={6}>
+          <Text size="xs" fw={500}>
+            {label}
+          </Text>
+          {badgeCount && (
+            <Badge variant="light" size="sm" radius="sm" color={badgeColor}>
+              {badgeCount}
+            </Badge>
+          )}
+        </Group>
+      </Button>
+    )
+  }
+)

frontend/packages/ui/src/features/table/components/popovers/fields-popover.tsx → frontend/packages/ui/src/features/table/components/popovers/base-popover.tsx

@@ -1,35 +1,30 @@
 import { type ReactNode } from 'react'
-import { Popover, rem } from '@mantine/core'
+import { Popover } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 
-import { FieldSettings, type FieldSettingsProps } from './field-settings'
-
 type RenderTargetOptions = {
   opened: boolean
   toggle: () => void
 }
 
-type FieldsPopoverProps = {
+type BasePopoverProps = {
   renderTarget: (options: RenderTargetOptions) => ReactNode
-} & FieldSettingsProps
+  children: ReactNode
+}
 
-export function FieldsPopover({
-  renderTarget,
-  ...fieldSettingsProps
-}: FieldsPopoverProps) {
+export function BasePopover({ renderTarget, children }: BasePopoverProps) {
   const [opened, { toggle, open, close }] = useDisclosure(false)
 
   return (
     <Popover
       opened={opened}
       onChange={(value) => (value ? open() : close())}
       onClose={close}
-      width={rem(320)}
       shadow="md"
       radius="sm"
       closeOnClickOutside
       withArrow
-      arrowPosition="center"
+      arrowPosition="side"
       arrowSize={12}
       offset={{ mainAxis: 6 }}
       position="bottom-start"
@@ -44,7 +39,7 @@ export function FieldsPopover({
     >
       <Popover.Target>{renderTarget({ opened, toggle })}</Popover.Target>
       <Popover.Dropdown px={0} py={0}>
-        <FieldSettings {...fieldSettingsProps} />
+        {children}
       </Popover.Dropdown>
     </Popover>
   )