Add `repo-header-info` feature #6900

134130 · 2023-09-10T09:03:47Z

Description

Closes Bring back repo stars on top #6798
On original conversation suggested, which is using default details component, is too heavy and ugly.
Just showing count of fork and stargazer count

Test URLs

Regular: https://github.com/refined-github/refined-github
Fork: https://github.com/134130/refined-github
Fork with native icon: https://github.com/refined-github/fork
Private: https://github.com/refined-github/private
Private forks are not allowed on GitHub

Screenshot

outdated

134130 · 2023-09-10T09:04:01Z

Renaming this feature is welcome

source/features/detailed-repo-header.gql

fregante · 2023-09-10T09:56:55Z

source/features/detailed-repo-header.tsx

+	);
+}
+
+async function addForCompact(button: HTMLButtonElement): Promise<void> {


I don’t think we should show this on mobile, there's not enough space especially under 600px

fregante · 2023-09-10T09:58:26Z

source/features/detailed-repo-header.tsx

+function createStarCounter(stargazerCount: number): HTMLElement {
+	return (
+		<div className="starred ml-2">
+			<StarFillIcon className="starred-button-icon mr-1"/>


I'd probably keep it dimmed so it doesn't attract too much attention. Also because "yellow" means "starred by me" on GitHub, which we're not taking into conservation.

Do we need to show "I stared" ?
I'll make it yellow when "I starred" or dimmed when "I not starred"

No let's not include that piece of information

fregante · 2023-09-10T09:59:24Z

source/features/detailed-repo-header.tsx

+/*
+Test URLs
+
+Issues:


We don't need to label each URL if there's nothing special about them. The URLs are multiple only to show that the feature works on these pages, but the pages don't differ in any meaningful way.

fregante · 2023-09-11T05:27:04Z

It looks great, but also I think it claims too much attention

I like how GitHub is using the lock icon here, it's small and an outline:

So I'd match that:

smaller icon, outline
smaller text, no background
ensure it works well on private repos with ci-link (spacing and order)

fregante · 2023-09-11T05:46:10Z

Can we also add a fork status? I think that's more important than stars.

Example URL:

https://github.com/fregante/refined-github/tree/main/build

This should be really near the lock icon as well. Possible?

fregante · 2023-09-11T05:54:38Z

I think these are the related icons, to be used at 12px:

I think they are present in our Octicons version #6878

fregante · 2023-09-11T06:34:52Z

source/features/repo-header-info.tsx

+}
+
+function init(signal: AbortSignal): void {
+	observe('header .AppHeader-context-full > nav ul', add, {signal});


I'd make sure the icon appears before ci-link because ci-link is always delayed while this feature might be cached and instant.

See this page refresh:

Also note that this is breaking the font weight of the repo name, which will likely be fixed by the proposed repositioning

134130 · 2023-09-11T17:07:31Z

I think it works well with private, ci-link (Sorry for bad screenshot; It's private repo)
This should be really near the lock icon as well. Possible?
- I think it looks too stuffy when it appears like private mark
- Of course it can be ml-1 but I suggests ml-2; looks better
- And It must be grouped with in the Link button. Should it be okay?
  - Because the ci-link is outer of the link button, repo-header-info will always appears ahead of ci-link

fregante · 2023-09-11T17:24:19Z

Can we also add a fork status?

By "fork status" I meant "is this a fork?" Not "fork count". Sorry for the misunderstanding.

As for the spacing:

I think the lock and fork icon can appear near each other, with little spacing
The star count should be outside the highlight, in the same place ci-link is

Also the star count text should still be small, like 12px.

You can fork our refined-github/sandbox and do your tests/screenshots there.

fregante · 2023-09-11T17:27:29Z

Example for the fork status:

With ml-1

134130 · 2023-09-11T17:47:32Z

It looks not really bad. How do you think?

fregante

LGTM already

source/features/repo-header-info.tsx

fregante · 2023-09-11T18:08:54Z

source/features/repo-header-info.tsx

+/*
+Test URLs
+
+Repository:


Suggested change

Repository:

fregante · 2023-09-11T18:09:49Z

Is this the current size? I like it:

134130 · 2023-09-11T18:12:33Z

😅 Maybe zoomed with Chrome.
I'll check your reviews and update readme image later :D

Edit: Yes screenshot is latest image

fregante · 2023-09-12T05:15:19Z

Regular: https://github.com/refined-github/refined-github

Fork: https://github.com/fregante/refined-github

Fork with native icon: https://github.com/refined-github/fork

Private: https://github.com/refined-github/private

fregante · 2023-09-12T05:16:19Z

So, uhm, GitHub sometimes will show a fork icon 🤷‍♂️ I don't know when. I provided a demo URL, can you confirm you also see it there natively?

fregante · 2023-09-12T05:19:20Z

readme.md

@@ -159,6 +159,7 @@ Thanks for contributing! 🦋🙌
 - [](# "unreleased-commits") 🔥 [Tells you whether you're looking at the latest version of a repository, or if there are any unreleased commits.](https://user-images.githubusercontent.com/1402241/234576563-1a0ca255-4c0d-45ae-883d-2b1aa2d7f4c1.png)
 - [](# "action-pr-link") 🔥 [Adds a link back to the PR that ran the workflow.](https://github-production-user-asset-6210df.s3.amazonaws.com/50487467/241645264-076a0137-36a2-4fd0-a66e-735ef3b3a563.png)
 - [](# "mobile-tabs") [Makes the tabs more compact on mobile so more of them can be seen.](https://user-images.githubusercontent.com/1402241/245446231-28f44b59-0151-4986-8cb9-05b5645592d8.png)
+- [](# "repo-header-info") [Shows repository's stargazer count on the header.](https://github.com/refined-github/refined-github/assets/50487467/747b5133-61b8-490e-b961-4e5390ea9482)


/assets/ URLs are not accepted by our parser (#6000 (comment)), you'll have to open the link and get its real URL ending with .png (already done in a commit)

Also your screenshot was pixelated, make sure this doesn't happen in the future:

fregante · 2023-09-13T17:57:18Z

Private forks are not allowed on GitHub

Welp, nope, yet another GitHub bug.

https://github.com/refined-github/fork is an actual private fork, but GitHub forgot to give it the "lock" icon.

We should do this too, in this feature. Feel like adding it? 😅

fregante

Probably easy to implement. No need to update the screenshots

source/features/repo-header-info.gql

source/features/repo-header-info.tsx

134130 · 2023-09-14T13:19:15Z

Private forks are not allowed on GitHub

AFAIK, Making public repository to private forked repository is not allowed on GitHub. But let alone that, I think showing forked icon on private fork repository is bug of GitHub. GitHub should shows locked icon.

134130 · 2023-09-14T13:29:38Z

Verified

fregante · 2023-09-14T13:41:56Z

showing forked icon on private fork repository is bug of GitHub

Why? It's a forked repo so it deserves a forked icon. That fork was made by:

allowing forks of private repos on this organization
forking a private repo

So they can exist

fregante · 2023-09-14T13:48:12Z

🙌

Teraskull · 2023-09-19T01:35:34Z

It does not show the full star count on hover like the original location. If the count is, for example, 1.1k, on hover it should say the exact amount in an HTML title attribute.

Add detailed-repo-header

40d0f3c

134130 added 3 commits September 10, 2023 18:10

Add detailed-repo-header to readme

2e55de5

Lint

61c21cd

unified css selector

fe4ea9b

fregante changed the title ~~Add detailed-repo-header~~ Add repo-header-info feature Sep 10, 2023

fregante added the enhancement label Sep 10, 2023

fregante reviewed Sep 10, 2023

View reviewed changes

134130 added 5 commits September 10, 2023 20:46

One test url

f8ef971

Drop for mobile view

5171327

Just stargazer count

161894c

Lint

3a514b6

Rename title

229c9c5

134130 force-pushed the feat/detailed-repo-header branch from dc9d892 to 229c9c5 Compare September 10, 2023 12:13

Lint

4fa3a2f

fregante reviewed Sep 11, 2023

View reviewed changes

Low attention for stargazer counter

ae052c3

Support forkCount

989183b

Fork icon

a0e695c

134130 added 2 commits September 12, 2023 02:48

Lints

5368eee

Mssing xo lint

82c138b

fregante approved these changes Sep 11, 2023

View reviewed changes

fregante added 5 commits September 12, 2023 13:13

Space out ci-link

faea2d9

Don't show stars if 0; remove v-align-text-bottom

17371ca

Lint

f44005a

Don't show fork icon if native one is present

628428b

Update docs

c5827ee

fregante reviewed Sep 12, 2023

View reviewed changes

This was referenced Sep 12, 2023

🥉 Minor codebase updates and fixes #6000

Open

Restore clean-repo-header feature #6908

Merged

fregante reviewed Sep 13, 2023

View reviewed changes

source/features/repo-header-info.gql Show resolved Hide resolved

source/features/repo-header-info.tsx Outdated Show resolved Hide resolved

Support for private forked repository

fd79a11

Update test url and comments

beccec2

fregante merged commit 46a0528 into refined-github:main Sep 14, 2023
9 checks passed

fregante mentioned this pull request Sep 19, 2023

repo-header-info - Add link and tooltip #6932

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `repo-header-info` feature #6900

Add `repo-header-info` feature #6900

134130 commented Sep 10, 2023 •

edited by fregante

134130 commented Sep 10, 2023

fregante Sep 10, 2023

fregante Sep 10, 2023

134130 Sep 10, 2023

fregante Sep 10, 2023

fregante Sep 10, 2023

fregante commented Sep 11, 2023 •

edited

fregante commented Sep 11, 2023 •

edited

fregante commented Sep 11, 2023 •

edited

fregante Sep 11, 2023 •

edited

134130 commented Sep 11, 2023 •

edited

fregante commented Sep 11, 2023

fregante commented Sep 11, 2023

134130 commented Sep 11, 2023

fregante left a comment

fregante Sep 11, 2023

fregante commented Sep 11, 2023 •

edited

134130 commented Sep 11, 2023 •

edited

fregante commented Sep 12, 2023

fregante commented Sep 12, 2023

fregante Sep 12, 2023 •

edited

fregante Sep 12, 2023

fregante commented Sep 13, 2023

fregante left a comment

134130 commented Sep 14, 2023

134130 commented Sep 14, 2023

fregante commented Sep 14, 2023

fregante commented Sep 14, 2023

Teraskull commented Sep 19, 2023

Add repo-header-info feature #6900

Add repo-header-info feature #6900

Conversation

134130 commented Sep 10, 2023 • edited by fregante

Description

Test URLs

Screenshot

134130 commented Sep 10, 2023

fregante Sep 10, 2023

Choose a reason for hiding this comment

fregante Sep 10, 2023

Choose a reason for hiding this comment

134130 Sep 10, 2023

Choose a reason for hiding this comment

fregante Sep 10, 2023

Choose a reason for hiding this comment

fregante Sep 10, 2023

Choose a reason for hiding this comment

fregante commented Sep 11, 2023 • edited

fregante commented Sep 11, 2023 • edited

fregante commented Sep 11, 2023 • edited

fregante Sep 11, 2023 • edited

Choose a reason for hiding this comment

134130 commented Sep 11, 2023 • edited

fregante commented Sep 11, 2023

fregante commented Sep 11, 2023

134130 commented Sep 11, 2023

fregante left a comment

Choose a reason for hiding this comment

fregante Sep 11, 2023

Choose a reason for hiding this comment

fregante commented Sep 11, 2023 • edited

134130 commented Sep 11, 2023 • edited

fregante commented Sep 12, 2023

fregante commented Sep 12, 2023

fregante Sep 12, 2023 • edited

Choose a reason for hiding this comment

fregante Sep 12, 2023

Choose a reason for hiding this comment

fregante commented Sep 13, 2023

fregante left a comment

Choose a reason for hiding this comment

134130 commented Sep 14, 2023

134130 commented Sep 14, 2023

fregante commented Sep 14, 2023

fregante commented Sep 14, 2023

🙌

Teraskull commented Sep 19, 2023

Add `repo-header-info` feature #6900

Add `repo-header-info` feature #6900

134130 commented Sep 10, 2023 •

edited by fregante

fregante commented Sep 11, 2023 •

edited

fregante commented Sep 11, 2023 •

edited

fregante commented Sep 11, 2023 •

edited

fregante Sep 11, 2023 •

edited

134130 commented Sep 11, 2023 •

edited

fregante commented Sep 11, 2023 •

edited

134130 commented Sep 11, 2023 •

edited

fregante Sep 12, 2023 •

edited