ProjectListView: modal descripción completa + gestor de equipo por proyecto

- Descripción clickeable abre Dialog con texto completo
- Avatares de miembros del equipo en cada card (tooltip + max 4 + +N)
- Gestor de equipo: selección curada de miembros por proyecto
- Persistencia local vía storage (L1/L2/L3)
- i18n es/en con 7 keys nuevas

src/views/ProjectListView.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { onMounted } from "vue"
+import { ref, computed, onMounted, watch } from "vue"
 import { useI18n } from "vue-i18n"
 import { useProjectsStore } from "@/stores/projects"
-import { IconFolder, IconExclamationCircle } from "@tabler/icons-vue"
+import { useUsersStore, type AlphaUser } from "@/stores/users"
+import { storage } from "@/services/storage"
+import { IconFolder, IconExclamationCircle, IconUsers, IconUserPlus, IconX } from "@tabler/icons-vue"
 import {
   Card,
   CardHeader,
@@ -11,10 +13,118 @@ import {
 } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Skeleton } from "@/components/ui/skeleton"
+import { Button } from "@/components/ui/button"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 
 const { t } = useI18n()
 const projects = useProjectsStore()
+const usersStore = useUsersStore()
 
+// ─── Description modal ───────────────────────
+const descProject = ref<{ id: number; name: string; description?: string } | null>(null)
+const descOpen = ref(false)
+
+function openDescription(p: { id: number; initiative_name?: string; name?: string; description?: string }) {
+  descProject.value = {
+    id: p.id,
+    name: p.initiative_name || p.name || t('projects.unnamedFallback', { id: p.id }),
+    description: p.description,
+  }
+  descOpen.value = true
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map(w => w[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+}
+
+// ─── Per-project team members ───────────────
+const teamByProject = ref<Map<number, number[]>>(new Map())
+const teamDialogProjectId = ref<number | null>(null)
+const teamDialogOpen = ref(false)
+const pendingTeam = ref<Set<number>>(new Set())
+
+const storageKey = (projectId: number) => `project_team_${projectId}`
+
+async function loadTeam(projectId: number): Promise<number[]> {
+  const saved = storage.getJSON<number[]>(storageKey(projectId))
+  if (saved) return saved
+  return getDefaultTeam(projectId)
+}
+
+function getDefaultTeam(projectId: number): number[] {
+  const p = projects.projects.find(pr => pr.id === projectId)
+  if (!p) return []
+  const name = p.initiative_name || p.name || ''
+  if (!name) return []
+  const devs = usersStore.devsByProject.get(name)
+  return devs ? devs.map(u => u.id) : []
+}
+
+async function loadAllTeams() {
+  const map = new Map<number, number[]>()
+  for (const p of projects.projects) {
+    const ids = await loadTeam(p.id)
+    map.set(p.id, ids)
+  }
+  teamByProject.value = map
+}
+
+watch(() => projects.projects.length, async () => {
+  if (projects.projects.length > 0) await loadAllTeams()
+})
+
+function getTeamMembers(projectId: number): AlphaUser[] {
+  const ids = teamByProject.value.get(projectId) ?? []
+  return ids.map(id => usersStore.users.find(u => u.id === id)).filter(Boolean) as AlphaUser[]
+}
+
+function openTeamDialog(projectId: number) {
+  teamDialogProjectId.value = projectId
+  const current = teamByProject.value.get(projectId) ?? getDefaultTeam(projectId)
+  pendingTeam.value = new Set(current)
+  teamDialogOpen.value = true
+}
+
+function toggleTeamMember(userId: number) {
+  if (pendingTeam.value.has(userId)) {
+    pendingTeam.value.delete(userId)
+  } else {
+    pendingTeam.value.add(userId)
+  }
+}
+
+async function saveTeam() {
+  const pid = teamDialogProjectId.value
+  if (pid === null) return
+  const ids = Array.from(pendingTeam.value)
+  await storage.setJSON(storageKey(pid), ids)
+  teamByProject.value.set(pid, ids)
+  teamDialogOpen.value = false
+}
+
+function removeTeamMember(projectId: number, userId: number) {
+  const ids = teamByProject.value.get(projectId) ?? []
+  const filtered = ids.filter(id => id !== userId)
+  teamByProject.value.set(projectId, filtered)
+  storage.setJSON(storageKey(projectId), filtered)
+}
+
+// ─── Status helpers ─────────────────────────
 function getStatusVariant(status?: string) {
   const s = String(status ?? '').toLowerCase()
   if (s === 'true' || ['active', 'completado', 'done', 'completed'].includes(s)) return 'default'
@@ -33,8 +143,9 @@ const emit = defineEmits<{
   'select-project': [id: number]
 }>()
 
-onMounted(() => {
-  projects.fetchProjects()
+onMounted(async () => {
+  await projects.fetchProjects()
+  usersStore.fetchAll()
 })
 
 </script>
@@ -97,6 +208,7 @@ onMounted(() => {
         @click="projects.select(p.id); emit('select-project', p.id)"
       >
         <CardHeader>
+          <!-- Title + Status -->
           <div class="flex items-start justify-between gap-2">
             <CardTitle class="text-base">
               {{ p.initiative_name || p.name || t('projects.unnamedFallback', { id: p.id }) }}
@@ -105,9 +217,17 @@ onMounted(() => {
               {{ getStatusLabel(p.status) }}
             </Badge>
           </div>
-          <CardDescription class="line-clamp-2">
+
+          <!-- Description (clickeable) -->
+          <CardDescription
+            class="line-clamp-2 cursor-pointer hover:text-foreground/80 transition-colors"
+            :title="p.description ? t('projects.clickToExpand') : ''"
+            @click.stop="p.description ? openDescription(p) : null"
+          >
             {{ p.description || t('projects.noDescription') }}
           </CardDescription>
+
+          <!-- Key + Date -->
           <div v-if="p.key" class="flex items-center gap-2 pt-1">
             <Badge variant="secondary" class="font-mono text-xs">
               {{ p.key }}
@@ -116,8 +236,108 @@ onMounted(() => {
               {{ p.start_date }}
             </span>
           </div>
+
+          <!-- Team Members -->
+          <div class="flex items-center gap-2 pt-3">
+            <IconUsers class="size-3.5 text-muted-foreground shrink-0" />
+            <div class="flex items-center -space-x-1.5">
+              <template v-for="member in getTeamMembers(p.id).slice(0, 4)" :key="member.id">
+                <Tooltip>
+                  <TooltipTrigger as-child>
+                    <Avatar class="size-6 border-2 border-background">
+                      <AvatarFallback class="text-[10px] bg-muted">
+                        {{ getInitials(member.full_name || member.email) }}
+                      </AvatarFallback>
+                    </Avatar>
+                  </TooltipTrigger>
+                  <TooltipContent side="top" class="text-xs">
+                    {{ member.full_name || member.email }}
+                  </TooltipContent>
+                </Tooltip>
+              </template>
+              <button
+                v-if="getTeamMembers(p.id).length > 4"
+                class="size-6 rounded-full bg-muted text-[10px] text-muted-foreground flex items-center justify-center border-2 border-background hover:bg-muted/80 transition-colors"
+                :title="t('projects.moreMembers', { count: getTeamMembers(p.id).length - 4 })"
+                @click.stop="openTeamDialog(p.id)"
+              >
+                +{{ getTeamMembers(p.id).length - 4 }}
+              </button>
+            </div>
+            <button
+              class="size-6 rounded-full bg-muted/50 text-muted-foreground flex items-center justify-center hover:bg-muted transition-colors"
+              :title="t('projects.manageTeam')"
+              @click.stop="openTeamDialog(p.id)"
+            >
+              <IconUserPlus class="size-3.5" />
+            </button>
+            <span v-if="getTeamMembers(p.id).length === 0" class="text-xs text-muted-foreground">
+              {{ t('projects.noTeamMembers') }}
+            </span>
+          </div>
         </CardHeader>
       </Card>
     </div>
   </div>
+
+  <!-- Description Modal -->
+  <Dialog v-model:open="descOpen">
+    <DialogContent class="sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
+      <DialogHeader>
+        <DialogTitle>{{ descProject?.name }}</DialogTitle>
+        <DialogDescription>{{ t('projects.descriptionModalTitle') }}</DialogDescription>
+      </DialogHeader>
+      <div class="text-sm leading-relaxed whitespace-pre-wrap">
+        {{ descProject?.description || t('projects.noDescription') }}
+      </div>
+    </DialogContent>
+  </Dialog>
+
+  <!-- Team Members Modal -->
+  <Dialog v-model:open="teamDialogOpen">
+    <DialogContent class="sm:max-w-[450px] max-h-[80vh] flex flex-col">
+      <DialogHeader>
+        <DialogTitle>{{ t('projects.manageTeam') }}</DialogTitle>
+        <DialogDescription>{{ t('projects.selectTeamMembers') }}</DialogDescription>
+      </DialogHeader>
+      <div class="flex-1 overflow-y-auto space-y-1 py-2">
+        <button
+          v-for="u in usersStore.activeUsers"
+          :key="u.id"
+          class="w-full flex items-center gap-3 rounded-md px-3 py-2 text-left text-sm hover:bg-muted transition-colors"
+          :class="pendingTeam.has(u.id) ? 'bg-muted/60' : ''"
+          @click="toggleTeamMember(u.id)"
+        >
+          <Avatar class="size-7">
+            <AvatarFallback class="text-xs bg-muted">
+              {{ getInitials(u.full_name || u.email) }}
+            </AvatarFallback>
+          </Avatar>
+          <div class="flex-1 min-w-0">
+            <div class="font-medium truncate">{{ u.full_name || u.email }}</div>
+            <div class="text-xs text-muted-foreground truncate">
+              {{ u.role || u.cell || '' }}
+            </div>
+          </div>
+          <div
+            class="size-4 rounded border flex items-center justify-center shrink-0 transition-colors"
+            :class="pendingTeam.has(u.id) ? 'bg-primary border-primary' : 'border-input'"
+          >
+            <IconX v-if="pendingTeam.has(u.id)" class="size-3 text-primary-foreground" />
+          </div>
+        </button>
+        <div v-if="usersStore.activeUsers.length === 0" class="py-8 text-center text-sm text-muted-foreground">
+          {{ t('users.emptyTitle') }}
+        </div>
+      </div>
+      <div class="flex justify-end gap-2 pt-3 border-t">
+        <Button variant="outline" @click="teamDialogOpen = false">
+          {{ t('common.cancel') }}
+        </Button>
+        <Button @click="saveTeam">
+          {{ t('common.save') }}
+        </Button>
+      </div>
+    </DialogContent>
+  </Dialog>
 </template>