Skip to content

Leaderboard card list view touch-ups #1639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ragnep merged 6 commits into from
Dec 10, 2025
Merged

Leaderboard card list view touch-ups #1639

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e7bc54a
wip
ragnep Dec 9, 2025
725754e
Merge branch 'main' into leaderboard-card-list-view
ragnep Dec 10, 2025
a51ab31
wip
ragnep Dec 10, 2025
47621fa
wip
ragnep Dec 10, 2025
f0c1005
wip
ragnep Dec 10, 2025
1cc30c0
wip
ragnep Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 50 additions & 23 deletions components/brain/my-stream/votes/MyStreamWaveMyVote.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ import UserCICAndLevel, {
UserCICAndLevelSize,
} from "@/components/user/utils/UserCICAndLevel";
import { SingleWaveDropPosition } from "@/components/waves/drop/SingleWaveDropPosition";
import { cicToType } from "@/helpers/Helpers";
import { cicToType, formatNumberWithCommas } from "@/helpers/Helpers";
import Link from "next/link";
import UserProfileTooltipWrapper from "@/components/utils/tooltip/UserProfileTooltipWrapper";
import { ImageScale } from "@/helpers/image.helpers";
import { Tooltip } from "react-tooltip";

interface MyStreamWaveMyVoteProps {
readonly drop: ExtendedDrop;
Expand Down Expand Up @@ -100,13 +101,11 @@ const MyStreamWaveMyVote: React.FC<MyStreamWaveMyVoteProps> = ({
</div>

<div className="tw-flex tw-flex-col tw-flex-1 tw-min-w-0">
<div className="tw-flex tw-flex-col @md:tw-flex-row @sm:tw-flex-col tw-gap-y-2 tw-gap-x-3">
<div>
{drop.rank && <SingleWaveDropPosition rank={drop.rank} />}
</div>
<div className="tw-flex tw-items-center tw-justify-between tw-gap-x-3">
<h3 className="tw-text-base tw-font-semibold tw-text-iron-50 tw-mb-0">
{drop.title}
</h3>
{drop.rank && <SingleWaveDropPosition rank={drop.rank} />}
</div>
<div className="tw-flex tw-items-center tw-gap-2 tw-mt-4">
<div className="tw-size-6 tw-relative tw-flex-shrink-0 tw-rounded-md tw-overflow-hidden tw-ring-1 tw-ring-white/10 tw-bg-iron-800">
Expand Down Expand Up @@ -144,24 +143,52 @@ const MyStreamWaveMyVote: React.FC<MyStreamWaveMyVoteProps> = ({
<div onClick={(e) => e.stopPropagation()}>
<MyStreamWaveMyVoteVotes drop={drop} />
</div>
<div className="tw-flex tw-items-center tw-gap-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
aria-hidden="true"
viewBox="0 0 24 24"
strokeWidth="2"
stroke="currentColor"
className="tw-size-4 tw-text-iron-400 tw-flex-shrink-0"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
/>
</svg>
<span className="tw-text-sm tw-font-medium tw-text-iron-200">
{drop.raters_count}
<div className="tw-flex tw-items-center tw-gap-2">
<div className="tw-flex tw-items-center -tw-space-x-2">
{drop.top_raters?.slice(0, 3).map((voter) => (
<React.Fragment key={voter.profile.handle}>
<Link
href={`/${voter.profile.handle}`}
onClick={(e) => e.stopPropagation()}
data-tooltip-id={`my-vote-voter-${drop.id}-${voter.profile.handle}`}
>
{voter.profile.pfp ? (
<img
className="tw-w-6 tw-h-6 tw-rounded-md tw-border-2 tw-border-solid tw-border-[#111] tw-bg-iron-800 tw-object-contain"
src={voter.profile.pfp}
alt="Recent voter"
/>
) : (
<div className="tw-w-6 tw-h-6 tw-rounded-lg tw-border-2 tw-border-solid tw-border-[#111] tw-bg-iron-800" />
)}
Comment thread
ragnep marked this conversation as resolved.
</Link>
<Tooltip
id={`my-vote-voter-${drop.id}-${voter.profile.handle}`}
place="top"
offset={8}
opacity={1}
style={{
padding: "4px 8px",
background: "#37373E",
color: "white",
fontSize: "13px",
fontWeight: 500,
borderRadius: "6px",
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
zIndex: 99999,
pointerEvents: "none",
}}
>
{voter.profile.handle} - {formatNumberWithCommas(voter.rating)}
</Tooltip>
</React.Fragment>
))}
</div>
<span className="tw-text-white tw-font-bold tw-text-sm">
{formatNumberWithCommas(drop.raters_count)}{" "}
<span className="tw-text-iron-500 tw-font-normal">
{drop.raters_count === 1 ? "voter" : "voters"}
</span>
</span>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/brain/my-stream/votes/MyStreamWaveMyVoteVotes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const MyStreamWaveMyVoteVotes: React.FC<MyStreamWaveMyVoteVotesProps> = ({
return (
<div className="tw-flex tw-items-center tw-gap-x-1.5">
<span
className={`tw-text-sm tw-font-semibold ${
className={`tw-text-sm tw-font-bold tw-font-mono tw-tracking-tight ${
isPositive ? "tw-text-emerald-500" : "tw-text-rose-500"
}`}
>
Expand Down
8 changes: 4 additions & 4 deletions components/drops/view/utils/DropVoteProgressing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ export default function DropVoteProgressing({
arrowColor = "tw-text-iron-600";
} else {
color = isPositiveProgressing
? "tw-text-emerald-400 tw-bg-emerald-900/40 tw-px-1.5 tw-py-0.5 tw-rounded-md"
: "tw-text-rose-400 tw-bg-rose-900/40 tw-px-1.5 tw-py-0.5 tw-rounded-md";
arrowColor = isPositiveProgressing ? "tw-text-emerald-400" : "tw-text-rose-400";
? "tw-text-emerald-400 tw-bg-emerald-500/10 tw-px-2 tw-py-0.5 tw-rounded tw-border tw-border-solid tw-border-emerald-500/20 tw-font-mono"
: "tw-text-rose-400 tw-bg-rose-500/10 tw-px-2 tw-py-0.5 tw-rounded tw-border tw-border-solid tw-border-rose-500/20 tw-font-mono";
arrowColor = "tw-text-iron-600";
}

return (
Expand All @@ -52,7 +52,7 @@ export default function DropVoteProgressing({
icon={faArrowRight}
className={`tw-flex-shrink-0 tw-size-2.5 ${arrowColor}`}
/>
<span className={`tw-text-xs tw-font-medium ${color}`}>{formatNumberWithCommas(projected)}</span>
<span className={`${subtle ? 'tw-text-xs' : 'tw-text-sm'} tw-font-medium tw-tracking-tight ${color}`}>{formatNumberWithCommas(projected)}</span>
</span>
<Tooltip
id={`drop-vote-progress-${current}-${projected}`}
Expand Down
30 changes: 20 additions & 10 deletions components/memes/drops/MemeDropTrait.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import useIsMobileDevice from "@/hooks/isMobileDevice";
interface MemeDropTraitProps {
readonly label: string;
readonly value: string;
readonly dropId?: string;
}

const convertValue = (value: string) => {
Expand All @@ -24,33 +25,42 @@ const convertValue = (value: string) => {
return value;
};

const MemeDropTrait: React.FC<MemeDropTraitProps> = ({ label, value }) => {
const MemeDropTrait: React.FC<MemeDropTraitProps> = ({ label, value, dropId }) => {
const isMobile = useIsMobileDevice();
const convertedValue = convertValue(value);
const tooltipId = dropId ? `meme-drop-trait-${dropId}-${label}` : `meme-drop-trait-${label}`;

if (label === FIELD_TO_LABEL_MAP.pointsLoki) {
console.log(value, typeof value);
}

return (
<div className="tw-px-2 tw-py-1 tw-rounded-md tw-bg-iron-800 tw-flex tw-flex-col tw-gap-y-1.5">
<span className="tw-text-iron-400 tw-text-xs tw-mr-1.5 tw-font-normal">
{label}:
<div className="tw-bg-iron-900 tw-border tw-border-solid tw-border-white/10 tw-rounded-md tw-px-3 tw-py-1.5 tw-flex tw-flex-col">
<span className="tw-block tw-text-[9px] tw-uppercase tw-tracking-wider tw-text-iron-600 tw-font-bold tw-mb-0.5">
{label}
</span>
<>
<span
className="tw-text-iron-50 tw-text-sm tw-font-medium tw-truncate"
data-tooltip-id={`meme-drop-trait-${label}`}>
<span
className="tw-text-xs tw-text-iron-400 tw-truncate"
data-tooltip-id={tooltipId}>
{convertedValue}
</span>
{!isMobile && (
<Tooltip
id={`meme-drop-trait-${label}`}
id={tooltipId}
place="top"
offset={8}
opacity={1}
style={{
backgroundColor: "#1F2937",
color: "white",
padding: "4px 8px",
background: "#37373E",
color: "white",
fontSize: "13px",
fontWeight: 500,
borderRadius: "6px",
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
zIndex: 99999,
pointerEvents: "none",
}}>
<span className="tw-text-xs">{convertedValue}</span>
</Tooltip>
Expand Down
8 changes: 5 additions & 3 deletions components/memes/drops/MemeDropTraits.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const MemeDropTraits: React.FC<MemeDropTraitsProps> = ({ drop }) => {
};

return (
<div className="lg:tw-flex tw-flex-col tw-gap-2 tw-hidden tw-p-4">
<div className="lg:tw-flex tw-flex-col tw-gap-2 tw-hidden">
<div className="tw-grid tw-grid-cols-2 sm:tw-grid-cols-4 tw-gap-2">
{traits.slice(0, 2).map((trait) => (
<MemeDropTrait
Expand All @@ -49,6 +49,7 @@ const MemeDropTraits: React.FC<MemeDropTraitsProps> = ({ drop }) => {
]
}
value={trait.data_value ?? ""}
dropId={drop.id}
/>
))}

Expand All @@ -63,18 +64,19 @@ const MemeDropTraits: React.FC<MemeDropTraitsProps> = ({ drop }) => {
]
}
value={trait.data_value ?? ""}
dropId={drop.id}
/>
))}
<button
onClick={handleShowLess}
className="tw-text-xs tw-text-primary-400 desktop-hover:hover:tw-text-primary-300 tw-transition tw-duration-300 tw-ease-out tw-font-semibold tw-bg-transparent tw-border-0 tw-text-left">
className="tw-text-primary-400 tw-text-xs tw-text-left tw-font-medium desktop-hover:hover:tw-text-primary-300 tw-transition-colors tw-whitespace-nowrap tw-self-end tw-pb-1.5 tw-bg-transparent tw-border-0">
Show less
</button>
</>
) : (
<button
onClick={handleShowAll}
className="tw-text-xs tw-text-primary-400 desktop-hover:hover:tw-text-primary-300 tw-transition tw-duration-300 tw-ease-out tw-font-semibold tw-bg-transparent tw-border-0 tw-text-left">
className="tw-text-primary-400 tw-text-xs tw-text-left tw-font-medium desktop-hover:hover:tw-text-primary-300 tw-transition-colors tw-whitespace-nowrap tw-self-end tw-pb-1.5 tw-bg-transparent tw-border-0">
Show all
</button>
)}
Expand Down
2 changes: 1 addition & 1 deletion components/memes/drops/MemeWinnerDrop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default function MemeWinnerDrop({

// First place shadow class from DefaultWaveWinnerDrop
const firstPlaceShadow =
"tw-shadow-[inset_1px_0_0_#fbbf24,inset_0_1px_0_rgba(251,191,36,0.2),inset_-1px_0_0_rgba(251,191,36,0.2),inset_0_-1px_0_rgba(251,191,36,0.2)]";
"tw-shadow-[inset_1px_0_0_rgba(251,191,36,0.5),inset_0_1px_0_rgba(251,191,36,0.2),inset_-1px_0_0_rgba(251,191,36,0.2),inset_0_-1px_0_rgba(251,191,36,0.2)]";

return (
<div className="tw-w-full">
Expand Down
104 changes: 68 additions & 36 deletions components/memes/drops/MemesLeaderboardDrop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ import useLongPressInteraction from "@/hooks/useLongPressInteraction";
import CommonDropdownItemsMobileWrapper from "@/components/utils/select/dropdown/CommonDropdownItemsMobileWrapper";
import WaveDropMobileMenuDelete from "@/components/waves/drops/WaveDropMobileMenuDelete";
import WaveDropMobileMenuOpen from "@/components/waves/drops/WaveDropMobileMenuOpen";
import Link from "next/link";
import { formatNumberWithCommas } from "@/helpers/Helpers";

Comment thread
ragnep marked this conversation as resolved.
interface MemesLeaderboardDropProps {
readonly drop: ExtendedDrop;
Expand Down Expand Up @@ -68,39 +70,38 @@ export const MemesLeaderboardDrop: React.FC<MemesLeaderboardDropProps> = ({
<div {...touchHandlers}>
<MemesLeaderboardDropCard drop={drop}>
<div>
<div className="tw-p-4">
<div className="tw-flex tw-flex-col tw-gap-y-1">
<div className="tw-flex tw-items-center tw-justify-between">
<MemesLeaderboardDropArtistInfo drop={drop} />
<div className="tw-flex tw-items-center">
{!hasTouchScreen && (
<>
<div className="tw-h-8">
<WaveDropActionsOpen drop={drop} />
</div>
<div className="tw-h-8">
{canDelete && (
<WaveDropActionsOptions drop={drop} />
)}
</div>
</>
)}
</div>
</div>
<div className="tw-mt-1 sm:tw-mt-0 sm:tw-ml-[3.25rem]">
<MemesLeaderboardDropHeader title={title} />
<MemesLeaderboardDropDescription
description={description}
/>
{/* Artist info section with border */}
<div className="tw-p-4 tw-pb-3 tw-border-b tw-border-solid tw-border-x-0 tw-border-t-0 tw-border-white/5 tw-bg-iron-900/30">
<div className="tw-flex tw-items-start tw-justify-between tw-gap-4">
<MemesLeaderboardDropArtistInfo drop={drop} />
<div className="tw-flex tw-gap-2 tw-text-iron-400">
{!hasTouchScreen && (
<>
<WaveDropActionsOpen drop={drop} />
{canDelete && (
<WaveDropActionsOptions drop={drop} />
)}
</>
)}
</div>
</div>
</div>

{/* Title and Description */}
<div className="tw-px-4 tw-pt-4 tw-pb-4">
<div className="tw-space-y-1">
<MemesLeaderboardDropHeader title={title} />
<MemesLeaderboardDropDescription
description={description}
/>
</div>
</div>

{artworkMedia && (
<div
className={`tw-flex tw-justify-center tw-h-96 ${
location === DropLocation.WAVE
? "tw-bg-iron-800/30"
? "bg-iron-950"
: "tw-bg-iron-900/40"
}`}>
<DropListItemContentMedia
Expand All @@ -110,9 +111,12 @@ export const MemesLeaderboardDrop: React.FC<MemesLeaderboardDropProps> = ({
/>
</div>
)}
<MemeDropTraits drop={drop} />
<div className="tw-mt-4 lg:tw-mt-0 tw-flex tw-flex-col tw-gap-y-2 @[700px]:tw-flex-row tw-justify-between @[700px]:tw-pb-4 @[700px]:tw-px-4 @[700px]:tw-items-center">
<div className="tw-px-6 @[700px]:tw-px-0">

{/* Footer Section: Traits + Vote Summary + Vote Button */}
<div className="tw-p-4 tw-mt-4 tw-border-t tw-border-solid tw-border-x-0 tw-border-b-0 tw-border-white/5 tw-bg-iron-900/30 tw-space-y-4">
<MemeDropTraits drop={drop} />

<div className="tw-flex tw-flex-col @[700px]:tw-flex-row @[700px]:tw-items-center tw-justify-between tw-gap-4">
<MemesLeaderboardDropVoteSummary
current={drop.rating}
projected={drop.rating_prediction}
Expand All @@ -121,15 +125,43 @@ export const MemesLeaderboardDrop: React.FC<MemesLeaderboardDropProps> = ({
topVoters={firstThreeVoters}
userContext={drop.context_profile_context}
/>
</div>

<div
className="tw-pt-4 tw-pb-4 tw-px-6 tw-flex tw-justify-center @[700px]:tw-pt-0 @[700px]:tw-pb-0 @[700px]:tw-px-0 tw-w-full @[700px]:tw-w-auto tw-border-t tw-border-solid tw-border-iron-800 @[700px]:tw-border-none tw-border-x-0 tw-border-b-0"
onClick={(e) => e.stopPropagation()}>
<VotingModalButton
drop={drop}
onClick={() => setIsVotingModalOpen(true)}
/>
<div
className="tw-flex tw-w-full @[700px]:tw-w-auto tw-items-center tw-justify-between @[700px]:tw-justify-end tw-gap-4 tw-flex-shrink-0"
onClick={(e) => e.stopPropagation()}>
{/* Voters - only on small containers */}
<div className="tw-flex @[700px]:tw-hidden tw-items-center tw-gap-2">
<div className="tw-flex tw-items-center -tw-space-x-2">
{firstThreeVoters.map((voter) => (
<Link
key={voter.profile.handle}
href={`/${voter.profile.handle}`}
onClick={(e) => e.stopPropagation()}
>
{voter.profile.pfp ? (
<img
className="tw-w-6 tw-h-6 tw-rounded-md tw-border-2 tw-border-solid tw-border-[#111] tw-bg-iron-800 tw-object-contain"
src={voter.profile.pfp}
alt="Recent voter"
/>
) : (
<div className="tw-w-6 tw-h-6 tw-rounded-lg tw-border-2 tw-border-solid tw-border-[#111] tw-bg-iron-800" />
)}
</Link>
))}
</div>
<span className="tw-text-white tw-font-bold tw-text-xs">
{formatNumberWithCommas(drop.raters_count)}{" "}
<span className="tw-text-iron-500 tw-font-normal">
{drop.raters_count === 1 ? "voter" : "voters"}
</span>
</span>
</div>
<VotingModalButton
drop={drop}
onClick={() => setIsVotingModalOpen(true)}
/>
</div>
</div>
</div>
</div>
Expand Down
Loading