tiny improvements

Author: maslianok

app/profile/[login]/components/overview-page.tsx

@@ -38,7 +38,7 @@ export const OverviewPage: FC<OverviewPageProps> = ({ user, isGlobalContext }) =
   const tiers = isGlobalContext ? user.tiersGlobal : user.tiersCountry;
 
   return (
-    <LayoutLeftColumn user={user} className="gap-6">
+    <LayoutLeftColumn user={user} className="gap-10">
       <JsonLd payloads={buildProfileTabSEO('overview', user).jsonLd} />
 
       <div className="flex flex-col gap-3">
@@ -58,10 +58,7 @@ export const OverviewPage: FC<OverviewPageProps> = ({ user, isGlobalContext }) =
           <h3 className="text-xl font-semibold">{repositoriesCount > 5 ? 'Top 5 Repositories' : 'Repositories'}</h3>
           <UserRepositoriesList repositories={repositories} login={login} loadMore={false} />
           {repositoriesCount > 5 && (
-            <Link
-              className="self-end"
-              href={`/profile/${login}/repositories`}
-            >{`View all ${repositoriesCount} repositories`}</Link>
+            <Link href={`/profile/${login}/repositories`}>{`View all ${repositoriesCount} repositories`}</Link>
           )}
         </div>
       )}
@@ -70,9 +67,7 @@ export const OverviewPage: FC<OverviewPageProps> = ({ user, isGlobalContext }) =
         <div className="flex flex-col gap-3">
           <h3 className="text-xl font-semibold">Last Contributions</h3>
           <UserContributionsList contributions={contributions} login={login} contributionCount={false} />
-          <Link className="self-end" href={`/profile/${login}/repositories`}>
-            View all contributions
-          </Link>
+          <Link href={`/profile/${login}/repositories`}>View all contributions</Link>
         </div>
       )}
 

app/profile/[login]/repositories/components/repository-card.tsx

@@ -10,6 +10,7 @@ import { Repository } from '@/types/generated/graphql';
 
 import { RepositoryDetail } from './repository-detail';
 import { RepositoryLanguages } from './repository-languages';
+import { RepositoryTopLanguage } from './repository-top-language';
 import { ProfileCard, ProfileCardContent, ProfileCardHeader } from '../../components/profile-card';
 
 type RepositoryCardProps = {
@@ -64,6 +65,7 @@ export const RepositoryCard: FC<RepositoryCardProps> = ({
         <ProfileCardContent>
           <div className="flex gap-x-4 gap-y-2 flex-wrap">
             <div className="flex gap-4">
+              {type === 'contribution' && <RepositoryTopLanguage languages={repository.languages} />}
               <RepositoryDetail Icon={Star} value={stargazerCount} />
               <RepositoryDetail Icon={Split} value={forkCount} />
               {!!releasesCount && <RepositoryDetail Icon={Package} value={releasesCount} />}
@@ -80,7 +82,7 @@ export const RepositoryCard: FC<RepositoryCardProps> = ({
           </div>
         </ProfileCardContent>
       </div>
-      <RepositoryLanguages languages={repository.languages} />
+      {type === 'repository' && <RepositoryLanguages languages={repository.languages} />}
     </ProfileCard>
   );
 };

app/profile/[login]/repositories/components/repository-top-language.tsx

@@ -0,0 +1,32 @@
+import { FC, useMemo } from 'react';
+
+import { LanguageEntity } from '@/types/generated/graphql';
+
+type RepositoryTopLanguageProps = {
+  languages?: LanguageEntity[] | null;
+};
+
+export const RepositoryTopLanguage: FC<RepositoryTopLanguageProps> = ({ languages }) => {
+  const topLanguage = useMemo(() => {
+    if (!languages?.length) {
+      return null;
+    }
+
+    return languages.reduce((prev, curr) => ((curr.size ?? 0) > (prev.size ?? 0) ? curr : prev));
+  }, [languages]);
+
+  if (!topLanguage) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <span
+        className="inline-block h-2.5 w-2.5 rounded-full ring-1 ring-black/10 dark:ring-white/20 shrink-0"
+        style={{ backgroundColor: topLanguage.color! }}
+        aria-hidden
+      />
+      <span className="text-sm">{topLanguage.name}</span>
+    </div>
+  );
+};

components/timeline/timeline.tsx

@@ -8,7 +8,7 @@ export const Timeline = ({ children }: { children: ReactNode }) => {
 
 export const TimelineItem = ({ children }: { children: ReactNode }) => {
   return (
-    <li className="mb-10 ms-4 last:mb-0">
+    <li className="mb-6 ms-4 last:mb-0">
       <div className="absolute w-3 h-3 bg-border rounded-full mt-1.5 -start-1.5 border"></div>
       {children}
     </li>

utils/get-percentile-rank.ts

@@ -6,13 +6,12 @@ type Bin = {
 };
 
 const bins: Bin[] = [
-  { upper: 0.0001, round: () => 0.0001 },
   { upper: 0.001, round: () => 0.001 },
   { upper: 0.01, round: () => 0.01 },
   { upper: 0.1, round: () => 0.1 },
   { upper: 0.5, round: () => 0.5 },
   { upper: 10, round: (n) => Math.ceil(n) },
-  { upper: 50, round: (n) => Math.ceil(n / 5) * 5 },
+  { upper: 50, round: (n) => Math.ceil(n / 10) * 10 },
 ];
 
 export function normalizeValue(value: number): number | null {
@@ -27,7 +26,7 @@ export function normalizeValue(value: number): number | null {
   }
 
   // Fallback for values <= 0 or any unexpected case
-  return 0.0001;
+  return 0.001;
 }
 
 export const getPercentileRank = (rank?: number | null, amountOfUsers?: number): number | null => {