feat(github): show relative dates in pull requests

Pull request lists, timelines, commits and replies show how long ago
something happened ("just now", "8 hours ago", "yesterday", "3 days ago")
and the date after 30 days ("on Oct 12"). Hovering a timeline date shows
the full date and time. With pretty formatting off, the plain date and time
are shown.

src/features/github/timeline/comments/ChatItem.tsx

@@ -9,7 +9,7 @@ import type { GHActor } from "../../api/types";
 import { GHOST_USER } from "../../data/model";
 import { openInBrowser } from "../../data/local";
 import { Avatar, AVATAR_SIZE } from "../../ui/Avatar";
-import { prettyDateTime } from "../../ui/prettyDate";
+import { fullDateTime, prettyDate } from "../../ui/prettyDate";
 import { presentableName } from "../model";
 import styles from "./comments.module.css";
 
@@ -78,7 +78,11 @@ export function ChatItem({
             {title ?? (
               <span>
                 <AuthorLink actor={a} />
-                {date && <span className={styles.date}>&nbsp;{prettyDateTime(date)}</span>}
+                {date && (
+                  <span className={styles.date} title={fullDateTime(date)}>
+                    &nbsp;{prettyDate(date)}
+                  </span>
+                )}
               </span>
             )}
             {tags}

src/features/github/timeline/comments/ThreadView.tsx

@@ -30,7 +30,7 @@ import {
 } from "../../data/operations";
 import { AvatarStack } from "../../ui/Avatar";
 import { Markdown } from "../../ui/Markdown";
-import { prettyDateTime } from "../../ui/prettyDate";
+import { fullDateTime, prettyDate } from "../../ui/prettyDate";
 import { presentableName, threadDiffHunk, threadDiffWithAnchor } from "../model";
 import { ChatItem, Tag, type ChatItemVariant } from "./ChatItem";
 import { CommentEditor, submitShortcut } from "./CommentEditor";
@@ -288,7 +288,11 @@ function FullThread({ number, thread }: Omit<ThreadViewProps, "variant">) {
                 >
                   {n === 0 ? t("Reply") : n === 1 ? tx`${n} reply` : tx`${n} replies`}
                 </button>
-                {last && <span className={styles.secondary}>{prettyDateTime(last.createdAt)}</span>}
+                {last && (
+                  <span className={styles.secondary} title={fullDateTime(last.createdAt)}>
+                    {prettyDate(last.createdAt)}
+                  </span>
+                )}
               </span>
             )}
             {resolve.canChange && (

src/features/github/timeline/items.tsx

@@ -21,7 +21,7 @@ import { sameRepository, useGhRepository } from "../data/repository";
 import { openPullRequest } from "../toolwindow/open";
 import { BranchChip, LabelChip } from "../ui/chips";
 import { Markdown } from "../ui/Markdown";
-import { prettyDateTime } from "../ui/prettyDate";
+import { fullDateTime, prettyDate } from "../ui/prettyDate";
 import { ChatItem, CommentItem, ThreadView } from "./comments";
 import { joined, rich } from "./comments/ChatItem";
 import {
@@ -293,7 +293,11 @@ function CommitsItem({ commits, prAuthor }: { commits: TimelineCommit[]; prAutho
                 {actor && (
                   <p className={styles.paragraph}>
                     {actorLink(actor)}
-                    {author?.date && <>&nbsp;{prettyDateTime(author.date)}</>}
+                    {author?.date && (
+                      <>
+                        &nbsp;<span title={fullDateTime(author.date)}>{prettyDate(author.date)}</span>
+                      </>
+                    )}
                   </p>
                 )}
               </div>