From 883cfe20f2a772a3634e3a05a418fd9e6ea533b8 Mon Sep 17 00:00:00 2001
From: ragnep <ragneinfo@gmail.com>
Date: Thu, 11 Dec 2025 14:07:45 +0200
Subject: [PATCH 1/6] wip

Signed-off-by: ragnep <ragneinfo@gmail.com>
---
 .../memes/drops/MemesLeaderboardDrop.tsx      |   2 +-
 .../drops/MemesLeaderboardDropArtistInfo.tsx  |  23 ++-
 .../MemeDropArtistInfo.tsx                    |  21 ++-
 components/utils/button/ActionButton.tsx      |  36 ++++
 components/utils/button/SecondaryButton.tsx   |   8 +-
 .../waves/drop/SingleWaveDropAuthor.tsx       | 103 ++++++++---
 components/waves/drops/ArtistPreviewModal.tsx |   6 +-
 components/waves/drops/DropItemChat.tsx       |   2 +-
 components/waves/drops/WaveDropHeader.tsx     |  32 +---
 components/waves/list/WaveItem.tsx            | 168 +++++++++---------
 components/waves/list/WaveItemDropped.tsx     |   4 +-
 components/waves/list/WaveItemFollow.tsx      |  86 +++++----
 .../waves/list/header/WavesListHeader.tsx     |  68 +++----
 13 files changed, 310 insertions(+), 249 deletions(-)
 create mode 100644 components/utils/button/ActionButton.tsx

diff --git a/components/memes/drops/MemesLeaderboardDrop.tsx b/components/memes/drops/MemesLeaderboardDrop.tsx
index 697edf2764..675203ea4e 100644
--- a/components/memes/drops/MemesLeaderboardDrop.tsx
+++ b/components/memes/drops/MemesLeaderboardDrop.tsx
@@ -113,7 +113,7 @@ export const MemesLeaderboardDrop: React.FC<MemesLeaderboardDropProps> = ({
               )}
 
               {/* 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">
+              <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-flex tw-flex-col tw-gap-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">
diff --git a/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx b/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
index 3ad0355103..efe4467086 100644
--- a/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
+++ b/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
@@ -13,6 +13,7 @@ import WaveDropTime from "@/components/waves/drops/time/WaveDropTime";
 import UserProfileTooltipWrapper from "@/components/utils/tooltip/UserProfileTooltipWrapper";
 import { ArtistSubmissionBadge } from "@/components/waves/drops/ArtistSubmissionBadge";
 import { ArtistPreviewModal } from "@/components/waves/drops/ArtistPreviewModal";
+import { ProfileWinnerBadge } from "@/components/waves/drops/ProfileWinnerBadge";
 
 interface MemesLeaderboardDropArtistInfoProps {
   readonly drop: ExtendedDrop;
@@ -22,11 +23,17 @@ const MemesLeaderboardDropArtistInfo: React.FC<
   MemesLeaderboardDropArtistInfoProps
 > = ({ drop }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  
+  const [modalInitialTab, setModalInitialTab] = useState<"active" | "winners">("active");
+
   const submissionCount = drop.author.active_main_stage_submission_ids?.length || 0;
   const hasSubmissions = submissionCount > 0;
 
-  const handleSubmissionBadgeClick = () => {
+  // Check if this drop author has any main stage winner drop IDs
+  const winnerCount = drop.author.winner_main_stage_drop_ids?.length || 0;
+  const isWinner = winnerCount > 0;
+
+  const handleBadgeClick = (tab: "active" | "winners") => {
+    setModalInitialTab(tab);
     setIsModalOpen(true);
   };
 
@@ -71,10 +78,17 @@ const MemesLeaderboardDropArtistInfo: React.FC<
             </Link>
           )}
 
+          {isWinner && (
+            <ProfileWinnerBadge
+              winCount={winnerCount}
+              onBadgeClick={() => handleBadgeClick("winners")}
+              tooltipId={`leaderboard-winner-badge-${drop.id}`}
+            />
+          )}
           {hasSubmissions && (
             <ArtistSubmissionBadge
               submissionCount={submissionCount}
-              onBadgeClick={handleSubmissionBadgeClick}
+              onBadgeClick={() => handleBadgeClick("active")}
               tooltipId={`leaderboard-badge-${drop.id}`}
             />
           )}
@@ -95,11 +109,12 @@ const MemesLeaderboardDropArtistInfo: React.FC<
         </div>
       </div>
 
-      {/* Artist Submission Preview Modal */}
+      {/* Artist Preview Modal */}
       <ArtistPreviewModal
         isOpen={isModalOpen}
         onClose={handleModalClose}
         user={drop.author}
+        initialTab={modalInitialTab}
       />
     </div>
   );
diff --git a/components/memes/drops/meme-participation-drop/MemeDropArtistInfo.tsx b/components/memes/drops/meme-participation-drop/MemeDropArtistInfo.tsx
index 9109caed14..a7c0b27031 100644
--- a/components/memes/drops/meme-participation-drop/MemeDropArtistInfo.tsx
+++ b/components/memes/drops/meme-participation-drop/MemeDropArtistInfo.tsx
@@ -21,15 +21,17 @@ interface MemeDropArtistInfoProps {
 
 export default function MemeDropArtistInfo({ drop }: MemeDropArtistInfoProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  
+  const [modalInitialTab, setModalInitialTab] = useState<"active" | "winners">("active");
+
   const submissionCount = drop.author.active_main_stage_submission_ids?.length || 0;
   const hasSubmissions = submissionCount > 0;
 
   // Check if this drop author has any main stage winner drop IDs
-  const isWinner = drop.author.winner_main_stage_drop_ids && 
-                   drop.author.winner_main_stage_drop_ids.length > 0;
+  const winnerCount = drop.author.winner_main_stage_drop_ids?.length || 0;
+  const isWinner = winnerCount > 0;
 
-  const handleSubmissionBadgeClick = () => {
+  const handleBadgeClick = (tab: "active" | "winners") => {
+    setModalInitialTab(tab);
     setIsModalOpen(true);
   };
 
@@ -67,14 +69,16 @@ export default function MemeDropArtistInfo({ drop }: MemeDropArtistInfoProps) {
             )}
           </Link>
           {isWinner && (
-            <ProfileWinnerBadge 
-              winCount={1}
+            <ProfileWinnerBadge
+              winCount={winnerCount}
+              onBadgeClick={() => handleBadgeClick("winners")}
+              tooltipId={`meme-winner-badge-${drop.id}`}
             />
           )}
           {hasSubmissions && (
             <ArtistSubmissionBadge
               submissionCount={submissionCount}
-              onBadgeClick={handleSubmissionBadgeClick}
+              onBadgeClick={() => handleBadgeClick("active")}
               tooltipId={`meme-badge-${drop.id}`}
             />
           )}
@@ -98,11 +102,12 @@ export default function MemeDropArtistInfo({ drop }: MemeDropArtistInfoProps) {
         )}
       </div>
       
-      {/* Artist Submission Preview Modal */}
+      {/* Artist Preview Modal */}
       <ArtistPreviewModal
         isOpen={isModalOpen}
         onClose={handleModalClose}
         user={drop.author}
+        initialTab={modalInitialTab}
       />
     </div>
   );
