Merge pull request #59 from johndoe6345789/codex/refactor-templateexplorer-and-templateselector

Make TemplateSelector/Explorer UI JSON-driven and componentized

src/components/TemplateExplorer.tsx

@@ -9,6 +9,175 @@ import { Badge } from '@/components/ui/badge'
 import { useSeedTemplates } from '@/hooks/data/use-seed-templates'
 import { Copy, Download } from '@phosphor-icons/react'
 import { toast } from 'sonner'
+import templateUi from '@/config/template-ui.json'
+
+const ui = templateUi.explorer
+
+type TemplateData = Record<string, any>
+
+type TemplateExplorerHeaderProps = {
+  onExport: () => void
+}
+
+type TemplateListProps = {
+  templates: Array<{ id: string; name: string; icon: string }>
+  selectedTemplate: string
+  onSelect: (templateId: string) => void
+}
+
+type TemplateDetailProps = {
+  template: {
+    name: string
+    description: string
+    icon: string
+    data: TemplateData
+    features: string[]
+  }
+  onDownload: () => void
+  onCopyJson: () => void
+}
+
+const TemplateExplorerHeader = ({ onExport }: TemplateExplorerHeaderProps) => (
+  <div className="flex items-center justify-between">
+    <div>
+      <h2 className="text-2xl font-bold mb-2">{ui.title}</h2>
+      <p className="text-muted-foreground">{ui.description}</p>
+    </div>
+    <Button onClick={onExport} variant="outline">
+      <Download className="mr-2" size={16} />
+      {ui.buttons.exportCurrentData}
+    </Button>
+  </div>
+)
+
+const TemplateList = ({ templates, selectedTemplate, onSelect }: TemplateListProps) => (
+  <div className="space-y-2">
+    {templates.map((template) => (
+      <Card
+        key={template.id}
+        className={`cursor-pointer transition-colors ${
+          selectedTemplate === template.id ? 'border-primary bg-accent/50' : 'hover:bg-accent/20'
+        }`}
+        onClick={() => onSelect(template.id)}
+      >
+        <CardHeader className="p-4">
+          <div className="flex items-center gap-2">
+            <span className="text-2xl">{template.icon}</span>
+            <CardTitle className="text-sm">{template.name}</CardTitle>
+          </div>
+        </CardHeader>
+      </Card>
+    ))}
+  </div>
+)
+
+const TemplateOverviewTab = ({ data, features }: { data: TemplateData; features: string[] }) => (
+  <TabsContent value="overview" className="space-y-4">
+    <div>
+      <h3 className="font-semibold mb-2">{ui.sections.features}</h3>
+      <div className="flex flex-wrap gap-2">
+        {features.map((feature, idx) => (
+          <Badge key={idx} variant="secondary">
+            {feature}
+          </Badge>
+        ))}
+      </div>
+    </div>
+
+    <div className="grid grid-cols-2 gap-4">
+      {Object.entries(data).map(([key, value]) => (
+        <Card key={key}>
+          <CardHeader className="p-4">
+            <CardTitle className="text-sm">{key.replace('project-', '')}</CardTitle>
+            <CardDescription>
+              {Array.isArray(value) ? `${value.length} ${ui.labels.itemsSuffix}` : ui.labels.configuration}
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      ))}
+    </div>
+  </TabsContent>
+)
+
+const TemplateStructureTab = ({ data }: { data: TemplateData }) => (
+  <TabsContent value="structure" className="space-y-4">
+    <ScrollArea className="h-[500px]">
+      {Object.entries(data).map(([key, value]) => (
+        <div key={key} className="mb-4 p-4 border rounded-lg">
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="font-semibold">{key}</h3>
+            <Badge variant="outline">
+              {Array.isArray(value) ? `${value.length} ${ui.labels.itemsSuffix}` : ui.labels.object}
+            </Badge>
+          </div>
+          {Array.isArray(value) && value.length > 0 && (
+            <div className="text-sm text-muted-foreground">
+              {value.slice(0, 3).map((item: any, idx: number) => (
+                <div key={idx} className="py-1">
+                  • {item.name || item.title || item.id}
+                </div>
+              ))}
+              {value.length > 3 && (
+                <div className="py-1 italic">
+                  {`${ui.labels.morePrefix} ${value.length - 3} ${ui.labels.moreSuffix}`}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </ScrollArea>
+  </TabsContent>
+)
+
+const TemplateJsonTab = ({ data, onCopy }: { data: TemplateData; onCopy: () => void }) => (
+  <TabsContent value="json">
+    <div className="relative">
+      <Button size="sm" variant="ghost" className="absolute right-2 top-2 z-10" onClick={onCopy}>
+        <Copy size={16} />
+      </Button>
+      <ScrollArea className="h-[500px]">
+        <pre className="text-xs p-4 bg-muted rounded-lg">{JSON.stringify(data, null, 2)}</pre>
+      </ScrollArea>
+    </div>
+  </TabsContent>
+)
+
+const TemplateDetails = ({ template, onDownload, onCopyJson }: TemplateDetailProps) => (
+  <Card className="col-span-3">
+    <CardHeader>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span className="text-4xl">{template.icon}</span>
+          <div>
+            <CardTitle>{template.name}</CardTitle>
+            <CardDescription>{template.description}</CardDescription>
+          </div>
+        </div>
+        <Button onClick={onDownload} variant="outline" size="sm">
+          <Download className="mr-2" size={16} />
+          {ui.buttons.download}
+        </Button>
+      </div>
+    </CardHeader>
+    <CardContent>
+      <Tabs defaultValue="overview">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="overview">{ui.tabs.overview}</TabsTrigger>
+          <TabsTrigger value="structure">{ui.tabs.structure}</TabsTrigger>
+          <TabsTrigger value="json">{ui.tabs.json}</TabsTrigger>
+        </TabsList>
+
+        <TemplateOverviewTab data={template.data} features={template.features} />
+        <TemplateStructureTab data={template.data} />
+        <TemplateJsonTab
+          data={template.data}
+          onCopy={onCopyJson}
+        />
+      </Tabs>
+    </CardContent>
+  </Card>
+)
 
 export function TemplateExplorer() {
   const { templates } = useSeedTemplates()
@@ -18,12 +187,12 @@ export function TemplateExplorer() {
 
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text)
-    toast.success('Copied to clipboard')
+    toast.success(ui.toasts.copySuccess)
   }
 
   const downloadJSON = () => {
     if (!currentTemplate) return
-    
+
     const dataStr = JSON.stringify(currentTemplate.data, null, 2)
     const blob = new Blob([dataStr], { type: 'application/json' })
     const url = URL.createObjectURL(blob)
@@ -34,18 +203,18 @@ export function TemplateExplorer() {
     link.click()
     document.body.removeChild(link)
     URL.revokeObjectURL(url)
-    
-    toast.success('Template downloaded')
+
+    toast.success(ui.toasts.downloadSuccess)
   }
 
   const exportCurrentData = async () => {
     const keys = await window.spark.kv.keys()
     const data: Record<string, any> = {}
-    
+
     for (const key of keys) {
       data[key] = await window.spark.kv.get(key)
     }
-    
+
     const dataStr = JSON.stringify(data, null, 2)
     const blob = new Blob([dataStr], { type: 'application/json' })
     const url = URL.createObjectURL(blob)
@@ -56,144 +225,29 @@ export function TemplateExplorer() {
     link.click()
     document.body.removeChild(link)
     URL.revokeObjectURL(url)
-    
-    toast.success('Current project data exported')
+
+    toast.success(ui.toasts.exportSuccess)
   }
 
   if (!currentTemplate) return null
 
+  const handleCopyJson = () => copyToClipboard(JSON.stringify(currentTemplate.data, null, 2))
+
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-bold mb-2">Template Explorer</h2>
-          <p className="text-muted-foreground">
-            Browse and inspect template structures
-          </p>
-        </div>
-        <Button onClick={exportCurrentData} variant="outline">
-          <Download className="mr-2" size={16} />
-          Export Current Data
-        </Button>
-      </div>
+      <TemplateExplorerHeader onExport={exportCurrentData} />
 
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <div className="space-y-2">
-          {templates.map((template) => (
-            <Card
-              key={template.id}
-              className={`cursor-pointer transition-colors ${
-                selectedTemplate === template.id ? 'border-primary bg-accent/50' : 'hover:bg-accent/20'
-              }`}
-              onClick={() => setSelectedTemplate(template.id)}
-            >
-              <CardHeader className="p-4">
-                <div className="flex items-center gap-2">
-                  <span className="text-2xl">{template.icon}</span>
-                  <CardTitle className="text-sm">{template.name}</CardTitle>
-                </div>
-              </CardHeader>
-            </Card>
-          ))}
-        </div>
-
-        <Card className="col-span-3">
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <span className="text-4xl">{currentTemplate.icon}</span>
-                <div>
-                  <CardTitle>{currentTemplate.name}</CardTitle>
-                  <CardDescription>{currentTemplate.description}</CardDescription>
-                </div>
-              </div>
-              <Button onClick={downloadJSON} variant="outline" size="sm">
-                <Download className="mr-2" size={16} />
-                Download
-              </Button>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <Tabs defaultValue="overview">
-              <TabsList className="grid w-full grid-cols-3">
-                <TabsTrigger value="overview">Overview</TabsTrigger>
-                <TabsTrigger value="structure">Structure</TabsTrigger>
-                <TabsTrigger value="json">JSON</TabsTrigger>
-              </TabsList>
-
-              <TabsContent value="overview" className="space-y-4">
-                <div>
-                  <h3 className="font-semibold mb-2">Features</h3>
-                  <div className="flex flex-wrap gap-2">
-                    {currentTemplate.features.map((feature, idx) => (
-                      <Badge key={idx} variant="secondary">
-                        {feature}
-                      </Badge>
-                    ))}
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  {Object.entries(currentTemplate.data).map(([key, value]) => (
-                    <Card key={key}>
-                      <CardHeader className="p-4">
-                        <CardTitle className="text-sm">{key.replace('project-', '')}</CardTitle>
-                        <CardDescription>
-                          {Array.isArray(value) ? `${value.length} items` : 'Configuration'}
-                        </CardDescription>
-                      </CardHeader>
-                    </Card>
-                  ))}
-                </div>
-              </TabsContent>
-
-              <TabsContent value="structure" className="space-y-4">
-                <ScrollArea className="h-[500px]">
-                  {Object.entries(currentTemplate.data).map(([key, value]) => (
-                    <div key={key} className="mb-4 p-4 border rounded-lg">
-                      <div className="flex items-center justify-between mb-2">
-                        <h3 className="font-semibold">{key}</h3>
-                        <Badge variant="outline">
-                          {Array.isArray(value) ? `${value.length} items` : 'object'}
-                        </Badge>
-                      </div>
-                      {Array.isArray(value) && value.length > 0 && (
-                        <div className="text-sm text-muted-foreground">
-                          {value.slice(0, 3).map((item: any, idx: number) => (
-                            <div key={idx} className="py-1">
-                              • {item.name || item.title || item.id}
-                            </div>
-                          ))}
-                          {value.length > 3 && (
-                            <div className="py-1 italic">... and {value.length - 3} more</div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </ScrollArea>
-              </TabsContent>
-
-              <TabsContent value="json">
-                <div className="relative">
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    className="absolute right-2 top-2 z-10"
-                    onClick={() => copyToClipboard(JSON.stringify(currentTemplate.data, null, 2))}
-                  >
-                    <Copy size={16} />
-                  </Button>
-                  <ScrollArea className="h-[500px]">
-                    <pre className="text-xs p-4 bg-muted rounded-lg">
-                      {JSON.stringify(currentTemplate.data, null, 2)}
-                    </pre>
-                  </ScrollArea>
-                </div>
-              </TabsContent>
-            </Tabs>
-          </CardContent>
-        </Card>
+        <TemplateList
+          templates={templates}
+          selectedTemplate={selectedTemplate}
+          onSelect={setSelectedTemplate}
+        />
+        <TemplateDetails
+          template={currentTemplate}
+          onDownload={downloadJSON}
+          onCopyJson={handleCopyJson}
+        />
       </div>
     </div>
   )

src/components/TemplateSelector.tsx

@@ -3,121 +3,242 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { useSeedTemplates, type TemplateType } from '@/hooks/data/use-seed-templates'
+import { useSeedTemplates, type Template, type TemplateType } from '@/hooks/data/use-seed-templates'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { TemplateExplorer } from './TemplateExplorer'
 import { toast } from 'sonner'
 import { Download, Package, Plus, Trash } from '@phosphor-icons/react'
+import templateUi from '@/config/template-ui.json'
+
+const ui = templateUi.selector
+
+type TemplateSelectorHeaderProps = {
+  title: string
+  description: string
+}
+
+type TemplateCardProps = {
+  template: Template
+  isLoading: boolean
+  onSelect: (templateId: TemplateType, action: 'replace' | 'merge') => void
+}
+
+type TemplateActionsAlertProps = {
+  loadTitle: string
+  loadDescription: string
+  mergeTitle: string
+  mergeDescription: string
+}
+
+type ConfirmDialogState = {
+  open: boolean
+  actionType: 'replace' | 'merge'
+  template: TemplateType | null
+}
+
+type ConfirmDialogProps = ConfirmDialogState & {
+  onCancel: () => void
+  onConfirm: () => void
+  onOpenChange: (open: boolean) => void
+}
+
+const TemplateSelectorHeader = ({ title, description }: TemplateSelectorHeaderProps) => (
+  <div>
+    <h2 className="text-2xl font-bold mb-2">{title}</h2>
+    <p className="text-muted-foreground">{description}</p>
+  </div>
+)
+
+const TemplateCard = ({ template, isLoading, onSelect }: TemplateCardProps) => (
+  <Card className="relative overflow-hidden hover:shadow-lg transition-shadow">
+    <CardHeader>
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-3">
+          <span className="text-4xl">{template.icon}</span>
+          <div>
+            <CardTitle className="text-xl">{template.name}</CardTitle>
+            <CardDescription className="mt-1">{template.description}</CardDescription>
+          </div>
+        </div>
+      </div>
+    </CardHeader>
+    <CardContent className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        {template.features.map((feature, idx) => (
+          <Badge key={idx} variant="secondary" className="text-xs">
+            {feature}
+          </Badge>
+        ))}
+      </div>
+      <div className="flex gap-2">
+        <Button
+          variant="default"
+          size="sm"
+          onClick={() => onSelect(template.id, 'replace')}
+          disabled={isLoading}
+          className="flex-1"
+        >
+          <Download className="mr-2" size={16} />
+          {ui.buttons.loadTemplate}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onSelect(template.id, 'merge')}
+          disabled={isLoading}
+          className="flex-1"
+        >
+          <Plus className="mr-2" size={16} />
+          {ui.buttons.merge}
+        </Button>
+      </div>
+    </CardContent>
+  </Card>
+)
+
+const TemplateActionsAlert = ({
+  loadTitle,
+  loadDescription,
+  mergeTitle,
+  mergeDescription
+}: TemplateActionsAlertProps) => (
+  <Alert>
+    <Package size={16} />
+    <AlertDescription>
+      <strong>{loadTitle}</strong> {loadDescription}
+      <br />
+      <strong>{mergeTitle}</strong> {mergeDescription}
+    </AlertDescription>
+  </Alert>
+)
+
+const ConfirmDialog = ({
+  open,
+  actionType,
+  template,
+  onCancel,
+  onConfirm,
+  onOpenChange
+}: ConfirmDialogProps) => (
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>
+          {actionType === 'replace' ? ui.dialog.replaceTitle : ui.dialog.mergeTitle}
+        </DialogTitle>
+        <DialogDescription>
+          {actionType === 'replace' ? (
+            <>
+              {ui.dialog.replace.prefix}{' '}
+              <strong className="text-destructive">{ui.dialog.replace.emphasis}</strong> {ui.dialog.replace.middle}{' '}
+              <strong>{template}</strong> {ui.dialog.replace.suffix}
+            </>
+          ) : (
+            <>
+              {ui.dialog.merge.prefix}{' '}
+              <strong>{ui.dialog.merge.emphasis}</strong> {ui.dialog.merge.middle}{' '}
+              <strong>{template}</strong> {ui.dialog.merge.suffix}
+            </>
+          )}
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter>
+        <Button variant="outline" onClick={onCancel}>
+          {ui.buttons.cancel}
+        </Button>
+        <Button variant={actionType === 'replace' ? 'destructive' : 'default'} onClick={onConfirm}>
+          {actionType === 'replace' ? (
+            <>
+              <Trash className="mr-2" size={16} />
+              {ui.buttons.replaceAllData}
+            </>
+          ) : (
+            <>
+              <Plus className="mr-2" size={16} />
+              {ui.buttons.mergeData}
+            </>
+          )}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+)
+
+const formatToastDescription = (actionType: 'replace' | 'merge', template: TemplateType) => {
+  const description = actionType === 'replace'
+    ? ui.toasts.replaceDescription
+    : ui.toasts.mergeDescription
+  return description.replace('{template}', template)
+}
 
 export function TemplateSelector() {
   const { templates, isLoading, clearAndLoadTemplate, mergeTemplate } = useSeedTemplates()
-  const [selectedTemplate, setSelectedTemplate] = useState<TemplateType | null>(null)
-  const [showConfirmDialog, setShowConfirmDialog] = useState(false)
-  const [actionType, setActionType] = useState<'replace' | 'merge'>('replace')
+  const [confirmDialog, setConfirmDialog] = useState<ConfirmDialogState>({
+    open: false,
+    actionType: 'replace',
+    template: null
+  })
 
   const handleSelectTemplate = (templateId: TemplateType, action: 'replace' | 'merge') => {
-    setSelectedTemplate(templateId)
-    setActionType(action)
-    setShowConfirmDialog(true)
+    setConfirmDialog({ open: true, actionType: action, template: templateId })
   }
 
   const handleConfirmLoad = async () => {
-    if (!selectedTemplate) return
+    if (!confirmDialog.template) return
 
-    setShowConfirmDialog(false)
-    
-    const success = actionType === 'replace'
-      ? await clearAndLoadTemplate(selectedTemplate)
-      : await mergeTemplate(selectedTemplate)
+    setConfirmDialog(prevState => ({ ...prevState, open: false }))
+
+    const success = confirmDialog.actionType === 'replace'
+      ? await clearAndLoadTemplate(confirmDialog.template)
+      : await mergeTemplate(confirmDialog.template)
 
     if (success) {
-      toast.success(`Template loaded successfully!`, {
-        description: `${actionType === 'replace' ? 'Replaced' : 'Merged'} with ${selectedTemplate} template`
+      toast.success(ui.toasts.successTitle, {
+        description: formatToastDescription(confirmDialog.actionType, confirmDialog.template)
       })
       window.location.reload()
     } else {
-      toast.error('Failed to load template', {
-        description: 'Please try again or check the console for errors'
+      toast.error(ui.toasts.errorTitle, {
+        description: ui.toasts.errorDescription
       })
     }
   }
 
+  const handleDialogToggle = (open: boolean) => {
+    if (!open) {
+      setConfirmDialog(prevState => ({ ...prevState, open }))
+    }
+  }
+
   return (
     <>
       <Tabs defaultValue="templates" className="w-full">
         <TabsList>
-          <TabsTrigger value="templates">Load Templates</TabsTrigger>
-          <TabsTrigger value="explorer">Explore Templates</TabsTrigger>
+          <TabsTrigger value="templates">{ui.tabs.templates}</TabsTrigger>
+          <TabsTrigger value="explorer">{ui.tabs.explorer}</TabsTrigger>
         </TabsList>
 
         <TabsContent value="templates" className="space-y-6 mt-6">
-          <div>
-            <h2 className="text-2xl font-bold mb-2">Project Templates</h2>
-            <p className="text-muted-foreground">
-              Start your project with pre-configured templates including models, components, and workflows
-            </p>
-          </div>
+          <TemplateSelectorHeader title={ui.header.title} description={ui.header.description} />
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {templates.map((template) => (
-              <Card key={template.id} className="relative overflow-hidden hover:shadow-lg transition-shadow">
-                <CardHeader>
-                  <div className="flex items-start justify-between">
-                    <div className="flex items-center gap-3">
-                      <span className="text-4xl">{template.icon}</span>
-                      <div>
-                        <CardTitle className="text-xl">{template.name}</CardTitle>
-                        <CardDescription className="mt-1">
-                          {template.description}
-                        </CardDescription>
-                      </div>
-                    </div>
-                  </div>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="flex flex-wrap gap-2">
-                    {template.features.map((feature, idx) => (
-                      <Badge key={idx} variant="secondary" className="text-xs">
-                        {feature}
-                      </Badge>
-                    ))}
-                  </div>
-                  <div className="flex gap-2">
-                    <Button
-                      variant="default"
-                      size="sm"
-                      onClick={() => handleSelectTemplate(template.id, 'replace')}
-                      disabled={isLoading}
-                      className="flex-1"
-                    >
-                      <Download className="mr-2" size={16} />
-                      Load Template
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleSelectTemplate(template.id, 'merge')}
-                      disabled={isLoading}
-                      className="flex-1"
-                    >
-                      <Plus className="mr-2" size={16} />
-                      Merge
-                    </Button>
-                  </div>
-                </CardContent>
-              </Card>
+              <TemplateCard
+                key={template.id}
+                template={template}
+                isLoading={isLoading}
+                onSelect={handleSelectTemplate}
+              />
             ))}
           </div>
 
-          <Alert>
-            <Package size={16} />
-            <AlertDescription>
-              <strong>Load Template:</strong> Replaces all existing data with the selected template.
-              <br />
-              <strong>Merge:</strong> Adds template data to your existing project without removing current data.
-            </AlertDescription>
-          </Alert>
+          <TemplateActionsAlert
+            loadTitle={ui.alerts.loadTitle}
+            loadDescription={ui.alerts.loadDescription}
+            mergeTitle={ui.alerts.mergeTitle}
+            mergeDescription={ui.alerts.mergeDescription}
+          />
         </TabsContent>
 
         <TabsContent value="explorer" className="mt-6">
@@ -125,49 +246,14 @@ export function TemplateSelector() {
         </TabsContent>
       </Tabs>
 
-      <Dialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              {actionType === 'replace' ? 'Replace Project Data?' : 'Merge Template Data?'}
-            </DialogTitle>
-            <DialogDescription>
-              {actionType === 'replace' ? (
-                <>
-                  This will <strong className="text-destructive">delete all existing data</strong> and load the{' '}
-                  <strong>{selectedTemplate}</strong> template. This action cannot be undone.
-                </>
-              ) : (
-                <>
-                  This will <strong>add</strong> the <strong>{selectedTemplate}</strong> template data to your
-                  existing project without removing current data.
-                </>
-              )}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setShowConfirmDialog(false)}>
-              Cancel
-            </Button>
-            <Button
-              variant={actionType === 'replace' ? 'destructive' : 'default'}
-              onClick={handleConfirmLoad}
-            >
-              {actionType === 'replace' ? (
-                <>
-                  <Trash className="mr-2" size={16} />
-                  Replace All Data
-                </>
-              ) : (
-                <>
-                  <Plus className="mr-2" size={16} />
-                  Merge Data
-                </>
-              )}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <ConfirmDialog
+        open={confirmDialog.open}
+        actionType={confirmDialog.actionType}
+        template={confirmDialog.template}
+        onCancel={() => handleDialogToggle(false)}
+        onConfirm={handleConfirmLoad}
+        onOpenChange={handleDialogToggle}
+      />
     </>
   )
 }

src/config/template-ui.json

@@ -0,0 +1,76 @@
+{
+  "explorer": {
+    "title": "Template Explorer",
+    "description": "Browse and inspect template structures",
+    "buttons": {
+      "exportCurrentData": "Export Current Data",
+      "download": "Download"
+    },
+    "tabs": {
+      "overview": "Overview",
+      "structure": "Structure",
+      "json": "JSON"
+    },
+    "sections": {
+      "features": "Features"
+    },
+    "labels": {
+      "configuration": "Configuration",
+      "object": "object",
+      "itemsSuffix": "items",
+      "morePrefix": "... and",
+      "moreSuffix": "more"
+    },
+    "toasts": {
+      "copySuccess": "Copied to clipboard",
+      "downloadSuccess": "Template downloaded",
+      "exportSuccess": "Current project data exported"
+    }
+  },
+  "selector": {
+    "tabs": {
+      "templates": "Load Templates",
+      "explorer": "Explore Templates"
+    },
+    "header": {
+      "title": "Project Templates",
+      "description": "Start your project with pre-configured templates including models, components, and workflows"
+    },
+    "buttons": {
+      "loadTemplate": "Load Template",
+      "merge": "Merge",
+      "cancel": "Cancel",
+      "replaceAllData": "Replace All Data",
+      "mergeData": "Merge Data"
+    },
+    "alerts": {
+      "loadTitle": "Load Template:",
+      "loadDescription": "Replaces all existing data with the selected template.",
+      "mergeTitle": "Merge:",
+      "mergeDescription": "Adds template data to your existing project without removing current data."
+    },
+    "dialog": {
+      "replaceTitle": "Replace Project Data?",
+      "mergeTitle": "Merge Template Data?",
+      "replace": {
+        "prefix": "This will",
+        "emphasis": "delete all existing data",
+        "middle": "and load the",
+        "suffix": "template. This action cannot be undone."
+      },
+      "merge": {
+        "prefix": "This will",
+        "emphasis": "add",
+        "middle": "the",
+        "suffix": "template data to your existing project without removing current data."
+      }
+    },
+    "toasts": {
+      "successTitle": "Template loaded successfully!",
+      "replaceDescription": "Replaced with {template} template",
+      "mergeDescription": "Merged with {template} template",
+      "errorTitle": "Failed to load template",
+      "errorDescription": "Please try again or check the console for errors"
+    }
+  }
+}

src/hooks/data/use-seed-templates.ts

@@ -6,7 +6,7 @@ import defaultTemplate from '@/config/seed-data.json'
 
 export type TemplateType = 'default' | 'e-commerce' | 'blog' | 'dashboard'
 
-interface Template {
+export interface Template {
   id: TemplateType
   name: string
   description: string