Put the "no drafts" empty state inside the popup root.

Author: nedtwigg

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/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 */}
@@ -214,10 +209,12 @@ export function PopupRoot({ drafts }: PopupRootProps) {
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-200">
+
             {filteredDrafts.length === 0 && (
               <tr>
                 <td colSpan={2}>
-                  <NoMatchesState onClearFilters={clearFilters} />
+                  {drafts.length === 0 && <EmptyState />}
+                  {drafts.length > 0 && <NoMatchesState onClearFilters={clearFilters} />}
                 </td>
               </tr>
             )}
@@ -258,14 +255,21 @@ export function PopupRoot({ drafts }: PopupRootProps) {
               overtype
             </a>
           </div>
-          <div>
-            drafts are not being saved{" "}
+          <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="text-blue-600 hover:underline"
+              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>