Add GitHub star count to website header by Copilot · Pull Request #174 · RazorConsole/RazorConsole

Copilot · 2025-11-23T16:24:19Z

Adding GitHub star count display to the website app bar header.

Plan:

Implementation Details

Created src/hooks/useGitHubStars.ts:

Custom React hook that fetches star count from GitHub API
Returns stars, loading, and error states
Handles API errors gracefully
Includes AbortController to prevent memory leaks and race conditions
Ignores abort errors on component unmount
Resets stars to null on error to reflect error state correctly

Updated src/components/Layout.tsx:

Compact design: Shows only GitHub icon + star count (no "GitHub" text, no star icon)
Larger icon (w-5 h-5 instead of w-4 h-4) for better visibility
Smart number formatting:
- Numbers ≥1000 display as "X.Xk" (e.g., 100.5k, 1.2k)
- Removes unnecessary decimals (2k instead of 2.0k)
Accessibility: Added dynamic aria-label that includes star count when available
UX improvement: Pointer cursor on hover (hover:cursor-pointer) provides visual feedback for clickability
Uses gap-1.5 for tight spacing between icon and number
Desktop only (hidden on mobile navigation)
Conditional rendering with graceful fallback

Visual Changes

Compact Version (Current)

The new compact design shows:

Just icon + number: GitHub icon followed by star count
Smart formatting: 100.5k, 2k, 1.2k, 325 (formats numbers ≥1000 with "k" suffix, no trailing .0)
Minimal footprint: Takes up less space in the header
Hover feedback: Pointer cursor on hover indicates clickability

Accessibility Improvements

✅ Screen reader support: Dynamic aria-label announces star count
- With stars: "GitHub - 123 stars"
- Without stars: "View on GitHub"

Graceful Degradation

The implementation handles edge cases elegantly:

✅ API failures → Shows just GitHub icon without count, resets stars to null
✅ Loading state → Shows just GitHub icon until loaded
✅ Rate limiting → Fails silently, shows icon only
✅ Network issues → Falls back to icon-only button
✅ Component unmount → Proper cleanup via AbortController

Quality Assurance

✅ Build: Successfully compiles with TypeScript
✅ Lint: Passes ESLint checks
✅ Code Review: All feedback addressed
✅ Security: CodeQL scan passed with 0 alerts
✅ Browser Compatibility: Uses standard Fetch API
✅ Mobile Responsive: Hidden on mobile screens
✅ Accessibility: ARIA labels for screen readers
✅ UX: Pointer cursor on hover for better feedback

Files Changed

website/src/components/Layout.tsx (compact design with aria-label and hover cursor)
website/src/hooks/useGitHubStars.ts (resets stars on error)

<issue_title>[Feature]: show GitHub stars on webside</issue_title>

Feature Description

As title

Problem Statement

No response

Proposed Solution

Use copilot to add star number to App bar

Alternatives Considered

No response

Additional Context

No response

Contribution

I'd be willing to contribute this feature

Fixes [Feature]: show GitHub stars on webside #173

Original prompt

This section details on the original issue you should resolve

<issue_title>[Feature]: show GitHub stars on webside</issue_title>
<issue_description>### Feature Description

As title

Problem Statement

No response

Proposed Solution

Use copilot to add star number to App bar

Alternatives Considered

No response

Additional Context

No response

Contribution

I'd be willing to contribute this feature</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes [Feature]: show GitHub stars on webside #173

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

github-actions · 2025-11-23T17:18:07Z

🚀 Preview Deployment

A preview build has been generated for this PR!

Download the artifact:
website-preview-pr-174

To view the preview locally:

Download the artifact from the workflow run
Extract the ZIP file
Serve the files with a local web server
(e.g., npx serve dist)

Live Preview URL: https://0f2c01a3.razorconsole.pages.dev

The live preview will be automatically updated when you push new
commits to this PR.

LittleLittleCloud · 2025-11-23T17:20:13Z

