added friend removing and updated fetching scores notice

src/components/Navbar.tsx

@@ -68,7 +68,7 @@ export default function Navbar() {
               return (
                 <Button
                   key={friend.id}
-                  className="mt-2 bg-gray-600"
+                  className="mt-2 bg-gray-500"
                   text={friend.name}
                   url={`/player/${friend.id}`}
                   icon={

src/components/player/PlayerInfo.tsx

@@ -12,6 +12,7 @@ import {
   GlobeAsiaAustraliaIcon,
   HomeIcon,
   UserIcon,
+  XMarkIcon,
 } from "@heroicons/react/20/solid";
 import dynamic from "next/dynamic";
 import { useRef } from "react";
@@ -52,8 +53,20 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
     addProfile(true);
   }
 
+  async function removeFriend() {
+    settingsStore?.removeFriend(playerData.id);
+
+    toast.success(`Successfully removed ${playerData.name} as a friend`);
+  }
+
   async function addProfile(isFriend: boolean) {
     if (!useScoresaberScoresStore.getState().exists(playerId)) {
+      if (!isFriend) {
+        toast.success(`Successfully set ${playerData.name} as your profile`);
+      } else {
+        toast.success(`Successfully added ${playerData.name} as a friend`);
+      }
+
       const reponse = await playerScoreStore?.addOrUpdatePlayer(
         playerId,
         (page, totalPages) => {
@@ -61,18 +74,27 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
 
           if (page == 1) {
             toastId.current = toast.info(
-              `Fetching scores ${page}/${totalPages}`,
+              `Fetching scores for ${playerData.name} page ${page}/${totalPages}`,
               {
                 autoClose: autoClose,
                 progress: page / totalPages,
               },
             );
           } else {
-            toast.update(toastId.current, {
-              progress: page / totalPages,
-              render: `Fetching scores ${page}/${totalPages}`,
-              autoClose: autoClose,
-            });
+            if (page != totalPages) {
+              toast.update(toastId.current, {
+                progress: page / totalPages,
+                render: `Fetching scores for ${playerData.name} page ${page}/${totalPages}`,
+                autoClose: autoClose,
+              });
+            } else {
+              toast.update(toastId.current, {
+                progress: 0,
+                render: `Successfully fetched scores for ${playerData.name}`,
+                autoClose: autoClose,
+                type: "success",
+              });
+            }
           }
 
           console.log(
@@ -86,12 +108,6 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
         return;
       }
     }
-
-    if (!isFriend) {
-      toast.success(`Successfully set ${playerData.name} as your profile`);
-    } else {
-      toast.success(`Successfully added ${playerData.name} as a friend`);
-    }
   }
 
   const isOwnProfile = settingsStore.player?.id == playerId;
@@ -117,13 +133,26 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
               </button>
             )}
 
-            {!settingsStore?.isFriend(playerId) && !isOwnProfile && (
-              <button
-                className="rounded-md bg-blue-500 p-1 hover:bg-blue-600"
-                onClick={addFriend}
-              >
-                <UserIcon title="Add as Friend" width={24} height={24} />
-              </button>
+            {!isOwnProfile && (
+              <>
+                {!settingsStore?.isFriend(playerId) && (
+                  <button
+                    className="rounded-md bg-blue-500 p-1 hover:opacity-80"
+                    onClick={addFriend}
+                  >
+                    <UserIcon title="Add as Friend" width={24} height={24} />
+                  </button>
+                )}
+
+                {settingsStore.isFriend(playerId) && (
+                  <button
+                    className="rounded-md bg-red-500 p-1 hover:opacity-80"
+                    onClick={removeFriend}
+                  >
+                    <XMarkIcon title="Remove Friend" width={24} height={24} />
+                  </button>
+                )}
+              </>
             )}
           </div>
         </div>

src/store/scoresaberScoresStore.ts

@@ -57,6 +57,13 @@ interface ScoreSaberScoresStore {
     message: string;
   }>;
 
+  /**
+   * Removes a player and clears their scores from the local database
+   *
+   * @param playerId the player id
+   */
+  removePlayer: (playerId: string) => void;
+
   /**
    * Refreshes the player scores and adds any new scores to the local database
    */
@@ -135,15 +142,15 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
           console.log("Scanning page", page, "for", playerId);
           if (newScores?.scores.length == 0 || newScores == undefined) break;
 
+          // Call the callback if it exists
+          callback?.(page, newScores.pageInfo.totalPages);
+
           for (const score of newScores.scores) {
             if (score.score.id == mostRecentScoreId) {
               search = false;
               break;
             }
 
-            // Call the callback if it exists
-            callback?.(page, newScores.pageInfo.totalPages);
-
             if (mostRecentScoreId) {
               // remove the old score
               const oldScoreIndex = oldScores.findIndex(
@@ -210,6 +217,12 @@ export const useScoresaberScoresStore = create<ScoreSaberScoresStore>()(
         };
       },
 
+      removePlayer: (playerId: string) => {
+        let players: Player[] = get().players;
+        players = players.filter((player) => player.id != playerId);
+        set({ players });
+      },
+
       updatePlayerScores: async () => {
         const players = get().players;
         const friends = useSettingsStore.getState().friends;

src/store/settingsStore.ts

@@ -6,6 +6,7 @@ import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 import { IDBStorage } from "./IndexedDBStorage";
+import { useScoresaberScoresStore } from "./scoresaberScoresStore";
 
 interface SettingsStore {
   player: ScoresaberPlayer | undefined;
@@ -54,6 +55,8 @@ export const useSettingsStore = create<SettingsStore>()(
 
       removeFriend: (friendId: string) => {
         const friends = get().friends;
+
+        useScoresaberScoresStore.getState().removePlayer(friendId);
         set({ friends: friends.filter((friend) => friend.id != friendId) });
 
         return friendId;