Skip to content

User Profile Quick-View: reusable dialog for viewing any user #146

@Flo0806

Description

@Flo0806

Description

Anywhere a user avatar or name appears (inbox cards, issue timeline, reviewer/assignee badges, comment authors, repo owner chips, etc.), clicking it should open a profile quick-view dialog — not navigate away.

The core component (UserProfileCard) must be reusable: works inside a UModal/USlideover now, embeddable in a dedicated page later.

Implemented

Core

  • UserProfileCard.vue — self-contained, takes login: string as prop, fetches own data
  • UserProfileDialog.vue — wraps card in UModal, triggered via useUserProfileDialog().open(login)
  • GET /api/user/profile?login={username} — aggregates profile + top repos, Nitro-cached

Profile data shown

  • Avatar, display name, login
  • Bio, company, location, website/blog, Twitter/X
  • Followers / Following / Public repos counts
  • Top 6 repositories (stars, language, fork badge)
  • Member since (account creation date)
  • Direct link to GitHub

Contribution graph (bonus, originally #40)

  • GET /api/user/contributions — GitHub GraphQL API, 30min cache
  • ContributionGraph.vue — HTML CSS Grid heatmap, 365 days
  • 3 switchable skins: default (primary color), grass (earth + blades), fire (flames + sparks)
  • Skin persisted in user settings, cycle button in graph header + settings page

Infrastructure

  • Caching via defineCachedFunction (30min)
  • i18n keys for all strings (en + de)

Out of scope (moved to #149)

  • Pronouns display
  • Status emoji + message (reuse existing StatusBadge)
  • Profile README rendering
  • Shared repos (repos you both contribute to)
  • Recent activity summary
  • Clickable everywhere (wire dialog into all avatar/name occurrences)
  • Reusable UserChip.vue component

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions