From f082429a58cd69417aec94d46c32337f27f7b99c Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Sun, 10 May 2026 22:52:16 +0800
Subject: [PATCH] feat(core): initialize project with access control and AI
 integration

---
 src/components/layout/MemberList.tsx | 234 ++++++++++-----------------
 1 file changed, 86 insertions(+), 148 deletions(-)

diff --git a/src/components/layout/MemberList.tsx b/src/components/layout/MemberList.tsx
index 3c4998e..4360e0c 100644
--- a/src/components/layout/MemberList.tsx
+++ b/src/components/layout/MemberList.tsx
@@ -19,41 +19,6 @@ const ROLE_COLORS: Record<string, string> = {
   member: 'var(--role-blue)',
 };
 
-/** Fallback mock data for non-project pages or loading states */
-const MOCK_ROLES = [
-  {
-    name: 'Admin',
-    color: 'var(--role-red)',
-    members: [
-      { name: 'ZhenYi', status: 'online' as const, activity: 'Coding' },
-    ],
-  },
-  {
-    name: 'Maintainer',
-    color: 'var(--role-orange)',
-    members: [
-      { name: 'Alex', status: 'online' as const, activity: '' },
-      { name: 'Mia', status: 'idle' as const, activity: 'Reviewing PR' },
-    ],
-  },
-  {
-    name: 'Developer',
-    color: 'var(--role-blue)',
-    members: [
-      { name: 'Tom', status: 'online' as const, activity: '' },
-      { name: 'Luna', status: 'offline' as const, activity: '' },
-      { name: 'Jake', status: 'offline' as const, activity: '' },
-    ],
-  },
-  {
-    name: 'Guest',
-    color: 'var(--role-gray)',
-    members: [
-      { name: 'Sam', status: 'offline' as const, activity: '' },
-    ],
-  },
-];
-
 function useRoomSafe() {
   try {
     return useRoom();
@@ -68,6 +33,7 @@ export function MemberList() {
 
   const [groups, setGroups] = useState<MemberGroup[]>([]);
   const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
   const [apiPresence, setApiPresence] = useState<Map<string, PresenceStatus>>(new Map());
 
   // Fetch project presence from API
@@ -127,10 +93,12 @@ export function MemberList() {
     if (!projectName) {
       setGroups([]);
       setTotal(0);
+      setLoading(false);
       return;
     }
 
     let cancelled = false;
+    setLoading(true);
 
     projectMembersGrouped(projectName)
       .then((res) => {
@@ -144,139 +112,109 @@ export function MemberList() {
         console.error('[MemberList] failed to load project members:', err);
         setGroups([]);
         setTotal(0);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
       });
 
     return () => { cancelled = true; };
   }, [projectName]);
 
-  // Real project members loaded
-  if (groups.length > 0) {
+  // Loading state
+  if (loading) {
     return (
       <div
-        className="flex flex-col h-full w-[240px] pt-4 px-2 overflow-y-auto"
+        className="flex flex-col items-center justify-center h-full w-[240px]"
         style={{ backgroundColor: 'var(--surface-sidebar)' }}
       >
-        <div
-          className="px-2 py-2 text-[11px] font-semibold uppercase tracking-wider"
-          style={{ color: 'var(--text-muted)' }}
-        >
-          Members — {total}
-        </div>
-
-        {groups.map((g) => {
-          const color = ROLE_COLORS[g.role.toLowerCase()] || 'var(--role-gray)';
-          return (
-            <div key={g.role} className="mb-2">
-              <div
-                className="flex items-center px-2 py-1 text-[11px] font-semibold uppercase tracking-wider"
-                style={{ color: 'var(--text-muted)' }}
-              >
-                <span style={{ color }}>{g.role}</span>
-                <span className="ml-1">— {g.members.length}</span>
-              </div>
-
-              {g.members.map((m) => {
-                const presence = presenceMap.get(m.user_id) || 'offline';
-                const isOffline = presence === 'offline';
-                return (
-                  <button
-                    key={m.user_id}
-                    className={`flex items-center gap-3 px-2 py-1.5 rounded-[4px] transition-colors cursor-pointer w-full text-left ${
-                      isOffline ? 'opacity-40' : ''
-                    }`}
-                    style={{ color: 'var(--text-primary)' }}
-                  >
-                    <div style={{ position: 'relative', flexShrink: 0 }}>
-                      <Avatar
-                        senderType="user"
-                        displayName={m.username}
-                        avatarUrl={m.avatar_url}
-                        roleColor={color}
-                        size={32}
-                      />
-                      <div
-                        className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full border-[3px]"
-                        style={{
-                          backgroundColor: STATUS_COLORS[presence] || STATUS_COLORS.offline,
-                          borderColor: 'var(--surface-sidebar)',
-                        }}
-                      />
-                    </div>
-
-                    <div className="min-w-0">
-                      <p className="text-[13px] font-medium truncate" style={{ color }}>
-                        {m.username}
-                      </p>
-                      {m.display_name && (
-                        <p className="text-[11px] truncate" style={{ color: 'var(--text-muted)' }}>
-                          {m.display_name}
-                        </p>
-                      )}
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          );
-        })}
+        <div className="w-5 h-5 rounded-full border-2 border-t-transparent animate-spin" style={{ borderColor: 'var(--text-muted)', borderTopColor: 'transparent' }} />
       </div>
     );
   }
 
-  // Loading / no project selected: show mock fallback
+  // No project selected or no members
+  if (groups.length === 0) {
+    return (
+      <div
+        className="flex flex-col items-center justify-center h-full w-[240px]"
+        style={{ backgroundColor: 'var(--surface-sidebar)' }}
+      >
+        <p className="text-[12px]" style={{ color: 'var(--text-muted)' }}>
+          {projectName ? 'No members' : 'Select a project'}
+        </p>
+      </div>
+    );
+  }
+
+  // Real project members
   return (
     <div
-      className="flex flex-col h-full w-[240px] pt-6 px-2 overflow-y-auto"
+      className="flex flex-col h-full w-[240px] pt-4 px-2 overflow-y-auto"
       style={{ backgroundColor: 'var(--surface-sidebar)' }}
     >
-      {MOCK_ROLES.map((role) => (
-        <div key={role.name} className="mb-2">
-          <div
-            className="flex items-center px-1 py-1 text-[11px] font-semibold uppercase"
-            style={{ color: 'var(--text-muted)' }}
-          >
-            <span style={{ color: role.color }}>{role.name}</span>
-            <span className="ml-1">— {role.members.length}</span>
-          </div>
+      <div
+        className="px-2 py-2 text-[11px] font-semibold uppercase tracking-wider"
+        style={{ color: 'var(--text-muted)' }}
+      >
+        Members — {total}
+      </div>
 
-          {role.members.map((m) => (
-            <button
-              key={m.name}
-              className={`flex items-center gap-3 px-2 py-1.5 rounded-[4px] transition-colors cursor-pointer w-full text-left ${
-                m.status === 'offline' ? 'opacity-40' : ''
-              }`}
-              style={{ color: 'var(--text-primary)' }}
+      {groups.map((g) => {
+        const color = ROLE_COLORS[g.role.toLowerCase()] || 'var(--role-gray)';
+        return (
+          <div key={g.role} className="mb-2">
+            <div
+              className="flex items-center px-2 py-1 text-[11px] font-semibold uppercase tracking-wider"
+              style={{ color: 'var(--text-muted)' }}
             >
-              <div
-                className="w-8 h-8 rounded-full flex items-center justify-center relative flex-shrink-0"
-                style={{ backgroundColor: role.color }}
-              >
-                <span className="text-xs font-medium" style={{ color: 'var(--text-inverse)' }}>
-                  {m.name[0]}
-                </span>
-                <div
-                  className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full border-[3px]"
-                  style={{
-                    backgroundColor: STATUS_COLORS[m.status],
-                    borderColor: 'var(--surface-sidebar)',
-                  }}
-                />
-              </div>
+              <span style={{ color }}>{g.role}</span>
+              <span className="ml-1">— {g.members.length}</span>
+            </div>
 
-              <div className="min-w-0">
-                <p className="text-[13px] font-medium truncate" style={{ color: role.color }}>
-                  {m.name}
-                </p>
-                {m.activity && (
-                  <p className="text-[11px] truncate" style={{ color: 'var(--text-muted)' }}>
-                    {m.activity}
-                  </p>
-                )}
-              </div>
-            </button>
-          ))}
-        </div>
-      ))}
+            {g.members.map((m) => {
+              const presence = presenceMap.get(m.user_id) || 'offline';
+              const isOffline = presence === 'offline';
+              return (
+                <button
+                  key={m.user_id}
+                  className={`flex items-center gap-3 px-2 py-1.5 rounded-[4px] transition-colors cursor-pointer w-full text-left ${
+                    isOffline ? 'opacity-40' : ''
+                  }`}
+                  style={{ color: 'var(--text-primary)' }}
+                >
+                  <div style={{ position: 'relative', flexShrink: 0 }}>
+                    <Avatar
+                      senderType="user"
+                      displayName={m.username}
+                      avatarUrl={m.avatar_url}
+                      roleColor={color}
+                      size={32}
+                    />
+                    <div
+                      className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full border-[3px]"
+                      style={{
+                        backgroundColor: STATUS_COLORS[presence] || STATUS_COLORS.offline,
+                        borderColor: 'var(--surface-sidebar)',
+                      }}
+                    />
+                  </div>
+
+                  <div className="min-w-0">
+                    <p className="text-[13px] font-medium truncate" style={{ color }}>
+                      {m.username}
+                    </p>
+                    {m.display_name && (
+                      <p className="text-[11px] truncate" style={{ color: 'var(--text-muted)' }}>
+                        {m.display_name}
+                      </p>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        );
+      })}
     </div>
   );
 }