more cleanup and added hover labels to player labels

src/app/player/[id]/page.tsx

@@ -3,9 +3,9 @@
 import Card from "@/components/Card";
 import Container from "@/components/Container";
 import Error from "@/components/Error";
-import PlayerInfo from "@/components/PlayerInfo";
-import Scores from "@/components/Scores";
 import { Spinner } from "@/components/Spinner";
+import PlayerInfo from "@/components/player/PlayerInfo";
+import Scores from "@/components/player/Scores";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";

src/app/search/page.tsx

@@ -2,7 +2,7 @@ import Avatar from "@/components/Avatar";
 import Card from "@/components/Card";
 import Container from "@/components/Container";
 
-import SearchPlayer from "@/components/SearchPlayer";
+import SearchPlayer from "@/components/player/SearchPlayer";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {

src/components/Label.tsx

@@ -3,16 +3,24 @@ import clsx from "clsx";
 type LabelProps = {
   title: string;
   value: any;
+  hoverValue?: string;
   className?: string;
 };
 
 export default function Label({
   title,
   value,
+  hoverValue,
   className = "bg-neutral-700",
 }: LabelProps) {
   return (
-    <div className={clsx("flex flex-col justify-center rounded-md", className)}>
+    <div
+      className={clsx(
+        "flex flex-col justify-center rounded-md hover:cursor-default",
+        className,
+      )}
+      title={hoverValue}
+    >
       <div className="p4-[0.3rem] flex items-center gap-2 pb-[0.2rem] pl-[0.3rem] pr-[0.3rem] pt-[0.2rem]">
         <p>{title}</p>
         <div className="h-4 w-[1px] bg-neutral-100"></div>

src/components/player/PlayerInfo.tsx

@@ -8,9 +8,9 @@ import { useRef } from "react";
 import ReactCountryFlag from "react-country-flag";
 import { toast } from "react-toastify";
 import { useStore } from "zustand";
-import Avatar from "./Avatar";
+import Avatar from "../Avatar";
-import Card from "./Card";
+import Card from "../Card";
-import Label from "./Label";
+import Label from "../Label";
 import PlayerChart from "./PlayerChart";
 
 type PlayerInfoProps = {
@@ -119,16 +119,19 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
             <Label
               title="Total play count"
               className="bg-blue-500"
+              hoverValue="Total ranked song play count"
               value={formatNumber(playerData.scoreStats.totalPlayCount)}
             />
             <Label
               title="Total score"
               className="bg-blue-500"
+              hoverValue="Total score of all your plays"
               value={formatNumber(playerData.scoreStats.totalScore)}
             />
             <Label
               title="Avg ranked acc"
               className="bg-blue-500"
+              hoverValue="Average accuracy of all your ranked plays"
               value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
                 2,
               )}%`}
@@ -139,6 +142,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                 <Label
                   title="Top PP"
                   className="bg-[#8992e8]"
+                  hoverValue="Highest pp play"
                   value={`${formatNumber(
                     getHighestPpPlay(playerId)?.toFixed(2),
                   )}pp`}
@@ -146,9 +150,10 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                 <Label
                   title="+ 1pp"
                   className="bg-[#8992e8]"
+                  hoverValue="Amount of raw pp required to increase your pp by 1pp"
                   value={`${formatNumber(
                     calcPpBoundary(playerId, 1)?.toFixed(2),
-                  )}pp per global raw`}
+                  )}pp per raw`}
                 />
               </>
             )}

src/components/player/ScoreStatLabel.tsx

@@ -14,7 +14,12 @@ export default function ScoreStatLabel({
   className = "bg-neutral-700",
 }: LabelProps) {
   return (
-    <div className={clsx("flex flex-col rounded-md", className)}>
+    <div
+      className={clsx(
+        "flex flex-col rounded-md hover:cursor-default",
+        className,
+      )}
+    >
       <div className="p4-[0.3rem] flex items-center gap-2 pb-[0.2rem] pl-[0.3rem] pr-[0.3rem] pt-[0.2rem]">
         <p
           className="flex w-full items-center justify-center gap-1"

src/components/player/Scores.tsx

@@ -5,10 +5,10 @@ import { SortType, SortTypes } from "@/types/SortTypes";
 import { fetchScores } from "@/utils/scoresaber/api";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
-import Card from "./Card";
+import Card from "../Card";
-import Pagination from "./Pagination";
+import Pagination from "../Pagination";
+import { Spinner } from "../Spinner";
 import Score from "./Score";
-import { Spinner } from "./Spinner";
 
 type PageInfo = {
   loading: boolean;

src/components/player/SearchPlayer.tsx

@@ -6,7 +6,7 @@ import { getPlayerInfo, searchByName } from "@/utils/scoresaber/api";
 import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
-import Avatar from "./Avatar";
+import Avatar from "../Avatar";
 
 export default function SearchPlayer() {
   const [search, setSearch] = useState("");