feat: allow user to create groups (#783)

* add use-prompt hook

* add create group modal

* allow adding groups through tghe ui

* Fix TypeScript linting errors in group creation tests

Replace explicit 'any' types with proper type annotations in the mock
mutation return value. Use 'as const' for status literal type and
explicitly declare mock function variables to avoid TypeScript errors.

* Refactor usePrompt to support Formik-style forms with react-hook-form and Zod

Add new usePromptForm hook that supports complex forms with:
- React Hook Form integration for form state management
- Zod schema validation for type-safe form data
- Custom form field rendering with full control over UI
- Backward compatibility with existing usePrompt usage

Key changes:
- Add FormPromptConfig type for form-based prompts
- Create FormPromptDialog component for form rendering
- Update PromptProvider to handle both legacy and form prompts
- Add usePromptForm hook alongside existing usePrompt
- Update group creation to use new form-based approach
- Add comprehensive tests and documentation examples

The legacy usePrompt remains unchanged for simple input prompts,
while usePromptForm provides a powerful alternative for complex
multi-field forms with advanced validation.

* simplify

* proper error handling

* use formik

* .

* fixes

* fixes

* more fixes

* cleanup

* cleanup

* .

* .

* cleanpu

* cleanpu

* add jsdoc

* cleanup

* cleanup

* layout fixes

* fix validation

* migrate to react hook form

* cleanpu

* improve validation logic

* auto format

* cleanup

* cleanpu

* refactor

* simplify types

* make group names case sensitive

* cleanpu

* change confusing naming

* remove hacky stuff from test

* disable usePrompt submit button when form is invalid

Author: kantord

renderer/src/common/contexts/prompt/form-prompt-dialog.tsx

@@ -0,0 +1,80 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from '@/common/components/ui/dialog'
+import { Button } from '@/common/components/ui/button'
+import type { ReactHookFormPromptConfig } from '.'
+import { useForm } from 'react-hook-form'
+import type { UseFormReturn } from 'react-hook-form'
+
+interface FormDialogProps {
+  isOpen: boolean
+  config: ReactHookFormPromptConfig<Record<string, unknown>>
+  onSubmit: (data: Record<string, unknown>) => void
+  onCancel: () => void
+  onOpenChange: (open: boolean) => void
+}
+
+export function FormDialog({
+  isOpen,
+  config,
+  onSubmit,
+  onCancel,
+  onOpenChange,
+}: FormDialogProps) {
+  const form = useForm({
+    defaultValues: config.defaultValues,
+    resolver: config.resolver,
+    mode: 'onChange',
+  })
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      onCancel()
+    } else {
+      onOpenChange(open)
+    }
+  }
+
+  const handleSubmit = (data: Record<string, unknown>) => {
+    onSubmit(data)
+  }
+
+  const handleCancel = () => {
+    form.reset()
+    onCancel()
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogContent>
+        <form onSubmit={form.handleSubmit(handleSubmit)}>
+          <DialogHeader>
+            <DialogTitle>{config.title || 'Form Input'}</DialogTitle>
+            <DialogDescription>{config.description || ''}</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            {config.fields(form as UseFormReturn<Record<string, unknown>>)}
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={handleCancel} type="button">
+              {config.buttons?.cancel ?? 'Cancel'}
+            </Button>
+            <Button
+              type="submit"
+              disabled={form.formState.isSubmitting || !form.formState.isValid}
+            >
+              {config.buttons?.confirm ?? 'OK'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

renderer/src/common/contexts/prompt/index.ts

@@ -0,0 +1,22 @@
+import { createContext, type ReactNode } from 'react'
+import type { UseFormReturn, FieldValues, Resolver } from 'react-hook-form'
+
+export type ReactHookFormPromptConfig<TValues extends FieldValues> = {
+  title?: string
+  description?: ReactNode
+  defaultValues: TValues
+  resolver?: Resolver<TValues>
+  fields: (form: UseFormReturn<TValues>) => ReactNode
+  buttons?: {
+    confirm?: string
+    cancel?: string
+  }
+}
+
+export type PromptContextType = {
+  promptForm: <TValues extends Record<string, unknown>>(
+    config: ReactHookFormPromptConfig<TValues>
+  ) => Promise<TValues | null>
+}
+
+export const PromptContext = createContext<PromptContextType | null>(null)

renderer/src/common/contexts/prompt/provider.tsx

@@ -0,0 +1,66 @@
+import { useState, type ReactNode } from 'react'
+import { PromptContext, type ReactHookFormPromptConfig } from '.'
+import { FormDialog } from './form-prompt-dialog'
+
+export function PromptProvider({ children }: { children: ReactNode }) {
+  const [activePrompt, setActivePrompt] = useState<{
+    config: ReactHookFormPromptConfig<Record<string, unknown>>
+    resolve: (value: unknown) => void
+  } | null>(null)
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  const promptForm = <TValues extends Record<string, unknown>>(
+    config: ReactHookFormPromptConfig<TValues>
+  ) => {
+    return new Promise<TValues | null>((resolve) => {
+      setActivePrompt({
+        config: config as ReactHookFormPromptConfig<Record<string, unknown>>,
+        resolve: (value: unknown) => {
+          resolve(value as TValues)
+        },
+      })
+      setIsOpen(true)
+    })
+  }
+
+  const handleSubmit = (data: unknown) => {
+    if (!activePrompt) return
+    activePrompt.resolve(data)
+    closeDialog()
+  }
+
+  const handleCancel = () => {
+    if (activePrompt) {
+      activePrompt.resolve(null)
+    }
+    closeDialog()
+  }
+
+  const closeDialog = () => {
+    setIsOpen(false)
+    setActivePrompt(null)
+  }
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      handleCancel()
+    }
+  }
+
+  return (
+    <PromptContext.Provider value={{ promptForm }}>
+      {children}
+
+      {activePrompt && (
+        <FormDialog
+          isOpen={isOpen}
+          config={activePrompt.config}
+          onSubmit={handleSubmit as (v: Record<string, unknown>) => void}
+          onCancel={handleCancel}
+          onOpenChange={handleOpenChange}
+        />
+      )}
+    </PromptContext.Provider>
+  )
+}