🚸 (results) Improve results action buttons

Now have an export all modal with settings and a better column order form

apps/builder/src/components/icons.tsx

@@ -31,6 +31,12 @@ export const ChevronLeftIcon = (props: IconProps) => (
   </Icon>
 )
 
+export const ChevronRightIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <polyline points="9 18 15 12 9 6"></polyline>
+  </Icon>
+)
+
 export const PlusIcon = (props: IconProps) => (
   <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
     <line x1="12" y1="5" x2="12" y2="19"></line>
@@ -57,6 +63,14 @@ export const MoreVerticalIcon = (props: IconProps) => (
   </Icon>
 )
 
+export const MoreHorizontalIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <circle cx="12" cy="12" r="1"></circle>
+    <circle cx="19" cy="12" r="1"></circle>
+    <circle cx="5" cy="12" r="1"></circle>
+  </Icon>
+)
+
 export const GlobeIcon = (props: IconProps) => (
   <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
     <circle cx="12" cy="12" r="10"></circle>
@@ -505,3 +519,14 @@ export const CloudOffIcon = (props: IconProps) => (
     <line x1="1" y1="1" x2="23" y2="23"></line>
   </Icon>
 )
+
+export const ListIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <line x1="8" y1="6" x2="21" y2="6"></line>
+    <line x1="8" y1="12" x2="21" y2="12"></line>
+    <line x1="8" y1="18" x2="21" y2="18"></line>
+    <line x1="3" y1="6" x2="3.01" y2="6"></line>
+    <line x1="3" y1="12" x2="3.01" y2="12"></line>
+    <line x1="3" y1="18" x2="3.01" y2="18"></line>
+  </Icon>
+)

apps/builder/src/features/account/components/UserPreferenceForm/UserPreferencesForm.tsx

@@ -6,7 +6,7 @@ import { GraphNavigationRadioGroup } from './GraphNavigationRadioGroup'
 import { AppearanceRadioGroup } from './AppearanceRadioGroup'
 
 export const UserPreferencesForm = () => {
-  const { setColorMode } = useColorMode()
+  const { colorMode, setColorMode } = useColorMode()
   const { user, updateUser } = useUser()
 
   useEffect(() => {
@@ -35,7 +35,11 @@ export const UserPreferencesForm = () => {
       <Stack spacing={6}>
         <Heading size="md">Appearance</Heading>
         <AppearanceRadioGroup
-          defaultValue={user?.preferredAppAppearance ?? 'system'}
+          defaultValue={
+            user?.preferredAppAppearance
+              ? user.preferredAppAppearance
+              : colorMode
+          }
           onChange={changeAppearance}
         />
       </Stack>

apps/builder/src/features/results/components/ResultsTable/ColumnSettings.tsx

@@ -0,0 +1,170 @@
+import { EyeOffIcon, GripIcon, EyeIcon } from '@/components/icons'
+import { Stack, Portal, Flex, HStack, IconButton } from '@chakra-ui/react'
+import {
+  DndContext,
+  closestCenter,
+  DragOverlay,
+  useSensors,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  DragEndEvent,
+  DragStartEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+  sortableKeyboardCoordinates,
+  arrayMove,
+} from '@dnd-kit/sortable'
+import { Text } from '@chakra-ui/react'
+import { ResultHeaderCell } from 'models'
+import { HeaderIcon } from '../../utils'
+import { useState } from 'react'
+import { CSS } from '@dnd-kit/utilities'
+
+type Props = {
+  resultHeader: ResultHeaderCell[]
+  columnVisibility: { [key: string]: boolean }
+  columnOrder: string[]
+  onColumnOrderChange: (columnOrder: string[]) => void
+  setColumnVisibility: (columnVisibility: { [key: string]: boolean }) => void
+}
+
+export const ColumnSettings = ({
+  resultHeader,
+  columnVisibility,
+  setColumnVisibility,
+  columnOrder,
+  onColumnOrderChange,
+}: Props) => {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  )
+  const [draggingColumnId, setDraggingColumnId] = useState<string | null>(null)
+
+  const onEyeClick = (id: string) => () => {
+    columnVisibility[id] === false
+      ? setColumnVisibility({ ...columnVisibility, [id]: true })
+      : setColumnVisibility({ ...columnVisibility, [id]: false })
+  }
+  const sortedHeader = resultHeader.sort(
+    (a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id)
+  )
+  const hiddenHeaders = resultHeader.filter(
+    (header) => columnVisibility[header.id] === false
+  )
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event
+    setDraggingColumnId(active.id as string)
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+
+    if (active.id !== over?.id) {
+      const oldIndex = columnOrder.indexOf(active.id as string)
+      const newIndex = columnOrder.indexOf(over?.id as string)
+      if (newIndex === -1 || oldIndex === -1) return
+      const newColumnOrder = arrayMove(columnOrder, oldIndex, newIndex)
+      onColumnOrderChange(newColumnOrder)
+    }
+  }
+
+  return (
+    <Stack>
+      <Stack>
+        <Text fontWeight="semibold" fontSize="sm">
+          Shown in table:
+        </Text>
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext
+            items={columnOrder}
+            strategy={verticalListSortingStrategy}
+          >
+            {sortedHeader.map((header) => (
+              <SortableColumns
+                key={header.id}
+                header={header}
+                onEyeClick={onEyeClick}
+                hiddenHeaders={hiddenHeaders}
+              />
+            ))}
+          </SortableContext>
+          <Portal>
+            <DragOverlay dropAnimation={{ duration: 0 }}>
+              {draggingColumnId ? <Flex /> : null}
+            </DragOverlay>
+          </Portal>
+        </DndContext>
+      </Stack>
+    </Stack>
+  )
+}
+
+const SortableColumns = ({
+  header,
+  hiddenHeaders,
+  onEyeClick,
+}: {
+  header: ResultHeaderCell
+  hiddenHeaders: ResultHeaderCell[]
+  onEyeClick: (key: string) => () => void
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: header.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  const isHidden = hiddenHeaders.some(
+    (hiddenHeader) => hiddenHeader.id === header.id
+  )
+
+  return (
+    <Flex
+      justify="space-between"
+      ref={setNodeRef}
+      style={style}
+      opacity={isDragging || isHidden ? 0.5 : 1}
+      {...attributes}
+    >
+      <HStack>
+        <IconButton
+          size="sm"
+          cursor="grab"
+          icon={<GripIcon transform="rotate(90deg)" />}
+          aria-label={'Drag'}
+          variant="ghost"
+          {...listeners}
+        />
+        <HeaderIcon header={header} />
+        <Text noOfLines={1}>{header.label}</Text>
+      </HStack>
+      <IconButton
+        icon={isHidden ? <EyeOffIcon /> : <EyeIcon />}
+        size="sm"
+        aria-label={'Hide column'}
+        onClick={onEyeClick(header.id)}
+      />
+    </Flex>
+  )
+}