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/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/components/PopupRoot.tsx b/src/components/PopupRoot.tsx index 0484797..8a1f308 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 */} @@ -217,7 +212,10 @@ export function PopupRoot({ drafts }: PopupRootProps) { {filteredDrafts.length === 0 && ( - + {drafts.length === 0 && } + {drafts.length > 0 && ( + + )} )} @@ -234,6 +232,50 @@ export function PopupRoot({ drafts }: PopupRootProps) {
+ + {/* Footer shelf */} +
+
+
+ built with 🤖 by{" "} + + nedshed.dev + {" "} + using{" "} + + overtype + +
+ +
+
) } 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", 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 - + , }, 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 && }
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 (