feat: Implement enhanced search and filtering for templates

Author: keelbismark

app/tools/template-manager/page.tsx

@@ -1,49 +1,62 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { TemplateService } from '@/lib/db/services/templateService';
 import { VariableService } from '@/lib/db/services/variableService';
 import { Template, Variable } from '@/types';
 import { TemplateEditor } from '@/components/template-editor';
 import { VariableForm } from '@/components/variable-form';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Input } from '@/components/ui/input';
+import { MultiSelect } from '@/components/ui/multi-select';
 
 export default function TemplateManagerPage() {
   const [variables, setVariables] = useState<Variable[]>([]);
   const [templates, setTemplates] = useState<Template[]>([]);
   const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
   const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [tags, setTags] = useState('');
 
   useEffect(() => {
-    loadData();
+    const init = async () => {
+      await TemplateService.initializeDefaultTemplates();
+      await VariableService.initializeDefaultVariables();
+    };
+    init();
   }, []);
 
-  const loadData = async () => {
+  const loadData = useCallback(async () => {
     try {
       setLoading(true);
+      
+      const templatesData = await TemplateService.getFilteredTemplates({
+        searchQuery,
+        categories: selectedCategories,
+        tags: tags.split(',').map(t => t.trim()).filter(t => t),
+      });
 
-      // Initialize default data if needed
-      await TemplateService.initializeDefaultTemplates();
-      await VariableService.initializeDefaultVariables();
-
-      // Load data
-      const [templatesData, variablesData] = await Promise.all([
-        TemplateService.getAllTemplates(),
-        VariableService.getAllVariables()
-      ]);
+      const variablesData = await VariableService.getAllVariables();
 
       setTemplates(templatesData);
       setVariables(variablesData);
 
       if (templatesData.length > 0) {
         setSelectedTemplate(templatesData[0]);
+      } else {
+        setSelectedTemplate(null);
       }
     } catch (error) {
       console.error('Error loading data:', error);
     } finally {
       setLoading(false);
     }
-  };
+  }, [searchQuery, selectedCategories, tags]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
   const handleCreateTemplate = async () => {
     const newTemplate = await TemplateService.createTemplate({
       name: 'Untitled',
@@ -71,6 +84,21 @@ export default function TemplateManagerPage() {
     }
   };
 
+  const getHighlightedText = (text: string, highlight: string) => {
+    const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
+    return (
+      <span>
+        {parts.map((part, i) =>
+          part.toLowerCase() === highlight.toLowerCase() ? (
+            <strong key={i}>{part}</strong>
+          ) : (
+            part
+          )
+        )}
+      </span>
+    );
+  };
+
   if (loading) {
     return (
       <div className="min-h-screen bg-background flex items-center justify-center">
@@ -91,9 +119,35 @@ export default function TemplateManagerPage() {
             Create and manage your professional templates with ease
           </p>
         </div>
-        <button onClick={handleCreateTemplate} className="btn btn-primary">
-          + New Template
-        </button>
+        <div className="flex justify-between items-center">
+          <div className="flex gap-4">
+            <Input
+              placeholder="Search templates..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="max-w-xs"
+            />
+            <MultiSelect
+              options={[
+                { label: 'Email', value: 'email' },
+                { label: 'Blog', value: 'blog' },
+                { label: 'Social', value: 'social' },
+              ]}
+              onValueChange={setSelectedCategories}
+              defaultValue={selectedCategories}
+              placeholder="Filter by category"
+            />
+            <Input
+              placeholder="Filter by tags (comma-separated)"
+              value={tags}
+              onChange={(e) => setTags(e.target.value)}
+              className="max-w-xs"
+            />
+          </div>
+          <button onClick={handleCreateTemplate} className="btn btn-primary">
+            + New Template
+          </button>
+        </div>
 
         <div className="grid md:grid-cols-2 gap-8">
           <VariableForm
@@ -111,7 +165,7 @@ export default function TemplateManagerPage() {
                       value={template.id}
                       onClick={() => setSelectedTemplate(template)}
                     >
-                      {template.name}
+                      {getHighlightedText(template.name, searchQuery)}
                     </TabsTrigger>
                   ))}
                 </TabsList>

components/template-editor.tsx

@@ -5,6 +5,8 @@ import { Template, Variable } from '@/types';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { Card } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { TemplateService } from '@/lib/db/services/templateService';
 
 interface TemplateEditorProps {
   template: Template;
@@ -13,6 +15,16 @@ interface TemplateEditorProps {
 
 export function TemplateEditor({ template, variables }: TemplateEditorProps) {
   const [content, setContent] = useState(template.content);
+  const [category, setCategory] = useState(template.category);
+  const [tags, setTags] = useState(template.tags.join(', '));
+
+  const handleSave = async () => {
+    await TemplateService.updateTemplate(template.id, {
+      content,
+      category,
+      tags: tags.split(',').map(t => t.trim()),
+    });
+  };
 
   const generateContent = () => {
     let result = content;
@@ -31,6 +43,18 @@ export function TemplateEditor({ template, variables }: TemplateEditorProps) {
     <Card className="p-6">
       <div className="space-y-4">
         <h3 className="text-lg font-semibold">{template.name}</h3>
+        <div className="grid grid-cols-2 gap-4">
+          <Input
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            placeholder="Category"
+          />
+          <Input
+            value={tags}
+            onChange={(e) => setTags(e.target.value)}
+            placeholder="Tags (comma-separated)"
+          />
+        </div>
         <Textarea
           value={content}
           onChange={(e) => setContent(e.target.value)}
@@ -41,7 +65,10 @@ export function TemplateEditor({ template, variables }: TemplateEditorProps) {
           <div className="p-4 rounded-md bg-muted whitespace-pre-wrap">
             {generateContent()}
           </div>
-          <Button onClick={copyToClipboard}>Copy to Clipboard</Button>
+          <div className="flex gap-4">
+            <Button onClick={handleSave}>Save</Button>
+            <Button onClick={copyToClipboard}>Copy to Clipboard</Button>
+          </div>
         </div>
       </div>
     </Card>