From 4d19c6664ad5ec9a6dfd42b607b2b7ddd0c707c8 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Wed, 18 Feb 2026 02:17:36 -0600
Subject: [PATCH] Remove redundant "Trending" label, add sparkline to trends
 tab

- Sidebar: shows only "X posts" under each hashtag, no "Trending"
- Trends tab: each hashtag row now includes the sparkline graphic
- Exported TrendSparkline for reuse across components

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/RightSidebar.tsx | 10 ++++++----
 src/pages/SearchPage.tsx        | 12 ++++++++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/RightSidebar.tsx b/src/components/RightSidebar.tsx
index 0433b548..7d5019a9 100644
--- a/src/components/RightSidebar.tsx
+++ b/src/components/RightSidebar.tsx
@@ -28,7 +28,7 @@ function useIsXl(): boolean {
 }
 
 /** Small sparkline SVG for trending tags. */
-function TrendSparkline() {
+export function TrendSparkline() {
   // Generate a simple random-ish upward sparkline
   const points = useMemo(() => {
     const pts: string[] = [];
@@ -92,9 +92,11 @@ export function RightSidebar() {
               >
                 <div>
                   <div className="font-bold text-sm">#{item.tag}</div>
-                  <div className="text-xs text-muted-foreground">
-                    {item.count > 0 && <><span className="text-primary font-semibold">{item.count}</span> posts · </>}Trending
-                  </div>
+                  {item.count > 0 && (
+                    <div className="text-xs text-muted-foreground">
+                      <span className="text-primary font-semibold">{item.count}</span> posts
+                    </div>
+                  )}
                 </div>
                 <TrendSparkline />
               </Link>
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
index 14b1a47c..3e810eda 100644
--- a/src/pages/SearchPage.tsx
+++ b/src/pages/SearchPage.tsx
@@ -13,6 +13,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
 import { useSearchProfiles } from '@/hooks/useSearchProfiles';
 import { useStreamPosts } from '@/hooks/useStreamPosts';
+import { TrendSparkline } from '@/components/RightSidebar';
 import { useTrendingTags, useSortedPosts } from '@/hooks/useTrending';
 import { genUserName } from '@/lib/genUserName';
 import { cn, STICKY_HEADER_CLASS } from '@/lib/utils';
@@ -341,10 +342,13 @@ function TrendItem({ trend }: { trend: { tag: string; count: number } }) {
       to={`/t/${encodeURIComponent(trend.tag)}`}
       className="flex items-center justify-between px-4 py-2 hover:bg-secondary/30 transition-colors"
     >
-      <span className="font-bold text-[15px]">#{trend.tag}</span>
-      {trend.count > 0 && (
-        <span className="text-xs text-muted-foreground">{trend.count} posts</span>
-      )}
+      <div>
+        <div className="font-bold text-[15px]">#{trend.tag}</div>
+        {trend.count > 0 && (
+          <div className="text-xs text-muted-foreground">{trend.count} posts</div>
+        )}
+      </div>
+      <TrendSparkline />
     </Link>
   );
 }