feat: extension category as badges

raghavyuva · raghavyuva · commit 0e5d58ddf4da · 2025-10-15T21:41:37.000+05:30
diff --git a/api/api/versions.json b/api/api/versions.json
@@ -3,7 +3,7 @@
     {
       "version": "v1",
       "status": "active",
-      "release_date": "2025-10-15T21:11:09.336673993+05:30",
+      "release_date": "2025-10-15T21:35:07.482629937+05:30",
       "end_of_life": "0001-01-01T00:00:00Z",
       "changes": [
         "Initial API version"
diff --git a/api/doc/openapi.json b/api/doc/openapi.json
diff --git a/api/internal/features/extension/controller/get_extensions.go b/api/internal/features/extension/controller/get_extensions.go
@@ -64,6 +64,15 @@ func (c *ExtensionsController) GetExtensions(ctx fuego.ContextNoBody) (*types.Ex
 	return response, nil
 }
 
+func (c *ExtensionsController) GetCategories(ctx fuego.ContextNoBody) ([]types.ExtensionCategory, error) {
+	cats, err := c.service.ListCategories()
+	if err != nil {
+		c.logger.Log(logger.Error, err.Error(), "")
+		return nil, fuego.HTTPError{Err: err, Status: http.StatusInternalServerError}
+	}
+	return cats, nil
+}
+
 func (c *ExtensionsController) GetExtension(ctx fuego.ContextNoBody) (types.Extension, error) {
 	id := ctx.PathParam("id")
 	if id == "" {
diff --git a/api/internal/features/extension/service/service.go b/api/internal/features/extension/service/service.go
@@ -185,6 +185,15 @@ func (s *ExtensionService) ListExtensions(params types.ExtensionListParams) (*ty
 	return response, nil
 }
 
+func (s *ExtensionService) ListCategories() ([]types.ExtensionCategory, error) {
+	cats, err := s.storage.ListCategories()
+	if err != nil {
+		s.logger.Log(logger.Error, err.Error(), "")
+		return nil, err
+	}
+	return cats, nil
+}
+
 func (s *ExtensionService) ParseMultipartRunRequest(r *http.Request) (map[string]interface{}, error) {
 	if err := r.ParseMultipartForm(32 << 20); err != nil {
 		return nil, err
diff --git a/api/internal/features/extension/storage/storage.go b/api/internal/features/extension/storage/storage.go
@@ -23,6 +23,7 @@ type ExtensionStorageInterface interface {
 	UpdateExtension(extension *types.Extension) error
 	DeleteExtension(id string) error
 	ListExtensions(params types.ExtensionListParams) (*types.ExtensionListResponse, error)
+	ListCategories() ([]types.ExtensionCategory, error)
 	CreateExecution(exec *types.ExtensionExecution) error
 	CreateExecutionSteps(steps []types.ExecutionStep) error
 	ListExecutionSteps(executionID string) ([]types.ExecutionStep, error)
@@ -224,6 +225,19 @@ func (s *ExtensionStorage) ListExtensions(params types.ExtensionListParams) (*ty
 	}, nil
 }
 
+func (s *ExtensionStorage) ListCategories() ([]types.ExtensionCategory, error) {
+	var categories []types.ExtensionCategory
+	err := s.getDB().NewSelect().
+		TableExpr("extensions").
+		ColumnExpr("DISTINCT category").
+		Where("deleted_at IS NULL").
+		Scan(s.Ctx, &categories)
+	if err != nil {
+		return nil, err
+	}
+	return categories, nil
+}
+
 func (s *ExtensionStorage) CreateExecution(exec *types.ExtensionExecution) error {
 	_, err := s.getDB().NewInsert().Model(exec).Exec(s.Ctx)
 	if err != nil {
diff --git a/api/internal/routes.go b/api/internal/routes.go
@@ -429,6 +429,7 @@ func (router *Router) ContainerRoutes(s *fuego.Server, containerController *cont
 
 func (router *Router) ExtensionRoutes(s *fuego.Server, extensionController *extension.ExtensionsController) {
 	fuego.Get(s, "", extensionController.GetExtensions)
+	fuego.Get(s, "/categories", extensionController.GetCategories)
 	fuego.Get(s, "/{id}", extensionController.GetExtension)
 	fuego.Get(s, "/by-extension-id/{extension_id}", extensionController.GetExtensionByExtensionID)
 	fuego.Get(s, "/by-extension-id/{extension_id}/executions", extensionController.ListExecutionsByExtensionID)
diff --git a/view/app/extensions/components/category-badges.tsx b/view/app/extensions/components/category-badges.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+type CategoryBadgesProps = {
+  categories: string[];
+  selected?: string | null;
+  onChange?: (value: string | null) => void;
+  className?: string;
+  showAll?: boolean;
+};
+
+export default function CategoryBadges({
+  categories,
+  selected = null,
+  onChange,
+  className,
+  showAll = true
+}: CategoryBadgesProps) {
+  const handleSelect = (value: string | null) => {
+    onChange?.(value);
+  };
+
+  return (
+    <div className={cn('w-full', className)}>
+      <div className="flex flex-wrap items-center gap-2">
+        {showAll && (
+          <button
+            type="button"
+            onClick={() => handleSelect(null)}
+            className="focus:outline-none"
+          >
+            <Badge
+              variant={selected === null ? 'default' : 'outline'}
+              className="px-3 py-1"
+            >
+              All
+            </Badge>
+          </button>
+        )}
+        {categories.map((cat) => (
+          <button
+            key={cat}
+            type="button"
+            onClick={() => handleSelect(cat === selected ? null : cat)}
+            className="focus:outline-none"
+          >
+            <Badge
+              variant={selected === cat ? 'default' : 'outline'}
+              className="px-3 py-1"
+            >
+              {cat}
+            </Badge>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+
diff --git a/view/app/extensions/hooks/use-extensions.ts b/view/app/extensions/hooks/use-extensions.ts
@@ -2,8 +2,8 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Extension, ExtensionListParams, SortDirection, ExtensionSortField } from '@/redux/types/extension';
-import { useGetExtensionsQuery, useRunExtensionMutation, useCancelExecutionMutation } from '@/redux/services/extensions/extensionsApi';
+import { Extension, ExtensionListParams, SortDirection, ExtensionSortField, ExtensionCategory } from '@/redux/types/extension';
+import { useGetExtensionsQuery, useRunExtensionMutation, useCancelExecutionMutation, useGetExtensionCategoriesQuery } from '@/redux/services/extensions/extensionsApi';
 
 export function useExtensions() {
   const router = useRouter();
@@ -16,9 +16,11 @@ export function useExtensions() {
   const [itemsPerPage] = useState(9);
   const [runModalOpen, setRunModalOpen] = useState(false);
   const [selectedExtension, setSelectedExtension] = useState<Extension | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<ExtensionCategory | null>(null);
 
   const queryParams: ExtensionListParams = {
     search: searchTerm || undefined,
+    category: selectedCategory || undefined,
     sort_by: sortConfig.key,
     sort_dir: sortConfig.direction,
     page: currentPage,
@@ -31,6 +33,8 @@ export function useExtensions() {
     error: apiError
   } = useGetExtensionsQuery(queryParams);
 
+  const { data: categories = [] } = useGetExtensionCategoriesQuery();
+
   const extensions = response?.extensions || [];
   const totalPages = response?.total_pages || 0;
   const totalExtensions = response?.total || 0;
@@ -45,6 +49,11 @@ export function useExtensions() {
     setCurrentPage(1); // Reset to first page when sorting
   };
 
+  const handleCategoryChange = (value: string | null) => {
+    setSelectedCategory((value as ExtensionCategory) || null);
+    setCurrentPage(1);
+  };
+
   const handlePageChange = (page: number) => {
     setCurrentPage(page);
   };
@@ -81,13 +90,16 @@ export function useExtensions() {
     extensions,
     isLoading,
     error,
+    categories,
     searchTerm,
     sortConfig,
     currentPage,
     totalPages,
     totalExtensions,
     handleSearchChange,
     handleSortChange,
+    selectedCategory,
+    handleCategoryChange,
     handlePageChange,
     handleInstall,
     handleViewDetails,
diff --git a/view/app/extensions/page.tsx b/view/app/extensions/page.tsx
@@ -6,6 +6,7 @@ import PageLayout from '@/components/layout/page-layout';
 import ExtensionsHeader from '@/app/extensions/components/extensions-header';
 import ExtensionsGrid from '@/app/extensions/components/extensions-grid';
 import ExtensionsHero from '@/app/extensions/components/extensions-hero';
+import CategoryBadges from '@/app/extensions/components/category-badges';
 import { useExtensions } from './hooks/use-extensions';
 import PaginationWrapper from '@/components/ui/pagination';
 import ExtensionInput from '@/app/extensions/components/extension-input';
@@ -16,13 +17,16 @@ export default function ExtensionsPage() {
     extensions,
     isLoading,
     error,
+    categories,
     searchTerm,
     sortConfig,
     currentPage,
     totalPages,
     totalExtensions,
     handleSearchChange,
     handleSortChange,
+    selectedCategory,
+    handleCategoryChange,
     handlePageChange,
     handleInstall,
     handleViewDetails,
@@ -45,11 +49,20 @@ export default function ExtensionsPage() {
         />
 
         <div className="space-y-6">
-          {totalExtensions > 0 && (
-            <div className="text-sm text-muted-foreground self-end justify-end flex">
-              Showing {extensions.length} of {totalExtensions} extensions
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <CategoryBadges
+                categories={categories}
+                selected={selectedCategory}
+                onChange={handleCategoryChange}
+              />
             </div>
-          )}
+            {totalExtensions > 0 && (
+              <div className="text-sm text-muted-foreground whitespace-nowrap">
+                Showing {extensions.length} of {totalExtensions} extensions
+              </div>
+            )}
+          </div>
 
           <ExtensionsGrid
             extensions={extensions}
diff --git a/view/redux/api-conf.ts b/view/redux/api-conf.ts
@@ -129,6 +129,7 @@ export enum IMAGEURLS {
 
 export enum EXTENSIONURLS {
   GET_EXTENSIONS = 'v1/extensions',
+  GET_CATEGORIES = 'v1/extensions/categories',
   GET_EXTENSION = 'v1/extensions/{id}',
   GET_EXTENSION_BY_ID = 'v1/extensions/by-extension-id/{extension_id}',
   FORK_EXTENSION = 'v1/extensions/{extension_id}/fork',
diff --git a/view/redux/services/extensions/extensionsApi.ts b/view/redux/services/extensions/extensionsApi.ts
@@ -1,6 +1,6 @@
 import { createApi } from '@reduxjs/toolkit/query/react';
 import { baseQueryWithReauth } from '@/redux/base-query';
-import { Extension, ExtensionListParams, ExtensionListResponse, ExtensionExecution } from '@/redux/types/extension';
+import { Extension, ExtensionListParams, ExtensionListResponse, ExtensionExecution, ExtensionCategory } from '@/redux/types/extension';
 import { EXTENSIONURLS } from '@/redux/api-conf';
 
 export const extensionsApi = createApi({
@@ -43,6 +43,13 @@ export const extensionsApi = createApi({
       providesTags: ['Extensions'],
       transformResponse: (response: ExtensionListResponse) => response
     }),
+    getExtensionCategories: builder.query<ExtensionCategory[], void>({
+      query: () => ({
+        url: EXTENSIONURLS.GET_CATEGORIES,
+        method: 'GET'
+      }),
+      providesTags: ['Extensions']
+    }),
     getExtension: builder.query<Extension, { id: string }>({
       query: ({ id }) => ({
         url: EXTENSIONURLS.GET_EXTENSION.replace('{id}', id),
@@ -122,6 +129,7 @@ export const extensionsApi = createApi({
 
 export const {
   useGetExtensionsQuery,
+  useGetExtensionCategoriesQuery,
   useGetExtensionQuery,
   useGetExtensionByExtensionIdQuery,
   useRunExtensionMutation,

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`{`
`4`	`4`	`"version": "v1",`
`5`	`5`	`"status": "active",`
`6`		`- "release_date": "2025-10-15T21:11:09.336673993+05:30",`
	`6`	`+ "release_date": "2025-10-15T21:35:07.482629937+05:30",`
`7`	`7`	`"end_of_life": "0001-01-01T00:00:00Z",`
`8`	`8`	`"changes": [`
`9`	`9`	`"Initial API version"`