cleanup

projects/website/src/components/leaderboard/chart/player-score-accuracy-chart.tsx

@@ -56,6 +56,7 @@ export default function PlayerScoreAccuracyChart({ scoreStats, leaderboard }: Pr
       axisConfig: {
         reverse: false,
         display: true,
+        hideOnMobile: true,
         displayName: "PP",
         position: "right",
       },

projects/website/src/components/score/button/beat-saver-map-button.tsx

@@ -0,0 +1,21 @@
+import BeatSaverLogo from "@/components/logos/beatsaver-logo";
+import ScoreButton from "@/components/score/button/score-button";
+import * as React from "react";
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
+
+type BeatSaverMapProps = {
+  beatSaverMap: BeatSaverMap;
+};
+
+export function BeatSaverMapButton({ beatSaverMap }: BeatSaverMapProps) {
+  return (
+    <ScoreButton
+      onClick={() => {
+        window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
+      }}
+      tooltip={<p>Click to open the map</p>}
+    >
+      <BeatSaverLogo />
+    </ScoreButton>
+  );
+}

projects/website/src/components/score/button/score-bsr-button.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { copyToClipboard } from "@/common/browser-utils";
+import ScoreButton from "@/components/score/button/score-button";
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
+import * as React from "react";
+import { toast } from "@/hooks/use-toast";
+
+type ScoreBsrButtonProps = {
+  beatSaverMap: BeatSaverMap;
+};
+
+export function ScoreBsrButton({ beatSaverMap }: ScoreBsrButtonProps) {
+  return (
+    <ScoreButton
+      onClick={() => {
+        toast({
+          title: "Copied!",
+          description: `Copied "!bsr ${beatSaverMap.bsr}" to your clipboard!`,
+        });
+        copyToClipboard(`!bsr ${beatSaverMap.bsr}`);
+      }}
+      tooltip={<p>Click to copy the bsr code</p>}
+    >
+      <p>!</p>
+    </ScoreButton>
+  );
+}

projects/website/src/components/score/button/score-editor-button.tsx

@@ -6,8 +6,8 @@ import { Slider } from "@/components/ui/slider";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { ResetIcon } from "@radix-ui/react-icons";
 import Tooltip from "@/components/tooltip";
-import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
+import { ScoreSaberScore } from "@ssr/common/dist/model/score/impl/scoresaber-score.ts";
-import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "@ssr/common/dist/model/leaderboard/impl/scoresaber-leaderboard.ts";
 
 type ScoreEditorButtonProps = {
   score: ScoreSaberScore;

projects/website/src/components/score/button/score-replay-button.tsx

@@ -0,0 +1,21 @@
+import BeatSaberPepeLogo from "@/components/logos/beatsaber-pepe-logo";
+import ScoreButton from "@/components/score/button/score-button";
+import * as React from "react";
+import { AdditionalScoreData } from "@ssr/common/model/additional-score-data/additional-score-data";
+
+type ScoreReplayButton = {
+  additionalData: AdditionalScoreData;
+};
+
+export function ScoreReplayButton({ additionalData }: ScoreReplayButton) {
+  return (
+    <ScoreButton
+      onClick={() => {
+        window.open(`https://replay.beatleader.xyz/?scoreId=${additionalData.scoreId}`, "_blank");
+      }}
+      tooltip={<p>Click to view the score replay!</p>}
+    >
+      <BeatSaberPepeLogo />
+    </ScoreButton>
+  );
+}

projects/website/src/components/score/button/song-open-in-youtube-button.tsx

@@ -0,0 +1,25 @@
+import { songNameToYouTubeLink } from "@/common/youtube-utils";
+import YouTubeLogo from "@/components/logos/youtube-logo";
+import ScoreButton from "@/components/score/button/score-button";
+import { ScoreSaberLeaderboard } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import * as React from "react";
+
+type SongOpenInYoutubeButtonProps = {
+  leaderboard: ScoreSaberLeaderboard;
+};
+
+export function SongOpenInYoutubeButton({ leaderboard }: SongOpenInYoutubeButtonProps) {
+  return (
+    <ScoreButton
+      onClick={() => {
+        window.open(
+          songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
+          "_blank"
+        );
+      }}
+      tooltip={<p>Click to open the song in YouTube</p>}
+    >
+      <YouTubeLogo />
+    </ScoreButton>
+  );
+}

projects/website/src/components/score/score-buttons.tsx

@@ -1,20 +1,17 @@
 "use client";
 
-import { songNameToYouTubeLink } from "@/common/youtube-utils";
-import BeatSaverLogo from "@/components/logos/beatsaver-logo";
-import YouTubeLogo from "@/components/logos/youtube-logo";
-import { useToast } from "@/hooks/use-toast";
 import * as React from "react";
 import { useState } from "react";
-import ScoreButton from "./score-button";
-import { copyToClipboard } from "@/common/browser-utils";
 import { ArrowDownIcon, ArrowPathIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
-import ScoreEditorButton from "@/components/score/score-editor-button";
+import ScoreEditorButton from "@/components/score/button/score-editor-button";
+import { ScoreBsrButton } from "@/components/score/button/score-bsr-button";
+import { BeatSaverMapButton } from "@/components/score/button/beat-saver-map-button";
+import { SongOpenInYoutubeButton } from "@/components/score/button/song-open-in-youtube-button";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
-import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import { ScoreSaberLeaderboard } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
-import BeatSaberPepeLogo from "@/components/logos/beatsaber-pepe-logo";
+import { ScoreReplayButton } from "@/components/score/button/score-replay-button";
 
 type Props = {
   score?: ScoreSaberScore;
@@ -33,78 +30,39 @@ export default function ScoreButtons({
   leaderboard,
   beatSaverMap,
   alwaysSingleLine,
+  setIsLeaderboardExpanded,
+  isLeaderboardLoading,
+  updateScore,
   hideLeaderboardDropdown,
   hideAccuracyChanger,
-  isLeaderboardLoading,
-  setIsLeaderboardExpanded,
-  updateScore,
 }: Props) {
   const [leaderboardExpanded, setLeaderboardExpanded] = useState(false);
-  const { toast } = useToast();
 
   const additionalData = score?.additionalData;
   return (
-    <div className={`flex justify-end gap-2 items-center`}>
+    <div className={`flex justify-end gap-2 items-center mr-1`}>
-      <div
+      <div className={`flex lg:grid grid-cols-3 gap-1 items-center justify-center min-w-[92px]`}>
-        className={`flex ${alwaysSingleLine ? "flex-nowrap" : "flex-wrap"} items-center lg:items-start justify-center lg:justify-end gap-1`}
-      >
         {beatSaverMap != undefined && (
           <>
-            {/* Copy BSR */}
+            <ScoreBsrButton beatSaverMap={beatSaverMap} />
-            <ScoreButton
+            <BeatSaverMapButton beatSaverMap={beatSaverMap} />
-              onClick={() => {
-                toast({
-                  title: "Copied!",
-                  description: `Copied "!bsr ${beatSaverMap.bsr}" to your clipboard!`,
-                });
-                copyToClipboard(`!bsr ${beatSaverMap.bsr}`);
-              }}
-              tooltip={<p>Click to copy the bsr code</p>}
-            >
-              <p>!</p>
-            </ScoreButton>
-
-            {/* Open map in BeatSaver */}
-            <ScoreButton
-              onClick={() => {
-                window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
-              }}
-              tooltip={<p>Click to open the map</p>}
-            >
-              <BeatSaverLogo />
-            </ScoreButton>
           </>
         )}
 
-        {/* Open song in YouTube */}
+        <SongOpenInYoutubeButton leaderboard={leaderboard} />
-        <ScoreButton
+
-          onClick={() => {
+        <div className="hidden lg:block" />
-            window.open(
+        <div className="hidden lg:block" />
-              songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
-              "_blank"
-            );
-          }}
-          tooltip={<p>Click to open the song in YouTube</p>}
-        >
-          <YouTubeLogo />
-        </ScoreButton>
 
         {additionalData != undefined && (
           <>
-            {/* Open score replay */}
+            <ScoreReplayButton additionalData={additionalData} />
-            <ScoreButton
-              onClick={() => {
-                window.open(`https://replay.beatleader.xyz/?scoreId=${additionalData.scoreId}`, "_blank");
-              }}
-              tooltip={<p>Click to view the score replay!</p>}
-            >
-              <BeatSaberPepeLogo />
-            </ScoreButton>
           </>
         )}
       </div>
+
       <div
-        className={`flex gap-2 ${alwaysSingleLine ? "flex-row" : "flex-row lg:flex-col"} items-center justify-center`}
+        className={`flex gap-2 ${alwaysSingleLine ? "flex-row" : "flex-row lg:flex-col"} items-center justify-center pr-1`}
       >
         {/* Edit score button */}
         {score && leaderboard && updateScore && !hideAccuracyChanger && (

projects/website/src/components/score/score-stats.tsx

@@ -73,7 +73,7 @@ type Props = {
 export default function ScoreStats({ score, leaderboard }: Props) {
   return (
     <div className="flex flex-col justify-center h-full">
-      <div className={`grid grid-cols-3 gap-1 ml-0 lg:ml-2 justify-center`}>
+      <div className={`grid grid-cols-3 gap-1 justify-center`}>
         <ScoreBadges badges={badges} score={score} leaderboard={leaderboard} />
       </div>
     </div>

projects/website/src/hooks/use-is-mobile.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 
 export function useIsMobile() {
   const checkMobile = () => {
-    return window.innerWidth < 768;
+    return window.innerWidth <= 1024;
   };
   const [isMobile, setIsMobile] = useState(checkMobile());