Add Canonical badge for canonical branch

src/components/Badge.svelte

@@ -9,6 +9,7 @@
     | "negative"
     | "positive"
     | "primary"
+    | "foreground-emphasized"
     | "delegate"
     | "secondary";
   export let round: boolean = false;
@@ -39,6 +40,10 @@
     color: var(--color-foreground-match-background);
     background: var(--color-fill-gray);
   }
+  .foreground-emphasized {
+    background-color: var(--color-fill-counter-emphasized);
+    color: var(--color-foreground-emphasized);
+  }
   .delegate {
     color: var(--color-foreground-primary);
     background: var(--color-fill-delegate);
@@ -119,6 +124,7 @@
   class:yellow={variant === "yellow"}
   class:delegate={variant === "delegate"}
   class:outline={variant === "outline"}
+  class:foreground-emphasized={variant === "foreground-emphasized"}
   class:background={variant === "background"}
   class:foreground={variant === "foreground"}
   class:neutral={variant === "neutral"}

src/views/projects/Source/BranchSelector.svelte

@@ -6,6 +6,7 @@
   import { activeUnloadedRouteStore } from "@app/lib/router";
   import { closeFocused } from "@app/components/Popover.svelte";
 
+  import Badge from "@app/components/Badge.svelte";
   import DropdownList from "@app/components/DropdownList.svelte";
   import DropdownListItem from "@app/components/DropdownList/DropdownListItem.svelte";
   import Popover from "@app/components/Popover.svelte";
@@ -13,6 +14,7 @@
   import Link from "@app/components/Link.svelte";
   import Button from "@app/components/Button.svelte";
 
+  export let onCanonical: boolean;
   export let branches: Array<{ name: string; route: Route }>;
   export let node: BaseUrl;
   export let project: Project;
@@ -52,6 +54,11 @@
         title="Change branch">
         <IconSmall name="branch" />
         <div class="identifier">{selectedBranch}</div>
+        {#if onCanonical}
+          <Badge title="Canonical branch" variant="foreground-emphasized">
+            Canonical
+          </Badge>
+        {/if}
         <IconSmall name={expanded ? "chevron-up" : "chevron-down"} />
       </Button>
 
@@ -62,7 +69,11 @@
         <svelte:fragment slot="item" let:item>
           <Link route={item.route} on:afterNavigate={() => closeFocused()}>
             <DropdownListItem selected={item.name === selectedBranch}>
-              <div class="identifier">{item.name}</div>
+              {#if onCanonical}
+                <Badge title="Canonical branch" variant="foreground-emphasized">
+                  Canonical
+                </Badge>
+              {/if}
             </DropdownListItem>
           </Link>
         </svelte:fragment>

src/views/projects/Source/Header.svelte

@@ -88,7 +88,7 @@
     {branches}
     {project}
     {node}
-    selectedCommitId={commitId}
+    onCanonical={Boolean(!peer && selectedBranch === project.defaultBranch)}
     {selectedBranch} />
 </div>
 

tests/e2e/project/commits.spec.ts

@@ -152,8 +152,7 @@ test("pushing changes while viewing history", async ({ page, peerManager }) => {
   await expect(page).toHaveURL(`${alice.uiUrl()}/${rid}/history`);
   await expect(page.getByRole("link", { name: "Commits 2" })).toBeVisible();
 
-  await expect(page.getByTitle("Change branch")).toHaveText("main");
-  await expect(page.getByTitle("Current HEAD")).toHaveText("516fa74");
+  await expect(page.getByTitle("Change branch")).toHaveText("main Canonical");
 
   await page
     .getByRole("banner")
@@ -181,6 +180,7 @@ test("pushing changes while viewing history", async ({ page, peerManager }) => {
   await expect(page.getByRole("link", { name: "Commits 3" })).toHaveText(
     "Commits 3",
   );
-  await expect(page.getByTitle("Change branch")).toHaveText("main");
-  await expect(page.getByTitle("Current HEAD")).toHaveText("bb9089a");
+  await expect(
+    page.getByRole("button", { name: "main Canonical" }),
+  ).toBeVisible();
 });