@copilot use a more tiny version, like below

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

…f 2.0k) Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot · 2025-11-23T17:27:13Z

@copilot use a more tiny version, like below

...

Updated to compact version matching your reference. Changes in commit c095020:

Removed "GitHub" text label
Shows only icon + star count
Larger icon for better visibility
Smart number formatting (100.5k, 2k, 325)

Copilot

Pull request overview

This PR adds a GitHub star count display to the website header by introducing a new React hook that fetches repository data from the GitHub API and integrating it into the navigation bar. The star count appears next to the GitHub icon with smart formatting (e.g., "2k" for 2000 stars).

Key changes:

New custom hook useGitHubStars for fetching and managing star count state
Updated Layout component to display formatted star count in the header button
Desktop-only display with graceful fallback when stars aren't loaded

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
website/src/hooks/useGitHubStars.ts	New hook that fetches GitHub repository star count with proper cleanup using AbortController
website/src/components/Layout.tsx	Integrates the star count hook and displays formatted stars next to the GitHub icon in the header

Copilot · 2025-11-23T17:40:21Z

website/src/components/Layout.tsx


 export default function Layout() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const { stars } = useGitHubStars('LittleLittleCloud', 'RazorConsole')


The loading and error values returned from the useGitHubStars hook are destructured but never used in the component. Consider using these values to provide better user feedback:

Show a loading indicator while fetching

Display an error message or fallback UI when the fetch fails

Alternatively, if these states are intentionally ignored, remove them from the destructured return value to make the intent clearer.

Copilot · 2025-11-23T17:40:21Z

website/src/components/Layout.tsx

+                <Button variant="ghost" size="sm" className="gap-1.5">
+                  <Github className="w-5 h-5" />
+                  {stars !== null && (
+                    <span className="text-sm font-medium">
+                      {stars >= 1000 
+                        ? `${(stars / 1000).toFixed(1).replace(/\.0$/, '')}k` 
+                        : stars.toLocaleString()}
+                    </span>
+                  )}
                </Button>


The button lacks an accessible label for screen readers. When the star count is not loaded (null), the button only contains the GitHub icon without any text, making it unclear to screen reader users what the button represents. Consider adding an aria-label attribute (e.g., aria-label="View on GitHub" or dynamically aria-label={stars !== null ? GitHub - ${stars} stars : "View on GitHub"}) to improve accessibility.

Copilot · 2025-11-23T17:40:22Z

website/src/hooks/useGitHubStars.ts

+        // Ignore abort errors
+        if (err instanceof Error && err.name === 'AbortError') {
+          return
+        }


When an error occurs, the stars state is not reset. This means if the hook successfully fetched stars previously, it will continue to display the old star count even when an error occurs on subsequent fetches. Consider adding setStars(null) in the error handling block to ensure the UI reflects the error state correctly.

Suggested change

}

}

setStars(null)

LittleLittleCloud · 2025-11-23T17:52:59Z

website/src/components/Layout.tsx

-                <Button variant="ghost" size="sm">
-                  <Github className="w-4 h-4 mr-2" />
-                  GitHub
+                <Button variant="ghost" size="sm" className="gap-1.5">


@copilot cursor should not be pointer style when hover on this button

Fixed in commit 9852552. Added cursor-default to the button className.

…r, reset stars on error Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

LittleLittleCloud · 2025-11-23T18:01:07Z

website/src/components/Layout.tsx

+                <Button 
+                  variant="ghost" 
+                  size="sm" 
+                  className="gap-1.5 cursor-default"


@copilot add on-hover effect for cursor

Added pointer cursor on hover in commit f298757. Changed from cursor-default to hover:cursor-pointer.

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Initial plan

0f87730

Copilot AI assigned Copilot and LittleLittleCloud Nov 23, 2025

Copilot started work on behalf of LittleLittleCloud November 23, 2025 16:24 View session

