QuackbackIO
diff --git a/‎.github/workflows/claude.yml‎
Lines changed: 0 additions & 49 deletions b/‎.github/workflows/claude.yml‎
Lines changed: 0 additions & 49 deletions
diff --git a/‎apps/web/src/components/admin/analytics/analytics-page.tsx‎
Lines changed: 25 additions & 18 deletions b/‎apps/web/src/components/admin/analytics/analytics-page.tsx‎
Lines changed: 25 additions & 18 deletions
diff --git a/‎apps/web/src/components/admin/help-center/category-form-dialog.tsx‎
Lines changed: 219 additions & 0 deletions b/‎apps/web/src/components/admin/help-center/category-form-dialog.tsx‎
Lines changed: 219 additions & 0 deletions
diff --git a/‎apps/web/src/components/admin/help-center/help-center-article-modal.tsx‎
Lines changed: 2 additions & 1 deletion b/‎apps/web/src/components/admin/help-center/help-center-article-modal.tsx‎
Lines changed: 2 additions & 1 deletion
@@ -48,24 +48,31 @@ export function AnalyticsPage() {
       {/* Left sidebar */}
       <aside className="hidden lg:flex w-64 xl:w-72 shrink-0 flex-col border-r border-border/50 bg-card/30 overflow-hidden">
         <ScrollArea className="h-full">
-          <div className="p-5 space-y-6">
-            <div className="space-y-1">
-              {navItems.map(({ key, label, icon: Icon }) => (
-                <button
-                  key={key}
-                  type="button"
-                  onClick={() => setSection(key)}
-                  className={cn(
-                    'flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors',
-                    section === key
-                      ? 'bg-muted text-foreground'
-                      : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
-                  )}
-                >
-                  <Icon className={cn('h-3.5 w-3.5 shrink-0', section === key && 'text-primary')} />
-                  {label}
-                </button>
-              ))}
+          <div className="p-5 space-y-0">
+            <div className="pb-4">
+              <span className="inline-block py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                Sections
+              </span>
+              <div className="mt-2 space-y-1">
+                {navItems.map(({ key, label, icon: Icon }) => (
+                  <button
+                    key={key}
+                    type="button"
+                    onClick={() => setSection(key)}
+                    className={cn(
+                      'flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-xs font-medium transition-colors',
+                      section === key
+                        ? 'bg-muted text-foreground'
+                        : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+                    )}
+                  >
+                    <Icon
+                      className={cn('h-3.5 w-3.5 shrink-0', section === key && 'text-primary')}
+                    />
+                    {label}
+                  </button>
+                ))}
+              </div>
             </div>
           </div>
         </ScrollArea>
 
@@ -0,0 +1,219 @@
+import { useState, useEffect } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { useCreateCategory, useUpdateCategory } from '@/lib/client/mutations/help-center'
+import type { HelpCenterCategoryId } from '@quackback/ids'
+
+const CATEGORY_EMOJIS = [
+  '📁',
+  '📂',
+  '📚',
+  '📖',
+  '📝',
+  '📋',
+  '📌',
+  '📎',
+  '💡',
+  '⚡',
+  '🔧',
+  '🛠️',
+  '⚙️',
+  '🔑',
+  '🔒',
+  '🔓',
+  '🚀',
+  '🎯',
+  '✅',
+  '❓',
+  '💬',
+  '📣',
+  '📢',
+  '🔔',
+  '💰',
+  '💳',
+  '🏷️',
+  '📊',
+  '📈',
+  '🗂️',
+  '🗃️',
+  '📦',
+  '🌐',
+  '🔗',
+  '🖥️',
+  '📱',
+  '🎨',
+  '🧩',
+  '🔍',
+  '📡',
+  '👤',
+  '👥',
+  '🏢',
+  '🎓',
+  '📅',
+  '⏰',
+  '🛡️',
+  '🧪',
+] as const
+
+const DEFAULT_EMOJI = '📁'
+
+interface CategoryFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  initialValues?: {
+    id: HelpCenterCategoryId
+    name: string
+    description: string | null
+    icon: string | null
+    isPublic: boolean
+  }
+  onCreated?: (categoryId: string) => void
+}
+
+export function CategoryFormDialog({
+  open,
+  onOpenChange,
+  initialValues,
+  onCreated,
+}: CategoryFormDialogProps) {
+  const isEdit = !!initialValues
+  const createCategory = useCreateCategory()
+  const updateCategory = useUpdateCategory()
+
+  const [icon, setIcon] = useState(DEFAULT_EMOJI)
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [isPublic, setIsPublic] = useState(true)
+  const [emojiOpen, setEmojiOpen] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      setIcon(initialValues?.icon || DEFAULT_EMOJI)
+      setName(initialValues?.name || '')
+      setDescription(initialValues?.description || '')
+      setIsPublic(initialValues?.isPublic ?? true)
+    }
+  }, [open, initialValues])
+
+  const isPending = createCategory.isPending || updateCategory.isPending
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const trimmedName = name.trim()
+    const trimmedDesc = description.trim()
+    if (!trimmedName) return
+
+    if (isEdit) {
+      await updateCategory.mutateAsync({
+        id: initialValues.id,
+        name: trimmedName,
+        description: trimmedDesc || null,
+        icon,
+        isPublic,
+      })
+    } else {
+      const result = await createCategory.mutateAsync({
+        name: trimmedName,
+        description: trimmedDesc || undefined,
+        icon,
+        isPublic,
+      })
+      onCreated?.(result.id)
+    }
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? 'Edit category' : 'New category'}</DialogTitle>
+          <DialogDescription>
+            {isEdit ? 'Update category details.' : 'Create a new help center category.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="category-name">Name</Label>
+            <div className="flex items-center gap-2">
+              <Popover open={emojiOpen} onOpenChange={setEmojiOpen}>
+                <PopoverTrigger asChild>
+                  <button
+                    type="button"
+                    className="h-9 w-9 rounded-md border border-border/50 flex items-center justify-center text-lg hover:bg-muted transition-colors shrink-0"
+                  >
+                    {icon}
+                  </button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-2" align="start">
+                  <div className="grid grid-cols-8 gap-1">
+                    {CATEGORY_EMOJIS.map((emoji) => (
+                      <button
+                        key={emoji}
+                        type="button"
+                        className="h-8 w-8 rounded-md hover:bg-muted flex items-center justify-center text-lg transition-colors"
+                        onClick={() => {
+                          setIcon(emoji)
+                          setEmojiOpen(false)
+                        }}
+                      >
+                        {emoji}
+                      </button>
+                    ))}
+                  </div>
+                </PopoverContent>
+              </Popover>
+              <Input
+                id="category-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g., Getting Started"
+                required
+                className="flex-1"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="category-description">Description</Label>
+            <Input
+              id="category-description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Optional short description"
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <Label>Public</Label>
+              <p className="text-xs text-muted-foreground">Visible on your public help center</p>
+            </div>
+            <Switch checked={isPublic} onCheckedChange={setIsPublic} />
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isPending || !name.trim()}>
+              {isPending ? (isEdit ? 'Saving...' : 'Creating...') : isEdit ? 'Save' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
@@ -16,6 +16,7 @@ import {
   usePublishArticle,
   useUnpublishArticle,
 } from '@/lib/client/mutations/help-center'
+import { getInitialContentJson } from '@/components/admin/feedback/detail/post-utils'
 import { helpCenterQueries } from '@/lib/client/queries/help-center'
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
 import { Button } from '@/components/ui/button'
@@ -66,7 +67,7 @@ function ArticleModalContent({ articleId, onClose }: ArticleModalContentProps) {
     if (article && !hasInitialized) {
       form.setValue('title', article.title)
       form.setValue('content', article.content)
-      setContentJson(article.contentJson as JSONContent | null)
+      setContentJson(getInitialContentJson(article))
       setCategoryId(article.categoryId)
       setIsPublished(!!article.publishedAt)
       setHasInitialized(true)