From 7aad04373481dd67baba08bdae5feaf8d1613af9 Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Thu, 19 Feb 2026 16:04:16 -0600
Subject: [PATCH] Replace Repeat2 with custom RepostIcon, style repost/treasure
 action headers

---
 src/components/InteractionsModal.tsx |  5 +++--
 src/components/NoteCard.tsx          | 13 +++++++------
 src/components/RepostMenu.tsx        |  5 +++--
 src/components/icons/RepostIcon.tsx  | 29 ++++++++++++++++++++++++++++
 src/pages/NotificationsPage.tsx      |  7 ++++---
 src/pages/PostDetailPage.tsx         |  5 +++--
 6 files changed, 49 insertions(+), 15 deletions(-)
 create mode 100644 src/components/icons/RepostIcon.tsx

diff --git a/src/components/InteractionsModal.tsx b/src/components/InteractionsModal.tsx
index 5e277d06..00a05d03 100644
--- a/src/components/InteractionsModal.tsx
+++ b/src/components/InteractionsModal.tsx
@@ -1,6 +1,7 @@
 import { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import { Repeat2, Quote, Heart, Zap, X } from 'lucide-react';
+import { Quote, Heart, Zap, X } from 'lucide-react';
+import { RepostIcon } from '@/components/icons/RepostIcon';
 import { nip19 } from 'nostr-tools';
 
 import {
@@ -50,7 +51,7 @@ export function InteractionsModal({ eventId, open, onOpenChange, initialTab = 'r
   const zapCount = data?.zaps.length ?? 0;
 
   const tabConfig: { key: InteractionTab; label: string; count: number; icon: React.ReactNode }[] = [
-    { key: 'reposts', label: 'Reposts', count: repostCount, icon: <Repeat2 className="size-4" /> },
+    { key: 'reposts', label: 'Reposts', count: repostCount, icon: <RepostIcon className="size-4" /> },
     { key: 'quotes', label: 'Quotes', count: quoteCount, icon: <Quote className="size-4" /> },
     { key: 'reactions', label: 'Reactions', count: reactionCount, icon: <Heart className="size-4" /> },
     { key: 'zaps', label: 'Zaps', count: zapCount, icon: <Zap className="size-4" /> },
diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx
index a087df0b..e5b36c7d 100644
--- a/src/components/NoteCard.tsx
+++ b/src/components/NoteCard.tsx
@@ -1,5 +1,6 @@
 import { Link, useNavigate } from 'react-router-dom';
-import { MessageCircle, Repeat2, Zap, MoreHorizontal, Play } from 'lucide-react';
+import { MessageCircle, Zap, MoreHorizontal, Play } from 'lucide-react';
+import { RepostIcon } from '@/components/icons/RepostIcon';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { Skeleton } from '@/components/ui/skeleton';
 import { NoteContent } from '@/components/NoteContent';
@@ -316,7 +317,7 @@ export function NoteCard({ event, className, repostedBy, compact }: NoteCardProp
                 className="flex items-center gap-1.5 p-2 rounded-full text-muted-foreground hover:text-green-500 hover:bg-green-500/10 transition-colors"
                 title="Repost"
               >
-                <Repeat2 className="size-5" />
+                <RepostIcon className="size-5" />
                 {(stats?.reposts || stats?.quotes) ? <span className="text-sm tabular-nums">{(stats?.reposts ?? 0) + (stats?.quotes ?? 0)}</span> : null}
               </button>
             </RepostMenu>
@@ -470,9 +471,9 @@ function RepostHeader({ pubkey }: { pubkey: string }) {
   const url = useMemo(() => getProfileUrl(pubkey, author.data?.metadata), [pubkey, author.data?.metadata]);
 
   return (
-    <div className="flex items-center gap-3 text-xs text-muted-foreground mb-1 min-w-0">
+    <div className="flex items-center gap-3 text-xs text-muted-foreground mb-3 min-w-0">
       <div className="w-11 shrink-0 flex justify-end">
-        <Repeat2 className="size-3.5" />
+        <RepostIcon className="size-4 text-green-500 translate-y-px" />
       </div>
       <div className="flex items-center min-w-0">
         {author.isLoading ? (
@@ -498,9 +499,9 @@ function TreasureHeader({ pubkey, variant }: { pubkey: string; variant: 'hid' |
   const url = useMemo(() => getProfileUrl(pubkey, author.data?.metadata), [pubkey, author.data?.metadata]);
 
   return (
-    <div className="flex items-center gap-3 text-xs text-muted-foreground mb-1 min-w-0">
+    <div className="flex items-center gap-3 text-xs text-muted-foreground mb-3 min-w-0">
       <div className="w-11 shrink-0 flex justify-end">
-        <ChestIcon className="size-3.5" />
+        <ChestIcon className="size-4 text-primary translate-y-px" />
       </div>
       <div className="flex items-center min-w-0">
         {author.isLoading ? (
diff --git a/src/components/RepostMenu.tsx b/src/components/RepostMenu.tsx
index 8f05a6e6..5f214a8d 100644
--- a/src/components/RepostMenu.tsx
+++ b/src/components/RepostMenu.tsx
@@ -1,4 +1,5 @@
-import { Repeat2, Quote } from 'lucide-react';
+import { Quote } from 'lucide-react';
+import { RepostIcon } from '@/components/icons/RepostIcon';
 import { useState } from 'react';
 import type { NostrEvent } from '@nostrify/nostrify';
 
@@ -71,7 +72,7 @@ export function RepostMenu({ event, children }: RepostMenuProps) {
         }}
         className="flex items-center gap-3 w-full px-4 py-3 text-[15px] text-foreground hover:bg-secondary/60 transition-colors"
       >
-        <Repeat2 className="size-5" />
+        <RepostIcon className="size-5" />
         <span>Repost</span>
       </button>
       <button
diff --git a/src/components/icons/RepostIcon.tsx b/src/components/icons/RepostIcon.tsx
new file mode 100644
index 00000000..745b5b8d
--- /dev/null
+++ b/src/components/icons/RepostIcon.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+/**
+ * Repost icon — two curved arrows forming a cycle.
+ * Rendered as a standard lucide-style SVG component.
+ */
+export const RepostIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, strokeWidth = 2.2, ...props }, ref) => (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+    >
+      <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3" />
+      <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3" />
+    </svg>
+  ),
+);
+
+RepostIcon.displayName = 'RepostIcon';
diff --git a/src/pages/NotificationsPage.tsx b/src/pages/NotificationsPage.tsx
index 5bc22cc7..289be706 100644
--- a/src/pages/NotificationsPage.tsx
+++ b/src/pages/NotificationsPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { useSeoMeta } from '@unhead/react';
-import { Repeat2, Zap, AtSign, MessageCircle, MoreHorizontal } from 'lucide-react';
+import { Zap, AtSign, MessageCircle, MoreHorizontal } from 'lucide-react';
+import { RepostIcon } from '@/components/icons/RepostIcon';
 import { Link, useNavigate } from 'react-router-dom';
 import { nip19 } from 'nostr-tools';
 import type { NostrEvent } from '@nostrify/nostrify';
@@ -205,7 +206,7 @@ function RepostNotification({ event, isNew }: { event: NostrEvent; isNew: boolea
       )}
       <NotificationHeader
         actorPubkey={event.pubkey}
-        icon={<Repeat2 className="size-4 text-green-500" />}
+        icon={<RepostIcon className="size-4 text-green-500" />}
         action="reposted your note"
       />
       {referencedEvent && (
@@ -618,7 +619,7 @@ function ActionButtons({
           className="flex items-center gap-1.5 p-2 rounded-full text-muted-foreground hover:text-green-500 hover:bg-green-500/10 transition-colors"
           title="Repost"
         >
-          <Repeat2 className="size-5" />
+          <RepostIcon className="size-5" />
           {stats?.reposts ? <span className="text-sm tabular-nums">{stats.reposts}</span> : null}
         </button>
       </RepostMenu>
diff --git a/src/pages/PostDetailPage.tsx b/src/pages/PostDetailPage.tsx
index f541e2e0..5e91e83c 100644
--- a/src/pages/PostDetailPage.tsx
+++ b/src/pages/PostDetailPage.tsx
@@ -1,6 +1,7 @@
 import { useMemo, useState, useCallback } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import { ArrowLeft, MessageCircle, Repeat2, Zap, MoreHorizontal, Radio, Loader2, AlertCircle, Copy, Check, ChevronRight } from 'lucide-react';
+import { ArrowLeft, MessageCircle, Zap, MoreHorizontal, Radio, Loader2, AlertCircle, Copy, Check, ChevronRight } from 'lucide-react';
+import { RepostIcon } from '@/components/icons/RepostIcon';
 import { nip19 } from 'nostr-tools';
 import type { NostrEvent } from '@nostrify/nostrify';
 import { useNostr } from '@nostrify/react';
@@ -756,7 +757,7 @@ function PostDetailContent({ event }: { event: NostrEvent }) {
               className="flex items-center gap-1.5 p-2 rounded-full text-muted-foreground hover:text-green-500 hover:bg-green-500/10 transition-colors"
               title="Reposts"
             >
-              <Repeat2 className="size-5" />
+              <RepostIcon className="size-5" />
               {repostTotal ? <span className="text-sm tabular-nums">{repostTotal}</span> : null}
             </button>
           </RepostMenu>