@rpg-engine/long-bow 0.8.124 → 0.8.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.124",
+  "version": "0.8.126",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Friends/FriendList.tsx

@@ -49,7 +49,7 @@ export const FriendList: React.FC<IFriendListProps> = ({
   onBackFriendList,
 }) => {
   const [characterName, setCharacterName] = useState('');
-  const [activeTab, setActiveTab] = useState('friends');
+  const [activeTab, setActiveTab] = useState(friends.length > 0 ? 'friends' : 'search');
 
   useEffect(() => {
     if (activeTab === 'search') {
@@ -79,53 +79,45 @@ export const FriendList: React.FC<IFriendListProps> = ({
     }
   };
 
-  const friendsTabContent =
-    friends.length > 0 ? (
-      <ScrollableArea>
-        <Table>
-          <thead>
-            <TableRow>
-              <TableHeader>Online</TableHeader>
-              <TableHeader>Name</TableHeader>
-              <TableHeader>Actions</TableHeader>
+  const friendsTabContent = (
+    <ScrollableArea>
+      <Table>
+        <thead>
+          <TableRow>
+            <TableHeader>Online</TableHeader>
+            <TableHeader>Name</TableHeader>
+            <TableHeader>Actions</TableHeader>
+          </TableRow>
+        </thead>
+        <tbody>
+          {friends.map(friend => (
+            <TableRow key={friend._id}>
+              <TableCell>
+                <IsOnlineBadge $isOnline={friend.isOnline} />
+              </TableCell>
+              <TableCell>{friend.name}</TableCell>
+              <TableCell>
+                <ActionButtons>
+                  <UserActionLink
+                    color={uiColors.white}
+                    onClick={() => onOpenPrivateMessage(friend)}
+                  >
+                    Chat
+                  </UserActionLink>
+                  <UserActionLink
+                    color={uiColors.red}
+                    onClick={() => onRemoveFriend(friend)}
+                  >
+                    Remove
+                  </UserActionLink>
+                </ActionButtons>
+              </TableCell>
             </TableRow>
-          </thead>
-          <tbody>
-            {friends.map(friend => (
-              <TableRow key={friend._id}>
-                <TableCell>
-                  <IsOnlineBadge $isOnline={friend.isOnline} />
-                </TableCell>
-                <TableCell>{friend.name}</TableCell>
-                <TableCell>
-                  <ActionButtons>
-                    <UserActionLink
-                      color={uiColors.white}
-                      onClick={() => onOpenPrivateMessage(friend)}
-                    >
-                      Chat
-                    </UserActionLink>
-                    <UserActionLink
-                      color={uiColors.red}
-                      onClick={() => onRemoveFriend(friend)}
-                    >
-                      Remove
-                    </UserActionLink>
-                  </ActionButtons>
-                </TableCell>
-              </TableRow>
-            ))}
-          </tbody>
-        </Table>
-      </ScrollableArea>
-    ) : (
-      <EmptyStateContainer>
-        <EmptyStateText>You don't have any friends yet</EmptyStateText>
-        <AddFriendCTA onClick={() => setActiveTab('search')}>
-          Add your first friend
-        </AddFriendCTA>
-      </EmptyStateContainer>
-    );
+          ))}
+        </tbody>
+      </Table>
+    </ScrollableArea>
+  );
 
   const searchTabContent = (
     <ListContainer>
@@ -162,7 +154,9 @@ export const FriendList: React.FC<IFriendListProps> = ({
   );
 
   const tabs = [
-    { id: 'friends', title: `Friends (${friends.length})`, content: friendsTabContent },
+    ...(friends.length > 0
+      ? [{ id: 'friends', title: `Friends (${friends.length})`, content: friendsTabContent }]
+      : []),
     { id: 'search', title: 'Search', content: searchTabContent },
     {
       id: 'requests',
@@ -313,34 +307,3 @@ const EmptyMessage = styled.p`
   padding: 1rem;
   font-size: ${uiFonts.size.small};
 `;
-
-const EmptyStateContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  gap: 1rem;
-`;
-
-const EmptyStateText = styled.p`
-  text-align: center;
-  color: #888;
-  font-size: ${uiFonts.size.small};
-  margin: 0;
-`;
-
-const AddFriendCTA = styled.button`
-  background-color: ${uiColors.lightGreen};
-  color: #000;
-  border: none;
-  padding: 0.5rem 1rem;
-  font-size: ${uiFonts.size.small};
-  cursor: pointer;
-  border-radius: 4px;
-  transition: opacity 0.2s;
-
-  &:hover {
-    opacity: 0.8;
-  }
-`;