Minor cleanup and layout changes

Author: KushPatel-18

client/src/components/ui/popups/user_friends_add_popup.tsx

@@ -1,4 +1,4 @@
-import { removeFriend,sendFriendRequest } from "../../../lib/api/friends";
+import { removeFriend, sendFriendRequest } from "../../../lib/api/friends";
 import { OtherUsers } from "../user_tables/user_friends_add_table";
 
 const FriendAddItemModal = ({

client/src/components/ui/popups/user_friends_search_popup.tsx

@@ -36,8 +36,8 @@ function UserFriendsSearchPopup({ isOpen, onClose }: ItemModalProps) {
                 placeholder="Eg., Ky Kiske"
               />
               <button
-                className="absolute right-1 top-1 flex items-center rounded border border-transparent bg-slate-800 px-2.5 py-1 text-center text-sm text-white shadow-sm transition-all hover:bg-slate-700 hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
                 type="button"
+                className="absolute right-1 top-1 flex items-center rounded border border-transparent bg-slate-800 px-2.5 py-1 text-center text-sm text-white shadow-sm transition-all hover:bg-slate-700 hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

client/src/components/ui/popups/user_friends_select_popup.tsx

@@ -27,6 +27,8 @@ function UserFriendsSelectPopup({ isOpen, item, onClose }: ItemModalProps) {
           {/* Header */}
           {/* Avatar */}
           <ProfilePicture />
+          {/* Implement below when we implement a profile picture field */}
+
           {/* {profile_picture === Null ? ( 
             <ProfilePicture/>
           ) : (

client/src/components/ui/popups/user_inventory_select_popup.tsx

@@ -3,6 +3,8 @@
 // import Link from "next/link";
 import React from "react";
 
+import ProfilePicture from "../profile_picture"; // Replace with item image when available
+
 type InventoryItem = {
   id: number;
   name: string;
@@ -31,12 +33,7 @@ function UserInventorySelectPopup({
         <div className="flex gap-4">
           {/* Header */}
           {/* Avatar */}
-          <div className="relative flex justify-between">
-            <div className="relative flex h-24 w-24 items-center justify-center overflow-hidden rounded-full bg-blue-500">
-              <div className="absolute top-5 h-12 w-12 rounded-full bg-blue-200"></div>
-              <div className="absolute -bottom-2 left-1/2 h-12 w-16 -translate-x-1/2 rounded-full bg-blue-200"></div>
-            </div>
-          </div>
+          <ProfilePicture />
           {/* Text column */}
           <div className="flex min-w-0 flex-1 flex-col">
             {/* Name */}

client/src/components/ui/user_navbar.tsx

@@ -15,14 +15,6 @@ const UserNavbar = () => {
     null,
   );
 
-  // modal logic
-  // const handleOpen = () => {
-  //   setIsModalOpen(true);
-  // };
-  // const handleClose = () => {
-  //   setIsModalOpen(false);
-  // };
-
   return (
     <>
       {/* 1. Navigation Bar */}
@@ -54,8 +46,8 @@ const UserNavbar = () => {
                 placeholder="Eg., Ky Kiske"
               />
               <button
-                className="absolute right-1 top-1 flex items-center rounded border border-transparent bg-slate-800 px-2.5 py-1 text-center text-sm text-white shadow-sm transition-all hover:bg-slate-700 hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
                 type="button"
+                className="absolute right-1 top-1 flex items-center rounded border border-transparent bg-slate-800 px-2.5 py-1 text-center text-sm text-white shadow-sm transition-all hover:bg-slate-700 hover:shadow focus:bg-slate-700 focus:shadow-none active:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -138,7 +130,6 @@ const UserNavbar = () => {
                   >
                     Login
                   </button>
-                  {/* <a href="/user_login">Login</a> */}
                 </Link>
               </div>
             )}

client/src/components/ui/user_tables/user_friends_table.tsx

@@ -6,33 +6,11 @@ import { getFriends } from "../../../lib/api/friends";
 import { Friend } from "../../../types/friends";
 import FriendItemModal from "../popups/user_friends_select_popup";
 
-// export type MyFriends = {
-//   id: number;
-//   username: string;
-
-// };
-//   profile_picture?: string | null;
-
 const UserFriendsTable = () => {
-  // const [selectedItem, setSelectedItem] = useState<MyFriends | null>(null);
-  // const [isModalOpen, setIsModalOpen] = useState(false);
-  // const [friends, SetFriends] = useState<MyFriends[]>([]);
   const [selectedItem, setSelectedItem] = useState<Friend | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [friends, setFriends] = useState<Friend[]>([]);
 
-  // Mock data (replace with Django API call later)
-  // useEffect(() => {
-  //   getFriends().then((res) => {
-  //     const normalized = res.data.friends.map((f: any) => ({
-  //       id: f.id,
-  //       username: f.username,
-  //       // profile_picture: f.profile_picture,
-  //     }));
-
-  //     SetFriends(normalized);
-  //   });
-  // }, []);
   useEffect(() => {
     getFriends().then((res) => {
       setFriends(res.data.friends);

client/src/pages/user_friends.tsx

@@ -33,10 +33,10 @@ const UserFriendsPage = () => {
                 <h2 className="mb-2 text-xl font-semibold">My Friends</h2>
 
                 <button
-                  className="cursor-pointer text-sm font-semibold text-blue-600 hover:underline"
                   onClick={() => {
                     setIsModalOpen(true);
                   }}
+                  className="cursor-pointer text-sm font-semibold text-blue-600 hover:underline"
                 >
                   + Friends{" "}
                 </button>

client/src/pages/user_groups.tsx

@@ -7,15 +7,6 @@ import UserNavbar from "../components/ui/user_navbar";
 // import {useState, useEffect} from "react";
 import UserGroupsTable from "../components/ui/user_tables/user_groups_table";
 
-// type MyGroups = {
-//   id: number;
-//   name: string;
-// }
-
-{
-  /* optional: later have a list for friends in said groups or something in above "my groups" */
-}
-
 // The Header component is now one directory level up from 'pages',
 // so the path is '../components/Header'
 //import Header from '../components/Header';

server/friend/models.py

@@ -11,8 +11,6 @@
 
 class FriendList(models.Model):
 
-    # user = models.OneToOneField(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="user")
-    # friends = models.ManyToManyField(settings.AUTH_USER_MODEL, blank=True, related_name="friends")
     user = models.OneToOneField(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="friend_list")
     friends = models.ManyToManyField(settings.AUTH_USER_MODEL, blank=True, related_name="friends_of")
 

server/friend/views.py

@@ -46,7 +46,6 @@ def post(self, request, request_id):
         friend_request.decline()
         return Response({"success": "Friend request declined"})
 
-# TESTING OUT
 class CancelFriendRequest(APIView):
     permission_classes = [IsAuthenticated]
 
@@ -72,7 +71,6 @@ def get(self, request):
         serializer = FriendRequestSerializer(requests, many=True)
         return Response(serializer.data)
 
-# TESTING OUT
 class RemoveFriends(APIView):
     permission_classes = [IsAuthenticated]