Better table upper decorations.

Author: WebsByTodd

src/lib/enhancers/github/GitHubIssueAppendEnhancer.tsx

@@ -90,13 +90,15 @@ export class GitHubIssueAppendEnhancer
         <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
           <IssueOpenedIcon size={16} />
         </span>
-        #{spot.number}
-        <a
-          href={`https://${spot.domain}/${spot.slug}`}
-          className="truncate hover:underline"
-        >
-          {spot.slug}
-        </a>
+        <span>
+          #{spot.number} |{" "}
+          <a
+            href={`https://${spot.domain}/${spot.slug}`}
+            className="truncate hover:underline"
+          >
+            {spot.slug}
+          </a>
+        </span>
       </>
     )
   }

src/lib/enhancers/github/GitHubIssueCreateEnhancer.tsx

@@ -1,3 +1,4 @@
+import { IssueOpenedIcon } from "@primer/octicons-react"
 import OverType, { type OverTypeInstance } from "overtype"
 import type {
   CommentEnhancer,
@@ -74,13 +75,19 @@ export class GitHubIssueCreateEnhancer
   }
 
   tableUpperDecoration(spot: GitHubIssueCreateSpot): React.ReactNode {
-    const { slug } = spot
     return (
       <>
-        <span>New Issue</span>
-        <span className="font-mono text-muted-foreground text-sm">
-          {" "}
-          {slug}{" "}
+        <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+          <IssueOpenedIcon size={16} />
+        </span>
+        <span>
+          New |{" "}
+          <a
+            href={`https://${spot.domain}/${spot.slug}`}
+            className="truncate hover:underline"
+          >
+            {spot.slug}
+          </a>
         </span>
       </>
     )

src/lib/enhancers/github/GitHubPrAppendEnhancer.tsx

@@ -1,3 +1,4 @@
+import { FeedPullRequestOpenIcon } from "@primer/octicons-react"
 import OverType, { type OverTypeInstance } from "overtype"
 import type React from "react"
 import type {
@@ -83,11 +84,20 @@ export class GitHubPrAppendEnhancer
   }
 
   tableUpperDecoration(spot: GitHubPrAppendSpot): React.ReactNode {
-    const { slug, number } = spot
     return (
       <>
-        <span className="font-mono text-muted-foreground text-sm">{slug}</span>
-        <span className="ml-2 font-medium">PR #{number}</span>
+        <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+          <FeedPullRequestOpenIcon size={16} />
+        </span>
+        <span>
+          #{spot.number} |{" "}
+          <a
+            href={`https://${spot.domain}/${spot.slug}`}
+            className="truncate hover:underline"
+          >
+            {spot.slug}
+          </a>
+        </span>
       </>
     )
   }

src/lib/enhancers/github/GitHubPrCreateEnhancer.tsx

@@ -1,3 +1,4 @@
+import { FeedPullRequestOpenIcon } from "@primer/octicons-react"
 import OverType, { type OverTypeInstance } from "overtype"
 import type {
   CommentEnhancer,
@@ -89,13 +90,19 @@ export class GitHubPrCreateEnhancer
   }
 
   tableUpperDecoration(spot: GitHubPrCreateSpot): React.ReactNode {
-    const { slug } = spot
     return (
       <>
-        <span>New PR</span>
-        <span className="font-mono text-muted-foreground text-sm">
-          {" "}
-          {slug}{" "}
+        <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+          <FeedPullRequestOpenIcon size={16} />
+        </span>
+        <span>
+          New |{" "}
+          <a
+            href={`https://${spot.domain}/${spot.slug}`}
+            className="truncate hover:underline"
+          >
+            {spot.slug}
+          </a>
         </span>
       </>
     )