sayan/Project_Velocity
1
1
Fork 0
forked from sagnik/Project_Velocity
Code Issues Pull Requests Activity

fix: Applied fix for name, the oracle team sharing, sentinel client list visibility

Browse Source
This commit is contained in:
Sagnik
2026-04-19 17:07:12 +05:30
parent 269591a3cc
commit d886e4a669
20 changed files with 940 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
app/src/oracle/components/ShareModal.tsx
View File

@@ -1,51 +1,99 @@
/**
* ShareModal — Fork-based sharing workflow.
* Explains the direct_fork_only semantics (recipient gets an editable copy,
* not live edit access to owner's canvas).
*/
import { useState, useEffect } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { X, Share2, GitFork, Lock, Users, MessageSquare, ChevronDown } from 'lucide-react';
import { Button } from '@/components/ui/button';
import type { CanvasPage } from '../types/canvas';
import { listVelocityUsers, type VelocityActiveUser } from '@/lib/velocityPlatformClient';
interface ShareModalProps {
page: CanvasPage | null;
isOpen: boolean;
onClose: () => void;
onShare: (params: {
recipientEmail: string;
recipientUserId: string;
visibility: 'private' | 'team';
message: string;
sourceRevision: number;
}) => Promise<void>;
}
const TEAM_MEMBERS = [
{ id: 'u2', name: 'Elena Rostova', email: 'elena@binghatti.ae', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=80&q=80', role: 'Senior Broker' },
{ id: 'u3', name: 'Priya Sharma', email: 'priya@binghatti.ae', avatar: 'https://images.unsplash.com/photo-1554151228-14d9def656e4?auto=format&fit=crop&w=80&q=80', role: 'Senior Broker' },
{ id: 'u4', name: 'Carlos Mendez', email: 'carlos@binghatti.ae', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=80&q=80', role: 'Broker' },
{ id: 'u5', name: 'Ravi Kapoor', email: 'ravi@binghatti.ae', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=80&q=80', role: 'Broker' },
];
function getDisplayName(member: VelocityActiveUser): string {
return member.full_name?.trim() || member.email?.trim() || member.user_id;
}
function getRoleLabel(member: VelocityActiveUser): string {
return member.role
.toLowerCase()
.split('_')
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
.join(' ');
}
function getInitials(member: VelocityActiveUser): string {
const basis = getDisplayName(member);
return basis
.split(/[\s@._-]+/)
.filter(Boolean)
.slice(0, 2)
.map((part) => part.charAt(0).toUpperCase())
.join('') || 'U';
}
export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps) {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
const [recipient, setRecipient] = useState<{ id: string; name: string; email: string } | null>(null);
const [teamMembers, setTeamMembers] = useState<VelocityActiveUser[]>([]);
const [loadingMembers, setLoadingMembers] = useState(false);
const [membersError, setMembersError] = useState<string | null>(null);
const [recipient, setRecipient] = useState<VelocityActiveUser | null>(null);
const [visibility, setVisibility] = useState<'private' | 'team'>('private');
const [message, setMessage] = useState('');
const [submitting, setSubmitting] = useState(false);
const [success, setSuccess] = useState(false);
const [memberDropOpen, setMemberDropOpen] = useState(false);
useEffect(() => setMounted(true), []);
useEffect(() => {
if (!isOpen) {
setMemberDropOpen(false);
return;
}
let cancelled = false;
setLoadingMembers(true);
setMembersError(null);
void listVelocityUsers()
.then((users) => {
if (cancelled) return;
setTeamMembers(users);
})
.catch((error) => {
if (cancelled) return;
setMembersError(error instanceof Error ? error.message : 'Failed to load team members.');
setTeamMembers([]);
})
.finally(() => {
if (!cancelled) setLoadingMembers(false);
});
return () => {
cancelled = true;
};
}, [isOpen]);
const selectedRecipientLabel = useMemo(
() => (recipient ? getDisplayName(recipient) : 'Select verified teammate...'),
[recipient],
);
const handleShare = async () => {
if (!recipient || !page) return;
setSubmitting(true);
try {
await onShare({
recipientEmail: recipient.email,
recipientUserId: recipient.user_id,
visibility,
message,
sourceRevision: page.headRevision,
@@ -56,9 +104,9 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
onClose();
setRecipient(null);
setMessage('');
}, 2000);
}, 1800);
} catch {
// stay open on error
// keep modal open and let caller surface the error upstream
} finally {
setSubmitting(false);
}
@@ -68,7 +116,6 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
<AnimatePresence>
{isOpen && (
<>
{/* Backdrop */}
<motion.div
key="share-backdrop"
className="fixed inset-0 z-40"
@@ -95,7 +142,6 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
boxShadow: '0 24px 80px rgba(0,0,0,0.8)',
}}
>
{/* Header */}
<div className="flex items-center justify-between mb-5">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-xl bg-blue-500/15 border border-blue-500/25 flex items-center justify-center">
@@ -113,16 +159,14 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
</button>
</div>
{/* Fork explanation */}
<div
className="flex items-start gap-3 p-3 rounded-xl mb-5"
style={{ background: 'rgba(59,130,246,0.07)', border: '1px solid rgba(59,130,246,0.18)' }}
>
<GitFork className="w-4 h-4 text-blue-400 flex-shrink-0 mt-0.5" />
<p className="text-xs text-zinc-300 leading-relaxed">
The recipient gets a <span className="text-blue-300 font-medium">fork</span> — an editable copy
of this canvas at revision {page?.headRevision}. They can build on it and open a merge
request to propose their changes back.
The recipient gets a <span className="text-blue-300 font-medium">fork</span> of this canvas at the selected revision.
They can edit their copy and later open a merge request back into the source branch.
</p>
</div>
@@ -131,17 +175,16 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
<div className="w-12 h-12 rounded-full bg-green-500/15 border border-green-500/30 flex items-center justify-center">
<Share2 className="w-6 h-6 text-green-400" />
</div>
<p className="text-sm text-zinc-200 font-medium">Fork created successfully!</p>
<p className="text-xs text-zinc-500">{recipient?.name} can now access their copy.</p>
<p className="text-sm text-zinc-200 font-medium">Fork created successfully.</p>
<p className="text-xs text-zinc-500">{recipient ? getDisplayName(recipient) : 'Recipient'} can access the shared copy.</p>
</div>
) : (
<div className="space-y-4">
{/* Recipient picker */}
<div>
<label className="text-xs font-medium text-zinc-400 mb-1.5 block">Recipient</label>
<div className="relative">
<button
onClick={() => setMemberDropOpen((p) => !p)}
onClick={() => setMemberDropOpen((prev) => !prev)}
className="w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm"
style={{
background: 'rgba(255,255,255,0.04)',
@@ -151,10 +194,14 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
>
<div className="flex items-center gap-2">
<Users className="w-3.5 h-3.5 text-zinc-500" />
<span>{recipient?.name ?? 'Select team member…'}</span>
<span>{selectedRecipientLabel}</span>
</div>
<ChevronDown className="w-3.5 h-3.5 text-zinc-600" style={{ transform: memberDropOpen ? 'rotate(180deg)' : 'none' }} />
<ChevronDown
className="w-3.5 h-3.5 text-zinc-600"
style={{ transform: memberDropOpen ? 'rotate(180deg)' : 'none' }}
/>
</button>
<AnimatePresence>
{memberDropOpen && (
<motion.div
@@ -164,16 +211,40 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
>
{TEAM_MEMBERS.map((m) => (
{loadingMembers && (
<div className="px-3 py-3 text-xs text-zinc-500">Loading verified accounts...</div>
)}
{!loadingMembers && membersError && (
<div className="px-3 py-3 text-xs text-red-400">{membersError}</div>
)}
{!loadingMembers && !membersError && teamMembers.length === 0 && (
<div className="px-3 py-3 text-xs text-zinc-500">No verified users available.</div>
)}
{!loadingMembers && !membersError && teamMembers.map((member) => (
<button
key={m.id}
key={member.user_id}
className="w-full flex items-center gap-3 px-3 py-2.5 hover:bg-white/5 transition-colors text-left"
onClick={() => { setRecipient(m); setMemberDropOpen(false); }}
onClick={() => {
setRecipient(member);
setMemberDropOpen(false);
}}
>
<img src={m.avatar} className="w-7 h-7 rounded-full" alt={m.name} />
<div>
<p className="text-sm text-zinc-200">{m.name}</p>
<p className="text-[10px] text-zinc-500">{m.role}</p>
{member.avatar_url ? (
<img
src={member.avatar_url}
alt={getDisplayName(member)}
className="w-7 h-7 rounded-full object-cover"
/>
) : (
<div className="w-7 h-7 rounded-full bg-blue-500/15 border border-blue-500/25 text-[10px] font-semibold text-blue-300 flex items-center justify-center">
{getInitials(member)}
</div>
)}
<div className="min-w-0">
<p className="text-sm text-zinc-200 truncate">{getDisplayName(member)}</p>
<p className="text-[10px] text-zinc-500 truncate">
{member.email || member.user_id} · {getRoleLabel(member)}
</p>
</div>
</button>
))}
@@ -183,7 +254,6 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
</div>
</div>
{/* Visibility */}
<div>
<label className="text-xs font-medium text-zinc-400 mb-1.5 block">Fork visibility</label>
<div className="grid grid-cols-2 gap-2">
@@ -210,7 +280,6 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
</div>
</div>
{/* Message */}
<div>
<label className="text-xs font-medium text-zinc-400 mb-1.5 flex items-center gap-1.5">
<MessageSquare className="w-3 h-3" />
@@ -219,7 +288,7 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="Add context for the recipient…"
placeholder="Add context for the recipient..."
rows={3}
className="w-full px-3 py-2.5 text-sm rounded-xl resize-none focus:outline-none"
style={{
@@ -230,7 +299,6 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
/>
</div>
{/* Actions */}
<div className="flex gap-2 pt-1">
<Button
variant="outline"
@@ -244,7 +312,7 @@ export function ShareModal({ page, isOpen, onClose, onShare }: ShareModalProps)
disabled={!recipient || submitting}
className="flex-1 bg-blue-600 hover:bg-blue-500 text-white"
>
{submitting ? 'Creating fork…' : 'Share (Create Fork)'}
{submitting ? 'Creating fork...' : 'Share (Create Fork)'}
</Button>
</div>
</div>