feat: polish inbox and issue list workflows

ui/src/components/IssuesQuicklook.tsx

@@ -1,10 +1,8 @@
 import { useState } from "react";
 import type { Issue } from "@paperclipai/shared";
-import { Link } from "@/lib/router";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { StatusIcon } from "./StatusIcon";
 import { createIssueDetailPath, withIssueDetailHeaderSeed } from "../lib/issueDetailBreadcrumb";
-import { timeAgo } from "../lib/timeAgo";
+import { IssueQuicklookCard } from "./IssueLinkQuicklook";
 
 interface IssuesQuicklookProps {
   issue: Issue;
@@ -24,32 +22,18 @@ export function IssuesQuicklook({ issue, children }: IssuesQuicklookProps) {
         {children}
       </PopoverTrigger>
       <PopoverContent
-        className="w-64 p-3"
+        className="w-72 p-3"
         side="top"
         align="start"
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
         onOpenAutoFocus={(e) => e.preventDefault()}
       >
-        <div className="space-y-2">
-          <div className="flex items-start gap-2">
-            <StatusIcon status={issue.status} className="mt-0.5 shrink-0" />
-            <Link
-              to={createIssueDetailPath(issue.identifier ?? issue.id)}
-              state={withIssueDetailHeaderSeed(null, issue)}
-              className="text-sm font-medium leading-snug hover:underline line-clamp-2"
-            >
-              {issue.title}
-            </Link>
-          </div>
-          <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <span className="font-mono">{issue.identifier ?? issue.id.slice(0, 8)}</span>
-            <span>·</span>
-            <span>{issue.status.replace(/_/g, " ")}</span>
-            <span>·</span>
-            <span>{timeAgo(new Date(issue.updatedAt))}</span>
-          </div>
-        </div>
+        <IssueQuicklookCard
+          issue={issue}
+          linkTo={createIssueDetailPath(issue.identifier ?? issue.id)}
+          linkState={withIssueDetailHeaderSeed(null, issue)}
+        />
       </PopoverContent>
     </Popover>
   );