feat: the issue score (0–100) is displayed as a number but there is no explanation of what the score means or how it is calculated — contributors see a score of 72 and don't know if that means "easy", "medium", or "requires senior expertise"

[prince-pokharna]

📋 Problem Statement

IssueScope's core value is:

"Ranks issues based on a calculated score (0–100) indicating how actionable and feasible they are."

The score is the primary output shown to contributors. However:

• There is no legend or tooltip explaining what 0 and 100 represent
• There is no documented formula for how the score is computed (complexity + required skills + newcomer friendliness?)
• A score of "72" is meaningless without context — is 72 good or bad? Does it mean "easy" or "hard"?
• Contributors scanning the ranked list have no way to set a personal threshold filter (e.g., "show me only issues scoring above 60")

This gap directly undermines the tool's core purpose: helping contributors find the right issue to work on.

💡 Proposed Fix

1. Add a score legend with named bands and color coding

// src/utils/scoreUtils.ts

export interface ScoreBand {
  label: string;
  color: string;
  emoji: string;
  description: string;
}

export function getScoreBand(score: number): ScoreBand {
  if (score >= 80) return {
    label: 'Great First Pick',
    color: '#22c55e', // green
    emoji: '🟢',
    description: 'Well-defined, low complexity. Ideal for newcomers.',
  };
  if (score >= 60) return {
    label: 'Accessible',
    color: '#84cc16', // lime
    emoji: '🟡',
    description: 'Moderate complexity. Requires some familiarity with the codebase.',
  };
  if (score >= 40) return {
    label: 'Intermediate',
    color: '#f59e0b', // amber
    emoji: '🟠',
    description: 'Meaningful complexity. Recommended for contributors with prior experience.',
  };
  if (score >= 20) return {
    label: 'Advanced',
    color: '#ef4444', // red
    emoji: '🔴',
    description: 'High complexity or unclear scope. Best suited for experienced contributors.',
  };
  return {
    label: 'Expert Only',
    color: '#7c3aed', // purple
    emoji: '🟣',
    description: 'Very high complexity, ambiguous requirements, or deep domain knowledge required.',
  };
}

2. Add a hover tooltip on each score badge

// src/components/IssueCard.tsx

import { getScoreBand } from '../utils/scoreUtils';

const band = getScoreBand(issue.score);

<Tooltip content={`${band.label}: ${band.description}`}>
  <span
    className="score-badge"
    style={{ backgroundColor: band.color }}
  >
    {band.emoji} {issue.score}
  </span>
</Tooltip>

3. Add a score filter slider in the sidebar

// src/components/Sidebar.tsx

<label>Minimum Score: {minScore}</label>
<input
  type="range"
  min={0}
  max={100}
  value={minScore}
  onChange={(e) => setMinScore(Number(e.target.value))}
/>

4. Document the scoring formula in README

Add a "How Scores Are Calculated" section explaining each component (complexity, skill match, newcomer signal, etc.).

📁 Files to Modify

File	Change
src/utils/scoreUtils.ts	New — getScoreBand() utility
src/components/IssueCard.tsx	Wrap score in colored badge with tooltip
src/components/Sidebar.tsx or filter area	Add minimum score slider
README.md	Add "Scoring Formula" section

Suggested labels: enhancement, ux, documentation

I would like to work on this. Could you please assign it to me?

[prince-pokharna]

Hey @vee1e ,
Please assign it to me under GSSoC 2026.
/claim /assign /claim-assignment