From b45bd09c594d385c578d920e65c1426287fb03aa Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Jan 2026 12:49:35 +0000
Subject: [PATCH] Reorder CountViewer header controls and remove redundant
 mention prefix

- Change control order to: refresh, relays, filter (was: filter, relays, refresh)
- Remove redundant "@" prefix from mentions since UserName with isMention already shows @
---
 src/components/CountViewer.tsx | 101 ++++++++++++++++-----------------
 1 file changed, 50 insertions(+), 51 deletions(-)

diff --git a/src/components/CountViewer.tsx b/src/components/CountViewer.tsx
index 7a91fdb..e973f42 100644
--- a/src/components/CountViewer.tsx
+++ b/src/components/CountViewer.tsx
@@ -375,7 +375,6 @@ export default function CountViewer({
           {/* Mentions */}
           {pTagPubkeys.length > 0 && (
             <div className="flex items-center gap-1">
-              <span className="text-muted-foreground">@</span>
               {pTagPubkeys.slice(0, 2).map((pubkey) => (
                 <UserName
                   key={pubkey}
@@ -425,44 +424,23 @@ export default function CountViewer({
             )}
         </div>
 
-        {/* Right: Controls */}
+        {/* Right: Controls - refresh, relays, filter */}
         <div className="flex items-center gap-3 shrink-0">
-          {/* Filter Dropdown */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors">
-                <FilterIcon className="size-3" />
+          {/* Refresh Button */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={refresh}
+                disabled={loading}
+                className="text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
+              >
+                <RefreshCw
+                  className={`size-3 ${loading ? "animate-spin" : ""}`}
+                />
               </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-80 p-0">
-              <div className="p-3 space-y-3">
-                <FilterSummaryBadges filter={filter} />
-                <Collapsible>
-                  <CollapsibleTrigger className="flex items-center gap-2 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors w-full">
-                    <Code className="size-3" />
-                    Raw Query JSON
-                    <ChevronDown className="size-3 ml-auto" />
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <div className="relative mt-2">
-                      <SyntaxHighlight
-                        code={JSON.stringify(filter, null, 2)}
-                        language="json"
-                        className="bg-muted/50 p-3 pr-10 overflow-x-auto border border-border/40 rounded text-[11px]"
-                      />
-                      <CodeCopyButton
-                        onCopy={() =>
-                          handleCopy(JSON.stringify(filter, null, 2))
-                        }
-                        copied={copied}
-                        label="Copy query JSON"
-                      />
-                    </div>
-                  </CollapsibleContent>
-                </Collapsible>
-              </div>
-            </DropdownMenuContent>
-          </DropdownMenu>
+            </TooltipTrigger>
+            <TooltipContent>Refresh counts</TooltipContent>
+          </Tooltip>
 
           {/* Relay Dropdown with status */}
           <DropdownMenu>
@@ -542,21 +520,42 @@ export default function CountViewer({
             </DropdownMenuContent>
           </DropdownMenu>
 
-          {/* Refresh Button */}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={refresh}
-                disabled={loading}
-                className="text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
-              >
-                <RefreshCw
-                  className={`size-3 ${loading ? "animate-spin" : ""}`}
-                />
+          {/* Filter Dropdown */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors">
+                <FilterIcon className="size-3" />
               </button>
-            </TooltipTrigger>
-            <TooltipContent>Refresh counts</TooltipContent>
-          </Tooltip>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-80 p-0">
+              <div className="p-3 space-y-3">
+                <FilterSummaryBadges filter={filter} />
+                <Collapsible>
+                  <CollapsibleTrigger className="flex items-center gap-2 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors w-full">
+                    <Code className="size-3" />
+                    Raw Query JSON
+                    <ChevronDown className="size-3 ml-auto" />
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <div className="relative mt-2">
+                      <SyntaxHighlight
+                        code={JSON.stringify(filter, null, 2)}
+                        language="json"
+                        className="bg-muted/50 p-3 pr-10 overflow-x-auto border border-border/40 rounded text-[11px]"
+                      />
+                      <CodeCopyButton
+                        onCopy={() =>
+                          handleCopy(JSON.stringify(filter, null, 2))
+                        }
+                        copied={copied}
+                        label="Copy query JSON"
+                      />
+                    </div>
+                  </CollapsibleContent>
+                </Collapsible>
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       </div>