feat(web): create new option modal

apps/web/components/kanban-ui/create-new-option-button.tsx

@@ -0,0 +1,13 @@
+import { Button, IconPlus } from '@egodb/ui'
+import { useSetAtom } from 'jotai'
+import { createNewOptionOpened } from './create-new-option.atom'
+
+export const CreateNewOptionButton: React.FC = () => {
+  const setOpened = useSetAtom(createNewOptionOpened)
+
+  return (
+    <Button onClick={() => setOpened(true)} w={300} variant="white" leftIcon={<IconPlus />}>
+      New Stack
+    </Button>
+  )
+}

apps/web/components/kanban-ui/create-new-option-modal.tsx

@@ -0,0 +1,55 @@
+import type { ICreateOptionSchema } from '@egodb/core'
+import { OptionId } from '@egodb/core'
+import { createOptionSchema } from '@egodb/core'
+import { Button, Divider, Group, Modal, Stack, TextInput, useForm, zodResolver } from '@egodb/ui'
+import { useAtom } from 'jotai'
+import { trpc } from '../../trpc'
+import type { ITableBaseProps } from '../table/table-base-props'
+import { createNewOptionOpened } from './create-new-option.atom'
+
+export const CreateNewOptionModal: React.FC<ITableBaseProps> = ({ table }) => {
+  const [opened, setOpened] = useAtom(createNewOptionOpened)
+  const form = useForm<ICreateOptionSchema>({
+    initialValues: {
+      name: '',
+    },
+    validate: zodResolver(createOptionSchema),
+  })
+
+  const utils = trpc.useContext()
+
+  const createOption = trpc.table.createOption.useMutation({
+    onSuccess() {
+      setOpened(false)
+      form.reset()
+      utils.table.get.refetch()
+    },
+  })
+
+  const onSubmit = form.onSubmit((values) => {
+    values.id = OptionId.create().value
+    createOption.mutate({
+      tableId: table.id.value,
+      option: values,
+    })
+  })
+
+  return (
+    <Modal title="Create New Option" opened={opened} onClose={() => setOpened(false)}>
+      <form onSubmit={onSubmit}>
+        <Stack>
+          <TextInput placeholder="option name" {...form.getInputProps('name')} />
+          <Divider />
+          <Group position="right">
+            <Button variant="white" onClick={() => setOpened(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!form.isValid()}>
+              Done
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  )
+}

apps/web/components/kanban-ui/create-new-option.atom.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const createNewOptionOpened = atom(false)

apps/web/components/kanban-ui/select-board.tsx

@@ -18,8 +18,9 @@ import { trpc } from '../../trpc'
 import type { ITableBaseProps } from '../table/table-base-props'
 import { openKanbanEditFieldAtom } from './kanban-edit-field.atom'
 import { KanbanLane, SortableKanbanLane } from './kanban-lane'
-import { NewStackLane } from './new-stack-lane'
+import { CreateNewOptionButton } from './create-new-option-button'
 import { SelectKanbanField } from './select-kanban-field'
+import { CreateNewOptionModal } from './create-new-option-modal'
 
 interface IProps extends ITableBaseProps {
   field: SelectField
@@ -117,7 +118,8 @@ export const SelectBoard: React.FC<IProps> = ({ table, field, records }) => {
           </DragOverlay>
         </DndContext>
 
-        <NewStackLane />
+        <CreateNewOptionModal table={table} />
+        <CreateNewOptionButton />
       </Group>
     </Container>
   )

packages/trpc/router/table.ts

@@ -1,6 +1,8 @@
 import type { IQueryTable } from '@egodb/core'
 import {
   CreateFieldCommand,
+  CreateOptionCommand,
+  createOptionCommandInput,
   CreateTableCommand,
   createTableCommandInput,
   createTableCommandOutput,
@@ -135,4 +137,12 @@ export const createTableRouter =
           const cmd = new ReorderOptionsCommand(input)
           return commandBus.execute<void>(cmd)
         }),
+      createOption: procedure
+        .meta({ openapi: { method: 'POST', path: '/table.createOption', tags } })
+        .input(createOptionCommandInput)
+        .output(z.void())
+        .mutation(({ input }) => {
+          const cmd = new CreateOptionCommand(input)
+          return commandBus.execute<void>(cmd)
+        }),
     })

packages/ui/Button.tsx

@@ -1 +1 @@
-export { Button, UnstyledButton, ActionIcon, ActionIconProps } from '@mantine/core'
+export { Button, UnstyledButton, ActionIcon } from '@mantine/core'