From 8fb225f1f65badafdca2e1ef2564cb284b20d92d Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Wed, 20 Aug 2025 22:31:17 +0100
Subject: [PATCH] feat: add new sorting options for template filtering by VRAM
 utilization and model size

---
 .../custom/widget/WorkflowTemplateSelector.vue   | 16 ++++++++++++----
 src/composables/useTemplateFiltering.ts          | 12 ++++++++++--
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/custom/widget/WorkflowTemplateSelector.vue b/src/components/custom/widget/WorkflowTemplateSelector.vue
index 925f5ef2b..8102b78d7 100644
--- a/src/components/custom/widget/WorkflowTemplateSelector.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelector.vue
@@ -319,13 +319,21 @@ const licenseFilterLabel = computed(() => {
 // Sort options
 const sortOptions = computed(() => [
   {
-    name: t('templateWorkflows.sort.alphabetical', 'A → Z'),
-    value: 'alphabetical'
+    name: t('templateWorkflows.sort.default', 'Default'),
+    value: 'default'
   },
   { name: t('templateWorkflows.sort.newest', 'Newest'), value: 'newest' },
   {
-    name: t('templateWorkflows.sort.default', 'Default'),
-    value: 'default'
+    name: t('templateWorkflows.sort.vramLowToHigh', 'VRAM Utilization (Low to High)'),
+    value: 'vram-low-to-high'
+  },
+  {
+    name: t('templateWorkflows.sort.modelSizeLowToHigh', 'Model Size (Low to High)'),
+    value: 'model-size-low-to-high'
+  },
+  {
+    name: t('templateWorkflows.sort.alphabetical', 'Alphabetical (A-Z)'),
+    value: 'alphabetical'
   }
 ])
 
diff --git a/src/composables/useTemplateFiltering.ts b/src/composables/useTemplateFiltering.ts
index 240407b00..03c18929e 100644
--- a/src/composables/useTemplateFiltering.ts
+++ b/src/composables/useTemplateFiltering.ts
@@ -8,7 +8,7 @@ export interface TemplateFilterOptions {
   selectedModels?: string[]
   selectedUseCases?: string[] // Now represents selected tags
   selectedLicenses?: string[]
-  sortBy?: 'default' | 'alphabetical' | 'newest'
+  sortBy?: 'default' | 'alphabetical' | 'newest' | 'vram-low-to-high' | 'model-size-low-to-high'
 }
 
 export function useTemplateFiltering(
@@ -18,7 +18,7 @@ export function useTemplateFiltering(
   const selectedModels = ref<string[]>([])
   const selectedUseCases = ref<string[]>([])
   const selectedLicenses = ref<string[]>([])
-  const sortBy = ref<'default' | 'alphabetical' | 'newest'>('default')
+  const sortBy = ref<'default' | 'alphabetical' | 'newest' | 'vram-low-to-high' | 'model-size-low-to-high'>('default')
 
   const templatesArray = computed(() => {
     const templateData = 'value' in templates ? templates.value : templates
@@ -142,6 +142,14 @@ export function useTemplateFiltering(
           const dateB = new Date(b.date || '1970-01-01')
           return dateB.getTime() - dateA.getTime()
         })
+      case 'vram-low-to-high':
+        // TODO: Implement VRAM sorting when VRAM data is available
+        // For now, keep original order
+        return templates
+      case 'model-size-low-to-high':
+        // TODO: Implement model size sorting when model size data is available
+        // For now, keep original order
+        return templates
       case 'default':
       default:
         // Keep original order (default order)