Refactor topic and webhook forms to use modals

- Replaced TopicFormDialog with TopicFormModal for better modal handling.
- Updated TopicDetail to use presentAddNotesToTopic for adding notes.
- Removed WebhookEditorDialog and implemented WebhookEditorModal for webhook editing.
- Adjusted TopicsRouteViewContent and WebhooksRouteViewContent to utilize new modal components.
- Enhanced MasterDetailLayout to support pixel-based resizing for list components.
- Cleaned up unused code and improved overall structure for better maintainability.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/admin/src/features/ai/components/AiGroupedResourceSurface.tsx

@@ -180,9 +180,6 @@ export function AiGroupedResourceSurface<
 
   return (
     <MasterDetailLayout
-      defaultSize={0.36}
-      maxSize={0.48}
-      minSize={0.28}
       showDetailOnMobile={showDetailOnMobile}
       list={
         <section className="flex h-full min-h-0 flex-col bg-white dark:bg-neutral-950">

apps/admin/src/features/ai/components/AiTasksSurface.tsx

@@ -218,9 +218,6 @@ export function AiTasksSurface() {
 
   return (
     <MasterDetailLayout
-      defaultSize={0.4}
-      maxSize={0.5}
-      minSize={0.3}
       showDetailOnMobile={showDetailOnMobile}
       list={
         <section className="flex h-full min-h-0 flex-col border-b border-neutral-200 lg:border-b-0 lg:border-r dark:border-neutral-800">

apps/admin/src/features/backup/components/BackupRouteViewContent.tsx

@@ -191,9 +191,6 @@ export function BackupRouteViewContent() {
 
   return (
     <MasterDetailLayout
-      defaultSize={0.38}
-      maxSize={0.45}
-      minSize={0.25}
       showDetailOnMobile={showDetailOnMobile}
       list={
         <section className="flex h-full min-h-0 flex-col">

apps/admin/src/features/categories/components/CategoriesRouteViewContent.tsx

@@ -14,7 +14,7 @@ import { cn } from '~/utils/cn'
 
 import { getErrorMessage } from '../utils/errors'
 import { CategoryDetail } from './CategoryDetail'
-import { CategoryFormDialog } from './CategoryFormDialog'
+import { presentCategoryForm } from './CategoryFormModal'
 import { CategoryRow } from './CategoryRow'
 import { DetailEmpty } from './DetailEmpty'
 import { EmptyList } from './EmptyList'
@@ -26,7 +26,6 @@ export function CategoriesRouteViewContent() {
   const { t } = useI18n()
   const queryClient = useQueryClient()
   const [selectedItem, setSelectedItem] = useState<SelectedItem | null>(null)
-  const [formMode, setFormMode] = useState<CategoryFormMode | null>(null)
   const [showDetailOnMobile, setShowDetailOnMobile] = useState(false)
 
   const categoriesQuery = useQuery({
@@ -91,11 +90,17 @@ export function CategoriesRouteViewContent() {
     setShowDetailOnMobile(true)
   }
 
+  const openForm = async (mode: CategoryFormMode) => {
+    const category = await presentCategoryForm(mode)
+    if (category) {
+      setSelectedItem({ id: category.id, kind: 'category' })
+      setShowDetailOnMobile(true)
+      await invalidateCategories()
+    }
+  }
+
   return (
     <MasterDetailLayout
-      defaultSize={0.34}
-      maxSize={0.44}
-      minSize={0.25}
       showDetailOnMobile={showDetailOnMobile}
       list={
         <section className="flex h-full min-h-0 flex-col border-b border-neutral-200 lg:border-b-0 lg:border-r dark:border-neutral-800">
@@ -115,7 +120,7 @@ export function CategoriesRouteViewContent() {
               {categories.length} / {tags.length}
             </span>
             <Button
-              onClick={() => setFormMode({ kind: 'create' })}
+              onClick={() => void openForm({ kind: 'create' })}
               type="button"
               variant="subtle"
             >
@@ -135,7 +140,7 @@ export function CategoriesRouteViewContent() {
                   action={
                     <Button
                       className="mt-3"
-                      onClick={() => setFormMode({ kind: 'create' })}
+                      onClick={() => void openForm({ kind: 'create' })}
                       type="button"
                     >
                       {t('categories.list.create')}
@@ -200,7 +205,7 @@ export function CategoriesRouteViewContent() {
                   deleteMutation.mutate(category.id)
                 }
               }}
-              onEdit={(category) => setFormMode({ category, kind: 'edit' })}
+              onEdit={(category) => void openForm({ category, kind: 'edit' })}
             />
           ) : selectedTag ? (
             <TagDetail
@@ -212,19 +217,6 @@ export function CategoriesRouteViewContent() {
           )}
         </section>
       }
-    >
-      {formMode ? (
-        <CategoryFormDialog
-          mode={formMode}
-          onClose={() => setFormMode(null)}
-          onSaved={async (category) => {
-            setFormMode(null)
-            setSelectedItem({ id: category.id, kind: 'category' })
-            setShowDetailOnMobile(true)
-            await invalidateCategories()
-          }}
-        />
-      ) : null}
-    </MasterDetailLayout>
+    />
   )
 }

apps/admin/src/features/categories/components/CategoryFormDialog.tsx

@@ -0,0 +1,116 @@
+import { useMutation } from '@tanstack/react-query'
+import { Loader2 } from 'lucide-react'
+import { FormEvent, useState } from 'react'
+import { toast } from 'sonner'
+import type { CreateCategoryData } from '~/api/categories'
+import type { CategoryModel } from '~/models/category'
+import type { CategoryFormMode } from '../types/categories'
+
+import { createCategory, updateCategory } from '~/api/categories'
+import { useI18n } from '~/i18n'
+import { ModalHeader } from '~/ui/feedback/modal'
+import { present, useModal } from '~/ui/feedback/modal-imperative'
+import { Button } from '~/ui/primitives/button'
+import { TextInput } from '~/ui/primitives/text-field'
+
+import { getErrorMessage } from '../utils/errors'
+
+interface CategoryFormModalProps {
+  mode: CategoryFormMode
+}
+
+function CategoryFormModal(props: CategoryFormModalProps) {
+  const { t } = useI18n()
+  const modal = useModal<CategoryModel>()
+  const [name, setName] = useState(
+    props.mode.kind === 'edit' ? props.mode.category.name : '',
+  )
+  const [slug, setSlug] = useState(
+    props.mode.kind === 'edit' ? props.mode.category.slug : '',
+  )
+  const title =
+    props.mode.kind === 'edit'
+      ? t('categories.form.editTitle')
+      : t('categories.form.createTitle')
+
+  const mutation = useMutation({
+    mutationFn: (data: CreateCategoryData) =>
+      props.mode.kind === 'edit'
+        ? updateCategory(props.mode.category.id, { ...data, type: 0 })
+        : createCategory(data),
+    onError: (error: unknown) =>
+      toast.error(getErrorMessage(error, t('categories.form.saveFailed'))),
+    onSuccess: (category) => {
+      toast.success(
+        props.mode.kind === 'edit'
+          ? t('categories.form.updated')
+          : t('categories.form.created'),
+      )
+      modal.close(category)
+    },
+  })
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const payload = {
+      name: name.trim(),
+      slug: slug.trim(),
+    }
+
+    if (!payload.name || !payload.slug) {
+      toast.error(t('categories.form.validateRequired'))
+      return
+    }
+
+    mutation.mutate(payload)
+  }
+
+  return (
+    <form className="flex w-full flex-col" onSubmit={onSubmit}>
+      <ModalHeader subtitle={t('categories.form.subtitle')} title={title} />
+      <div className="grid gap-4 p-5">
+        <TextInput
+          autoFocus
+          label={t('categories.form.name')}
+          labelClassName="text-xs text-neutral-500 dark:text-neutral-400"
+          onChange={setName}
+          value={name}
+        />
+        <TextInput
+          controlClassName="font-mono"
+          label={t('categories.form.slug')}
+          labelClassName="text-xs text-neutral-500 dark:text-neutral-400"
+          onChange={setSlug}
+          value={slug}
+        />
+      </div>
+      <div className="flex justify-end gap-2 border-t border-neutral-200 px-5 py-4 dark:border-neutral-800">
+        <Button onClick={() => modal.dismiss()} type="button" variant="subtle">
+          {t('common.cancel')}
+        </Button>
+        <Button disabled={mutation.isPending} type="submit">
+          {mutation.isPending ? (
+            <Loader2 aria-hidden="true" className="size-4 animate-spin" />
+          ) : null}
+          {t('common.save')}
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+/**
+ * Open the category form modal. Resolves with the saved category on success.
+ */
+export async function presentCategoryForm(
+  mode: CategoryFormMode,
+): Promise<CategoryModel | undefined> {
+  const handle = present<CategoryFormModalProps, CategoryModel>(
+    CategoryFormModal,
+    { mode },
+    {
+      modalProps: { popupStyle: { width: 'min(92vw, 28rem)' } },
+    },
+  )
+  return await handle
+}

apps/admin/src/features/categories/components/CategoryFormModal.tsx

@@ -256,9 +256,6 @@ export function CommentsRouteViewContent() {
 
   return (
     <MasterDetailLayout
-      defaultSize={0.42}
-      maxSize={0.5}
-      minSize={0.25}
       showDetailOnMobile={showDetailOnMobile}
       list={
         <FocusScope

apps/admin/src/features/comments/components/CommentsRouteViewContent.tsx

@@ -162,7 +162,6 @@ export function CronRouteViewContent() {
 
   return (
     <MasterDetailLayout
-      defaultSize={0.42}
       detail={
         <section className="min-h-0">
           {selectedTask ? (
@@ -307,8 +306,6 @@ export function CronRouteViewContent() {
           </Scroll>
         </section>
       }
-      maxSize={0.5}
-      minSize={0.3}
       showDetailOnMobile={showDetailOnMobile}
     />
   )