Add PR title. Reordered them and added tooltips

Author: matt-aitken

apps/webapp/app/components/GitMetadata.tsx

@@ -1,14 +1,15 @@
 import { GitPullRequestIcon, GitCommitIcon, GitBranchIcon } from "lucide-react";
 import { type GitMetaLinks } from "~/presenters/v3/BranchesPresenter.server";
 import { LinkButton } from "./primitives/Buttons";
+import { SimpleTooltip } from "./primitives/Tooltip";
 
 export function GitMetadata({ git }: { git?: GitMetaLinks | null }) {
   if (!git) return null;
   return (
     <>
-      {git.branchUrl && <GitMetadataBranch git={git} />}
-      {git.shortSha && <GitMetadataCommit git={git} />}
       {git.pullRequestUrl && git.pullRequestNumber && <GitMetadataPullRequest git={git} />}
+      {git.shortSha && <GitMetadataCommit git={git} />}
+      {git.branchUrl && <GitMetadataBranch git={git} />}
     </>
   );
 }
@@ -19,15 +20,20 @@ export function GitMetadataBranch({
   git: Pick<GitMetaLinks, "branchUrl" | "branchName">;
 }) {
   return (
-    <LinkButton
-      variant="minimal/small"
-      LeadingIcon={<GitBranchIcon className="size-4" />}
-      iconSpacing="gap-x-1"
-      to={git.branchUrl}
-      className="pl-1"
-    >
-      {git.branchName}
-    </LinkButton>
+    <SimpleTooltip
+      button={
+        <LinkButton
+          variant="minimal/small"
+          LeadingIcon={<GitBranchIcon className="size-4" />}
+          iconSpacing="gap-x-1"
+          to={git.branchUrl}
+          className="pl-1"
+        >
+          {git.branchName}
+        </LinkButton>
+      }
+      content="Jump to GitHub branch"
+    />
   );
 }
 
@@ -37,34 +43,44 @@ export function GitMetadataCommit({
   git: Pick<GitMetaLinks, "commitUrl" | "shortSha" | "commitMessage">;
 }) {
   return (
-    <LinkButton
-      variant="minimal/small"
-      to={git.commitUrl}
-      LeadingIcon={<GitCommitIcon className="size-4" />}
-      iconSpacing="gap-x-1"
-      className="pl-1"
-    >
-      {`${git.shortSha} / ${git.commitMessage}`}
-    </LinkButton>
+    <SimpleTooltip
+      button={
+        <LinkButton
+          variant="minimal/small"
+          to={git.commitUrl}
+          LeadingIcon={<GitCommitIcon className="size-4" />}
+          iconSpacing="gap-x-1"
+          className="pl-1"
+        >
+          {`${git.shortSha} / ${git.commitMessage}`}
+        </LinkButton>
+      }
+      content="Jump to GitHub commit"
+    />
   );
 }
 
 export function GitMetadataPullRequest({
   git,
 }: {
-  git: Pick<GitMetaLinks, "pullRequestUrl" | "pullRequestNumber">;
+  git: Pick<GitMetaLinks, "pullRequestUrl" | "pullRequestNumber" | "pullRequestTitle">;
 }) {
   if (!git.pullRequestUrl || !git.pullRequestNumber) return null;
 
   return (
-    <LinkButton
-      variant="minimal/small"
-      to={git.pullRequestUrl}
-      LeadingIcon={<GitPullRequestIcon className="size-4" />}
-      iconSpacing="gap-x-1"
-      className="pl-1"
-    >
-      #{git.pullRequestNumber}
-    </LinkButton>
+    <SimpleTooltip
+      button={
+        <LinkButton
+          variant="minimal/small"
+          to={git.pullRequestUrl}
+          LeadingIcon={<GitPullRequestIcon className="size-4" />}
+          iconSpacing="gap-x-1"
+          className="pl-1"
+        >
+          #{git.pullRequestNumber} {git.pullRequestTitle}
+        </LinkButton>
+      }
+      content="Jump to GitHub pull request"
+    />
   );
 }