Add chroviewer button to the leaderboard page

src/modules/maps/detail/map-leaderboard-view/map-leaderboard-hero.tsx

@@ -2,7 +2,7 @@
 
 import { useLocation } from '@tanstack/react-router';
 import { Check, Hash } from 'lucide-react';
-import { FaClock, FaDrum, FaLink, FaMusic } from 'react-icons/fa';
+import { FaClock, FaDrum, FaLink, FaMusic, FaPlay } from 'react-icons/fa';
 import { useTranslations } from 'use-intl';
 
 import { Button } from '@/components/ui/button';
@@ -11,13 +11,15 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 import type { LeaderboardSearchParams, MapLeaderboard } from '@/modules/maps/detail/map-leaderboard-view/map-leaderboard-view-types';
 import { MapReuploadVersionSelection } from '@/modules/maps/detail/map-reupload-version-selection';
 import { BeatSaverKeyPill } from '@/modules/maps/shared/beatsaver-key-pill';
+import { ReplayDialog } from '@/modules/scores/replay-dialog';
 import { LinkedNames } from '@/modules/search/search-link';
 import type { MapControllerGetMapByIdResponse } from '@/shared/api/generated/ApiParams';
 import { CopyButton } from '@/shared/components/copy-button';
 import { FadeInImage } from '@/shared/components/fade-in-image';
 import { Stat } from '@/shared/components/stat';
 import { Time } from '@/shared/components/time';
 import { cn, formatNumber } from '@/shared/format/helpers';
+import { getNoSoloGameModeLabel } from '@/shared/format/strings';
 import { getStatusAccentClass } from '@/shared/format/styling';
 import { isLeaderboardPersonalizationParam } from '@/shared/url-state/persisted-filter-preferences';
 
@@ -62,6 +64,11 @@ export function MapLeaderboardHero({ mapInfo, leaderboard, linkSearchParams }: M
                      linkSearchParams={linkSearchParams}
                      triggerVariant="icon"
                   />
+                  <MapViewer
+                     mapKey={mapInfo.bsid}
+                     difficulty={leaderboard.difficulty}
+                     gameMode={leaderboard.gameMode}
+                  />
                </div>
 
                <h1 className="min-w-0 text-base leading-tight text-pretty sm:text-lg md:text-xl">
@@ -185,6 +192,31 @@ function CopyMapHashButton({ hash }: { hash: string }) {
    );
 }
 
+function MapViewer({ mapKey, difficulty, gameMode }: { mapKey?: string | null; difficulty?: number | null; gameMode?: string | null }) {
+   const t = useTranslations();
+
+   if (!mapKey) {
+      return null;
+   }
+
+   const characteristicParam = encodeURIComponent(gameMode ? getNoSoloGameModeLabel(gameMode) : '');
+   const difficultyParam = encodeURIComponent(difficulty != null ? difficulty : '');
+
+   return (
+      <ReplayDialog
+         mapId={`https://watch.scoresaber.com/?map=${encodeURIComponent(mapKey)}&difficulty=${difficultyParam}&characteristic=${characteristicParam}`}
+         tooltip={t('score.replayViewer')}
+         trigger={({ replayUrl, openReplayAction }) => (
+            <Button variant="secondary" size="icon-xs" asChild className="border-border/70 h-6 w-6 cursor-pointer rounded-full border">
+               <a href={replayUrl} target="_blank" rel="noopener noreferrer" onClick={openReplayAction} aria-label={t('score.replayViewer')}>
+                  <FaPlay className="size-2.5" />
+               </a>
+            </Button>
+         )}
+      />
+   );
+}
+
 interface MapLeaderboardHeroProps {
    mapInfo: MapControllerGetMapByIdResponse;
    leaderboard: MapLeaderboard;

src/modules/maps/detail/map-reupload-version-selection.tsx

@@ -83,7 +83,7 @@ export function MapReuploadVersionSelection({
                   </Button>
                </SelectPrimitive.Trigger>
             </TooltipTrigger>
-            <TooltipContent side="right">{t('version')}</TooltipContent>
+            <TooltipContent side="top">{t('version')}</TooltipContent>
          </Tooltip>
       ) : (
          <SelectTrigger variant="filter" size="compact" className={cn('min-w-0 shadow-none', className)}>

src/modules/scores/replay-dialog.tsx

@@ -22,7 +22,8 @@ type ScoreWithReplayViewCount = ScoreControllerGetScoreResponse['score'] & {
 };
 
 interface ReplayDialogProps {
-   scoreId: number;
+   scoreId?: number;
+   mapId?: string;
    trigger: (props: ReplayTriggerProps) => ReactNode;
    tooltip?: string;
    tooltipDelayMs?: number;
@@ -34,20 +35,22 @@ interface ReplayTriggerProps {
    openReplayAction: (event: MouseEvent<HTMLElement>) => void;
 }
 
-export function ReplayDialog({ scoreId, trigger, tooltip, tooltipDelayMs, tooltipSide }: ReplayDialogProps) {
+export function ReplayDialog({ scoreId, mapId, trigger, tooltip, tooltipDelayMs, tooltipSide }: ReplayDialogProps) {
    const t = useTranslations();
    const [loaded, setLoaded] = useState(false);
    const [open, setOpen] = useState(false);
    const [tooltipOpen, setTooltipOpen] = useState(false);
-   const replayUrl = getReplayArcviewerUrl({ scoreId: scoreId.toString() });
+   const replayUrl = mapId ?? (scoreId != null ? getReplayArcviewerUrl({ scoreId: scoreId.toString() }) : '');
+   const shouldFetchReplayViews = scoreId != null;
    const { data: replayViewCount } = useQuery({
       queryKey: ['scoreReplayViews', scoreId],
       queryFn: async () => {
+         if (scoreId == null) return null;
          const detail = await optionalApiData(api.score.scoreControllerGetScore({ id: scoreId, includeScoreStats: 'false' }));
          const score: ScoreWithReplayViewCount | undefined = detail?.score;
          return score?.replayViewCount ?? null;
       },
-      enabled: open || tooltipOpen,
+      enabled: shouldFetchReplayViews && (open || tooltipOpen),
       staleTime: 60_000
    });
    const replayViewCountLabel = replayViewCount == null || replayViewCount <= 0 ? null : t('score.replayViews', { count: replayViewCount });

src/shared/format/strings.ts

@@ -60,6 +60,10 @@ export function getGameModeLabel(gameMode: string) {
    return stripped.replace(/([A-Z])/g, ' $1').trim();
 }
 
+export function getNoSoloGameModeLabel(gameMode: string) {
+   return gameMode.startsWith('Solo') ? gameMode.slice(4) : gameMode;
+}
+
 export function formatEnumLabel(value: string) {
    return value
       .toLowerCase()