Copilot AI and others added 2 commits November 23, 2025 16:30

Add GitHub stars display to website header

9e68902

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Add abort controller to prevent memory leaks in useGitHubStars hook

061e77d

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add feature to show GitHub stars on app bar~~ Add GitHub star count to website header Nov 23, 2025

Copilot AI requested a review from LittleLittleCloud November 23, 2025 16:37

Copilot finished work on behalf of LittleLittleCloud November 23, 2025 16:37

Merge branch 'main' into copilot/add-stars-to-app-bar

cf92901

Copilot started work on behalf of LittleLittleCloud November 23, 2025 17:20 View session

Copilot AI and others added 2 commits November 23, 2025 17:25

Make GitHub stars display compact - icon and number only

263b9d8

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Improve number formatting to avoid unnecessary decimals (2k instead o…

c095020

…f 2.0k) Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot finished work on behalf of LittleLittleCloud November 23, 2025 17:32

LittleLittleCloud approved these changes Nov 23, 2025

View reviewed changes

LittleLittleCloud marked this pull request as ready for review November 23, 2025 17:37

Copilot AI review requested due to automatic review settings November 23, 2025 17:37

Copilot started reviewing on behalf of LittleLittleCloud November 23, 2025 17:37 View session

Copilot finished reviewing on behalf of LittleLittleCloud November 23, 2025 17:39

Copilot AI reviewed Nov 23, 2025

View reviewed changes

LittleLittleCloud reviewed Nov 23, 2025

View reviewed changes

Copilot started work on behalf of LittleLittleCloud November 23, 2025 17:53 View session

Fix accessibility and UX issues: add aria-label, remove pointer curso…

9852552

…r, reset stars on error Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

LittleLittleCloud reviewed Nov 23, 2025

View reviewed changes

Copilot AI requested a review from LittleLittleCloud November 23, 2025 18:01

Copilot finished work on behalf of LittleLittleCloud November 23, 2025 18:01

Copilot started work on behalf of LittleLittleCloud November 23, 2025 18:02 View session

Add pointer cursor on hover for better UX feedback

f298757

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot finished work on behalf of LittleLittleCloud November 23, 2025 18:09

LittleLittleCloud merged commit f7294b7 into main Nov 23, 2025
12 checks passed

LittleLittleCloud deleted the copilot/add-stars-to-app-bar branch November 23, 2025 19:06

github-actions bot added this to the v0.2.0 milestone Nov 23, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add GitHub star count to website header#174

Add GitHub star count to website header#174
LittleLittleCloud merged 8 commits intomainfrom
copilot/add-stars-to-app-bar

Copilot AI commented Nov 23, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 23, 2025 •

edited

Loading

Uh oh!

LittleLittleCloud commented Nov 23, 2025

Uh oh!

Copilot AI commented Nov 23, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 23, 2025

Uh oh!

Copilot AI Nov 23, 2025

Uh oh!

Copilot AI Nov 23, 2025

Uh oh!

LittleLittleCloud Nov 23, 2025

Uh oh!

Copilot AI Nov 23, 2025

Uh oh!

LittleLittleCloud Nov 23, 2025

Uh oh!

Copilot AI Nov 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementation Details

Visual Changes

Compact Version (Current)

Accessibility Improvements

Graceful Degradation

Quality Assurance

Files Changed

Feature Description

Problem Statement

Proposed Solution

Alternatives Considered

Additional Context

Contribution

Problem Statement

Proposed Solution

Alternatives Considered

Additional Context

Contribution

Comments on the Issue (you are @copilot in this section)

Uh oh!

github-actions bot commented Nov 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Preview Deployment

Uh oh!

LittleLittleCloud commented Nov 23, 2025

Uh oh!

Copilot AI commented Nov 23, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

LittleLittleCloud Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

LittleLittleCloud Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Nov 23, 2025 •

edited

Loading

github-actions bot commented Nov 23, 2025 •

edited

Loading