Made some tweaks to the upper table decoration

src/components/Badge.tsx

@@ -60,7 +60,7 @@ const Badge = ({ text, type, data }: BadgeProps) => {
       {PopupComponent && data && (
         <div
           className={twMerge(
-            "absolute top-full z-10 w-30 rounded border px-2 py-1 text-left text-xs shadow-lg",
+            "absolute top-full right-0 z-10 w-30 rounded border px-2 py-1 text-left text-xs shadow-lg",
             typeColors[type]
           )}
         >

src/lib/enhancers/github/GitHubIssueAppendEnhancer.tsx

@@ -91,7 +91,7 @@ export class GitHubIssueAppendEnhancer
           <IssueOpenedIcon size={16} />
         </span>
         <span>
-          #{spot.number} |{" "}
+          #{spot.number}{" "}
           <a
             href={`https://${spot.domain}/${spot.slug}`}
             className="truncate hover:underline"

src/lib/enhancers/github/GitHubIssueCreateEnhancer.tsx

@@ -11,7 +11,7 @@ import { commonGitHubOptions, prepareGitHubHighlighter } from "./github-common"
 
 const GH_ISSUE_CREATE = "GH_ISSUE_CREATE" as const
 
-interface GitHubIssueCreateSpot extends CommentSpot {
+export interface GitHubIssueCreateSpot extends CommentSpot {
   type: typeof GH_ISSUE_CREATE
   domain: string
   slug: string // owner/repo
@@ -81,7 +81,7 @@ export class GitHubIssueCreateEnhancer
           <IssueOpenedIcon size={16} />
         </span>
         <span>
-          New |{" "}
+          &lt;draft&gt;{" "}
           <a
             href={`https://${spot.domain}/${spot.slug}`}
             className="truncate hover:underline"
@@ -94,7 +94,7 @@ export class GitHubIssueCreateEnhancer
   }
 
   tableTitle(spot: GitHubIssueCreateSpot): string {
-    return spot.title || "New Issue"
+    return spot.title || "<untitled issue>"
   }
 
   buildUrl(spot: GitHubIssueCreateSpot): string {

src/lib/enhancers/github/GitHubPrAppendEnhancer.tsx

@@ -1,4 +1,4 @@
-import { FeedPullRequestOpenIcon } from "@primer/octicons-react"
+import { GitPullRequestIcon } from "@primer/octicons-react"
 import OverType, { type OverTypeInstance } from "overtype"
 import type React from "react"
 import type {
@@ -87,10 +87,10 @@ export class GitHubPrAppendEnhancer
     return (
       <>
         <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
-          <FeedPullRequestOpenIcon size={16} />
+          <GitPullRequestIcon size={16} />
         </span>
         <span>
-          #{spot.number} |{" "}
+          #{spot.number}{" "}
           <a
             href={`https://${spot.domain}/${spot.slug}`}
             className="truncate hover:underline"

src/lib/enhancers/github/GitHubPrCreateEnhancer.tsx

@@ -1,4 +1,4 @@
-import { FeedPullRequestOpenIcon } from "@primer/octicons-react"
+import { GitPullRequestIcon } from "@primer/octicons-react"
 import OverType, { type OverTypeInstance } from "overtype"
 import type {
   CommentEnhancer,
@@ -11,12 +11,12 @@ import { commonGitHubOptions, prepareGitHubHighlighter } from "./github-common"
 
 const GH_PR_CREATE = "GH_PR_CREATE" as const
 
-interface GitHubPrCreateSpot extends CommentSpot {
+export interface GitHubPrCreateSpot extends CommentSpot {
   type: typeof GH_PR_CREATE
   domain: string
   slug: string // owner/repo
   title: string
-  head: string // `user:repo:branch` where changes are implemented
+  head: string // `user:repo:branch ` where changes are implemented
   base: string // branch you want changes pulled into
 }
 
@@ -93,10 +93,10 @@ export class GitHubPrCreateEnhancer
     return (
       <>
         <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
-          <FeedPullRequestOpenIcon size={16} />
+          <GitPullRequestIcon size={16} />
         </span>
         <span>
-          New |{" "}
+          &lt;draft&gt;{" "}
           <a
             href={`https://${spot.domain}/${spot.slug}`}
             className="truncate hover:underline"
@@ -109,7 +109,7 @@ export class GitHubPrCreateEnhancer
   }
 
   tableTitle(spot: GitHubPrCreateSpot): string {
-    return spot.title || "New Pull Request"
+    return spot.title || "<untitled pull request>"
   }
 
   buildUrl(spot: GitHubPrCreateSpot): string {

tests/lib/enhancers/__snapshots__/gh-ui.test.ts.snap

@@ -16,7 +16,6 @@ exports[`github ui > gh_issue:should render correct UI elements 1`] = `
       <span>
         #
         523
-         |
 
         <a
           className="truncate hover:underline"
@@ -53,7 +52,6 @@ exports[`github ui > gh_issue_edit:should render correct UI elements 1`] = `
       <span>
         #
         56
-         |
 
         <a
           className="truncate hover:underline"
@@ -97,7 +95,6 @@ exports[`github ui > gh_issue_edit_multiple:should render correct UI elements 1`
       <span>
         #
         3
-         |
 
         <a
           className="truncate hover:underline"
@@ -125,7 +122,7 @@ exports[`github ui > gh_issue_new:should render correct UI elements 1`] = `
         />
       </span>
       <span>
-        New |
+        &lt;draft&gt;
 
         <a
           className="truncate hover:underline"
@@ -149,14 +146,13 @@ exports[`github ui > gh_pr:should render correct UI elements 1`] = `
       <span
         className="flex h-4 w-4 flex-shrink-0 items-center justify-center"
       >
-        <FeedPullRequestOpenIcon
+        <GitPullRequestIcon
           size={16}
         />
       </span>
       <span>
         #
         517
-         |
 
         <a
           className="truncate hover:underline"
@@ -188,14 +184,13 @@ exports[`github ui > gh_pr_edit:should render correct UI elements 1`] = `
       <span
         className="flex h-4 w-4 flex-shrink-0 items-center justify-center"
       >
-        <FeedPullRequestOpenIcon
+        <GitPullRequestIcon
           size={16}
         />
       </span>
       <span>
         #
         58
-         |
 
         <a
           className="truncate hover:underline"
@@ -233,14 +228,13 @@ exports[`github ui > gh_pr_edit_multiple:should render correct UI elements 1`] =
       <span
         className="flex h-4 w-4 flex-shrink-0 items-center justify-center"
       >
-        <FeedPullRequestOpenIcon
+        <GitPullRequestIcon
           size={16}
         />
       </span>
       <span>
         #
         5
-         |
 
         <a
           className="truncate hover:underline"
@@ -263,12 +257,12 @@ exports[`github ui > gh_pr_new:should render correct UI elements 1`] = `
       <span
         className="flex h-4 w-4 flex-shrink-0 items-center justify-center"
       >
-        <FeedPullRequestOpenIcon
+        <GitPullRequestIcon
           size={16}
         />
       </span>
       <span>
-        New |
+        &lt;draft&gt;
 
         <a
           className="truncate hover:underline"

tests/playground/claude.tsx

@@ -7,7 +7,7 @@ import { allLeafValues, timeAgo } from "@/components/misc"
 import type { CommentTableRow } from "@/entrypoints/background"
 import type { FilterState } from "@/entrypoints/popup/popup"
 import { EnhancerRegistry } from "@/lib/registries"
-import { generateMockDrafts } from "./replicaData"
+import { generateMockDrafts } from "./claudeData"
 
 export const ClaudePrototype = () => {
   const [drafts] = useState(generateMockDrafts())

tests/playground/replica.tsx

@@ -2,7 +2,9 @@ import { PopupRoot } from "@/components/PopupRoot"
 import type { CommentStorage, CommentTableRow } from "@/entrypoints/background"
 import type { CommentSpot } from "@/lib/enhancer"
 import type { GitHubIssueAppendSpot } from "@/lib/enhancers/github/GitHubIssueAppendEnhancer"
+import type { GitHubIssueCreateSpot } from "@/lib/enhancers/github/GitHubIssueCreateEnhancer"
 import type { GitHubPrAppendSpot } from "@/lib/enhancers/github/GitHubPrAppendEnhancer"
+import type { GitHubPrCreateSpot } from "@/lib/enhancers/github/GitHubPrCreateEnhancer"
 
 const gh_pr: GitHubPrAppendSpot = {
   domain: "github.com",
@@ -12,6 +14,15 @@ const gh_pr: GitHubPrAppendSpot = {
   type: "GH_PR_APPEND",
   unique_key: "github.com:diffplug/selfie:517",
 }
+const gh_pr_new: GitHubPrCreateSpot = {
+  base: "main",
+  domain: "github.com",
+  head: "cavia-porcellus:selfie:main",
+  slug: "diffplug/selfie",
+  title: "Update README.md",
+  type: "GH_PR_CREATE",
+  unique_key: "github.com:diffplug/selfie:main...cavia-porcellus:selfie:main",
+}
 const gh_issue: GitHubIssueAppendSpot = {
   domain: "github.com",
   number: 523,
@@ -20,8 +31,15 @@ const gh_issue: GitHubIssueAppendSpot = {
   type: "GH_ISSUE_APPEND",
   unique_key: "github.com:diffplug/selfie:523",
 }
+const gh_issue_new: GitHubIssueCreateSpot = {
+  domain: "github.com",
+  slug: "diffplug/gitcasso",
+  title: "New issue title",
+  type: "GH_ISSUE_CREATE",
+  unique_key: "github.com:diffplug/gitcasso:new",
+}
 
-const spots: CommentSpot[] = [gh_pr, gh_issue]
+const spots: CommentSpot[] = [gh_pr, gh_pr_new, gh_issue, gh_issue_new]
 const sampleSpots: CommentStorage[] = spots.map((spot) => {
   const state: CommentStorage = {
     drafts: [[0, "Lorem ipsum dolor sit amet, consectetur adipiscing elit."]],