From 419e1bc4c93b26e9e0b9bcbe1dada2b9a39ee76c Mon Sep 17 00:00:00 2001 From: Ned Twigg Date: Wed, 1 Oct 2025 09:23:52 -0700 Subject: [PATCH 1/6] Add a shelf. --- src/components/PopupRoot.tsx | 37 ++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/components/PopupRoot.tsx b/src/components/PopupRoot.tsx index 0484797..dcea2e7 100644 --- a/src/components/PopupRoot.tsx +++ b/src/components/PopupRoot.tsx @@ -234,6 +234,43 @@ export function PopupRoot({ drafts }: PopupRootProps) { + + {/* Footer shelf */} +
+
+
+ built with 🤖 by{" "} + + nedshed.dev + {" "} + using{" "} + + overtype + +
+
+ drafts are not being saved{" "} + + save my drafts + +
+
+
) } From 5d208d021dc86bfc67c6a178dcc294bec9d1b3fe Mon Sep 17 00:00:00 2001 From: Ned Twigg Date: Wed, 1 Oct 2025 13:52:52 -0700 Subject: [PATCH 2/6] Put the "no drafts" empty state inside the popup root. --- src/components/EmptyState.tsx | 4 ++-- src/components/PopupRoot.tsx | 24 ++++++++++++++---------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx index 99fd2a0..96dcf1d 100644 --- a/src/components/EmptyState.tsx +++ b/src/components/EmptyState.tsx @@ -1,10 +1,10 @@ export function EmptyState() { return ( -
+

No comments open

Your drafts will appear here when you start typing in comment boxes - across GitHub and Reddit. + across GitHub and other markdown-friendly sites.

) diff --git a/src/components/PopupRoot.tsx b/src/components/PopupRoot.tsx index dcea2e7..e865f77 100644 --- a/src/components/PopupRoot.tsx +++ b/src/components/PopupRoot.tsx @@ -1,7 +1,7 @@ import { Eye, EyeOff, Search, Settings, Trash2 } from "lucide-react" import { useMemo, useState } from "react" import { twMerge } from "tailwind-merge" -import { badgeCVA } from "@/components/design" +import { badgeCVA, typeIcons } from "@/components/design" import MultiSegment from "@/components/MultiSegment" import { allLeafValues } from "@/components/misc" import type { CommentTableRow } from "@/entrypoints/background" @@ -100,11 +100,6 @@ export function PopupRoot({ drafts }: PopupRootProps) { showTrashed: true, }) } - - if (drafts.length === 0) { - return - } - return (
{/* Bulk actions bar - floating popup */} @@ -214,10 +209,12 @@ export function PopupRoot({ drafts }: PopupRootProps) { + {filteredDrafts.length === 0 && ( - + {drafts.length === 0 && } + {drafts.length > 0 && } )} @@ -258,14 +255,21 @@ export function PopupRoot({ drafts }: PopupRootProps) { overtype
-
- drafts are not being saved{" "} + From a0912d5a1fe226f00ea36498f4fa5b581881dfd6 Mon Sep 17 00:00:00 2001 From: Ned Twigg Date: Wed, 1 Oct 2025 13:53:04 -0700 Subject: [PATCH 3/6] Add some design for the save button. --- src/components/PopupRoot.tsx | 7 ++++--- src/components/design.tsx | 3 +++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/PopupRoot.tsx b/src/components/PopupRoot.tsx index e865f77..8a1f308 100644 --- a/src/components/PopupRoot.tsx +++ b/src/components/PopupRoot.tsx @@ -209,12 +209,13 @@ export function PopupRoot({ drafts }: PopupRootProps) { - {filteredDrafts.length === 0 && ( {drafts.length === 0 && } - {drafts.length > 0 && } + {drafts.length > 0 && ( + + )} )} @@ -233,7 +234,7 @@ export function PopupRoot({ drafts }: PopupRootProps) {
{/* Footer shelf */} -
+
built with 🤖 by{" "} diff --git a/src/components/design.tsx b/src/components/design.tsx index 36af986..0fdd5c7 100644 --- a/src/components/design.tsx +++ b/src/components/design.tsx @@ -7,6 +7,7 @@ import { MailCheck, MessageSquareDashed, Monitor, + Save, Settings, TextSelect, Trash2, @@ -21,6 +22,7 @@ export const typeIcons = { image: Image, link: Link, open: Monitor, + save: Save, sent: MailCheck, settings: Settings, text: TextSelect, @@ -37,6 +39,7 @@ export const typeColors = { image: "bg-purple-50 text-purple-700", link: "bg-blue-50 text-blue-700", open: "bg-cyan-50 text-cyan-700", + save: "bg-indigo-50 text-indigo-700", sent: "bg-green-50 text-green-700", settings: "bg-gray-50 text-gray-700", text: "bg-gray-50 text-gray-700", From 16370d44d85d9fe65b7b3f5a46d0750da3d96dc8 Mon Sep 17 00:00:00 2001 From: Ned Twigg Date: Wed, 1 Oct 2025 14:18:16 -0700 Subject: [PATCH 4/6] Standardize the "link out of the popup" component. --- src/components/LinkOutOfPopup.tsx | 15 +++++++ .../github/GitHubIssueAppendEnhancer.tsx | 8 ++-- .../github/GitHubIssueCreateEnhancer.tsx | 8 ++-- .../github/GitHubPrAppendEnhancer.tsx | 8 ++-- .../github/GitHubPrCreateEnhancer.tsx | 8 ++-- .../__snapshots__/gh-ui.test.ts.snap | 40 ++++++++----------- 6 files changed, 43 insertions(+), 44 deletions(-) create mode 100644 src/components/LinkOutOfPopup.tsx diff --git a/src/components/LinkOutOfPopup.tsx b/src/components/LinkOutOfPopup.tsx new file mode 100644 index 0000000..4d4f7eb --- /dev/null +++ b/src/components/LinkOutOfPopup.tsx @@ -0,0 +1,15 @@ +// Link that opens outside of the popup +export function LinkOutOfPopup( + props: React.AnchorHTMLAttributes +) { + return ( + + {props.children} + + ) +} diff --git a/src/lib/enhancers/github/GitHubIssueAppendEnhancer.tsx b/src/lib/enhancers/github/GitHubIssueAppendEnhancer.tsx index afc57a0..a169067 100644 --- a/src/lib/enhancers/github/GitHubIssueAppendEnhancer.tsx +++ b/src/lib/enhancers/github/GitHubIssueAppendEnhancer.tsx @@ -1,6 +1,7 @@ import { IssueOpenedIcon } from "@primer/octicons-react" import OverType, { type OverTypeInstance } from "overtype" import type React from "react" +import { LinkOutOfPopup } from "@/components/LinkOutOfPopup" import type { CommentEnhancer, CommentSpot, @@ -92,12 +93,9 @@ export class GitHubIssueAppendEnhancer #{spot.number}{" "} - + {spot.slug} - + ) diff --git a/src/lib/enhancers/github/GitHubIssueCreateEnhancer.tsx b/src/lib/enhancers/github/GitHubIssueCreateEnhancer.tsx index 4fb8d08..684aad5 100644 --- a/src/lib/enhancers/github/GitHubIssueCreateEnhancer.tsx +++ b/src/lib/enhancers/github/GitHubIssueCreateEnhancer.tsx @@ -1,5 +1,6 @@ import { IssueOpenedIcon } from "@primer/octicons-react" import OverType, { type OverTypeInstance } from "overtype" +import { LinkOutOfPopup } from "@/components/LinkOutOfPopup" import type { CommentEnhancer, CommentSpot, @@ -82,12 +83,9 @@ export class GitHubIssueCreateEnhancer <draft>{" "} - + {spot.slug} - + ) diff --git a/src/lib/enhancers/github/GitHubPrAppendEnhancer.tsx b/src/lib/enhancers/github/GitHubPrAppendEnhancer.tsx index 621eb1e..4d4360d 100644 --- a/src/lib/enhancers/github/GitHubPrAppendEnhancer.tsx +++ b/src/lib/enhancers/github/GitHubPrAppendEnhancer.tsx @@ -1,6 +1,7 @@ import { GitPullRequestIcon } from "@primer/octicons-react" import OverType, { type OverTypeInstance } from "overtype" import type React from "react" +import { LinkOutOfPopup } from "@/components/LinkOutOfPopup" import type { CommentEnhancer, CommentSpot, @@ -91,12 +92,9 @@ export class GitHubPrAppendEnhancer #{spot.number}{" "} - + {spot.slug} - + ) diff --git a/src/lib/enhancers/github/GitHubPrCreateEnhancer.tsx b/src/lib/enhancers/github/GitHubPrCreateEnhancer.tsx index 9125b7d..7ffb02e 100644 --- a/src/lib/enhancers/github/GitHubPrCreateEnhancer.tsx +++ b/src/lib/enhancers/github/GitHubPrCreateEnhancer.tsx @@ -1,5 +1,6 @@ import { GitPullRequestIcon } from "@primer/octicons-react" import OverType, { type OverTypeInstance } from "overtype" +import { LinkOutOfPopup } from "@/components/LinkOutOfPopup" import type { CommentEnhancer, CommentSpot, @@ -97,12 +98,9 @@ export class GitHubPrCreateEnhancer <draft>{" "} - + {spot.slug} - + ) diff --git a/tests/lib/enhancers/__snapshots__/gh-ui.test.ts.snap b/tests/lib/enhancers/__snapshots__/gh-ui.test.ts.snap index 2692952..b7ec4b5 100644 --- a/tests/lib/enhancers/__snapshots__/gh-ui.test.ts.snap +++ b/tests/lib/enhancers/__snapshots__/gh-ui.test.ts.snap @@ -17,12 +17,11 @@ exports[`github ui > gh_issue:should render correct UI elements 1`] = ` # 523 - diffplug/selfie - + , }, @@ -53,12 +52,11 @@ exports[`github ui > gh_issue_edit:should render correct UI elements 1`] = ` # 56 - diffplug/gitcasso - + , }, @@ -96,12 +94,11 @@ exports[`github ui > gh_issue_edit_multiple:should render correct UI elements 1` # 3 - diffplug/testing-deletable - + , }, @@ -124,12 +121,11 @@ exports[`github ui > gh_issue_new:should render correct UI elements 1`] = ` <draft> - diffplug/gitcasso - + , }, @@ -156,12 +152,11 @@ exports[`github ui > gh_pr:should render correct UI elements 1`] = ` # 517 - diffplug/selfie - + , }, @@ -194,12 +189,11 @@ exports[`github ui > gh_pr_edit:should render correct UI elements 1`] = ` # 58 - diffplug/gitcasso - + , }, @@ -238,12 +232,11 @@ exports[`github ui > gh_pr_edit_multiple:should render correct UI elements 1`] = # 5 - diffplug/testing-deletable - + , }, @@ -266,12 +259,11 @@ exports[`github ui > gh_pr_new:should render correct UI elements 1`] = ` <draft> - diffplug/selfie - + , }, From 1d107679d688089a3929afbdb24583cead83f29a Mon Sep 17 00:00:00 2001 From: Ned Twigg Date: Wed, 1 Oct 2025 14:40:46 -0700 Subject: [PATCH 5/6] Open the replica data first. --- tests/playground/playground.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/playground/playground.tsx b/tests/playground/playground.tsx index dba26a6..0578fb7 100644 --- a/tests/playground/playground.tsx +++ b/tests/playground/playground.tsx @@ -6,14 +6,14 @@ import { ClaudePrototype } from "./claude" import { Replica } from "./replica" const MODES = { - claude: { component: ClaudePrototype, label: "claude" }, replica: { component: Replica, label: "replica" }, + claude: { component: ClaudePrototype, label: "claude" }, } as const type Mode = keyof typeof MODES const App = () => { - const [activeComponent, setActiveComponent] = useState("claude") + const [activeComponent, setActiveComponent] = useState("replica") const ModeComponent = MODES[activeComponent].component return ( From 31fd9530e2c9eeeb76c38691c0823c4a2b2bdf7c Mon Sep 17 00:00:00 2001 From: Ned Twigg Date: Wed, 1 Oct 2025 14:44:47 -0700 Subject: [PATCH 6/6] Wire-up the claude thingy a little better. --- tests/playground/claude.tsx | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/tests/playground/claude.tsx b/tests/playground/claude.tsx index dd8fbc8..88b109e 100644 --- a/tests/playground/claude.tsx +++ b/tests/playground/claude.tsx @@ -278,23 +278,37 @@ function commentRow(
{row.latestDraft.stats.links.length > 0 && ( - + )} {row.latestDraft.stats.images.length > 0 && ( )} {row.latestDraft.stats.codeBlocks.length > 0 && ( )} - - - {row.isOpenTab && } + + + {row.isOpenTab && }