diff --git a/components/utils/button/ActionButton.tsx b/components/utils/button/ActionButton.tsx
new file mode 100644
index 0000000000..264068eae0
--- /dev/null
+++ b/components/utils/button/ActionButton.tsx
@@ -0,0 +1,36 @@
+import CircleLoader from "@/components/distribution-plan-tool/common/CircleLoader";
+
+interface ActionButtonProps {
+  readonly onClicked: () => void;
+  readonly children: React.ReactNode;
+  readonly size?: "default" | "sm";
+  readonly disabled?: boolean;
+  readonly loading?: boolean;
+}
+
+export default function ActionButton({
+  onClicked,
+  children,
+  size = "default",
+  disabled = false,
+  loading = false,
+}: ActionButtonProps) {
+  const sizeClasses =
+    size === "sm"
+      ? "tw-px-2.5 tw-py-1.5"
+      : "tw-px-3.5 tw-py-2.5";
+
+  return (
+    <button
+      type="button"
+      disabled={disabled || loading}
+      onClick={disabled || loading ? undefined : onClicked}
+      className={`tw-border tw-border-solid tw-border-primary-500 tw-ring-1 tw-ring-primary-500 tw-rounded-md tw-bg-primary-500 ${sizeClasses} tw-text-sm tw-font-semibold tw-text-white tw-flex tw-items-center tw-justify-center tw-gap-x-1.5 tw-shadow-sm focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-primary-600 tw-transition tw-duration-300 tw-ease-out hover:tw-bg-primary-600 hover:tw-border-primary-600 hover:tw-ring-primary-600 ${
+        disabled || loading ? "tw-cursor-not-allowed tw-opacity-50" : ""
+      }`}
+    >
+      {loading && <CircleLoader />}
+      {children}
+    </button>
+  );
+}
diff --git a/components/utils/button/SecondaryButton.tsx b/components/utils/button/SecondaryButton.tsx
index 980bca4011..1c7295f838 100644
--- a/components/utils/button/SecondaryButton.tsx
+++ b/components/utils/button/SecondaryButton.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import CircleLoader from "@/components/distribution-plan-tool/common/CircleLoader";
 
 interface SecondaryButtonProps {
@@ -21,8 +19,8 @@ export default function SecondaryButton({
 }: SecondaryButtonProps) {
   const sizeClasses =
     size === "sm"
-      ? "tw-px-2.5 tw-py-1.5 tw-text-xs"
-      : "tw-px-3.5 tw-py-2.5 tw-text-sm";
+      ? "tw-px-2.5 tw-py-1.5"
+      : "tw-px-3.5 tw-py-2.5";
 
   return (
     <button
@@ -31,7 +29,7 @@ export default function SecondaryButton({
       className={`tw-border tw-border-solid ${disabled || loading
           ? "tw-border-iron-900 tw-cursor-not-allowed"
           : "tw-border-iron-800 hover:tw-ring-iron-650 hover:tw-bg-iron-700 hover:tw-border-iron-700"
-        } tw-ring-1 tw-ring-iron-700 tw-rounded-lg tw-bg-iron-800 ${sizeClasses} tw-font-semibold ${disabled || loading ? "tw-text-iron-600" : "tw-text-iron-300"
+        } tw-ring-1 tw-ring-iron-700 tw-rounded-md tw-bg-iron-800 ${sizeClasses} tw-text-sm tw-font-semibold ${disabled || loading ? "tw-text-iron-600" : "tw-text-iron-300"
         } tw-flex tw-items-center tw-justify-center tw-gap-x-2 tw-shadow-sm focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-iron-700 tw-transition tw-duration-300 tw-ease-out ${className}`}
       onClick={disabled || loading ? undefined : onClicked}
     >
diff --git a/components/waves/drop/SingleWaveDropAuthor.tsx b/components/waves/drop/SingleWaveDropAuthor.tsx
index 6366f6cb2a..2edfa0d02d 100644
--- a/components/waves/drop/SingleWaveDropAuthor.tsx
+++ b/components/waves/drop/SingleWaveDropAuthor.tsx
@@ -1,4 +1,6 @@
-import React from "react";
+"use client";
+
+import React, { useState } from "react";
 import { ApiDrop } from "@/generated/models/ObjectSerializer";
 import Link from "next/link";
 import UserCICAndLevel, {
@@ -6,6 +8,9 @@ import UserCICAndLevel, {
 } from "@/components/user/utils/UserCICAndLevel";
 import { cicToType } from "@/helpers/Helpers";
 import UserProfileTooltipWrapper from "@/components/utils/tooltip/UserProfileTooltipWrapper";
+import { ArtistSubmissionBadge } from "@/components/waves/drops/ArtistSubmissionBadge";
+import { ProfileWinnerBadge } from "@/components/waves/drops/ProfileWinnerBadge";
+import { ArtistPreviewModal } from "@/components/waves/drops/ArtistPreviewModal";
 
 interface SingleWaveDropAuthorProps {
   readonly drop: ApiDrop;
@@ -14,33 +19,77 @@ interface SingleWaveDropAuthorProps {
 export const SingleWaveDropAuthor: React.FC<SingleWaveDropAuthorProps> = ({
   drop,
 }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalInitialTab, setModalInitialTab] = useState<"active" | "winners">("active");
+
+  const submissionCount = drop.author.active_main_stage_submission_ids?.length || 0;
+  const hasSubmissions = submissionCount > 0;
+
+  const winnerCount = drop.author.winner_main_stage_drop_ids?.length || 0;
+  const isWinner = winnerCount > 0;
+
+  const handleBadgeClick = (tab: "active" | "winners") => {
+    setModalInitialTab(tab);
+    setIsModalOpen(true);
+  };
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+  };
+
   return (
-    <Link
-      href={`/${drop.author.handle}`}
-      className="tw-flex tw-items-center tw-gap-x-3 tw-no-underline desktop-hover:hover:tw-underline"
-    >
-      {drop.author.pfp ? (
-        <img
-          className="tw-size-10 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-white/10 tw-object-contain tw-bg-iron-900"
-          src={drop.author.pfp}
-          alt="User avatar"
-        />
-      ) : (
-        <div className="tw-size-10 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-white/10 tw-bg-iron-800" />
-      )}
-      <div className="tw-flex tw-items-center tw-gap-x-2">
-        <UserCICAndLevel
-          level={drop.author.level}
-          cicType={cicToType(drop.author.cic)}
-          size={UserCICAndLevelSize.SMALL}
-        />
-
-        <UserProfileTooltipWrapper user={drop.author.handle ?? drop.author.id}>
-          <span className="tw-text-md tw-font-medium tw-text-iron-200 desktop-hover:hover:tw-text-opacity-80">
-            {drop.author.handle}
-          </span>
-        </UserProfileTooltipWrapper>
+    <>
+      <div className="tw-flex tw-items-center tw-gap-x-3">
+        <Link
+          href={`/${drop.author.handle}`}
+          className="tw-flex tw-items-center tw-gap-x-3 tw-no-underline desktop-hover:hover:tw-underline"
+        >
+          {drop.author.pfp ? (
+            <img
+              className="tw-size-10 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-white/10 tw-object-contain tw-bg-iron-900"
+              src={drop.author.pfp}
+              alt="User avatar"
+            />
+          ) : (
+            <div className="tw-size-10 tw-rounded-md tw-ring-1 tw-ring-inset tw-ring-white/10 tw-bg-iron-800" />
+          )}
+          <div className="tw-flex tw-items-center tw-gap-x-2">
+            <UserCICAndLevel
+              level={drop.author.level}
+              cicType={cicToType(drop.author.cic)}
+              size={UserCICAndLevelSize.SMALL}
+            />
+
+            <UserProfileTooltipWrapper user={drop.author.handle ?? drop.author.id}>
+              <span className="tw-text-md tw-font-medium tw-text-iron-200 desktop-hover:hover:tw-text-opacity-80">
+                {drop.author.handle}
+              </span>
+            </UserProfileTooltipWrapper>
+          </div>
+        </Link>
+        {isWinner && (
+          <ProfileWinnerBadge
+            winCount={winnerCount}
+            onBadgeClick={() => handleBadgeClick("winners")}
+            tooltipId={`single-drop-winner-badge-${drop.id}`}
+          />
+        )}
+        {hasSubmissions && (
+          <ArtistSubmissionBadge
+            submissionCount={submissionCount}
+            onBadgeClick={() => handleBadgeClick("active")}
+            tooltipId={`single-drop-badge-${drop.id}`}
+          />
+        )}
       </div>
-    </Link>
+
+      {/* Artist Preview Modal */}
+      <ArtistPreviewModal
+        isOpen={isModalOpen}
+        onClose={handleModalClose}
+        user={drop.author}
+        initialTab={modalInitialTab}
+      />
+    </>
   );
 };
diff --git a/components/waves/drops/ArtistPreviewModal.tsx b/components/waves/drops/ArtistPreviewModal.tsx
index 468e765ae3..b26e84fcbb 100644
--- a/components/waves/drops/ArtistPreviewModal.tsx
+++ b/components/waves/drops/ArtistPreviewModal.tsx
@@ -91,13 +91,11 @@ export const ArtistPreviewModal: React.FC<
           leaveFrom="tw-opacity-100"
           leaveTo="tw-opacity-0"
         >
-          { }
-          <div className="tw-fixed tw-inset-0 tw-bg-gray-600 tw-bg-opacity-50 tw-backdrop-blur-[1px]" onClick={onClose} />
+          <div className="tw-fixed tw-inset-0 tw-bg-gray-600 tw-bg-opacity-50 tw-backdrop-blur-[1px]" onClick={(e) => { e.stopPropagation(); onClose(); }} />
         </Transition.Child>
 
         {/* Desktop modal */}
-        { }
-        <div className="tw-fixed tw-inset-0 tw-z-[100] tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 hover:tw-scrollbar-thumb-iron-300 tw-hidden sm:tw-block" onClick={onClose}>
+        <div className="tw-fixed tw-inset-0 tw-z-[100] tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 hover:tw-scrollbar-thumb-iron-300 tw-hidden sm:tw-block" onClick={(e) => { e.stopPropagation(); onClose(); }}>
           <div className="tw-flex tw-min-h-full tw-items-center tw-justify-center tw-p-4">
             <Transition.Child
               as={Fragment}
diff --git a/components/waves/drops/DropItemChat.tsx b/components/waves/drops/DropItemChat.tsx
index 1ef425dab8..fcb2eaca77 100644
--- a/components/waves/drops/DropItemChat.tsx
+++ b/components/waves/drops/DropItemChat.tsx
@@ -31,7 +31,7 @@ export default function DropItemChat({
       <div className="tw-flex-1 tw-min-w-0">
         <div className="tw-rounded-xl tw-border tw-border-solid tw-border-iron-700 tw-p-4">
           <div className="tw-flex tw-flex-row tw-items-center tw-gap-x-3">
-            <h3 className="tw-text-lg tw-font-semibold tw-text-iron-100 tw-mb-0">
+            <h3 className="tw-text-base sm:tw-text-lg tw-font-semibold tw-text-iron-100 tw-mb-0">
               <Link className="tw-no-underline" href={relativeLink}>
                 {title}
               </Link>
diff --git a/components/waves/drops/WaveDropHeader.tsx b/components/waves/drops/WaveDropHeader.tsx
index bd9375f3ea..8691aaf787 100644
--- a/components/waves/drops/WaveDropHeader.tsx
+++ b/components/waves/drops/WaveDropHeader.tsx
@@ -34,7 +34,7 @@ const WaveDropHeader: React.FC<WaveDropHeaderProps> = ({
 }) => {
   const router = useRouter();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isWinnerModalOpen, setIsWinnerModalOpen] = useState(false);
+  const [modalInitialTab, setModalInitialTab] = useState<"active" | "winners">("active");
 
   // Memoize expensive computations
   const cicType = useMemo(() => cicToType(drop.author.cic), [drop.author.cic]);
@@ -60,7 +60,8 @@ const WaveDropHeader: React.FC<WaveDropHeaderProps> = ({
     router.push(path);
   }, [router]);
 
-  const handleSubmissionBadgeClick = useCallback(() => {
+  const handleBadgeClick = useCallback((tab: "active" | "winners") => {
+    setModalInitialTab(tab);
     setIsModalOpen(true);
   }, []);
 
@@ -68,14 +69,6 @@ const WaveDropHeader: React.FC<WaveDropHeaderProps> = ({
     setIsModalOpen(false);
   }, []);
 
-  const handleWinnerBadgeClick = useCallback(() => {
-    setIsWinnerModalOpen(true);
-  }, []);
-
-  const handleWinnerModalClose = useCallback(() => {
-    setIsWinnerModalOpen(false);
-  }, []);
-
   return (
     <>
       <div className="tw-flex tw-items-center tw-justify-between tw-gap-x-2">
@@ -103,14 +96,14 @@ const WaveDropHeader: React.FC<WaveDropHeaderProps> = ({
             {hasSubmissions && (
               <ArtistSubmissionBadge
                 submissionCount={submissionCount}
-                onBadgeClick={handleSubmissionBadgeClick}
+                onBadgeClick={() => handleBadgeClick("active")}
                 tooltipId={`header-badge-${drop.id}`}
               />
             )}
             {isWinner && (
-              <ProfileWinnerBadge 
-                winCount={1} 
-                onBadgeClick={handleWinnerBadgeClick}
+              <ProfileWinnerBadge
+                winCount={1}
+                onBadgeClick={() => handleBadgeClick("winners")}
                 tooltipId={`winner-badge-${drop.id}`}
               />
             )}
@@ -153,19 +146,12 @@ const WaveDropHeader: React.FC<WaveDropHeaderProps> = ({
         </div>
       )}
 
-      {/* Artist Submission Preview Modal */}
+      {/* Artist Preview Modal */}
       <ArtistPreviewModal
         isOpen={isModalOpen}
         onClose={handleModalClose}
         user={drop.author}
-      />
-
-      {/* Winner Artworks Modal */}
-      <ArtistPreviewModal
-        isOpen={isWinnerModalOpen}
-        onClose={handleWinnerModalClose}
-        user={drop.author}
-        initialTab="winners"
+        initialTab={modalInitialTab}
       />
     </>
   );
diff --git a/components/waves/list/WaveItem.tsx b/components/waves/list/WaveItem.tsx
index eb36d6f561..8a51cd2b18 100644
--- a/components/waves/list/WaveItem.tsx
+++ b/components/waves/list/WaveItem.tsx
@@ -34,7 +34,7 @@ const LEVEL_CLASSES: ReadonlyArray<{
 
 const DEFAULT_LEVEL_CLASS = LEVEL_CLASSES.at(-1)?.classes ?? "";
 const CARD_BASE_CLASSES =
-  "tw-@container/wave tw-group tw-rounded-xl tw-border tw-border-solid tw-border-white/10 tw-bg-iron-950 tw-backdrop-blur-sm tw-p-2.5 tw-shadow-sm tw-shadow-black/20 tw-transition-all tw-duration-300 tw-ease-out";
+  "tw-@container/wave tw-group tw-rounded-xl tw-ring-1 tw-ring-inset tw-ring-white/10 tw-bg-iron-950 tw-backdrop-blur-sm tw-shadow-sm tw-shadow-black/20 tw-transition-all tw-duration-300 tw-ease-out";
 const CARD_INTERACTIVE_CLASSES =
   "tw-cursor-pointer desktop-hover:hover:tw-shadow-lg desktop-hover:hover:tw-shadow-black/40 desktop-hover:hover:tw-translate-y-[-1px] focus-visible:tw-ring-2 focus-visible:tw-ring-primary-500 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-offset-iron-900 focus-visible:tw-outline-none";
 
@@ -124,9 +124,8 @@ function getCardLabel(href?: string, label?: string | null) {
 
 function resolveLevelClasses(level?: number | null) {
   return (
-    LEVEL_CLASSES.find(
-      (levelClass) => levelClass.minLevel <= (level ?? 0)
-    )?.classes ?? DEFAULT_LEVEL_CLASS
+    LEVEL_CLASSES.find((levelClass) => levelClass.minLevel <= (level ?? 0))
+      ?.classes ?? DEFAULT_LEVEL_CLASS
   );
 }
 
@@ -172,7 +171,7 @@ export default function WaveItem({
     <>
       <UserGroupIcon
         aria-hidden="true"
-        className="tw-h-5 tw-w-5 tw-flex-shrink-0 tw-text-iron-400"
+        className="tw-h-4 tw-w-4 tw-flex-shrink-0 tw-text-iron-400"
       />
       <span className="tw-font-medium">
         {numberWithCommas(wave?.metrics.subscribers_count ?? 0)}
@@ -184,10 +183,8 @@ export default function WaveItem({
   const authorAvatar = author?.pfp ? (
     <img
       className="tw-h-full tw-w-full tw-rounded-md tw-object-cover tw-bg-iron-800 tw-ring-1 tw-ring-white/10 desktop-hover:group-hover/author:tw-ring-white/30 desktop-hover:group-hover/author:tw-ring-offset-1 desktop-hover:group-hover/author:tw-ring-offset-iron-950 tw-transition tw-duration-300 tw-ease-out"
-      src={getScaledImageUri(author.pfp, ImageScale.W_AUTO_H_50)}
-      alt={
-        author?.handle ? `${author.handle} avatar` : "Author avatar"
-      }
+      src={getScaledImageUri(author.pfp, ImageScale.W_200_H_200)}
+      alt={author?.handle ? `${author.handle} avatar` : "Author avatar"}
       loading="lazy"
       decoding="async"
     />
@@ -199,17 +196,18 @@ export default function WaveItem({
     <div
       className={`${resolveLevelClasses(
         author?.level
-      )} tw-border-none tw-inline-flex tw-items-center tw-rounded-xl tw-bg-transparent tw-px-2 tw-py-1 tw-font-semibold tw-ring-2 tw-ring-inset tw-text-[0.625rem] tw-leading-3`}
+      )} tw-border-none tw-inline-flex tw-items-center tw-rounded-xl tw-bg-transparent tw-px-2 tw-py-1 tw-font-semibold tw-ring-2 tw-ring-inset tw-text-[0.625rem] tw-leading-3 tw-whitespace-nowrap`}
     >
       Level {authorLevel}
     </div>
   );
 
   const authorWrapperClass =
-    "tw-mt-1 tw-group/author tw-flex tw-flex-wrap tw-items-center tw-gap-x-2 tw-gap-y-1";
+    "tw-group/author tw-flex tw-items-center tw-transition-opacity hover:tw-opacity-80";
   const linkedAuthorNameClass =
-    "tw-text-sm tw-font-semibold tw-text-white desktop-hover:group-hover/author:tw-text-iron-400 tw-transition tw-duration-300 tw-ease-out";
-  const staticAuthorNameClass = "tw-text-sm tw-font-semibold tw-text-white";
+    "tw-text-sm tw-font-bold tw-text-white tw-truncate tw-min-w-0";
+  const staticAuthorNameClass =
+    "tw-text-sm tw-font-bold tw-text-white tw-truncate tw-min-w-0";
 
   const handleAuthorClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
@@ -244,9 +242,9 @@ export default function WaveItem({
   let authorSection: ReactNode;
   if (!wave) {
     authorSection = (
-      <span className="tw-flex tw-flex-wrap tw-items-center tw-gap-x-2 tw-gap-y-1">
-        <div className="tw-h-6 tw-w-6 tw-flex-shrink-0 tw-rounded-md tw-bg-iron-800 tw-ring-1 tw-ring-iron-700" />
-        <span className="tw-text-sm tw-font-semibold tw-text-white">
+      <span className="tw-group/author tw-flex tw-items-center tw-transition-opacity hover:tw-opacity-80">
+        <div className="tw-h-8 tw-w-8 tw-relative tw-flex-shrink-0 tw-rounded-md tw-bg-iron-800 tw-ring-1 tw-ring-iron-700 tw-mr-3" />
+        <span className="tw-text-sm tw-font-bold tw-text-white tw-truncate tw-max-w-[120px]">
           {userPlaceholder}
         </span>
       </span>
@@ -258,28 +256,26 @@ export default function WaveItem({
         data-wave-item-interactive="true"
         onClick={handleAuthorClick}
         onAuxClick={handleAuthorAuxClick}
-        className={`${authorWrapperClass} tw-cursor-pointer tw-no-underline tw-bg-transparent tw-border-none tw-p-0 tw-text-left`}
+        className={`${authorWrapperClass} tw-cursor-pointer tw-bg-transparent tw-border-none tw-p-0 tw-text-left tw-relative tw-z-10 tw-min-w-0`}
         aria-label={
-          author?.handle
-            ? `View @${author.handle}`
-            : "View author profile"
+          author?.handle ? `View @${author.handle}` : "View author profile"
         }
       >
-        <div className="tw-h-6 tw-w-6 tw-flex-shrink-0">{authorAvatar}</div>
+        <div className="tw-h-8 tw-w-8 tw-relative tw-flex-shrink-0 tw-mr-3">{authorAvatar}</div>
         <span className={linkedAuthorNameClass}>
           {author?.handle ?? userPlaceholder}
         </span>
-        {authorLevelBadge}
+        <div className="tw-ml-1.5 tw-flex tw-items-center">{authorLevelBadge}</div>
       </button>
     );
   } else {
     authorSection = (
-      <div className={authorWrapperClass}>
-        <div className="tw-h-6 tw-w-6 tw-flex-shrink-0">{authorAvatar}</div>
+      <div className={`${authorWrapperClass} tw-min-w-0`}>
+        <div className="tw-h-8 tw-w-8 tw-relative tw-flex-shrink-0 tw-mr-3">{authorAvatar}</div>
         <span className={staticAuthorNameClass}>
           {author?.handle ?? userPlaceholder}
         </span>
-        {authorLevelBadge}
+        <div className="tw-ml-1.5 tw-flex tw-items-center">{authorLevelBadge}</div>
       </div>
     );
   }
@@ -326,7 +322,7 @@ export default function WaveItem({
       onClick={handleCardClick}
       onKeyDown={handleCardKeyDown}
     >
-      <div className="tw-relative tw-overflow-hidden tw-rounded-xl tw-aspect-[16/8.5] sm:tw-aspect-[16/9]">
+      <div className="tw-relative tw-overflow-hidden tw-rounded-t-xl tw-aspect-[16/8.5] sm:tw-aspect-[16/9] tw-border tw-border-solid tw-border-b-0 tw-border-white/[0.003]">
         <div
           className="tw-absolute tw-inset-0 tw-rounded-xl"
           style={{
@@ -343,17 +339,11 @@ export default function WaveItem({
             className="tw-absolute tw-inset-0 tw-h-full tw-w-full tw-object-cover tw-transition-transform tw-duration-500 tw-will-change-transform desktop-hover:group-hover:tw-scale-[1.015]"
           />
         )}
-        <div
-          className="tw-pointer-events-none tw-absolute tw-inset-x-0 tw-bottom-0 tw-h-36 sm:tw-h-44 md:tw-h-48"
-          style={{
-            background:
-              "linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.64) 32%, rgba(0,0,0,0.30) 64%, rgba(0,0,0,0.00) 100%)",
-          }}
-        />
+         <div className="tw-absolute tw-inset-0 tw-bg-gradient-to-t tw-from-black/90 tw-via-black/40 tw-to-transparent" />
         <div className="tw-absolute tw-inset-x-0 tw-bottom-0 tw-flex tw-items-end tw-justify-between tw-gap-3">
-          <div className="tw-flex tw-min-w-0 tw-items-end tw-px-3 tw-pb-3">
+          <div className="tw-flex tw-min-w-0 tw-items-end tw-px-4 tw-pb-5">
             <div className="tw-min-w-0">
-              <span className="tw-text-lg tw-font-semibold tw-text-white desktop-hover:group-hover:tw-text-iron-400 tw-transition tw-duration-300 tw-ease-out tw-line-clamp-1">
+              <span className="tw-text-lg tw-font-bold tw-text-white tw-leading-tight tw-drop-shadow-lg tw-line-clamp-2">
                 {wave?.name ?? titlePlaceholder}
               </span>
             </div>
@@ -362,68 +352,70 @@ export default function WaveItem({
         </div>
       </div>
 
-      <div className="tw-px-3 tw-pt-3">
-        {authorSection}
-      </div>
+      <div className="tw-p-4 tw-gap-3 tw-flex tw-flex-col">
+        <div className="tw-flex tw-flex-col tw-gap-y-4 @[380px]/wave:tw-flex-row @[380px]/wave:tw-items-center @[380px]/wave:tw-justify-between @[380px]/wave:tw-gap-2">
+          {authorSection}
+
+          <div className="tw-flex tw-items-center tw-gap-4 tw-flex-shrink-0">
+            <div className="tw-flex tw-items-center tw-gap-1.5 tw-text-xs tw-font-medium tw-text-iron-400">
+              <ChatBubbleLeftRightIcon
+                aria-hidden="true"
+                className="tw-h-4 tw-w-4 tw-flex-shrink-0 tw-text-iron-400"
+              />
+              <span className="tw-font-medium">Chat</span>
+            </div>
 
-      <div className="tw-mt-2 tw-flex tw-items-center tw-justify-between tw-px-3 tw-pt-3">
-        <div className="tw-flex tw-items-center tw-gap-4">
-          <div className="tw-text-sm tw-flex tw-items-center tw-gap-x-2 tw-text-iron-200">
-            <ChatBubbleLeftRightIcon
-              aria-hidden="true"
-              className="tw-h-5 tw-w-5 tw-flex-shrink-0 tw-text-iron-400"
-            />
-            <span className="tw-font-medium">Chat</span>
+            {waveHref && followersTooltipId ? (
+              <span
+                className="tw-flex tw-items-center tw-gap-1.5 tw-text-xs tw-no-underline tw-relative tw-z-20 tw-pointer-events-auto"
+                data-tooltip-id={followersTooltipId}
+              >
+                {followersContent}
+              </span>
+            ) : (
+              <div className="tw-flex tw-items-center tw-gap-1.5 tw-text-xs">
+                {followersContent}
+              </div>
+            )}
           </div>
 
-          {waveHref && followersTooltipId ? (
-            <span
-              className="tw-text-sm tw-flex tw-items-center tw-gap-x-2 tw-text-iron-200 tw-no-underline tw-relative tw-z-20 tw-pointer-events-auto"
-              data-tooltip-id={followersTooltipId}
+          {wave && followersTooltipId && (
+            <Tooltip
+              id={followersTooltipId}
+              place="top"
+              positionStrategy="fixed"
+              style={{
+                backgroundColor: "#1F2937",
+                color: "white",
+                padding: "4px 8px",
+              }}
             >
-              {followersContent}
-            </span>
-          ) : (
-            <div className="tw-text-sm tw-flex tw-items-center tw-gap-x-2 tw-text-iron-200">
-              {followersContent}
-            </div>
+              <span className="tw-text-xs">Joined</span>
+            </Tooltip>
           )}
         </div>
 
-        {wave && followersTooltipId && (
-          <Tooltip
-            id={followersTooltipId}
-            place="top"
-            positionStrategy="fixed"
-            style={{
-              backgroundColor: "#1F2937",
-              color: "white",
-              padding: "4px 8px",
-            }}
-          >
-            <span className="tw-text-xs">Joined</span>
-          </Tooltip>
-        )}
-      </div>
+        <div className="tw-w-full tw-h-px tw-bg-white/5 tw-my-1"></div>
 
-      <div className="tw-mt-3 tw-flex tw-items-center tw-justify-between tw-gap-2 tw-px-3 tw-pb-1">
-        <div className="tw-min-w-0 tw-flex-1">
-          {wave && (
-            <div className="tw-overflow-hidden tw-min-w-0">
-              <WaveItemDropped wave={wave} />
-            </div>
-          )}
-        </div>
+        <div className="tw-flex tw-items-center tw-justify-between tw-gap-2">
+          <div className="tw-min-w-0 tw-flex-1">
+            {wave && (
+              <div className="tw-overflow-hidden tw-min-w-0">
+                <WaveItemDropped wave={wave} />
+              </div>
+            )}
+          </div>
 
-        <div className="tw-flex tw-items-center">
-          {wave && (
-            <div
-              data-wave-item-interactive="true"
-              className="tw-relative tw-z-20 tw-pointer-events-auto"
-            >
-              <WaveItemFollow wave={wave} />
-            </div>
-          )}
+          <div className="tw-flex tw-items-center">
+            {wave && (
+              <div
+                data-wave-item-interactive="true"
+                className="tw-relative tw-z-20 tw-pointer-events-auto"
+              >
+                <WaveItemFollow wave={wave} />
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </CardContainer>
diff --git a/components/waves/list/WaveItemDropped.tsx b/components/waves/list/WaveItemDropped.tsx
index 6d22d6ad38..5b11401fd6 100644
--- a/components/waves/list/WaveItemDropped.tsx
+++ b/components/waves/list/WaveItemDropped.tsx
@@ -100,10 +100,10 @@ export default function WaveItemDropped({ wave }: { readonly wave: ApiWave }) {
         })}
       </div>
       <div className="tw-flex tw-items-center tw-gap-x-1 tw-text-sm tw-min-w-0">
-        <span className="tw-text-iron-200 tw-font-medium tw-flex-shrink-0">
+        <span className="tw-text-white tw-font-medium tw-text-sm tw-flex-shrink-0">
           {numberWithCommas(wave.metrics.drops_count)}
         </span>
-        <span className="tw-text-iron-400 tw-truncate tw-min-w-0">
+        <span className="tw-text-iron-500 tw-font-normal tw-truncate tw-min-w-0">
           {wave.metrics.drops_count === 1 ? "Drop" : "Drops"}
         </span>
       </div>
diff --git a/components/waves/list/WaveItemFollow.tsx b/components/waves/list/WaveItemFollow.tsx
index ad8c7a24dc..1ca5b5a250 100644
--- a/components/waves/list/WaveItemFollow.tsx
+++ b/components/waves/list/WaveItemFollow.tsx
@@ -10,8 +10,9 @@ import {
   commonApiPost,
 } from "@/services/api/common-api";
 import { ApiWaveSubscriptionActions } from "@/generated/models/ApiWaveSubscriptionActions";
-import CircleLoader from "@/components/distribution-plan-tool/common/CircleLoader";
 import { WAVE_DEFAULT_SUBSCRIPTION_ACTIONS } from "@/components/react-query-wrapper/utils/query-utils";
+import SecondaryButton from "@/components/utils/button/SecondaryButton";
+import ActionButton from "@/components/utils/button/ActionButton";
 
 enum WaveItemFollowState {
   FOLLOWING = "FOLLOWING",
@@ -51,15 +52,6 @@ export default function WaveItemFollow({ wave }: { readonly wave: ApiWave }) {
   const [state, setState] = useState(getState());
   useEffect(() => setState(getState()), [isSubscribed, canSubscribe]);
 
-  const CLASSES: Record<WaveItemFollowState, string> = {
-    [WaveItemFollowState.FOLLOWING]:
-      "tw-bg-iron-800 tw-text-iron-300 hover:tw-bg-iron-700 hover:tw-border-iron-700 focus-visible:tw-outline-iron-700 tw-border-iron-800",
-    [WaveItemFollowState.FOLLOW]:
-      "tw-text-white hover:tw-bg-primary-600 hover:tw-border-primary-600 focus-visible:tw-outline-primary-600 tw-bg-primary-500 tw-border-primary-500",
-    [WaveItemFollowState.CANT_FOLLOW]:
-      "tw-opacity-50 tw-cursor-not-allowed tw-bg-primary-500 tw-ring-primary-500 tw-text-white",
-  };
-
   const subscribeMutation = useMutation({
     mutationFn: async () => {
       await commonApiPost<
@@ -118,10 +110,7 @@ export default function WaveItemFollow({ wave }: { readonly wave: ApiWave }) {
     },
   });
 
-  const onSubscribe = async (
-    e: React.MouseEvent<HTMLButtonElement>
-  ): Promise<void> => {
-    e.preventDefault();
+  const onSubscribe = async (): Promise<void> => {
     setMutating(true);
     const { success } = await requestAuth();
     if (!success) {
@@ -135,21 +124,15 @@ export default function WaveItemFollow({ wave }: { readonly wave: ApiWave }) {
     await subscribeMutation.mutateAsync();
   };
 
-  return (
-    <div
-      className={`tw-p-[1px] tw-w-full sm:tw-w-auto tw-flex tw-rounded-lg tw-bg-gradient-to-b ${
-        state === WaveItemFollowState.FOLLOW
-          ? " tw-from-primary-400 tw-to-primary-500"
-          : "tw-from-iron-700 tw-to-iron-700"
-      }`}>
-      <button
-        onClick={onSubscribe}
-        type="button"
+  if (state === WaveItemFollowState.FOLLOWING) {
+    return (
+      <SecondaryButton
+        onClicked={onSubscribe}
         disabled={isDisabled}
-        className={`${CLASSES[state]} tw-flex tw-w-full sm:tw-w-auto tw-gap-x-1.5 tw-items-center tw-justify-center tw-border tw-border-solid tw-rounded-lg tw-px-2.5 tw-py-1.5 tw-text-sm tw-font-semibold tw-shadow-sm focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 tw-transition tw-duration-300 tw-ease-out`}>
-        {mutating ? (
-          <CircleLoader />
-        ) : isSubscribed ? (
+        loading={mutating}
+        size="sm"
+      >
+        {!mutating && (
           <svg
             className="tw-h-3 tw-w-3"
             viewBox="0 0 17 15"
@@ -162,25 +145,38 @@ export default function WaveItemFollow({ wave }: { readonly wave: ApiWave }) {
               d="M14.7953 0.853403L5.24867 10.0667L2.71534 7.36007C2.24867 6.92007 1.51534 6.8934 0.982005 7.26674C0.462005 7.6534 0.315338 8.3334 0.635338 8.88007L3.63534 13.7601C3.92867 14.2134 4.43534 14.4934 5.00867 14.4934C5.55534 14.4934 6.07534 14.2134 6.36867 13.7601C6.84867 13.1334 16.0087 2.2134 16.0087 2.2134C17.2087 0.986737 15.7553 -0.093263 14.7953 0.84007V0.853403Z"
               fillRule="evenodd"
               clipRule="evenodd"
-              fill="currentColor"></path>
-          </svg>
-        ) : (
-          <svg
-            className="tw-h-5 tw-w-5 -tw-ml-1"
-            viewBox="0 0 24 24"
-            fill="none"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M12 5V19M5 12H19"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"></path>
+              fill="currentColor"
+            />
           </svg>
         )}
         {!mutating && label}
-      </button>
-    </div>
+      </SecondaryButton>
+    );
+  }
+
+  return (
+    <ActionButton
+      onClicked={onSubscribe}
+      disabled={isDisabled}
+      loading={mutating}
+      size="sm"
+    >
+      {!mutating && (
+        <svg
+          className="tw-h-5 tw-w-5 -tw-ml-1"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M12 5V19M5 12H19"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"></path>
+        </svg>
+      )}
+      {!mutating && label}
+    </ActionButton>
   );
 }
diff --git a/components/waves/list/header/WavesListHeader.tsx b/components/waves/list/header/WavesListHeader.tsx
index d3f0f8f465..7babd450c2 100644
--- a/components/waves/list/header/WavesListHeader.tsx
+++ b/components/waves/list/header/WavesListHeader.tsx
@@ -6,6 +6,9 @@ import WavesListSearch from "./WavesListSearch";
 import { AuthContext } from "@/components/auth/Auth";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
+import { PlusIcon } from "@heroicons/react/24/outline";
+import PrimaryButton from "@/components/utils/button/PrimaryButton";
+import SecondaryButton from "@/components/utils/button/SecondaryButton";
 
 export default function WavesListHeader({
   title = "Waves",
@@ -48,52 +51,35 @@ export default function WavesListHeader({
         />
         <div className="tw-flex tw-gap-3 tw-items-center">
           {showMyWavesButton && (
-            <button
-              onClick={() =>
-                !!connectedProfile?.handle &&
-                setIdentity(connectedProfile?.handle)
+            <SecondaryButton
+              onClicked={() =>
+                connectedProfile?.handle && setIdentity(connectedProfile.handle)
               }
-              type="button"
-              className="tw-whitespace-nowrap tw-text-sm tw-font-semibold tw-inline-flex tw-items-center tw-rounded-lg tw-bg-iron-200 tw-px-3.5 tw-py-2.5 tw-text-iron-800 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset tw-border-0 tw-ring-1 tw-ring-inset tw-ring-white hover:tw-bg-iron-300 hover:tw-ring-iron-300 focus:tw-z-10 tw-transition tw-duration-300 tw-ease-out">
+            >
               My Waves
-            </button>
+            </SecondaryButton>
           )}
           {showCreateNewButton && (
             <>
-              <div className="tw-p-[1px] tw-flex tw-rounded-lg tw-bg-gradient-to-b tw-from-primary-400 tw-to-primary-500 tw-gap-x-1">
-                <button
-                  onClick={onCreateNewWave}
-                  type="button"
-                  className="tw-flex tw-items-center tw-whitespace-nowrap tw-border-0 tw-rounded-lg tw-bg-primary-500 tw-px-3.5 tw-py-2.5 tw-text-sm tw-font-semibold tw-text-white tw-shadow-sm hover:tw-bg-primary-600 hover:tw-border-primary-600 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-primary-600 tw-transition tw-duration-300 tw-ease-out">
-                  <svg
-                    className="tw-size-5 tw-mr-1.5 -tw-ml-1.5 tw-flex-shrink-0"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M12 5V19M5 12H19"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                  <span>Create Wave</span>
-                </button>
-              </div>
-              <div className="tw-p-[1px] tw-flex tw-rounded-lg tw-bg-gradient-to-b tw-from-primary-400 tw-to-primary-500 tw-gap-x-1">
-                <button
-                  onClick={onCreateNewDirectMessage}
-                  type="button"
-                  className="tw-flex tw-items-center tw-whitespace-nowrap tw-border-0 tw-rounded-lg tw-bg-primary-500 tw-px-3.5 tw-py-2.5 tw-text-sm tw-font-semibold tw-text-white tw-shadow-sm hover:tw-bg-primary-600 hover:tw-border-primary-600 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-primary-600 tw-transition tw-duration-300 tw-ease-out">
-                  <FontAwesomeIcon
-                    icon={faPaperPlane}
-                    className="tw-size-4 tw-mr-2 -tw-ml-1 tw-flex-shrink-0"
-                  />
-                  <span>Create DM</span>
-                </button>
-              </div>
+              <PrimaryButton
+                onClicked={onCreateNewWave}
+                loading={false}
+                disabled={false}
+              >
+                <PlusIcon className="tw-w-5 tw-h-5 -tw-ml-1" />
+                <span className="tw-hidden sm:tw-inline">Create </span>Wave
+              </PrimaryButton>
+              <PrimaryButton
+                onClicked={onCreateNewDirectMessage}
+                loading={false}
+                disabled={false}
+              >
+                <FontAwesomeIcon
+                  icon={faPaperPlane}
+                  className="tw-size-4 tw-flex-shrink-0"
+                />
+                <span className="tw-hidden sm:tw-inline">Create </span>DM
+              </PrimaryButton>
             </>
           )}
         </div>

From a6c83aaf49b5a7e43b38bd036e8e34da39bb2935 Mon Sep 17 00:00:00 2001
From: ragnep <ragneinfo@gmail.com>
Date: Thu, 11 Dec 2025 14:18:16 +0200
Subject: [PATCH 2/6] wip

Signed-off-by: ragnep <ragneinfo@gmail.com>
---
 .../drops/MemesLeaderboardDropArtistInfo.tsx  | 17 ++++---------
 .../MemeDropArtistInfo.tsx                    | 17 ++++---------
 components/waves/drops/ArtistPreviewModal.tsx |  6 ++---
 components/waves/drops/WaveDropHeader.tsx     | 22 ++++++-----------
 hooks/useArtistPreviewModal.ts                | 24 +++++++++++++++++++
 5 files changed, 42 insertions(+), 44 deletions(-)
 create mode 100644 hooks/useArtistPreviewModal.ts

diff --git a/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx b/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
index efe4467086..de9c6f0a5b 100644
--- a/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
+++ b/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState } from "react";
+import React from "react";
 import Link from "next/link";
 import { cicToType } from "@/helpers/Helpers";
 import UserCICAndLevel, {
@@ -14,6 +14,7 @@ import UserProfileTooltipWrapper from "@/components/utils/tooltip/UserProfileToo
 import { ArtistSubmissionBadge } from "@/components/waves/drops/ArtistSubmissionBadge";
 import { ArtistPreviewModal } from "@/components/waves/drops/ArtistPreviewModal";
 import { ProfileWinnerBadge } from "@/components/waves/drops/ProfileWinnerBadge";
+import { useArtistPreviewModal } from "@/hooks/useArtistPreviewModal";
 
 interface MemesLeaderboardDropArtistInfoProps {
   readonly drop: ExtendedDrop;
@@ -22,25 +23,15 @@ interface MemesLeaderboardDropArtistInfoProps {
 const MemesLeaderboardDropArtistInfo: React.FC<
   MemesLeaderboardDropArtistInfoProps
 > = ({ drop }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalInitialTab, setModalInitialTab] = useState<"active" | "winners">("active");
+  const { isModalOpen, modalInitialTab, handleBadgeClick, handleModalClose } =
+    useArtistPreviewModal();
 
   const submissionCount = drop.author.active_main_stage_submission_ids?.length || 0;
   const hasSubmissions = submissionCount > 0;
 
-  // Check if this drop author has any main stage winner drop IDs
   const winnerCount = drop.author.winner_main_stage_drop_ids?.length || 0;
   const isWinner = winnerCount > 0;
 
-  const handleBadgeClick = (tab: "active" | "winners") => {
-    setModalInitialTab(tab);
-    setIsModalOpen(true);
-  };
-
-  const handleModalClose = () => {
-    setIsModalOpen(false);
-  };
-
   return (
     <div className="tw-flex tw-gap-x-3">
       <WaveDropAuthorPfp drop={drop} />
diff --git a/components/memes/drops/meme-participation-drop/MemeDropArtistInfo.tsx b/components/memes/drops/meme-participation-drop/MemeDropArtistInfo.tsx
index a7c0b27031..f08c82a91e 100644
--- a/components/memes/drops/meme-participation-drop/MemeDropArtistInfo.tsx
+++ b/components/memes/drops/meme-participation-drop/MemeDropArtistInfo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState } from "react";
+import React from "react";
 import Link from "next/link";
 import { cicToType } from "@/helpers/Helpers";
 import UserCICAndLevel, {
@@ -14,31 +14,22 @@ import UserProfileTooltipWrapper from "@/components/utils/tooltip/UserProfileToo
 import { ArtistSubmissionBadge } from "@/components/waves/drops/ArtistSubmissionBadge";
 import { ArtistPreviewModal } from "@/components/waves/drops/ArtistPreviewModal";
 import { ProfileWinnerBadge } from "@/components/waves/drops/ProfileWinnerBadge";
+import { useArtistPreviewModal } from "@/hooks/useArtistPreviewModal";
 
 interface MemeDropArtistInfoProps {
   readonly drop: ExtendedDrop;
 }
 
 export default function MemeDropArtistInfo({ drop }: MemeDropArtistInfoProps) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalInitialTab, setModalInitialTab] = useState<"active" | "winners">("active");
+  const { isModalOpen, modalInitialTab, handleBadgeClick, handleModalClose } =
+    useArtistPreviewModal();
 
   const submissionCount = drop.author.active_main_stage_submission_ids?.length || 0;
   const hasSubmissions = submissionCount > 0;
 
-  // Check if this drop author has any main stage winner drop IDs
   const winnerCount = drop.author.winner_main_stage_drop_ids?.length || 0;
   const isWinner = winnerCount > 0;
 
-  const handleBadgeClick = (tab: "active" | "winners") => {
-    setModalInitialTab(tab);
-    setIsModalOpen(true);
-  };
-
-  const handleModalClose = () => {
-    setIsModalOpen(false);
-  };
-
   return (
     <div className="tw-flex tw-items-center tw-gap-x-3">
       <WaveDropAuthorPfp drop={drop} />
diff --git a/components/waves/drops/ArtistPreviewModal.tsx b/components/waves/drops/ArtistPreviewModal.tsx
index b26e84fcbb..08a3403395 100644
--- a/components/waves/drops/ArtistPreviewModal.tsx
+++ b/components/waves/drops/ArtistPreviewModal.tsx
@@ -80,7 +80,7 @@ export const ArtistPreviewModal: React.FC<
 
   return createPortal(
     <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="tw-cursor-default tw-relative tw-z-[9999]" onClose={() => {}}>
+      <Dialog as="div" className="tw-cursor-default tw-relative tw-z-[9999]" onClose={onClose}>
         {/* Backdrop */}
         <Transition.Child
           as={Fragment}
@@ -91,11 +91,11 @@ export const ArtistPreviewModal: React.FC<
           leaveFrom="tw-opacity-100"
           leaveTo="tw-opacity-0"
         >
-          <div className="tw-fixed tw-inset-0 tw-bg-gray-600 tw-bg-opacity-50 tw-backdrop-blur-[1px]" onClick={(e) => { e.stopPropagation(); onClose(); }} />
+          <Dialog.Backdrop className="tw-fixed tw-inset-0 tw-bg-gray-600 tw-bg-opacity-50 tw-backdrop-blur-[1px]" />
         </Transition.Child>
 
         {/* Desktop modal */}
-        <div className="tw-fixed tw-inset-0 tw-z-[100] tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 hover:tw-scrollbar-thumb-iron-300 tw-hidden sm:tw-block" onClick={(e) => { e.stopPropagation(); onClose(); }}>
+        <div className="tw-fixed tw-inset-0 tw-z-[100] tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 hover:tw-scrollbar-thumb-iron-300 tw-hidden sm:tw-block">
           <div className="tw-flex tw-min-h-full tw-items-center tw-justify-center tw-p-4">
             <Transition.Child
               as={Fragment}
diff --git a/components/waves/drops/WaveDropHeader.tsx b/components/waves/drops/WaveDropHeader.tsx
index 8691aaf787..ea957f5b6e 100644
--- a/components/waves/drops/WaveDropHeader.tsx
+++ b/components/waves/drops/WaveDropHeader.tsx
@@ -13,7 +13,8 @@ import UserProfileTooltipWrapper from "@/components/utils/tooltip/UserProfileToo
 import { ArtistSubmissionBadge } from "./ArtistSubmissionBadge";
 import { ArtistPreviewModal } from "./ArtistPreviewModal";
 import { ProfileWinnerBadge } from "./ProfileWinnerBadge";
-import { useState, useCallback, useMemo } from "react";
+import { useMemo, useCallback } from "react";
+import { useArtistPreviewModal } from "@/hooks/useArtistPreviewModal";
 
 interface WaveDropHeaderProps {
   readonly drop: ApiDrop;
@@ -33,17 +34,17 @@ const WaveDropHeader: React.FC<WaveDropHeaderProps> = ({
   badge,
 }) => {
   const router = useRouter();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalInitialTab, setModalInitialTab] = useState<"active" | "winners">("active");
+  const { isModalOpen, modalInitialTab, handleBadgeClick, handleModalClose } =
+    useArtistPreviewModal();
 
   // Memoize expensive computations
   const cicType = useMemo(() => cicToType(drop.author.cic), [drop.author.cic]);
-  
-  const submissionCount = useMemo(() => 
+
+  const submissionCount = useMemo(() =>
     drop.author.active_main_stage_submission_ids?.length || 0,
     [drop.author.active_main_stage_submission_ids]
   );
-  
+
   const hasSubmissions = submissionCount > 0;
 
   // Check if this drop author has any main stage winner drop IDs
@@ -60,15 +61,6 @@ const WaveDropHeader: React.FC<WaveDropHeaderProps> = ({
     router.push(path);
   }, [router]);
 
-  const handleBadgeClick = useCallback((tab: "active" | "winners") => {
-    setModalInitialTab(tab);
-    setIsModalOpen(true);
-  }, []);
-
-  const handleModalClose = useCallback(() => {
-    setIsModalOpen(false);
-  }, []);
-
   return (
     <>
       <div className="tw-flex tw-items-center tw-justify-between tw-gap-x-2">
diff --git a/hooks/useArtistPreviewModal.ts b/hooks/useArtistPreviewModal.ts
new file mode 100644
index 0000000000..6cc9d15f16
--- /dev/null
+++ b/hooks/useArtistPreviewModal.ts
@@ -0,0 +1,24 @@
+import { useState, useCallback } from "react";
+
+export type ArtistPreviewTab = "active" | "winners";
+
+export function useArtistPreviewModal() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalInitialTab, setModalInitialTab] = useState<ArtistPreviewTab>("active");
+
+  const handleBadgeClick = useCallback((tab: ArtistPreviewTab) => {
+    setModalInitialTab(tab);
+    setIsModalOpen(true);
+  }, []);
+
+  const handleModalClose = useCallback(() => {
+    setIsModalOpen(false);
+  }, []);
+
+  return {
+    isModalOpen,
+    modalInitialTab,
+    handleBadgeClick,
+    handleModalClose,
+  };
+}

From fbab55e47c33247eec6722f5ac37abd0dd7e21ee Mon Sep 17 00:00:00 2001
From: ragnep <ragneinfo@gmail.com>
Date: Thu, 11 Dec 2025 14:36:03 +0200
Subject: [PATCH 3/6] wip

Signed-off-by: ragnep <ragneinfo@gmail.com>
---
 components/waves/drops/ArtistPreviewModal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/waves/drops/ArtistPreviewModal.tsx b/components/waves/drops/ArtistPreviewModal.tsx
index 08a3403395..b26e84fcbb 100644
--- a/components/waves/drops/ArtistPreviewModal.tsx
+++ b/components/waves/drops/ArtistPreviewModal.tsx
@@ -80,7 +80,7 @@ export const ArtistPreviewModal: React.FC<
 
   return createPortal(
     <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="tw-cursor-default tw-relative tw-z-[9999]" onClose={onClose}>
+      <Dialog as="div" className="tw-cursor-default tw-relative tw-z-[9999]" onClose={() => {}}>
         {/* Backdrop */}
         <Transition.Child
           as={Fragment}
@@ -91,11 +91,11 @@ export const ArtistPreviewModal: React.FC<
           leaveFrom="tw-opacity-100"
           leaveTo="tw-opacity-0"
         >
-          <Dialog.Backdrop className="tw-fixed tw-inset-0 tw-bg-gray-600 tw-bg-opacity-50 tw-backdrop-blur-[1px]" />
+          <div className="tw-fixed tw-inset-0 tw-bg-gray-600 tw-bg-opacity-50 tw-backdrop-blur-[1px]" onClick={(e) => { e.stopPropagation(); onClose(); }} />
         </Transition.Child>
 
         {/* Desktop modal */}
-        <div className="tw-fixed tw-inset-0 tw-z-[100] tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 hover:tw-scrollbar-thumb-iron-300 tw-hidden sm:tw-block">
+        <div className="tw-fixed tw-inset-0 tw-z-[100] tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 hover:tw-scrollbar-thumb-iron-300 tw-hidden sm:tw-block" onClick={(e) => { e.stopPropagation(); onClose(); }}>
           <div className="tw-flex tw-min-h-full tw-items-center tw-justify-center tw-p-4">
             <Transition.Child
               as={Fragment}

From b1557b53746f19827a3f282dd427137039867ce0 Mon Sep 17 00:00:00 2001
From: ragnep <ragneinfo@gmail.com>
Date: Thu, 11 Dec 2025 14:42:20 +0200
Subject: [PATCH 4/6] wip

Signed-off-by: ragnep <ragneinfo@gmail.com>
---
 .../drops/MemesLeaderboardDropArtistInfo.tsx  |  7 ++--
 components/waves/drops/ArtistPreviewModal.tsx | 37 +++++++------------
 components/waves/drops/WaveDropHeader.tsx     |  9 +++--
 3 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx b/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
index de9c6f0a5b..99c9ccd1d3 100644
--- a/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
+++ b/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
@@ -1,6 +1,5 @@
 "use client"
 
-import React from "react";
 import Link from "next/link";
 import { cicToType } from "@/helpers/Helpers";
 import UserCICAndLevel, {
@@ -20,9 +19,9 @@ interface MemesLeaderboardDropArtistInfoProps {
   readonly drop: ExtendedDrop;
 }
 
-const MemesLeaderboardDropArtistInfo: React.FC<
-  MemesLeaderboardDropArtistInfoProps
-> = ({ drop }) => {
+const MemesLeaderboardDropArtistInfo = ({
+  drop
+}: MemesLeaderboardDropArtistInfoProps) => {
   const { isModalOpen, modalInitialTab, handleBadgeClick, handleModalClose } =
     useArtistPreviewModal();
 
diff --git a/components/waves/drops/ArtistPreviewModal.tsx b/components/waves/drops/ArtistPreviewModal.tsx
index b26e84fcbb..18d89974f2 100644
--- a/components/waves/drops/ArtistPreviewModal.tsx
+++ b/components/waves/drops/ArtistPreviewModal.tsx
@@ -3,12 +3,13 @@
 import { ApiProfileMin } from "@/generated/models/ApiProfileMin";
 import useDeviceInfo from "@/hooks/useDeviceInfo";
 import { Dialog, Transition } from "@headlessui/react";
-import React, { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import ArtistPreviewAppWrapper from "./ArtistPreviewAppWrapper";
 import { ArtistPreviewModalContent } from "./ArtistPreviewModalContent";
+import { ArtistPreviewTab as ModalTab } from "@/hooks/useArtistPreviewModal";
 
-export type ModalTab = "active" | "winners";
+export type { ModalTab };
 
 interface ArtistPreviewModalProps {
   readonly isOpen: boolean;
@@ -17,18 +18,19 @@ interface ArtistPreviewModalProps {
   readonly initialTab?: ModalTab;
 }
 
-export const ArtistPreviewModal: React.FC<
-  ArtistPreviewModalProps
-> = ({ isOpen, onClose, user, initialTab = "active" }) => {
+export const ArtistPreviewModal = ({
+  isOpen,
+  onClose,
+  user,
+  initialTab = "active"
+}: ArtistPreviewModalProps) => {
   const { isApp } = useDeviceInfo();
-  const modalRef = useRef<HTMLDialogElement>(null);
-  const previousFocusRef = useRef<HTMLElement | null>(null);
   const [activeTab, setActiveTab] = useState<ModalTab>(initialTab);
-  
+
   // Check if user has winning artworks
-  const hasWinningArtworks = user.winner_main_stage_drop_ids && 
+  const hasWinningArtworks = user.winner_main_stage_drop_ids &&
                              user.winner_main_stage_drop_ids.length > 0;
-  
+
   // Reset tab when modal opens with different initial tab
   useEffect(() => {
     if (isOpen) {
@@ -36,24 +38,13 @@ export const ArtistPreviewModal: React.FC<
     }
   }, [isOpen, initialTab]);
 
-  // Cleanup body overflow and manage focus
+  // Cleanup body overflow
   useEffect(() => {
     if (isOpen && !isApp) {
-      // Store current focus
-      previousFocusRef.current = document.activeElement as HTMLElement;
-      
-      // Set body overflow
       document.body.style.overflow = 'hidden';
-      
-      // Focus the modal after animation
-      setTimeout(() => {
-        modalRef.current?.focus();
-      }, 100);
-      
+
       return () => {
         document.body.style.overflow = 'unset';
-        // Restore previous focus
-        previousFocusRef.current?.focus();
       };
     }
   }, [isOpen, isApp]);
diff --git a/components/waves/drops/WaveDropHeader.tsx b/components/waves/drops/WaveDropHeader.tsx
index ea957f5b6e..65bb1b9f15 100644
--- a/components/waves/drops/WaveDropHeader.tsx
+++ b/components/waves/drops/WaveDropHeader.tsx
@@ -48,12 +48,13 @@ const WaveDropHeader: React.FC<WaveDropHeaderProps> = ({
   const hasSubmissions = submissionCount > 0;
 
   // Check if this drop author has any main stage winner drop IDs
-  const isWinner = useMemo(() =>
-    drop.author.winner_main_stage_drop_ids &&
-    drop.author.winner_main_stage_drop_ids.length > 0,
+  const winnerCount = useMemo(() =>
+    drop.author.winner_main_stage_drop_ids?.length || 0,
     [drop.author.winner_main_stage_drop_ids]
   );
 
+  const isWinner = winnerCount > 0;
+
   // Memoize event handlers to prevent unnecessary re-renders
   const handleNavigation = useCallback((e: React.MouseEvent, path: string) => {
     e.preventDefault();
@@ -94,7 +95,7 @@ const WaveDropHeader: React.FC<WaveDropHeaderProps> = ({
             )}
             {isWinner && (
               <ProfileWinnerBadge
-                winCount={1}
+                winCount={winnerCount}
                 onBadgeClick={() => handleBadgeClick("winners")}
                 tooltipId={`winner-badge-${drop.id}`}
               />

From e3f8e660fb280886de367dc342ea7e098202dbf5 Mon Sep 17 00:00:00 2001
From: ragnep <ragneinfo@gmail.com>
Date: Thu, 11 Dec 2025 14:52:49 +0200
Subject: [PATCH 5/6] wip

Signed-off-by: ragnep <ragneinfo@gmail.com>
---
 components/memes/drops/MemesLeaderboardDropArtistInfo.tsx | 2 +-
 components/waves/drops/ArtistPreviewModal.tsx             | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx b/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
index 99c9ccd1d3..a04160b1c3 100644
--- a/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
+++ b/components/memes/drops/MemesLeaderboardDropArtistInfo.tsx
@@ -37,7 +37,7 @@ const MemesLeaderboardDropArtistInfo = ({
       <div className="tw-flex tw-flex-col tw-justify-between tw-h-12">
         {/* Top row: Handle + Artist badge + Timestamp */}
         <div className="tw-flex tw-items-center tw-gap-x-2 tw-flex-wrap -tw-mt-0.5">
-          {drop.author?.level && (
+          {!!drop.author?.level && (
             <UserCICAndLevel
               level={drop.author.level}
               cicType={cicToType(drop.author.cic)}
diff --git a/components/waves/drops/ArtistPreviewModal.tsx b/components/waves/drops/ArtistPreviewModal.tsx
index 18d89974f2..4ac38381d3 100644
--- a/components/waves/drops/ArtistPreviewModal.tsx
+++ b/components/waves/drops/ArtistPreviewModal.tsx
@@ -7,9 +7,7 @@ import { Fragment, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import ArtistPreviewAppWrapper from "./ArtistPreviewAppWrapper";
 import { ArtistPreviewModalContent } from "./ArtistPreviewModalContent";
-import { ArtistPreviewTab as ModalTab } from "@/hooks/useArtistPreviewModal";
-
-export type { ModalTab };
+export type { ArtistPreviewTab as ModalTab } from "@/hooks/useArtistPreviewModal";
 
 interface ArtistPreviewModalProps {
   readonly isOpen: boolean;
@@ -41,10 +39,11 @@ export const ArtistPreviewModal = ({
   // Cleanup body overflow
   useEffect(() => {
     if (isOpen && !isApp) {
+      const originalOverflow = document.body.style.overflow;
       document.body.style.overflow = 'hidden';
 
       return () => {
-        document.body.style.overflow = 'unset';
+        document.body.style.overflow = originalOverflow;
       };
     }
   }, [isOpen, isApp]);

From b6c04cde0c056ab83dd437d82b6ff1ddbad3ac92 Mon Sep 17 00:00:00 2001
From: ragnep <ragneinfo@gmail.com>
Date: Thu, 11 Dec 2025 15:01:32 +0200
Subject: [PATCH 6/6] wip

Signed-off-by: ragnep <ragneinfo@gmail.com>
---
 components/waves/drops/ArtistPreviewModal.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/waves/drops/ArtistPreviewModal.tsx b/components/waves/drops/ArtistPreviewModal.tsx
index 4ac38381d3..7505cb2628 100644
--- a/components/waves/drops/ArtistPreviewModal.tsx
+++ b/components/waves/drops/ArtistPreviewModal.tsx
@@ -7,13 +7,15 @@ import { Fragment, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import ArtistPreviewAppWrapper from "./ArtistPreviewAppWrapper";
 import { ArtistPreviewModalContent } from "./ArtistPreviewModalContent";
-export type { ArtistPreviewTab as ModalTab } from "@/hooks/useArtistPreviewModal";
+import { ArtistPreviewTab } from "@/hooks/useArtistPreviewModal";
+
+export type { ArtistPreviewTab as ModalTab };
 
 interface ArtistPreviewModalProps {
   readonly isOpen: boolean;
   readonly onClose: () => void;
   readonly user: ApiProfileMin;
-  readonly initialTab?: ModalTab;
+  readonly initialTab?: ArtistPreviewTab;
 }
 
 export const ArtistPreviewModal = ({
@@ -23,7 +25,7 @@ export const ArtistPreviewModal = ({
   initialTab = "active"
 }: ArtistPreviewModalProps) => {
   const { isApp } = useDeviceInfo();
-  const [activeTab, setActiveTab] = useState<ModalTab>(initialTab);
+  const [activeTab, setActiveTab] = useState<ArtistPreviewTab>(initialTab);
 
   // Check if user has winning artworks
   const hasWinningArtworks = user.winner_main_stage_drop_ids &&