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>
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user