add +1 pp gain slider

src/components/AppProvider.tsx

@@ -4,6 +4,7 @@ import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
 import { useSettingsStore } from "@/store/settingsStore";
 import React from "react";
 import { TooltipProvider } from "./ui/Tooltip";
+import { ThemeProvider } from "./ui/theme-provider";
 const UPDATE_INTERVAL = 1000 * 60 * 5; // 5 minutes
 
 export default class AppProvider extends React.Component {
@@ -48,6 +49,10 @@ export default class AppProvider extends React.Component {
   render(): React.ReactNode {
     const props: any = this.props;
 
-    return <TooltipProvider>{props.children}</TooltipProvider>;
+    return (
+      <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+        <TooltipProvider>{props.children}</TooltipProvider>
+      </ThemeProvider>
+    );
   }
 }

src/components/player/PPGainLabel.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { formatNumber } from "@/utils/numberUtils";
+import { calcPpBoundary } from "@/utils/scoresaber/scores";
+import { useState } from "react";
+import Label from "../Label";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Slider } from "../ui/slider";
+
+type PPGainLabelProps = {
+  playerId: string;
+};
+
+export default function PPGainLabel({ playerId }: PPGainLabelProps) {
+  const [ppBoundary, setPpBoundary] = useState(1);
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Label
+          title={`+ ${ppBoundary}pp`}
+          className="bg-pp-blue hover:cursor-pointer"
+          tooltip={
+            <p>
+              Amount of raw pp required to increase your global pp by{" "}
+              {ppBoundary}pp
+            </p>
+          }
+          value={`${formatNumber(
+            calcPpBoundary(playerId, ppBoundary)?.toFixed(2),
+          )}pp`}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="flex flex-col gap-4" align="start">
+        <p>Global PP Gain +{ppBoundary} pp</p>
+        <Slider
+          defaultValue={[1]}
+          min={1}
+          max={100}
+          step={1}
+          onValueChange={(value) => setPpBoundary(value[0])}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

src/components/player/PlayerInfo.tsx

@@ -2,11 +2,7 @@ import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
 import { useSettingsStore } from "@/store/settingsStore";
 import { formatNumber } from "@/utils/numberUtils";
-import {
-  calcPpBoundary,
-  getAveragePp,
-  getHighestPpPlay,
-} from "@/utils/scoresaber/scores";
+import { getAveragePp, getHighestPpPlay } from "@/utils/scoresaber/scores";
 import { normalizedRegionName } from "@/utils/utils";
 import {
   GlobeAsiaAustraliaIcon,
@@ -22,6 +18,7 @@ import Button from "../Button";
 import Card from "../Card";
 import CountyFlag from "../CountryFlag";
 import Label from "../Label";
+import PPGainLabel from "./PPGainLabel";
 
 type PlayerInfoProps = {
   playerData: ScoresaberPlayer;
@@ -262,19 +259,8 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                     getAveragePp(playerId)?.toFixed(2),
                   )}pp`}
                 />
-                <Label
-                  title="+ 1pp"
-                  className="bg-pp-blue"
-                  tooltip={
-                    <p>
-                      Amount of raw pp required to increase your global pp by
-                      1pp
-                    </p>
-                  }
-                  value={`${formatNumber(
-                    calcPpBoundary(playerId, 1)?.toFixed(2),
-                  )}pp raw per global`}
-                />
+
+                <PPGainLabel playerId={playerId} />
               </>
             )}
           </div>

src/components/ui/Tooltip.tsx

@@ -19,7 +19,6 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
-      "border-none bg-zinc-800 text-white",
       className,
     )}
     {...props}

src/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from "@/utils/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverContent, PopoverTrigger };

src/components/ui/slider.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+
+import { cn } from "@/utils/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="bg-secondary relative h-2 w-full grow overflow-hidden rounded-full">
+      <SliderPrimitive.Range className="bg-primary absolute h-full" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="border-primary bg-background ring-offset-background focus-visible:ring-ring block h-5 w-5 rounded-full border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

src/components/ui/theme-provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}