From 7b485bfca3bb7752cb12819291a7f539e97f4f9a Mon Sep 17 00:00:00 2001
From: pitoi <pitoi@users.noreply.github.com>
Date: Wed, 17 Jun 2026 16:13:54 +0000
Subject: [PATCH] Generated with Hive: Refactor node row layout to prevent
 trash and ExternalLink icon overlap in My Content sidebar

---
 src/components/feed/feed-card.tsx          | 54 +++++++++++-----------
 src/components/feed/hot-takes.tsx          |  5 +-
 src/components/layout/my-content-panel.tsx | 28 +++++------
 src/components/modals/budget-modal.tsx     |  2 +-
 src/lib/__tests__/withdraw.test.ts         |  2 +-
 5 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/src/components/feed/feed-card.tsx b/src/components/feed/feed-card.tsx
index 6e7e753..3eda70d 100644
--- a/src/components/feed/feed-card.tsx
+++ b/src/components/feed/feed-card.tsx
@@ -177,23 +177,24 @@ function CardBody({
         {(() => {
           const src = pickString(p, "source_link")
           if (!src) return null
+          let hostname: string | null = null
           try {
-            const hostname = new URL(src).hostname
-            return (
-              <a
-                href={src}
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={(e) => e.stopPropagation()}
-                className="inline-flex items-center gap-1 text-[10px] font-mono text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <ExternalLink className="h-3 w-3" />
-                {hostname}
-              </a>
-            )
+            hostname = new URL(src).hostname
           } catch {
             return null
           }
+          return (
+            <a
+              href={src}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
+              className="inline-flex items-center gap-1 text-[10px] font-mono text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ExternalLink className="h-3 w-3" />
+              {hostname}
+            </a>
+          )
         })()}
       </div>
     )
@@ -206,23 +207,24 @@ function CardBody({
         {(() => {
           const src = pickString(p, "source_link")
           if (!src) return null
+          let hostname: string | null = null
           try {
-            const hostname = new URL(src).hostname
-            return (
-              <a
-                href={src}
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={(e) => e.stopPropagation()}
-                className="inline-flex items-center gap-1 text-[10px] font-mono text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <ExternalLink className="h-3 w-3" />
-                {hostname}
-              </a>
-            )
+            hostname = new URL(src).hostname
           } catch {
             return null
           }
+          return (
+            <a
+              href={src}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
+              className="inline-flex items-center gap-1 text-[10px] font-mono text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ExternalLink className="h-3 w-3" />
+              {hostname}
+            </a>
+          )
         })()}
       </div>
     )
diff --git a/src/components/feed/hot-takes.tsx b/src/components/feed/hot-takes.tsx
index 8931553..c9f8f09 100644
--- a/src/components/feed/hot-takes.tsx
+++ b/src/components/feed/hot-takes.tsx
@@ -42,10 +42,11 @@ export function HotTakes() {
       const candidates = MOCK_NODES
         .filter((n) => n.node_type === "Clip" && clipQuote(n))
         .sort((a, b) => (b.date_added_to_graph ?? 0) - (a.date_added_to_graph ?? 0))
-      setClips(diversifyClipsByParent(candidates, MOCK_EDGES, {
+      const result = diversifyClipsByParent(candidates, MOCK_EDGES, {
         maxPerSource: MAX_PER_SOURCE,
         finalLimit: FINAL_LIMIT,
-      }))
+      })
+      Promise.resolve().then(() => setClips(result))
       return
     }
     const controller = new AbortController()
diff --git a/src/components/layout/my-content-panel.tsx b/src/components/layout/my-content-panel.tsx
index 2087959..fa55abb 100644
--- a/src/components/layout/my-content-panel.tsx
+++ b/src/components/layout/my-content-panel.tsx
@@ -420,21 +420,23 @@ export function MyContentPanel({ onClose }: { onClose: () => void }) {
 
                       return (
                         <div key={node.ref_id}>
-                          <div className="relative group">
-                            <NodeRow
-                              node={node}
-                              schemas={schemas}
-                              onClick={() => { setSelectedNode(node); setSidebarSelectedNode(node) }}
-                              onMouseEnter={() => setHoveredNode(node)}
-                              onMouseLeave={() => setHoveredNode(null)}
-                              hideBoost={true}
-                              isAdmin={isAdmin}
-                              unlockCount={insight?.unlock_count}
-                              growthBadge={nodeBadge}
-                            />
+                          <div className="flex items-center group">
+                            <div className="flex-1 min-w-0 overflow-hidden">
+                              <NodeRow
+                                node={node}
+                                schemas={schemas}
+                                onClick={() => { setSelectedNode(node); setSidebarSelectedNode(node) }}
+                                onMouseEnter={() => setHoveredNode(node)}
+                                onMouseLeave={() => setHoveredNode(null)}
+                                hideBoost={true}
+                                isAdmin={isAdmin}
+                                unlockCount={insight?.unlock_count}
+                                growthBadge={nodeBadge}
+                              />
+                            </div>
                             {!isConfirming && (
                               <button
-                                className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
+                                className="shrink-0 pl-3 pr-3 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
                                 onClick={(e) => { e.stopPropagation(); setDeletingId(node.ref_id); setDeleteError(null) }}
                                 aria-label="Delete node"
                               >
diff --git a/src/components/modals/budget-modal.tsx b/src/components/modals/budget-modal.tsx
index b319566..8c1cbaa 100644
--- a/src/components/modals/budget-modal.tsx
+++ b/src/components/modals/budget-modal.tsx
@@ -1140,7 +1140,7 @@ export function BudgetModal() {
               {reachedViaFirstPurchase && !isWithdrawSuccess && (
                 <div className="flex flex-col gap-2 rounded-md border border-border/50 bg-muted/30 p-3">
                   <p className="text-xs text-foreground/80">
-                    This token is the key to your balance. Store it somewhere safe — you'll need it to restore access if you clear your cookies or switch devices.
+                    This token is the key to your balance. Store it somewhere safe — you&apos;ll need it to restore access if you clear your cookies or switch devices.
                   </p>
                   <Button
                     variant="outline"
diff --git a/src/lib/__tests__/withdraw.test.ts b/src/lib/__tests__/withdraw.test.ts
index 2234ff4..bde18ba 100644
--- a/src/lib/__tests__/withdraw.test.ts
+++ b/src/lib/__tests__/withdraw.test.ts
@@ -3,7 +3,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest"
 // vi.mock calls are hoisted — declare factory functions using vi.hoisted
 const { mockApiPostHoisted, mockIsMocksEnabledHoisted, mockMockTransactionsHoisted, mockDecodeInvoiceAmountSatsHoisted } = vi.hoisted(() => {
   const mockApiPost = vi.fn()
-  let isMocksEnabled = false
+  const isMocksEnabled = false
   const mockTransactions: { transactions: Array<{ action: string; type: string; amount: number; created_at: string }> } = { transactions: [] }
   const mockDecodeInvoiceAmountSats = vi.fn().mockReturnValue(500)
   return {