feat: enhance session management with sharing capabilities, real-time event synchronization, and UI updates for session display

2025-11-27 13:34:03 +01:00
parent 9ce2b62bc6
commit 10ff15392f
15 changed files with 1127 additions and 84 deletions
--- a/src/components/collaboration/LiveIndicator.tsx
+++ b/src/components/collaboration/LiveIndicator.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+interface LiveIndicatorProps {
+  isConnected: boolean;
+  error?: string | null;
+}
+
+export function LiveIndicator({ isConnected, error }: LiveIndicatorProps) {
+  if (error) {
+    return (
+      <div className="flex items-center gap-2 rounded-full bg-destructive/10 px-3 py-1.5 text-sm text-destructive">
+        <span className="h-2 w-2 rounded-full bg-destructive" />
+        <span>Hors ligne</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`flex items-center gap-2 rounded-full px-3 py-1.5 text-sm transition-colors ${
+        isConnected
+          ? 'bg-success/10 text-success'
+          : 'bg-yellow/10 text-yellow'
+      }`}
+    >
+      <span
+        className={`h-2 w-2 rounded-full ${
+          isConnected ? 'bg-success animate-pulse' : 'bg-yellow'
+        }`}
+      />
+      <span>{isConnected ? 'Live' : 'Connexion...'}</span>
+    </div>
+  );
+}
+
+
--- a/src/components/collaboration/SessionLiveWrapper.tsx
+++ b/src/components/collaboration/SessionLiveWrapper.tsx
@@ -0,0 +1,136 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useSessionLive, type LiveEvent } from '@/hooks/useSessionLive';
+import { LiveIndicator } from './LiveIndicator';
+import { ShareModal } from './ShareModal';
+import { Button } from '@/components/ui/Button';
+import type { ShareRole } from '@prisma/client';
+
+interface ShareUser {
+  id: string;
+  name: string | null;
+  email: string;
+}
+
+interface Share {
+  id: string;
+  role: ShareRole;
+  user: ShareUser;
+  createdAt: Date;
+}
+
+interface SessionLiveWrapperProps {
+  sessionId: string;
+  sessionTitle: string;
+  shares: Share[];
+  isOwner: boolean;
+  canEdit: boolean;
+  children: React.ReactNode;
+}
+
+export function SessionLiveWrapper({
+  sessionId,
+  sessionTitle,
+  shares,
+  isOwner,
+  canEdit,
+  children,
+}: SessionLiveWrapperProps) {
+  const [shareModalOpen, setShareModalOpen] = useState(false);
+  const [lastEventUser, setLastEventUser] = useState<string | null>(null);
+
+  const handleEvent = useCallback((event: LiveEvent) => {
+    // Show who made the last change
+    if (event.user?.name || event.user?.email) {
+      setLastEventUser(event.user.name || event.user.email);
+      // Clear after 3 seconds
+      setTimeout(() => setLastEventUser(null), 3000);
+    }
+  }, []);
+
+  const { isConnected, error } = useSessionLive({
+    sessionId,
+    onEvent: handleEvent,
+  });
+
+  return (
+    <>
+      {/* Header toolbar */}
+      <div className="mb-4 flex items-center justify-between rounded-lg border border-border bg-card p-3">
+        <div className="flex items-center gap-4">
+          <LiveIndicator isConnected={isConnected} error={error} />
+          
+          {lastEventUser && (
+            <div className="flex items-center gap-2 text-sm text-muted animate-pulse">
+              <span>✏️</span>
+              <span>{lastEventUser} édite...</span>
+            </div>
+          )}
+
+          {!canEdit && (
+            <div className="flex items-center gap-2 rounded-full bg-yellow/10 px-3 py-1.5 text-sm text-yellow">
+              <span>👁️</span>
+              <span>Mode lecture</span>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Collaborators avatars */}
+          {shares.length > 0 && (
+            <div className="flex -space-x-2">
+              {shares.slice(0, 3).map((share) => (
+                <div
+                  key={share.id}
+                  className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-primary/10 text-xs font-medium text-primary"
+                  title={share.user.name || share.user.email}
+                >
+                  {share.user.name?.[0]?.toUpperCase() || share.user.email[0].toUpperCase()}
+                </div>
+              ))}
+              {shares.length > 3 && (
+                <div className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-card bg-muted/20 text-xs font-medium text-muted">
+                  +{shares.length - 3}
+                </div>
+              )}
+            </div>
+          )}
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setShareModalOpen(true)}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="mr-2 h-4 w-4"
+            >
+              <path d="M13 4.5a2.5 2.5 0 11.702 1.737L6.97 9.604a2.518 2.518 0 010 .792l6.733 3.367a2.5 2.5 0 11-.671 1.341l-6.733-3.367a2.5 2.5 0 110-3.475l6.733-3.366A2.52 2.52 0 0113 4.5z" />
+            </svg>
+            Partager
+          </Button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className={!canEdit ? 'pointer-events-none opacity-90' : ''}>
+        {children}
+      </div>
+
+      {/* Share Modal */}
+      <ShareModal
+        isOpen={shareModalOpen}
+        onClose={() => setShareModalOpen(false)}
+        sessionId={sessionId}
+        sessionTitle={sessionTitle}
+        shares={shares}
+        isOwner={isOwner}
+      />
+    </>
+  );
+}
+
+
--- a/src/components/collaboration/ShareModal.tsx
+++ b/src/components/collaboration/ShareModal.tsx
@@ -0,0 +1,181 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { Modal } from '@/components/ui/Modal';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { Badge } from '@/components/ui/Badge';
+import { shareSessionAction, removeShareAction } from '@/actions/share';
+import type { ShareRole } from '@prisma/client';
+
+interface ShareUser {
+  id: string;
+  name: string | null;
+  email: string;
+}
+
+interface Share {
+  id: string;
+  role: ShareRole;
+  user: ShareUser;
+  createdAt: Date;
+}
+
+interface ShareModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  sessionId: string;
+  sessionTitle: string;
+  shares: Share[];
+  isOwner: boolean;
+}
+
+export function ShareModal({
+  isOpen,
+  onClose,
+  sessionId,
+  sessionTitle,
+  shares,
+  isOwner,
+}: ShareModalProps) {
+  const [email, setEmail] = useState('');
+  const [role, setRole] = useState<ShareRole>('EDITOR');
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  async function handleShare(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    startTransition(async () => {
+      const result = await shareSessionAction(sessionId, email, role);
+      if (result.success) {
+        setEmail('');
+      } else {
+        setError(result.error || 'Erreur lors du partage');
+      }
+    });
+  }
+
+  async function handleRemove(userId: string) {
+    startTransition(async () => {
+      await removeShareAction(sessionId, userId);
+    });
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Partager la session">
+      <div className="space-y-6">
+        {/* Session info */}
+        <div>
+          <p className="text-sm text-muted">Session</p>
+          <p className="font-medium text-foreground">{sessionTitle}</p>
+        </div>
+
+        {/* Share form (only for owner) */}
+        {isOwner && (
+          <form onSubmit={handleShare} className="space-y-4">
+            <div className="flex gap-2">
+              <Input
+                type="email"
+                placeholder="Email de l'utilisateur"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="flex-1"
+                required
+              />
+              <select
+                value={role}
+                onChange={(e) => setRole(e.target.value as ShareRole)}
+                className="rounded-lg border border-border bg-input px-3 py-2 text-sm text-foreground"
+              >
+                <option value="EDITOR">Éditeur</option>
+                <option value="VIEWER">Lecteur</option>
+              </select>
+            </div>
+
+            {error && <p className="text-sm text-destructive">{error}</p>}
+
+            <Button type="submit" disabled={isPending || !email} className="w-full">
+              {isPending ? 'Partage...' : 'Partager'}
+            </Button>
+          </form>
+        )}
+
+        {/* Current shares */}
+        <div className="space-y-2">
+          <p className="text-sm font-medium text-foreground">
+            Collaborateurs ({shares.length})
+          </p>
+          
+          {shares.length === 0 ? (
+            <p className="text-sm text-muted">
+              Aucun collaborateur pour le moment
+            </p>
+          ) : (
+            <ul className="space-y-2">
+              {shares.map((share) => (
+                <li
+                  key={share.id}
+                  className="flex items-center justify-between rounded-lg border border-border bg-card p-3"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
+                      {share.user.name?.[0]?.toUpperCase() || share.user.email[0].toUpperCase()}
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-foreground">
+                        {share.user.name || share.user.email}
+                      </p>
+                      {share.user.name && (
+                        <p className="text-xs text-muted">{share.user.email}</p>
+                      )}
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-center gap-2">
+                    <Badge variant={share.role === 'EDITOR' ? 'primary' : 'default'}>
+                      {share.role === 'EDITOR' ? 'Éditeur' : 'Lecteur'}
+                    </Badge>
+                    {isOwner && (
+                      <button
+                        onClick={() => handleRemove(share.user.id)}
+                        disabled={isPending}
+                        className="rounded p-1 text-muted hover:bg-destructive/10 hover:text-destructive"
+                        title="Retirer l'accès"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          className="h-4 w-4"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                    )}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        {/* Help text */}
+        <div className="rounded-lg bg-primary/5 p-3">
+          <p className="text-xs text-muted">
+            <strong>Éditeur</strong> : peut modifier les items et actions
+            <br />
+            <strong>Lecteur</strong> : peut uniquement consulter
+          </p>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+
--- a/src/components/collaboration/index.ts
+++ b/src/components/collaboration/index.ts
@@ -0,0 +1,4 @@
+export { LiveIndicator } from './LiveIndicator';
+export { ShareModal } from './ShareModal';
+export { SessionLiveWrapper } from './SessionLiveWrapper';
+
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -1,6 +1,6 @@
 import { HTMLAttributes, forwardRef } from 'react';

-type BadgeVariant =
+export type BadgeVariant =
  | 'default'
  | 'primary'
  | 'strength'
@@ -9,7 +9,8 @@ type BadgeVariant =
  | 'threat'
  | 'success'
  | 'warning'
-  | 'destructive';
+  | 'destructive'
+  | 'accent';

 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant;
@@ -25,6 +26,7 @@ const variantStyles: Record<BadgeVariant, string> = {
  success: 'bg-success/10 text-success border-success/20',
  warning: 'bg-warning/10 text-warning border-warning/20',
  destructive: 'bg-destructive/10 text-destructive border-destructive/20',
+  accent: 'bg-accent/10 text-accent border-accent/20',
 };

 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(