Skip to content

[Enhancement]: Improve the repository selection dropdown UI #531

@JaYRaNa213

Description

@JaYRaNa213

Enhancement Summary

Improve the repository selection dropdown UI by grouping repositories by organization/owner and adding full dark mode support for better usability and visual consistency.

Motivation

The current repository dropdown presents all repositories in a flat list, which becomes difficult to navigate when users have many repositories across different organizations or accounts.

Additionally, the UI lacks proper dark mode styling, leading to inconsistent appearance and reduced readability in dark themes.

This enhancement will improve clarity, scalability, and overall user experience.

Proposed Solution

  • Group repositories by owner (organization or username)
  • Display non-clickable headers for each group (e.g., fossasia/, username/)
  • Add visual hierarchy using spacing, icons, and styling
  • Improve dropdown layout for better readability and navigation
  • Add full dark mode support using Tailwind dark: classes
  • Ensure consistent styling for:

Repository names
Descriptions
Language badges
Hover and selected states

Alternatives Considered

Have you thought of any other ways to solve the problem?

Screenshots / Mockups

Before:

Flat list of repositories with no grouping and limited dark mode support

Image

After:

Grouped dropdown with organization headers, improved spacing, and proper dark mode styling

Image Image

Additional Context

This enhancement builds on the existing repository filter functionality and focuses purely on UI/UX improvements.

It does not change the underlying selection logic but makes the interface more intuitive and scalable for users with multiple repositories.


Contribution Checklist

  • I have checked existing enhancement requests
  • I have clearly described the proposed change
  • I have explained the motivation and context
  • I am willing to help implement this feature (optional)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions