Change notification dot on Changes tab to a badge

[iAmWillShepherd]

Goal

Prevent confusion that could be caused by using the same UI element to notify users of two separate updates: new changes vs. new commits.

Background

This task was pulled from #4646.

Solution

• Replace notification dot with a badge
• The badge's content will be the number of files that have changed
• Remove badge when there are no changes to be committed

Mockup

Before

After

Help Wanted

If you're interested in taking on this task, please @mention me in a comment and I'll move this issue to taken and serve as your point of contact for getting it delivered.

What are we are looking?

• Build a component, FilesChangedBadge, that
• Accepts 1 prop, numFilesChanged, for the number that will be displayed
• Replace the blue notification dot with FilesChangedBadge

Nice to haves ✨

• Handle large numbers in the following way, to ensure we don't have to fiddle with formatting too much:

Condition	What to render
x === 0	Nothing
x > 0 && x < 300	Badge with x
x >= 300	Badge with 300+

• Styles to make the component look like the mockup

Where to start

The notification dot is located here (note that it is not a component):

desktop/app/src/ui/repository.tsx

Lines 85 to 98 in c64e555

	return (
	<TabBar selectedIndex={selectedTab} onTabClicked={this.onTabClicked}>
	<span className="with-indicator">
	<span>Changes</span>
	{hasChanges ? (
	<Octicon
	className="indicator"
	symbol={OcticonSymbol.primitiveDot}
	/>
	) : null}
	</span>
	<span>History</span>
	</TabBar>
	)

[j-f1]

How about making it white text on a blue bubble and putting a similar label on the history with “⬆️ X ⬇️ Y”?

[iAmWillShepherd]

@j-f1 we already have a design for this. See the mockup ☝️ .

[iAmWillShepherd]

Also, checkout the issue I pulled this out of. There you will see what the notification will look like.

[yongdamsh]

@iAmWillShepherd Can I work on this?

[iAmWillShepherd]

@yongdamsh sure thing 👍