Fixup the footer

src/components/EmptyState.tsx

@@ -1,10 +1,10 @@
 export function EmptyState() {
   return (
-    <div className="mx-auto max-w-4xl py-8 text-center">
+    <div className="py-8 text-center">
       <h2 className="mb-4 font-semibold text-2xl">No comments open</h2>
       <p className="mb-6 text-gray-600">
         Your drafts will appear here when you start typing in comment boxes
-        across GitHub and Reddit.
+        across GitHub and other markdown-friendly sites.
       </p>
     </div>
   )

src/components/LinkOutOfPopup.tsx

@@ -0,0 +1,15 @@
+// Link that opens outside of the popup
+export function LinkOutOfPopup(
+  props: React.AnchorHTMLAttributes<HTMLAnchorElement>
+) {
+  return (
+    <a
+      {...props}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="truncate hover:underline"
+    >
+      {props.children}
+    </a>
+  )
+}

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 <EmptyState />
-  }
-
   return (
     <div className="bg-white">
       {/* Bulk actions bar - floating popup */}
@@ -217,7 +212,10 @@ export function PopupRoot({ drafts }: PopupRootProps) {
             {filteredDrafts.length === 0 && (
               <tr>
                 <td colSpan={2}>
-                  <NoMatchesState onClearFilters={clearFilters} />
+                  {drafts.length === 0 && <EmptyState />}
+                  {drafts.length > 0 && (
+                    <NoMatchesState onClearFilters={clearFilters} />
+                  )}
                 </td>
               </tr>
             )}
@@ -234,6 +232,50 @@ export function PopupRoot({ drafts }: PopupRootProps) {
           </tbody>
         </table>
       </div>
+
+      {/* Footer shelf */}
+      <div className="border-gray-300 border-t bg-gray-50 px-3 py-2 text-gray-600 text-xs">
+        <div className="flex items-center justify-between">
+          <div>
+            built with 🤖 by{" "}
+            <a
+              href="https://nedshed.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:underline"
+            >
+              nedshed.dev
+            </a>{" "}
+            using{" "}
+            <a
+              href="https://overtype.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:underline"
+            >
+              overtype
+            </a>
+          </div>
+          <div className="flex items-center gap-2">
+            drafts are not being saved
+            <a
+              href="https://github.com/diffplug/gitcasso/issues/26"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={twMerge(
+                badgeCVA({ type: "save", clickable: true }),
+                "hover:opacity-90"
+              )}
+            >
+              {(() => {
+                const SaveIcon = typeIcons.save
+                return <SaveIcon className="h-3 w-3" />
+              })()}
+              save my drafts
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }

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",

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
         </span>
         <span>
           #{spot.number}{" "}
-          <a
-            href={`https://${spot.domain}/${spot.slug}`}
-            className="truncate hover:underline"
-          >
+          <LinkOutOfPopup href={`https://${spot.domain}/${spot.slug}`}>
             {spot.slug}
-          </a>
+          </LinkOutOfPopup>
         </span>
       </>
     )

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
         </span>
         <span>
           &lt;draft&gt;{" "}
-          <a
-            href={`https://${spot.domain}/${spot.slug}`}
-            className="truncate hover:underline"
-          >
+          <LinkOutOfPopup href={`https://${spot.domain}/${spot.slug}`}>
             {spot.slug}
-          </a>
+          </LinkOutOfPopup>
         </span>
       </>
     )

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
         </span>
         <span>
           #{spot.number}{" "}
-          <a
-            href={`https://${spot.domain}/${spot.slug}`}
-            className="truncate hover:underline"
-          >
+          <LinkOutOfPopup href={`https://${spot.domain}/${spot.slug}`}>
             {spot.slug}
-          </a>
+          </LinkOutOfPopup>
         </span>
       </>
     )

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
         </span>
         <span>
           &lt;draft&gt;{" "}
-          <a
-            href={`https://${spot.domain}/${spot.slug}`}
-            className="truncate hover:underline"
-          >
+          <LinkOutOfPopup href={`https://${spot.domain}/${spot.slug}`}>
             {spot.slug}
-          </a>
+          </LinkOutOfPopup>
         </span>
       </>
     )

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
 
-        <a
-          className="truncate hover:underline"
+        <LinkOutOfPopup
           href="https://github.com/diffplug/selfie"
         >
           diffplug/selfie
