feat: integrate user team retrieval into session components, enhancing sharing functionality and user experience across motivators, sessions, weekly check-ins, and year reviews

src/components/year-review/YearReviewLiveWrapper.tsx

@@ -3,7 +3,9 @@
 import { useState, useCallback } from 'react';
 import { useYearReviewLive, type YearReviewLiveEvent } from '@/hooks/useYearReviewLive';
 import { LiveIndicator } from '@/components/collaboration/LiveIndicator';
-import { YearReviewShareModal } from './YearReviewShareModal';
+import { ShareModal } from '@/components/collaboration/ShareModal';
+import { shareYearReviewSession, removeYearReviewShare } from '@/actions/year-review';
+import type { TeamWithMembers } from '@/lib/share-utils';
 import { Button } from '@/components/ui/Button';
 import { Avatar } from '@/components/ui/Avatar';
 import type { ShareRole } from '@prisma/client';
@@ -28,6 +30,7 @@ interface YearReviewLiveWrapperProps {
   shares: Share[];
   isOwner: boolean;
   canEdit: boolean;
+  userTeams?: TeamWithMembers[];
   children: React.ReactNode;
 }
 
@@ -38,6 +41,7 @@ export function YearReviewLiveWrapper({
   shares,
   isOwner,
   canEdit,
+  userTeams = [],
   children,
 }: YearReviewLiveWrapperProps) {
   const [shareModalOpen, setShareModalOpen] = useState(false);
@@ -119,13 +123,25 @@ export function YearReviewLiveWrapper({
       <div className={!canEdit ? 'pointer-events-none opacity-90' : ''}>{children}</div>
 
       {/* Share Modal */}
-      <YearReviewShareModal
+      <ShareModal
         isOpen={shareModalOpen}
         onClose={() => setShareModalOpen(false)}
-        sessionId={sessionId}
+        title="Partager le bilan"
+        sessionSubtitle="Bilan annuel"
         sessionTitle={sessionTitle}
         shares={shares}
         isOwner={isOwner}
+        userTeams={userTeams}
+        currentUserId={currentUserId}
+        onShareWithEmail={(email, role) => shareYearReviewSession(sessionId, email, role)}
+        onRemoveShare={(userId) => removeYearReviewShare(sessionId, userId)}
+        helpText={
+          <>
+            <strong>Éditeur</strong> : peut modifier les items et leurs catégories
+            <br />
+            <strong>Lecteur</strong> : peut uniquement consulter
+          </>
+        }
       />
     </>
   );

src/components/year-review/YearReviewShareModal.tsx

@@ -1,173 +0,0 @@
-'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 { Avatar } from '@/components/ui/Avatar';
-import { shareYearReviewSession, removeYearReviewShare } from '@/actions/year-review';
-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 YearReviewShareModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  sessionId: string;
-  sessionTitle: string;
-  shares: Share[];
-  isOwner: boolean;
-}
-
-export function YearReviewShareModal({
-  isOpen,
-  onClose,
-  sessionId,
-  sessionTitle,
-  shares,
-  isOwner,
-}: YearReviewShareModalProps) {
-  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 shareYearReviewSession(sessionId, email, role);
-      if (result.success) {
-        setEmail('');
-      } else {
-        setError(result.error || 'Erreur lors du partage');
-      }
-    });
-  }
-
-  async function handleRemove(userId: string) {
-    startTransition(async () => {
-      await removeYearReviewShare(sessionId, userId);
-    });
-  }
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} title="Partager le bilan">
-      <div className="space-y-6">
-        {/* Session info */}
-        <div>
-          <p className="text-sm text-muted">Bilan annuel</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">
-                    <Avatar email={share.user.email} name={share.user.name} size={32} />
-                    <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 leurs catégories
-            <br />
-            <strong>Lecteur</strong> : peut uniquement consulter
-          </p>
-        </div>
-      </div>
-    </Modal>
-  );
-}
-

src/components/year-review/index.ts

@@ -2,4 +2,3 @@ export { YearReviewBoard } from './YearReviewBoard';
 export { YearReviewCard } from './YearReviewCard';
 export { YearReviewSection } from './YearReviewSection';
 export { YearReviewLiveWrapper } from './YearReviewLiveWrapper';
-export { YearReviewShareModal } from './YearReviewShareModal';