diff --git a/web/src/lib/components/repo/PanelHeader.svelte b/web/src/lib/components/repo/PanelHeader.svelte
index 84bf05cc..06f98237 100644
--- a/web/src/lib/components/repo/PanelHeader.svelte
+++ b/web/src/lib/components/repo/PanelHeader.svelte
@@ -2,6 +2,7 @@
import { resolve } from "$app/paths";
import type { Component } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
+ import { formatCount } from "$lib/format";
interface Props {
title: string;
@@ -23,7 +24,7 @@
{title}
{#if count !== undefined}
- {approximate && count > 0 ? `${count}+` : count}
+ {approximate && count > 0 ? `${formatCount(count)}+` : formatCount(count)}
{/if}
diff --git a/web/src/lib/components/repo/RepoCardContent.svelte b/web/src/lib/components/repo/RepoCardContent.svelte
index e45391dc..3dfaa93b 100644
--- a/web/src/lib/components/repo/RepoCardContent.svelte
+++ b/web/src/lib/components/repo/RepoCardContent.svelte
@@ -7,6 +7,7 @@
import GitPullRequest from "$icon/git-pull-request";
import StarButton from "./StarButton.svelte";
import type { RepoCardData } from "$lib/components/profile/types";
+ import { formatCount } from "$lib/format";
let {
repo,
starButton = true,
@@ -68,7 +69,7 @@
{#each stats as stat (stat.Icon)}
- {stat.value}
+ {formatCount(stat.value)}
{/each}
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index 2c9456b9..e2a9eff4 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -10,6 +10,7 @@
import { getAuth } from "$lib/auth.svelte";
import StarButton from "./StarButton.svelte";
import type { RepoCounts, RepoInfo } from "./types";
+ import { formatCount } from "$lib/format";
interface Props {
repo: RepoInfo;
@@ -44,7 +45,7 @@
icon={Star}
title="Starred by"
>
- {counts.stars}
+ {formatCount(counts.stars)}
{/if}
@@ -60,7 +61,7 @@
Fork
diff --git a/web/src/lib/components/repo/RepoToolbar.svelte b/web/src/lib/components/repo/RepoToolbar.svelte
index 8f9d1c5a..ea43b738 100644
--- a/web/src/lib/components/repo/RepoToolbar.svelte
+++ b/web/src/lib/components/repo/RepoToolbar.svelte
@@ -8,6 +8,7 @@
import CloneDropdown from "./CloneDropdown.svelte";
import RefSelector from "./RefSelector.svelte";
import type { RepoInfo } from "./types";
+ import { formatCount } from "$lib/format";
interface Props {
repo: RepoInfo;
@@ -56,21 +57,21 @@
class="inline-flex items-center gap-1 typography-paragraph-small font-bold text-foreground-default no-underline hover:underline md:hidden"
>
- {totalCommits}
+ {formatCount(totalCommits)}
- {totalBranches}
+ {formatCount(totalBranches)}
- {totalTags}
+ {formatCount(totalTags)}
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index 5eb890d6..a4013af5 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -6,6 +6,7 @@
import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
import { getProfileCounts } from "$lib/components/profile/counts.svelte";
import { createOptimisticRelation, createOptimisticCount } from "$lib/optimistic.svelte";
+ import { formatCount } from "$lib/format";
interface Props {
repoDid: string;
@@ -88,7 +89,7 @@
size="small"
title="Starred by"
>
- {starCount.value}
+ {formatCount(starCount.value)}
{#if failed}
diff --git a/web/src/lib/components/repo/issues/IssueCardContent.svelte b/web/src/lib/components/repo/issues/IssueCardContent.svelte
index 0269b5ae..b4ea88ad 100644
--- a/web/src/lib/components/repo/issues/IssueCardContent.svelte
+++ b/web/src/lib/components/repo/issues/IssueCardContent.svelte
@@ -6,6 +6,7 @@
import IssueStatePill from "./IssueStatePill.svelte";
import type { IssueSummary } from "$lib/components/repo/types";
import Separator from "$lib/components/ui/Separator.svelte";
+ import { formatCount } from "$lib/format";
interface Props {
ownerHandle: string;
@@ -42,7 +43,7 @@
- {issue.commentCount}
+ {formatCount(issue.commentCount)}
{issue.commentCount === 1 ? "comment" : "comments"}
diff --git a/web/src/lib/components/repo/issues/IssueToolbar.svelte b/web/src/lib/components/repo/issues/IssueToolbar.svelte
index 49633ce5..cfc4d209 100644
--- a/web/src/lib/components/repo/issues/IssueToolbar.svelte
+++ b/web/src/lib/components/repo/issues/IssueToolbar.svelte
@@ -6,6 +6,7 @@
import Button from "$lib/components/ui/Button.svelte";
import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
import IssueSearch from "./IssueSearch.svelte";
+ import { formatCount } from "$lib/format";
interface Props {
ownerHandle: string;
@@ -38,7 +39,7 @@
icon={CircleDot}
>
- {openCount}
+ {formatCount(openCount)}
Open
@@ -49,7 +50,7 @@
icon={CircleX}
>
- {closedCount}
+ {formatCount(closedCount)}
Closed
diff --git a/web/src/lib/components/repo/pulls/PullCardContent.svelte b/web/src/lib/components/repo/pulls/PullCardContent.svelte
index c25748e8..4f6f04e9 100644
--- a/web/src/lib/components/repo/pulls/PullCardContent.svelte
+++ b/web/src/lib/components/repo/pulls/PullCardContent.svelte
@@ -6,6 +6,7 @@
import PullStatePill from "./PullStatePill.svelte";
import type { PullSummary } from "$lib/components/repo/types";
import Separator from "$lib/components/ui/Separator.svelte";
+ import { formatCount } from "$lib/format";
interface Props {
ownerHandle: string;
@@ -44,7 +45,7 @@
- {pull.commentCount}
+ {formatCount(pull.commentCount)}
{pull.commentCount === 1 ? "comment" : "comments"}
diff --git a/web/src/lib/components/repo/pulls/PullCompose.svelte b/web/src/lib/components/repo/pulls/PullCompose.svelte
index 8d2dbbd9..02a5795d 100644
--- a/web/src/lib/components/repo/pulls/PullCompose.svelte
+++ b/web/src/lib/components/repo/pulls/PullCompose.svelte
@@ -30,6 +30,7 @@
import type { SelectOption } from "$lib/components/ui/selectField";
import type { MarkupContext } from "$lib/markup";
import type { ForkOption } from "../../../../routes/[handle]/[repo]/pulls/new/+page";
+ import { formatCount } from "$lib/format";
/** everything the route's load derived, passed through whole */
interface Compose {
@@ -426,7 +427,7 @@
class="flex min-w-0 items-center justify-between gap-3 typography-paragraph-small text-foreground-muted"
>
- {compose.commits.length}
+ {formatCount(compose.commits.length)}
{compose.commits.length === 1 ? "commit" : "commits"}
total + (v.comments?.length ?? 0), 0));
- const plural = (n: number, noun: string) => `${n} ${noun}${n === 1 ? "" : "s"}`;
+ const plural = (n: number, noun: string) => `${formatCount(n)} ${noun}${n === 1 ? "" : "s"}`;
const profileHref = (handle: string) => resolve(`/${handle}` as "/");
const isConflicted = $derived((actions?.mergeCheck?.conflicts?.length ?? 0) > 0);
diff --git a/web/src/lib/components/repo/pulls/PullToolbar.svelte b/web/src/lib/components/repo/pulls/PullToolbar.svelte
index d634c045..8db11648 100644
--- a/web/src/lib/components/repo/pulls/PullToolbar.svelte
+++ b/web/src/lib/components/repo/pulls/PullToolbar.svelte
@@ -7,6 +7,7 @@
import Button from "$lib/components/ui/Button.svelte";
import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
import PullSearch from "./PullSearch.svelte";
+ import { formatCount } from "$lib/format";
interface Props {
ownerHandle: string;
@@ -39,7 +40,7 @@
icon={GitPullRequest}
>
- {openCount}
+ {formatCount(openCount)}
Open
@@ -50,7 +51,7 @@
icon={GitMerge}
>
- {mergedCount}
+ {formatCount(mergedCount)}
Merged
@@ -61,7 +62,7 @@
icon={GitPullRequestClosed}
>
- {closedCount}
+ {formatCount(closedCount)}
Closed
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index f1858e7e..2dc7411e 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -95,6 +95,7 @@
import { navigating } from "$app/state";
import type { ResolvedPathname } from "$app/types";
import { Spring, prefersReducedMotion } from "svelte/motion";
+ import { formatCount } from "$lib/format";
interface Props {
tabs: TabDef[];
@@ -221,7 +222,7 @@
{/if}
{#if tab.count}
- {tab.count}
+ {formatCount(tab.count)}
{/if}
{/each}
diff --git a/web/src/lib/format.ts b/web/src/lib/format.ts
index 580948a1..ec79bb04 100644
--- a/web/src/lib/format.ts
+++ b/web/src/lib/format.ts
@@ -79,3 +79,11 @@ export const formatDateTime = (input: string | Date): string => {
const date = typeof input === "string" ? new Date(input) : input;
return Number.isNaN(date.getTime()) ? "" : dtfFull.format(date);
};
+
+export const formatCount = (n: number | undefined | null): string => {
+ if (n == null) return "";
+ if (n < 1000) return String(n);
+ const k = n / 1000;
+ const formatted = k.toFixed(1);
+ return `${formatted.replace(/\.0$/, "")}k`;
+};