-        </a>
+        </LinkOutOfPopup>
       </span>
     </React.Fragment>,
   },
@@ -53,12 +52,11 @@ exports[`github ui > gh_issue_edit:should render correct UI elements 1`] = `
         #
         56
 
-        <a
-          className="truncate hover:underline"
+        <LinkOutOfPopup
           href="https://github.com/diffplug/gitcasso"
         >
           diffplug/gitcasso
-        </a>
+        </LinkOutOfPopup>
       </span>
     </React.Fragment>,
   },
@@ -96,12 +94,11 @@ exports[`github ui > gh_issue_edit_multiple:should render correct UI elements 1`
         #
         3
 
-        <a
-          className="truncate hover:underline"
+        <LinkOutOfPopup
           href="https://github.com/diffplug/testing-deletable"
         >
           diffplug/testing-deletable
-        </a>
+        </LinkOutOfPopup>
       </span>
     </React.Fragment>,
   },
@@ -124,12 +121,11 @@ exports[`github ui > gh_issue_new:should render correct UI elements 1`] = `
       <span>
         &lt;draft&gt;
 
-        <a
-          className="truncate hover:underline"
+        <LinkOutOfPopup
           href="https://github.com/diffplug/gitcasso"
         >
           diffplug/gitcasso
-        </a>
+        </LinkOutOfPopup>
       </span>
     </React.Fragment>,
   },
@@ -156,12 +152,11 @@ exports[`github ui > gh_pr:should render correct UI elements 1`] = `
         #
         517
 
-        <a
-          className="truncate hover:underline"
+        <LinkOutOfPopup
           href="https://github.com/diffplug/selfie"
         >
           diffplug/selfie
-        </a>
+        </LinkOutOfPopup>
       </span>
     </React.Fragment>,
   },
@@ -194,12 +189,11 @@ exports[`github ui > gh_pr_edit:should render correct UI elements 1`] = `
         #
         58
 
-        <a
-          className="truncate hover:underline"
+        <LinkOutOfPopup
           href="https://github.com/diffplug/gitcasso"
         >
           diffplug/gitcasso
-        </a>
+        </LinkOutOfPopup>
       </span>
     </React.Fragment>,
   },
@@ -238,12 +232,11 @@ exports[`github ui > gh_pr_edit_multiple:should render correct UI elements 1`] =
         #
         5
 
-        <a
-          className="truncate hover:underline"
+        <LinkOutOfPopup
           href="https://github.com/diffplug/testing-deletable"
         >
           diffplug/testing-deletable
-        </a>
+        </LinkOutOfPopup>
       </span>
     </React.Fragment>,
   },
@@ -266,12 +259,11 @@ exports[`github ui > gh_pr_new:should render correct UI elements 1`] = `
       <span>
         &lt;draft&gt;
 
-        <a
-          className="truncate hover:underline"
+        <LinkOutOfPopup
           href="https://github.com/diffplug/selfie"
         >
           diffplug/selfie
-        </a>
+        </LinkOutOfPopup>
       </span>
     </React.Fragment>,
   },

tests/playground/claude.tsx

@@ -278,23 +278,37 @@ function commentRow(
             </div>
             <div className="flex flex-shrink-0 items-center gap-1">
               {row.latestDraft.stats.links.length > 0 && (
-                <Badge type="link" text={row.latestDraft.stats.links.length} />
+                <Badge
+                  type="link"
+                  text={row.latestDraft.stats.links.length}
+                  data={row}
+                />
               )}
               {row.latestDraft.stats.images.length > 0 && (
                 <Badge
                   type="image"
                   text={row.latestDraft.stats.images.length}
+                  data={row}
                 />
               )}
               {row.latestDraft.stats.codeBlocks.length > 0 && (
                 <Badge
                   type="code"
                   text={row.latestDraft.stats.codeBlocks.length}
+                  data={row}
                 />
               )}
-              <Badge type="text" text={row.latestDraft.stats.charCount} />
-              <Badge type="time" text={timeAgo(row.latestDraft.time)} />
-              {row.isOpenTab && <Badge type="open" />}
+              <Badge
+                type="text"
+                text={row.latestDraft.stats.charCount}
+                data={row}
+              />
+              <Badge
+                type="time"
+                text={timeAgo(row.latestDraft.time)}
+                data={row}
+              />
+              {row.isOpenTab && <Badge type="open" data={row} />}
             </div>
           </div>