feat(core): initialize project with access control and AI integration
This commit is contained in:
ZhenYi
parent
1c81036938
commit
f082429a58
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user