added profile claiming

src/components/Container.tsx

@@ -1,9 +1,11 @@
+import { ToastContainer } from "react-toastify";
 import Footer from "./Footer";
 import Navbar from "./Navbar";
 
 export default function Container({ children }: { children: React.ReactNode }) {
   return (
     <>
+      <ToastContainer className="z-50" position="top-right" theme="dark" />
       <div className="m-auto flex h-screen min-h-full flex-col items-center opacity-90 md:max-w-[1200px]">
         <Navbar />
         <div className="w-full flex-1">{children}</div>

src/components/Navbar.tsx

@@ -1,9 +1,14 @@
+"use client";
+
+import { useSettingsStore } from "@/store/settingsStore";
+import { useStore } from "@/utils/useState";
 import {
   CogIcon,
   MagnifyingGlassIcon,
   UserIcon,
 } from "@heroicons/react/20/solid";
 import { GlobeAltIcon } from "@heroicons/react/24/outline";
+import Avatar from "./Avatar";
 import Button from "./Button";
 
 interface ButtonProps {
@@ -17,12 +22,12 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
   return (
     <div className="group">
       <a
-        className="flex w-fit transform-gpu items-center justify-center gap-1 rounded-md p-3 transition-all hover:cursor-pointer hover:bg-blue-500"
+        className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-3 transition-all hover:cursor-pointer hover:bg-blue-500"
         href={href}
       >
         <>
           {icon}
-          <p className="hidden xs:block">{text}</p>
+          <p className="hidden md:block">{text}</p>
         </>
       </a>
 
@@ -36,9 +41,30 @@ function NavbarButton({ text, icon, href, children }: ButtonProps) {
 }
 
 export default function Navbar() {
+  const settingsStore = useStore(useSettingsStore, (state) => {
+    return {
+      profilePicture: state.profilePicture,
+      userId: state.userId,
+    };
+  });
+
   return (
     <>
       <div className="flex h-fit w-full rounded-md bg-gray-800">
+        {settingsStore && settingsStore.profilePicture && (
+          <NavbarButton
+            text="You"
+            icon={
+              <Avatar
+                url={settingsStore.profilePicture}
+                label="Your avatar"
+                size={32}
+              />
+            }
+            href={`/player/${settingsStore.userId}`}
+          />
+        )}
+
         <NavbarButton text="Friends" icon={<UserIcon height={20} width={20} />}>
           <p className="text-sm font-bold">No friends, add someone!</p>
 

src/components/Score.tsx

@@ -16,13 +16,13 @@ export default function Score({ score, leaderboard }: ScoreProps) {
   const isFullCombo = score.missedNotes + score.badCuts === 0;
 
   return (
-    <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[1.1fr_6fr_3fr] xl:xs:grid-cols-[.95fr_6fr_3fr]">
+    <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[1.1fr_6fr_3fr] xl:md:grid-cols-[.95fr_6fr_3fr]">
       <div className="ml-3 flex flex-col items-start justify-center">
         <div className="hidden w-fit flex-row items-center justify-start gap-1 md:flex">
           <GlobeAsiaAustraliaIcon width={20} height={20} />
           <p>#{score.rank}</p>
         </div>
-        <p className="hidden text-sm text-gray-200 xs:block">
+        <p className="hidden text-sm text-gray-200 md:block">
           {moment(score.timeSet).fromNow()}
         </p>
       </div>
@@ -55,7 +55,7 @@ export default function Score({ score, leaderboard }: ScoreProps) {
           {/* Time Set (Mobile) */}
           <div>
             {" "}
-            <p className="block text-sm text-gray-200 xs:hidden">
+            <p className="block text-sm text-gray-200 md:hidden">
               {moment(score.timeSet).fromNow()}
             </p>
           </div>