From 526f46807ec201ae4a9e5ba478ed69f9225cec17 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Fri, 29 Mar 2024 08:37:07 +0800
Subject: [PATCH] chore: tweak user list display

---
 web/src/components/UserList.tsx | 44 ++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/web/src/components/UserList.tsx b/web/src/components/UserList.tsx
index cabfe24d..25f2568e 100644
--- a/web/src/components/UserList.tsx
+++ b/web/src/components/UserList.tsx
@@ -20,27 +20,31 @@ const UserList = () => {
   }, []);
 
   return (
-    <div className="w-full mt-2 flex flex-col p-2 bg-gray-50 dark:bg-black rounded-lg">
-      <div className="w-full flex flex-row justify-between items-center">
-        <span className="text-gray-400 font-medium text-sm pl-1">Users</span>
-        <IconButton size="sm" onClick={fetchRecommendUsers}>
-          <Icon.RefreshCcw className="text-gray-400 w-4 h-auto" />
-        </IconButton>
-      </div>
-      {users.map((user) => (
-        <div
-          key={user.name}
-          className="w-full flex flex-row justify-start items-center px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-zinc-900 rounded-lg"
-        >
-          <Link className="w-full flex flex-row items-center" to={`/u/${encodeURIComponent(user.username)}`} unstable_viewTransition>
-            <UserAvatar className="mr-2 shrink-0" avatarUrl={user.avatarUrl} />
-            <div className="w-full flex flex-col justify-center items-start">
-              <span className="text-gray-600 leading-tight max-w-[80%] truncate dark:text-gray-400">{user.nickname || user.username}</span>
-            </div>
-          </Link>
+    users.length > 0 && (
+      <div className="w-full mt-2 flex flex-col p-2 bg-gray-50 dark:bg-black rounded-lg">
+        <div className="w-full flex flex-row justify-between items-center">
+          <span className="text-gray-400 font-medium text-sm pl-1">Users</span>
+          <IconButton size="sm" onClick={fetchRecommendUsers}>
+            <Icon.RefreshCcw className="text-gray-400 w-4 h-auto" />
+          </IconButton>
         </div>
-      ))}
-    </div>
+        {users.map((user) => (
+          <div
+            key={user.name}
+            className="w-full flex flex-row justify-start items-center px-2 py-1.5 hover:bg-gray-100 dark:hover:bg-zinc-900 rounded-lg"
+          >
+            <Link className="w-full flex flex-row items-center" to={`/u/${encodeURIComponent(user.username)}`} unstable_viewTransition>
+              <UserAvatar className="mr-2 shrink-0" avatarUrl={user.avatarUrl} />
+              <div className="w-full flex flex-col justify-center items-start">
+                <span className="text-gray-600 leading-tight max-w-[80%] truncate dark:text-gray-400">
+                  {user.nickname || user.username}
+                </span>
+              </div>
+            </Link>
+          </div>
+        ))}
+      </div>
+    )
   );
 };