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)',
|
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() {
|
function useRoomSafe() {
|
||||||
try {
|
try {
|
||||||
return useRoom();
|
return useRoom();
|
||||||
@ -68,6 +33,7 @@ export function MemberList() {
|
|||||||
|
|
||||||
const [groups, setGroups] = useState<MemberGroup[]>([]);
|
const [groups, setGroups] = useState<MemberGroup[]>([]);
|
||||||
const [total, setTotal] = useState(0);
|
const [total, setTotal] = useState(0);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
const [apiPresence, setApiPresence] = useState<Map<string, PresenceStatus>>(new Map());
|
const [apiPresence, setApiPresence] = useState<Map<string, PresenceStatus>>(new Map());
|
||||||
|
|
||||||
// Fetch project presence from API
|
// Fetch project presence from API
|
||||||
@ -127,10 +93,12 @@ export function MemberList() {
|
|||||||
if (!projectName) {
|
if (!projectName) {
|
||||||
setGroups([]);
|
setGroups([]);
|
||||||
setTotal(0);
|
setTotal(0);
|
||||||
|
setLoading(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
projectMembersGrouped(projectName)
|
projectMembersGrouped(projectName)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
@ -144,139 +112,109 @@ export function MemberList() {
|
|||||||
console.error('[MemberList] failed to load project members:', err);
|
console.error('[MemberList] failed to load project members:', err);
|
||||||
setGroups([]);
|
setGroups([]);
|
||||||
setTotal(0);
|
setTotal(0);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
if (!cancelled) setLoading(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => { cancelled = true; };
|
return () => { cancelled = true; };
|
||||||
}, [projectName]);
|
}, [projectName]);
|
||||||
|
|
||||||
// Real project members loaded
|
// Loading state
|
||||||
if (groups.length > 0) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div
|
<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)' }}
|
style={{ backgroundColor: 'var(--surface-sidebar)' }}
|
||||||
>
|
>
|
||||||
<div
|
<div className="w-5 h-5 rounded-full border-2 border-t-transparent animate-spin" style={{ borderColor: 'var(--text-muted)', borderTopColor: 'transparent' }} />
|
||||||
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>
|
</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 (
|
return (
|
||||||
<div
|
<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)' }}
|
style={{ backgroundColor: 'var(--surface-sidebar)' }}
|
||||||
>
|
>
|
||||||
{MOCK_ROLES.map((role) => (
|
<div
|
||||||
<div key={role.name} className="mb-2">
|
className="px-2 py-2 text-[11px] font-semibold uppercase tracking-wider"
|
||||||
<div
|
style={{ color: 'var(--text-muted)' }}
|
||||||
className="flex items-center px-1 py-1 text-[11px] font-semibold uppercase"
|
>
|
||||||
style={{ color: 'var(--text-muted)' }}
|
Members — {total}
|
||||||
>
|
</div>
|
||||||
<span style={{ color: role.color }}>{role.name}</span>
|
|
||||||
<span className="ml-1">— {role.members.length}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{role.members.map((m) => (
|
{groups.map((g) => {
|
||||||
<button
|
const color = ROLE_COLORS[g.role.toLowerCase()] || 'var(--role-gray)';
|
||||||
key={m.name}
|
return (
|
||||||
className={`flex items-center gap-3 px-2 py-1.5 rounded-[4px] transition-colors cursor-pointer w-full text-left ${
|
<div key={g.role} className="mb-2">
|
||||||
m.status === 'offline' ? 'opacity-40' : ''
|
<div
|
||||||
}`}
|
className="flex items-center px-2 py-1 text-[11px] font-semibold uppercase tracking-wider"
|
||||||
style={{ color: 'var(--text-primary)' }}
|
style={{ color: 'var(--text-muted)' }}
|
||||||
>
|
>
|
||||||
<div
|
<span style={{ color }}>{g.role}</span>
|
||||||
className="w-8 h-8 rounded-full flex items-center justify-center relative flex-shrink-0"
|
<span className="ml-1">— {g.members.length}</span>
|
||||||
style={{ backgroundColor: role.color }}
|
</div>
|
||||||
>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div className="min-w-0">
|
{g.members.map((m) => {
|
||||||
<p className="text-[13px] font-medium truncate" style={{ color: role.color }}>
|
const presence = presenceMap.get(m.user_id) || 'offline';
|
||||||
{m.name}
|
const isOffline = presence === 'offline';
|
||||||
</p>
|
return (
|
||||||
{m.activity && (
|
<button
|
||||||
<p className="text-[11px] truncate" style={{ color: 'var(--text-muted)' }}>
|
key={m.user_id}
|
||||||
{m.activity}
|
className={`flex items-center gap-3 px-2 py-1.5 rounded-[4px] transition-colors cursor-pointer w-full text-left ${
|
||||||
</p>
|
isOffline ? 'opacity-40' : ''
|
||||||
)}
|
}`}
|
||||||
</div>
|
style={{ color: 'var(--text-primary)' }}
|
||||||
</button>
|
>
|
||||||
))}
|
<div style={{ position: 'relative', flexShrink: 0 }}>
|
||||||
</div>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user