feat: add template detail modal and move page title to navbar

krishna9358 · krishna9358 · commit e164b72bc9e9 · 2026-02-20T19:34:51.000+05:30
Add click-to-preview modal on template cards showing large graph,
full title/description, and Use Template CTA. Move page title to
AppTopBar navbar and remove in-page header to match Schedules layout.

Signed-off-by: Krishna Mohan &lt;krishanmohank974@gmail.com&gt;
diff --git a/frontend/src/components/layout/AppTopBar.tsx b/frontend/src/components/layout/AppTopBar.tsx
@@ -45,6 +45,14 @@ export function AppTopBar({
       };
     }
 
+    if (location.pathname === '/templates') {
+      return {
+        title: 'Template Library',
+        shortTitle: 'Templates',
+        subtitle: 'Browse and use pre-built workflow templates',
+      };
+    }
+
     if (location.pathname.startsWith('/schedules')) {
       return {
         title: 'Workflow Schedules',
diff --git a/frontend/src/pages/TemplateLibraryPage.tsx b/frontend/src/pages/TemplateLibraryPage.tsx
@@ -14,7 +14,6 @@ import { Skeleton } from '@/components/ui/skeleton';
 import {
   Eye,
   Filter,
-  Package,
   RefreshCw,
   Search,
   Star,
@@ -29,7 +28,6 @@ import {
   Database,
   Link,
   TestTube2,
-  FileText,
   MoreHorizontal,
   AlertTriangle,
   Layers,
@@ -53,6 +51,13 @@ import { track, Events } from '@/features/analytics/events';
 import { UseTemplateModal } from '@/features/templates/UseTemplateModal';
 import { WorkflowPreview } from '@/features/templates/WorkflowPreview';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
 import { cn } from '@/lib/utils';
 
 // ---------------------------------------------------------------------------
@@ -344,24 +349,26 @@ function PreviewSection({ graph }: { graph?: Record<string, unknown>; category?:
 interface TemplateCardProps {
   template: Template;
   onUse: (template: Template) => void;
+  onPreview: (template: Template) => void;
   canUse: boolean;
 }
 
-function TemplateCard({ template, onUse, canUse }: TemplateCardProps) {
+function TemplateCard({ template, onUse, onPreview, canUse }: TemplateCardProps) {
   const catStyle = getCategoryStyle(template.category);
   const CategoryIcon = catStyle.icon;
 
   return (
     <div
       className={cn(
-        'group flex flex-col rounded-2xl',
+        'group flex flex-col rounded-2xl cursor-pointer',
         'bg-white dark:bg-zinc-900',
         'border border-gray-100 dark:border-white/5',
         'shadow-sm',
         'transition-all duration-300 ease-out',
         'hover:shadow-lg hover:-translate-y-1',
         'dark:hover:border-white/10',
       )}
+      onClick={() => onPreview(template)}
     >
       {/* Content wrapper with padding */}
       <div className="flex flex-col flex-1 p-5 md:p-6 gap-6">
@@ -492,7 +499,10 @@ function TemplateCard({ template, onUse, canUse }: TemplateCardProps) {
               'flex-1 h-11 rounded-xl font-medium gap-2',
               'active:scale-[0.98] transition-all duration-200',
             )}
-            onClick={() => onUse(template)}
+            onClick={(e) => {
+              e.stopPropagation();
+              onUse(template);
+            }}
             disabled={!canUse}
           >
             Use Template
@@ -516,6 +526,7 @@ function TemplateCard({ template, onUse, canUse }: TemplateCardProps) {
                       href={`https://github.com/${template.repository}/blob/${template.branch || 'main'}/${template.path}`}
                       target="_blank"
                       rel="noopener noreferrer"
+                      onClick={(e) => e.stopPropagation()}
                     >
                       <Eye className="h-4 w-4" />
                     </a>
@@ -594,6 +605,121 @@ function EmptyState({ hasFilters }: { hasFilters: boolean }) {
   );
 }
 
+// ---------------------------------------------------------------------------
+// Template detail modal
+// ---------------------------------------------------------------------------
+
+interface TemplateDetailModalProps {
+  template: Template | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onUse: (template: Template) => void;
+  canUse: boolean;
+}
+
+function TemplateDetailModal({
+  template,
+  open,
+  onOpenChange,
+  onUse,
+  canUse,
+}: TemplateDetailModalProps) {
+  if (!template) return null;
+
+  const catStyle = getCategoryStyle(template.category);
+  const CategoryIcon = catStyle.icon;
+  const hasGraph =
+    template.graph &&
+    (template.graph as any)?.nodes &&
+    Array.isArray((template.graph as any).nodes) &&
+    (template.graph as any).nodes.length > 0;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[85vh] overflow-y-auto p-0">
+        {/* Graph preview */}
+        <div
+          className="relative w-full h-72 sm:h-80 overflow-hidden rounded-t-lg"
+          style={{
+            background: 'linear-gradient(180deg, #F8FAFF 0%, #F1F5FF 100%)',
+          }}
+        >
+          <div
+            className="absolute inset-0 hidden dark:block"
+            style={{
+              background: 'linear-gradient(180deg, #111827 0%, #0B1220 100%)',
+            }}
+          />
+          <div
+            className="absolute inset-0 hidden dark:block pointer-events-none"
+            style={{
+              background:
+                'radial-gradient(circle at 50% 0%, rgba(99,102,241,0.08), transparent 60%)',
+            }}
+          />
+          <div
+            className="absolute inset-0 opacity-[0.03] pointer-events-none"
+            style={{
+              backgroundImage:
+                'radial-gradient(circle, hsl(var(--foreground)) 0.5px, transparent 0.5px)',
+              backgroundSize: '12px 12px',
+            }}
+          />
+          {hasGraph ? (
+            <div className="absolute inset-0 flex items-center justify-center p-4">
+              <WorkflowPreview graph={template.graph!} className="w-full h-full" />
+            </div>
+          ) : (
+            <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 text-muted-foreground/30">
+              <Workflow className="h-12 w-12" />
+              <span className="text-xs font-medium">No preview</span>
+            </div>
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="px-6 pb-6 space-y-4">
+          <DialogHeader>
+            <div className="flex items-center gap-2 mb-2">
+              <Badge
+                variant="outline"
+                className={cn(
+                  'text-xs font-medium gap-1 rounded-full px-3 py-1 border',
+                  catStyle.badge,
+                )}
+              >
+                <CategoryIcon className="h-3 w-3" />
+                {template.category || 'Automation'}
+              </Badge>
+              {template.author && (
+                <span className="text-xs text-muted-foreground">by {template.author}</span>
+              )}
+            </div>
+            <DialogTitle className="text-2xl font-semibold">
+              {toTitleCase(template.name)}
+            </DialogTitle>
+            {template.description && (
+              <DialogDescription className="text-sm mt-2">{template.description}</DialogDescription>
+            )}
+          </DialogHeader>
+
+          <Button
+            className={cn(
+              'w-full h-11 rounded-xl font-medium gap-2',
+              'active:scale-[0.98] transition-all duration-200',
+            )}
+            onClick={() => onUse(template)}
+            disabled={!canUse}
+          >
+            Use Template
+            <ArrowRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Main page
 // ---------------------------------------------------------------------------
@@ -625,6 +751,7 @@ export function TemplateLibraryPage() {
 
   const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
   const [isUseModalOpen, setIsUseModalOpen] = useState(false);
+  const [previewTemplate, setPreviewTemplate] = useState<Template | null>(null);
 
   const handleSync = () => {
     syncMutation.mutate();
@@ -673,49 +800,9 @@ export function TemplateLibraryPage() {
   return (
     <div className="flex-1 bg-background">
       <div className="container mx-auto py-6 md:py-8 px-3 md:px-6 max-w-7xl">
-        {/* Header */}
-        <div className="mb-8">
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <div className="flex items-center gap-3 mb-1.5">
-                <div className="h-9 w-9 rounded-lg bg-primary/10 flex items-center justify-center">
-                  <Package className="h-5 w-5 text-primary" />
-                </div>
-                <div>
-                  <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
-                    Template Library
-                  </h1>
-                </div>
-              </div>
-              <p className="text-muted-foreground text-sm ml-12">
-                Browse and use pre-built workflow templates to accelerate your automation
-              </p>
-            </div>
-
-            <div className="flex items-center gap-2 flex-shrink-0">
-              {!isLoading && templates.length > 0 && (
-                <Badge variant="secondary" className="text-xs font-medium gap-1 hidden sm:flex">
-                  <FileText className="h-3 w-3" />
-                  {templates.length} template{templates.length !== 1 ? 's' : ''}
-                </Badge>
-              )}
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleSync}
-                disabled={isSyncing || !canManageWorkflows}
-                className="gap-2 h-8"
-              >
-                <RefreshCw className={cn('h-3.5 w-3.5', isSyncing && 'animate-spin')} />
-                <span className="hidden sm:inline">Sync</span>
-              </Button>
-            </div>
-          </div>
-        </div>
-
         {/* Filters */}
         <div className="mb-6 space-y-3">
-          {/* Search + Category */}
+          {/* Search + Category + Sync */}
           <div className="flex gap-3">
             <div className="relative flex-1">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
@@ -751,6 +838,17 @@ export function TemplateLibraryPage() {
                 })}
               </SelectContent>
             </Select>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleSync}
+              disabled={isSyncing || !canManageWorkflows}
+              className="gap-2 h-9"
+            >
+              <RefreshCw className={cn('h-3.5 w-3.5', isSyncing && 'animate-spin')} />
+              <span className="hidden sm:inline">Sync</span>
+            </Button>
           </div>
 
           {/* Tags + Clear */}
@@ -819,13 +917,28 @@ export function TemplateLibraryPage() {
                 key={template.id}
                 template={template}
                 onUse={handleUseTemplate}
+                onPreview={setPreviewTemplate}
                 canUse={canManageWorkflows}
               />
             ))}
           </div>
         )}
       </div>
 
+      {/* Template Detail Modal */}
+      <TemplateDetailModal
+        template={previewTemplate}
+        open={!!previewTemplate}
+        onOpenChange={(open) => {
+          if (!open) setPreviewTemplate(null);
+        }}
+        onUse={(template) => {
+          setPreviewTemplate(null);
+          handleUseTemplate(template);
+        }}
+        canUse={canManageWorkflows}
+      />
+
       {/* Use Template Modal */}
       {selectedTemplate && (
         <UseTemplateModal
