UI/UX improvements and component refactoring for Backstage Plugin

[talissoncosta]

Summary

UI/UX improvements and architectural refactoring for the Flagsmith Backstage Plugin, focusing on better user experience and maintainable code structure.

Parent Epic: Flagsmith/flagsmith-backstage-plugin#10

What's Included

UI/UX Improvements

• Flagsmith brand colors (teal primary, purple secondary)
• Visual status indicators for enabled/disabled states
• Search/filter functionality for flags
• Deep links to Flagsmith dashboard
• Jira-style per-environment tables
• Lazy loading for feature details

Component Architecture Refactoring

Split large components into smaller, focused modules:

Component	Before	After
FlagsTab	636 lines	5 files
FlagsmithOverviewCard	269 lines	4 files
FlagsmithUsageCard	202 lines	3 files

Testability Improvements

• Custom Hooks: useFlagsmithProject, useFlagsmithUsage for data fetching
• Utility Functions: getFeatureEnvStatus, buildEnvStatusTooltip, calculateFeatureStats, paginate

These abstractions enable comprehensive test coverage (planned for follow-up).

New File Structure

src/
├── components/
│   ├── FlagsTab/
│   │   ├── index.tsx
│   │   ├── ExpandableRow.tsx
│   │   ├── EnvironmentTable.tsx
│   │   ├── FeatureDetailsGrid.tsx
│   │   └── SegmentOverridesSection.tsx
│   ├── FlagsmithOverviewCard/
│   │   ├── index.tsx
│   │   ├── FlagStatsRow.tsx
│   │   ├── FeatureFlagRow.tsx
│   │   └── MiniPagination.tsx
│   ├── FlagsmithUsageCard/
│   │   ├── index.tsx
│   │   ├── UsageChart.tsx
│   │   └── UsageTooltip.tsx
│   └── shared/
│       ├── FlagStatusIndicator.tsx
│       ├── SearchInput.tsx
│       └── FlagsmithLink.tsx
├── hooks/
│   ├── useFlagsmithProject.ts
│   └── useFlagsmithUsage.ts
├── utils/
│   └── flagHelpers.ts
└── theme/
    └── flagsmithTheme.ts

Tasks

• Add Flagsmith brand colors and theme
• Create shared UI components (status indicators, search, links)
• Add Jira-style per-environment tables
• Implement lazy loading for feature details
• Split FlagsTab into smaller components
• Split FlagsmithOverviewCard into smaller components
• Split FlagsmithUsageCard into smaller components
• Extract business logic into custom hooks
• Add utility functions for testability
• Add comprehensive test coverage (follow-up ticket)

Notes

MUI v4 migration to Backstage UI (BUI) is deferred - BUI component coverage is still growing. Current approach keeps MUI v4 but with clean component architecture that will make future migration easier.