UX: Update group and project row UX in list views

Problem

Our current project and group list views suffer from several usability and design issues that impact user productivity and satisfaction.

Current Challenges

Visual instability & layout issues

• Icons and badges constantly shift left and right depending on content, creating a "chaotic" visual experience
• No dedicated space allocation for different types of information leads to inconsistent positioning
• Users struggle to quickly scan and compare items due to unpredictable layout changes

Missing critical information

• Users have requested visibility into latest release/tag information for projects at a glance
• Build status filtering has been requested but current design doesn't surface this information effectively
• Storage size is shown inconsistently and not easily scannable

Inconsistent information architecture

• Projects and groups display different types of metrics without clear visual hierarchy
• Role badges and status badges compete for attention

Scalability concerns

• Current design doesn't support the planned migration to a combined project/group list view
• Performance issues when attempting to create unified expandable hierarchies
• Information density makes it difficult to add new features without further cluttering

Proposed Solution

We propose a complete redesign of the project and group list interface using a fixed grid-based layout system that provides visual stability while accommodating all requested features.

Core Design Principles

"Calm" UI design

• Fixed positioning zones prevent content-dependent layout shifts
• Consistent spacing system (8px, 12px, 16px) throughout
• Reserved space allocation ensures predictable visual behavior

Three-tier information hierarchy

• Primary: Item name + critical status indicators (role, status badges, visibility)
• Secondary: Description + time-sensitive info (latest release, build status)
• Tertiary: Metrics + topics in fixed-width containers

Unified architecture

• Single layout system works for both projects and groups
• Expandable group functionality for future combined views
• Semantic iconography for immediate item type recognition

Key Features

Enhanced information display

• Latest release tags prominently displayed with version numbers
• Build status icons (✅ passed, ❌ failed, ⭕ running) for quick CI/CD visibility
• Storage size consistently shown as first metric for easy capacity planning
• Role badges (Developer, Maintainer, Owner, etc.) with proper visual hierarchy

Improved visual design

• Color-coded status badges: Grey roles, Blue archived, Yellow pending deletion
• Perfect vertical alignment of secondary row elements (release, build, time, actions)

Future-ready structure

• Expandable groups with left-side toggle controls
• Custom avatar support with type indicator badges
• Grid-based layout scales to accommodate new features
• Combined view compatibility for unified project/group browsing

User Benefits

For individual contributors:

• Faster project discovery through consistent visual scanning patterns
• Immediate build status visibility reduces context switching to individual project pages
• Latest release information helps identify up-to-date vs. stale projects

For project maintainers:

• Storage capacity awareness enables proactive repository management
• Build status overview supports CI/CD pipeline monitoring

For team leads & managers:

• Cross-project visibility into team activity and project health
• Consistent information density enables efficient portfolio review
• Future filtering capabilities by build status, storage size, or other metrics

For platform administrators:

• Scalable design system reduces maintenance overhead
• Unified codebase for projects and groups simplifies development
• Performance optimization through better information architecture

Implementation Approach

The redesign leverages Vue.js component architecture with a CSS Grid-based layout:

| Expand (16px) | Icon (40px) | Content (flexible) | Actions (100px) |
|     Toggle    |   Avatar    |   Primary Info     |   Time + Menu   |
|               |   + Badge   |   Secondary Info   |                 |
|               |             |   Tertiary Info    |                 |

Technical Benefits

• Visual stability through fixed-width zones + Vue's consistent rendering
• Performance optimization via Vue's virtual DOM for large lists
• Component reusability across project and group contexts with prop variations
• Better accessibility via Vue's template system for semantic markup and ARIA attributes
• Reactive state management for expand/collapse, hover states, and dynamic content
• Clean separation of concerns through focused sub-components

Success Metrics

• Increased user satisfaction scores for project/group browsing
• Faster task completion for project discovery and comparison

Design Prototype

Interactive prototype available: list-redesign.html

Note: The item actions (overflow menu) only appear when hovering over the line item.