feat: enhance navigation and template filtering with icon support and new category mappings

src/components/custom/widget/WorkflowTemplateSelector.vue

@@ -9,7 +9,7 @@
         </template>
         <template #header-title>
           <span class="text-neutral text-base">{{
-            $t('templateWorkflows.categories', 'Categories')
+            $t('sideToolbar.templates', 'Templates')
           }}</span>
         </template>
       </LeftSidePanel>
@@ -146,11 +146,6 @@
       </div>
     </template>
 
-    <template #rightPanel>
-      <RightSidePanel>
-        <!-- Template details could go here -->
-      </RightSidePanel>
-    </template>
   </BaseWidgetLayout>
 </template>
 

src/components/widget/nav/NavItem.vue

@@ -9,7 +9,7 @@
     role="button"
     @click="onClick"
   >
-    <i-lucide:folder v-if="hasFolderIcon" class="text-xs text-neutral" />
+    <component :is="iconComponent" class="text-xs text-neutral" />
     <span class="flex items-center">
       <slot></slot>
     </span>
@@ -17,13 +17,70 @@
 </template>
 
 <script setup lang="ts">
-const {
-  hasFolderIcon = true,
-  active,
-  onClick
-} = defineProps<{
-  hasFolderIcon?: boolean
+import { computed } from 'vue'
+// Import only the icons used in getCategoryIcon
+import ILucideList from '~icons/lucide/list'
+import ILucideGraduationCap from '~icons/lucide/graduation-cap'
+import ILucideImage from '~icons/lucide/image'
+import ILucideFilm from '~icons/lucide/film'
+import ILucideBox from '~icons/lucide/box'
+import ILucideVolume2 from '~icons/lucide/volume-2'
+import ILucideHandCoins from '~icons/lucide/hand-coins'
+import ILucideMessageSquareText from '~icons/lucide/message-square-text'
+import ILucideZap from '~icons/lucide/zap'
+import ILucideCommand from '~icons/lucide/command'
+import ILucideDumbbell from '~icons/lucide/dumbbell'
+import ILucidePuzzle from '~icons/lucide/puzzle'
+import ILucideWrench from '~icons/lucide/wrench'
+import ILucideMaximize2 from '~icons/lucide/maximize-2'
+import ILucideSlidersHorizontal from '~icons/lucide/sliders-horizontal'
+import ILucideLayoutGrid from '~icons/lucide/layout-grid'
+import ILucideFolder from '~icons/lucide/folder'
+
+const { icon, active, onClick } = defineProps<{
+  icon?: string
   active?: boolean
   onClick: () => void
 }>()
+
+// Icon map matching getCategoryIcon function exactly
+const iconMap = {
+  // Main categories
+  'list': ILucideList,
+  'graduation-cap': ILucideGraduationCap,
+  
+  // Generation types
+  'image': ILucideImage,
+  'film': ILucideFilm,
+  'box': ILucideBox,
+  'volume-2': ILucideVolume2,
+  
+  // API and models
+  'hand-coins': ILucideHandCoins,
+  
+  // LLMs and AI
+  'message-square-text': ILucideMessageSquareText,
+  
+  // Performance and hardware
+  'zap': ILucideZap,
+  'command': ILucideCommand,
+  
+  // Training
+  'dumbbell': ILucideDumbbell,
+  
+  // Extensions and tools
+  'puzzle': ILucidePuzzle,
+  'wrench': ILucideWrench,
+  
+  // Fallbacks for common patterns
+  'maximize-2': ILucideMaximize2,
+  'sliders-horizontal': ILucideSlidersHorizontal,
+  'layout-grid': ILucideLayoutGrid,
+  'folder': ILucideFolder
+}
+
+const iconComponent = computed(() => {
+  if (!icon) return ILucideFolder
+  return iconMap[icon as keyof typeof iconMap] || ILucideFolder
+})
 </script>

src/components/widget/panel/LeftSidePanel.vue

@@ -14,6 +14,7 @@
           <NavItem
             v-for="subItem in item.items"
             :key="subItem.id"
+            :icon="subItem.icon"
             :active="activeItem === subItem.id"
             @click="activeItem = subItem.id"
           >
@@ -22,6 +23,7 @@
         </div>
         <div v-else class="flex flex-col gap-2">
           <NavItem
+            :icon="item.icon"
             :active="activeItem === item.id"
             @click="activeItem = item.id"
           >