Skip to content

Commit f1df5b8

Browse files
nedtwiggnedtwigg
authored
Fixup the footer (#100)
2 parents b489414 + 31fd953 commit f1df5b8

File tree

11 files changed

+117
-59
lines changed

11 files changed

+117
-59
lines changed

‎src/components/EmptyState.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
export function EmptyState() {
22
return (
3-
<div className="mx-auto max-w-4xl py-8 text-center">
3+
<div className="py-8 text-center">
44
<h2 className="mb-4 font-semibold text-2xl">No comments open</h2>
55
<p className="mb-6 text-gray-600">
66
Your drafts will appear here when you start typing in comment boxes
7-
across GitHub and Reddit.
7+
across GitHub and other markdown-friendly sites.
88
</p>
99
</div>
1010
)

‎src/components/LinkOutOfPopup.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// Link that opens outside of the popup
2+
export function LinkOutOfPopup(
3+
props: React.AnchorHTMLAttributes<HTMLAnchorElement>
4+
) {
5+
return (
6+
<a
7+
{...props}
8+
target="_blank"
9+
rel="noopener noreferrer"
10+
className="truncate hover:underline"
11+
>
12+
{props.children}
13+
</a>
14+
)
15+
}

‎src/components/PopupRoot.tsx‎

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Eye, EyeOff, Search, Settings, Trash2 } from "lucide-react"
22
import { useMemo, useState } from "react"
33
import { twMerge } from "tailwind-merge"
4-
import { badgeCVA } from "@/components/design"
4+
import { badgeCVA, typeIcons } from "@/components/design"
55
import MultiSegment from "@/components/MultiSegment"
66
import { allLeafValues } from "@/components/misc"
77
import type { CommentTableRow } from "@/entrypoints/background"
@@ -100,11 +100,6 @@ export function PopupRoot({ drafts }: PopupRootProps) {
100100
showTrashed: true,
101101
})
102102
}
103-
104-
if (drafts.length === 0) {
105-
return <EmptyState />
106-
}
107-
108103
return (
109104
<div className="bg-white">
110105
{/* Bulk actions bar - floating popup */}
@@ -217,7 +212,10 @@ export function PopupRoot({ drafts }: PopupRootProps) {
217212
{filteredDrafts.length === 0 && (
218213
<tr>
219214
<td colSpan={2}>
220-
<NoMatchesState onClearFilters={clearFilters} />
215+
{drafts.length === 0 && <EmptyState />}
216+
{drafts.length > 0 && (
217+
<NoMatchesState onClearFilters={clearFilters} />
218+
)}
221219
</td>
222220
</tr>
223221
)}
@@ -234,6 +232,50 @@ export function PopupRoot({ drafts }: PopupRootProps) {
234232
</tbody>
235233
</table>
236234
</div>
235+
236+
{/* Footer shelf */}
237+
<div className="border-gray-300 border-t bg-gray-50 px-3 py-2 text-gray-600 text-xs">
238+
<div className="flex items-center justify-between">
239+
<div>
240+
built with 🤖 by{" "}
241+
<a
242+
href="https://nedshed.dev/"
243+
target="_blank"
244+
rel="noopener noreferrer"
245+
className="text-blue-600 hover:underline"
246+
>
247+
nedshed.dev
248+
</a>{" "}
249+
using{" "}
250+
<a
251+
href="https://overtype.dev/"
252+
target="_blank"
253+
rel="noopener noreferrer"
254+
className="text-blue-600 hover:underline"
255+
>
256+
overtype
257+
</a>
258+
</div>
259+
<div className="flex items-center gap-2">
260+
drafts are not being saved
261+
<a
262+
href="https://github.com/diffplug/gitcasso/issues/26"
263+
target="_blank"
264+
rel="noopener noreferrer"
265+
className={twMerge(
266+
badgeCVA({ type: "save", clickable: true }),
267+
"hover:opacity-90"
268+
)}
269+
>
270+
{(() => {
271+
const SaveIcon = typeIcons.save
272+
return <SaveIcon className="h-3 w-3" />
273+
})()}
274+
save my drafts
275+
</a>
276+
</div>
277+
</div>
278+
</div>
237279
</div>
238280
)
239281
}

‎src/components/design.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
MailCheck,
88
MessageSquareDashed,
99
Monitor,
10+
Save,
1011
Settings,
1112
TextSelect,
1213
Trash2,
@@ -21,6 +22,7 @@ export const typeIcons = {
2122
image: Image,
2223
link: Link,
2324
open: Monitor,
25+
save: Save,
2426
sent: MailCheck,
2527
settings: Settings,
2628
text: TextSelect,
@@ -37,6 +39,7 @@ export const typeColors = {
3739
image: "bg-purple-50 text-purple-700",
3840
link: "bg-blue-50 text-blue-700",
3941
open: "bg-cyan-50 text-cyan-700",
42+
save: "bg-indigo-50 text-indigo-700",
4043
sent: "bg-green-50 text-green-700",
4144
settings: "bg-gray-50 text-gray-700",
4245
text: "bg-gray-50 text-gray-700",

‎src/lib/enhancers/github/GitHubIssueAppendEnhancer.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { IssueOpenedIcon } from "@primer/octicons-react"
22
import OverType, { type OverTypeInstance } from "overtype"
33
import type React from "react"
4+
import { LinkOutOfPopup } from "@/components/LinkOutOfPopup"
45
import type {
56
CommentEnhancer,
67
CommentSpot,
@@ -92,12 +93,9 @@ export class GitHubIssueAppendEnhancer
9293
</span>
9394
<span>
9495
#{spot.number}{" "}
95-
<a
96-
href={`https://${spot.domain}/${spot.slug}`}
97-
className="truncate hover:underline"
98-
>
96+
<LinkOutOfPopup href={`https://${spot.domain}/${spot.slug}`}>
9997
{spot.slug}
100-
</a>
98+
</LinkOutOfPopup>
10199
</span>
102100
</>
103101
)

‎src/lib/enhancers/github/GitHubIssueCreateEnhancer.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { IssueOpenedIcon } from "@primer/octicons-react"
22
import OverType, { type OverTypeInstance } from "overtype"
3+
import { LinkOutOfPopup } from "@/components/LinkOutOfPopup"
34
import type {
45
CommentEnhancer,
56
CommentSpot,
@@ -82,12 +83,9 @@ export class GitHubIssueCreateEnhancer
8283
</span>
8384
<span>
8485
&lt;draft&gt;{" "}
85-
<a
86-
href={`https://${spot.domain}/${spot.slug}`}
87-
className="truncate hover:underline"
88-
>
86+
<LinkOutOfPopup href={`https://${spot.domain}/${spot.slug}`}>
8987
{spot.slug}
90-
</a>
88+
</LinkOutOfPopup>
9189
</span>
9290
</>
9391
)

‎src/lib/enhancers/github/GitHubPrAppendEnhancer.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { GitPullRequestIcon } from "@primer/octicons-react"
22
import OverType, { type OverTypeInstance } from "overtype"
33
import type React from "react"
4+
import { LinkOutOfPopup } from "@/components/LinkOutOfPopup"
45
import type {
56
CommentEnhancer,
67
CommentSpot,
@@ -91,12 +92,9 @@ export class GitHubPrAppendEnhancer
9192
</span>
9293
<span>
9394
#{spot.number}{" "}
94-
<a
95-
href={`https://${spot.domain}/${spot.slug}`}
96-
className="truncate hover:underline"
97-
>
95+
<LinkOutOfPopup href={`https://${spot.domain}/${spot.slug}`}>
9896
{spot.slug}
99-
</a>
97+
</LinkOutOfPopup>
10098
</span>
10199
</>
102100
)

‎src/lib/enhancers/github/GitHubPrCreateEnhancer.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { GitPullRequestIcon } from "@primer/octicons-react"
22
import OverType, { type OverTypeInstance } from "overtype"
3+
import { LinkOutOfPopup } from "@/components/LinkOutOfPopup"
34
import type {
45
CommentEnhancer,
56
CommentSpot,
@@ -97,12 +98,9 @@ export class GitHubPrCreateEnhancer
9798
</span>
9899
<span>
99100
&lt;draft&gt;{" "}
100-
<a
101-
href={`https://${spot.domain}/${spot.slug}`}
102-
className="truncate hover:underline"
103-
>
101+
<LinkOutOfPopup href={`https://${spot.domain}/${spot.slug}`}>
104102
{spot.slug}
105-
</a>
103+
</LinkOutOfPopup>
106104
</span>
107105
</>
108106
)

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

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,11 @@ exports[`github ui > gh_issue:should render correct UI elements 1`] = `
1717
#
1818
523
1919
20-
<a
21-
className="truncate hover:underline"
20+
<LinkOutOfPopup
2221
href="https://github.com/diffplug/selfie"
2322
>
2423
diffplug/selfie
25-
</a>
24+
</LinkOutOfPopup>
2625
</span>
2726
</React.Fragment>,
2827
},
@@ -53,12 +52,11 @@ exports[`github ui > gh_issue_edit:should render correct UI elements 1`] = `
5352
#
5453
56
5554
56-
<a
57-
className="truncate hover:underline"
55+
<LinkOutOfPopup
5856
href="https://github.com/diffplug/gitcasso"
5957
>
6058
diffplug/gitcasso
61-
</a>
59+
</LinkOutOfPopup>
6260
</span>
6361
</React.Fragment>,
6462
},
@@ -96,12 +94,11 @@ exports[`github ui > gh_issue_edit_multiple:should render correct UI elements 1`
9694
#
9795
3
9896
99-
<a
100-
className="truncate hover:underline"
97+
<LinkOutOfPopup
10198
href="https://github.com/diffplug/testing-deletable"
10299
>
103100
diffplug/testing-deletable
104-
</a>
101+
</LinkOutOfPopup>
105102
</span>
106103
</React.Fragment>,
107104
},
@@ -124,12 +121,11 @@ exports[`github ui > gh_issue_new:should render correct UI elements 1`] = `
124121
<span>
125122
&lt;draft&gt;
126123
127-
<a
128-
className="truncate hover:underline"
124+
<LinkOutOfPopup
129125
href="https://github.com/diffplug/gitcasso"
130126
>
131127
diffplug/gitcasso
132-
</a>
128+
</LinkOutOfPopup>
133129
</span>
134130
</React.Fragment>,
135131
},
@@ -156,12 +152,11 @@ exports[`github ui > gh_pr:should render correct UI elements 1`] = `
156152
#
157153
517
158154
159-
<a
160-
className="truncate hover:underline"
155+
<LinkOutOfPopup
161156
href="https://github.com/diffplug/selfie"
162157
>
163158
diffplug/selfie
164-
</a>
159+
</LinkOutOfPopup>
165160
</span>
166161
</React.Fragment>,
167162
},
@@ -194,12 +189,11 @@ exports[`github ui > gh_pr_edit:should render correct UI elements 1`] = `
194189
#
195190
58
196191
197-
<a
198-
className="truncate hover:underline"
192+
<LinkOutOfPopup
199193
href="https://github.com/diffplug/gitcasso"
200194
>
201195
diffplug/gitcasso
202-
</a>
196+
</LinkOutOfPopup>
203197
</span>
204198
</React.Fragment>,
205199
},
@@ -238,12 +232,11 @@ exports[`github ui > gh_pr_edit_multiple:should render correct UI elements 1`] =
238232
#
239233
5
240234
241-
<a
242-
className="truncate hover:underline"
235+
<LinkOutOfPopup
243236
href="https://github.com/diffplug/testing-deletable"
244237
>
245238
diffplug/testing-deletable
246-
</a>
239+
</LinkOutOfPopup>
247240
</span>
248241
</React.Fragment>,
249242
},
@@ -266,12 +259,11 @@ exports[`github ui > gh_pr_new:should render correct UI elements 1`] = `
266259
<span>
267260
&lt;draft&gt;
268261
269-
<a
270-
className="truncate hover:underline"
262+
<LinkOutOfPopup
271263
href="https://github.com/diffplug/selfie"
272264
>
273265
diffplug/selfie
274-
</a>
266+
</LinkOutOfPopup>
275267
</span>
276268
</React.Fragment>,
277269
},

