Skip to content

Add app category display in Dev Center #1033

@jelveh

Description

@jelveh

Currently, the Dev Center doesn't display app categories in its interface. We should add category display both in the main app list and individual app settings pages to help developers better organize and identify their apps.

UI Changes Required

Main App List:

  • Add a category label/badge next to each app name in the list
  • Consider using subtle visual differentiation (like muted colors) to maintain readability
  • Handle cases where category is undefined/empty gracefully (e.g., display "Uncategorized" or simply omit)
  • Ensure proper alignment and spacing with existing app name and metadata

Individual App Settings Page:

  • Add category field to the app's title or heading
  • Real-time update of category display when edited

Technical Implementation

Data Structure:

  • App categories are stored in the metadata attribute of app objects
  • Example app object structure:
{
  name: "my-app",
  metadata: {
    category: "productivity"
  },
  // ... other app properties
}

Code Changes Required:

  1. Dev Center App List Component:

    • Update app list item rendering to include category
    • Add category styling/components
    • Handle category data fetching/display
  2. App Update Logic:

    • Update local state/UI after successful category changes

UX Considerations

  • Clear visual hierarchy: category should be visible but not dominate the app name
  • Consistent styling across both list view and settings page
  • Graceful handling of empty/undefined categories

Implementation Notes

  • Files to modify are in src/dev-center/:

Testing Requirements

  • Verify category display in app list
  • Test category updates in settings
  • Ensure proper handling of apps without categories
  • Test UI responsiveness and layout
  • Verify real-time updates after category changes

Metadata

Metadata

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions