feat: show enabled extensions at top of extensions page (#4423)

Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>

ui/desktop/src/components/settings/extensions/subcomponents/ExtensionList.tsx

@@ -19,22 +19,62 @@ export default function ExtensionList({
   isStatic,
   disableConfiguration: _disableConfiguration,
 }: ExtensionListProps) {
-  // Sort extensions alphabetically by their friendly title
+  // Separate enabled and disabled extensions
-  const sortedExtensions = [...extensions].sort((a, b) =>
+  const enabledExtensions = extensions.filter((ext) => ext.enabled);
+  const disabledExtensions = extensions.filter((ext) => !ext.enabled);
+  // Sort each group alphabetically by their friendly title
+  const sortedEnabledExtensions = [...enabledExtensions].sort((a, b) =>
+    getFriendlyTitle(a).localeCompare(getFriendlyTitle(b))
+  );
+  const sortedDisabledExtensions = [...disabledExtensions].sort((a, b) =>
     getFriendlyTitle(a).localeCompare(getFriendlyTitle(b))
   );
 
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
+    <div className="space-y-8">
-      {sortedExtensions.map((extension) => (
+      {sortedEnabledExtensions.length > 0 && (
-        <ExtensionItem
+        <div>
-          key={extension.name}
+          <h2 className="text-lg font-medium text-text-default mb-4 flex items-center gap-2">
-          extension={extension}
+            <span className="w-2 h-2 bg-green-500 rounded-full"></span>
-          onToggle={onToggle}
+            Enabled Extensions ({sortedEnabledExtensions.length})
-          onConfigure={onConfigure}
+          </h2>
-          isStatic={isStatic}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
-        />
+            {sortedEnabledExtensions.map((extension) => (
-      ))}
+              <ExtensionItem
+                key={extension.name}
+                extension={extension}
+                onToggle={onToggle}
+                onConfigure={onConfigure}
+                isStatic={isStatic}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {sortedDisabledExtensions.length > 0 && (
+        <div>
+          <h2 className="text-lg font-medium text-text-muted mb-4 flex items-center gap-2">
+            <span className="w-2 h-2 bg-gray-400 rounded-full"></span>
+            Available Extensions ({sortedDisabledExtensions.length})
+          </h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
+            {sortedDisabledExtensions.map((extension) => (
+              <ExtensionItem
+                key={extension.name}
+                extension={extension}
+                onToggle={onToggle}
+                onConfigure={onConfigure}
+                isStatic={isStatic}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {extensions.length === 0 && (
+        <div className="text-center text-text-muted py-8">No extensions available</div>
+      )}
     </div>
   );
 }