‎tests/playground/claude.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -278,23 +278,37 @@ function commentRow(
278278
</div>
279279
<div className="flex flex-shrink-0 items-center gap-1">
280280
{row.latestDraft.stats.links.length > 0 && (
281-
<Badge type="link" text={row.latestDraft.stats.links.length} />
281+
<Badge
282+
type="link"
283+
text={row.latestDraft.stats.links.length}
284+
data={row}
285+
/>
282286
)}
283287
{row.latestDraft.stats.images.length > 0 && (
284288
<Badge
285289
type="image"
286290
text={row.latestDraft.stats.images.length}
291+
data={row}
287292
/>
288293
)}
289294
{row.latestDraft.stats.codeBlocks.length > 0 && (
290295
<Badge
291296
type="code"
292297
text={row.latestDraft.stats.codeBlocks.length}
298+
data={row}
293299
/>
294300
)}
295-
<Badge type="text" text={row.latestDraft.stats.charCount} />
296-
<Badge type="time" text={timeAgo(row.latestDraft.time)} />
297-
{row.isOpenTab && <Badge type="open" />}
301+
<Badge
302+
type="text"
303+
text={row.latestDraft.stats.charCount}
304+
data={row}
305+
/>
306+
<Badge
307+
type="time"
308+
text={timeAgo(row.latestDraft.time)}
309+
data={row}
310+
/>
311+
{row.isOpenTab && <Badge type="open" data={row} />}
298312
</div>
299313
</div>
300314

0 commit comments

Comments
 (0)