From 6a00995192058f2dbe44d6fbacdd2041cf843118 Mon Sep 17 00:00:00 2001
From: Baruch Espinoza <baruch@webshift.software>
Date: Sun, 17 May 2026 20:53:02 +0000
Subject: [PATCH 1/3] feat(projects): reorganize show page with
 Equipo/Actividad/Comentarios tabs

Split project detail content into three tabs to improve scannability.
Lazy-load comments on tab activation instead of on page load.
---
 lang/en/projects.php                  |   5 +
 lang/es/projects.php                  |   5 +
 resources/js/pages/proyectos/show.tsx | 159 ++++++++++++++++----------
 3 files changed, 108 insertions(+), 61 deletions(-)

diff --git a/lang/en/projects.php b/lang/en/projects.php
index 8d65c43..2303c1e 100644
--- a/lang/en/projects.php
+++ b/lang/en/projects.php
@@ -8,6 +8,11 @@
         'title' => '',
         'activity' => '',
         'comments' => '',
+        'tabs' => [
+            'equipo' => 'Team',
+            'actividad' => 'Activity',
+            'comentarios' => 'Comments',
+        ],
     ],
     'dashboard' => [
         'title' => '',
diff --git a/lang/es/projects.php b/lang/es/projects.php
index f998be2..952c5f0 100644
--- a/lang/es/projects.php
+++ b/lang/es/projects.php
@@ -8,6 +8,11 @@
         'title' => 'Proyecto',
         'activity' => 'Actividad del proyecto',
         'comments' => 'Comentarios',
+        'tabs' => [
+            'equipo' => 'Equipo',
+            'actividad' => 'Actividad',
+            'comentarios' => 'Comentarios',
+        ],
     ],
     'dashboard' => [
         'title' => 'Dashboard',
diff --git a/resources/js/pages/proyectos/show.tsx b/resources/js/pages/proyectos/show.tsx
index 4abe349..685780c 100644
--- a/resources/js/pages/proyectos/show.tsx
+++ b/resources/js/pages/proyectos/show.tsx
@@ -25,6 +25,7 @@ import ProjectTimeline from '@/components/ui/proyectos/ProjectTimeline';
 import { type TimelineEntry } from '@/components/ui/proyectos/ProjectTimelineEntry';
 import WelcomeSidebar from '@/components/ui/WelcomeSidebar';
 import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
 
 interface ProjectImage {
     id: number;
@@ -80,6 +81,8 @@ interface ProyectoShowProps {
     timeline: TimelineData;
 }
 
+type TabId = 'equipo' | 'actividad' | 'comentarios';
+
 export default function ProyectoShow({
     project,
     post,
@@ -91,6 +94,7 @@ export default function ProyectoShow({
     const isAuthenticated = !!auth?.user;
 
     const [sidebarOpen, setSidebarOpen] = useState(false);
+    const [activeTab, setActiveTab] = useState<TabId>('equipo');
     const [commentsList, setCommentsList] = useState<Comment[] | null>(null);
     const [commentsLoading, setCommentsLoading] = useState(false);
 
@@ -113,11 +117,19 @@ export default function ProyectoShow({
     };
 
     useEffect(() => {
-        loadComments().catch(() => {
-            setCommentsLoading(false);
-            setCommentsList([]);
-        });
-    }, []);
+        if (activeTab === 'comentarios') {
+            loadComments().catch(() => {
+                setCommentsLoading(false);
+                setCommentsList([]);
+            });
+        }
+    }, [activeTab]);
+
+    const tabs: { id: TabId; labelKey: string }[] = [
+        { id: 'equipo', labelKey: 'projects.show.tabs.equipo' },
+        { id: 'actividad', labelKey: 'projects.show.tabs.actividad' },
+        { id: 'comentarios', labelKey: 'projects.show.tabs.comentarios' },
+    ];
 
     return (
         <div className="min-h-screen bg-white dark:bg-gray-950">
@@ -171,71 +183,96 @@ export default function ProyectoShow({
                         isOwner={isOwner}
                         projectId={project.id}
                     />
+                </div>
 
-                    {/* Progress (with stage transition actions for owner) */}
-                    <div className="mt-6">
-                        <CrowdfundingProgress
-                            coins={post.coins}
-                            roles={project.roles}
-                        >
-                            {isOwner &&
-                                project.allowedTransitions.length > 0 && (
-                                    <ProjectStageActions
-                                        projectId={project.id}
-                                        allowedTransitions={
-                                            project.allowedTransitions
-                                        }
-                                    />
-                                )}
-                        </CrowdfundingProgress>
-                    </div>
+                {/* Tab navigation */}
+                <div className="border-b border-gray-200 dark:border-white/10">
+                    <nav className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+                        <ul role="list" className="-mb-px flex gap-x-6">
+                            {tabs.map((tab) => (
+                                <li key={tab.id}>
+                                    <button
+                                        type="button"
+                                        onClick={() => setActiveTab(tab.id)}
+                                        className={cn(
+                                            tab.id === activeTab
+                                                ? 'border-indigo-600 text-indigo-600 dark:border-indigo-500 dark:text-indigo-400'
+                                                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-200',
+                                            'border-b-2 px-1 py-3 text-sm font-semibold whitespace-nowrap transition-colors',
+                                        )}
+                                    >
+                                        {t(tab.labelKey)}
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </nav>
+                </div>
 
-                    {/* Roles */}
-                    <ProjectRoles
-                        projectId={project.id}
-                        projectStage={project.stage}
-                        roles={project.roles}
-                        isOwner={isOwner}
-                        isAuthenticated={isAuthenticated}
-                        currentUserApplication={currentUserApplication}
-                    />
+                <div className="mx-auto max-w-3xl px-4 py-6 sm:px-6 lg:px-8">
+                    {/* Tab: Equipo */}
+                    {activeTab === 'equipo' && (
+                        <div className="space-y-6">
+                            {/* Progress (with stage transition actions for owner) */}
+                            <CrowdfundingProgress
+                                coins={post.coins}
+                                roles={project.roles}
+                            >
+                                {isOwner &&
+                                    project.allowedTransitions.length > 0 && (
+                                        <ProjectStageActions
+                                            projectId={project.id}
+                                            allowedTransitions={
+                                                project.allowedTransitions
+                                            }
+                                        />
+                                    )}
+                            </CrowdfundingProgress>
 
-                    {/* Team */}
-                    <ProjectTeam roles={project.roles} />
-
-                    {/* Timeline */}
-                    <div className="mt-6 border-t border-gray-200 pt-6 dark:border-white/10">
-                        <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
-                            {t('projects.show.activity')}
-                        </h2>
-                        <ProjectTimeline
-                            projectId={project.id}
-                            initialEntries={timeline.entries}
-                            initialNextCursor={timeline.nextCursor}
-                            isOwner={isOwner}
-                        />
-                    </div>
+                            {/* Roles buscados */}
+                            <ProjectRoles
+                                projectId={project.id}
+                                projectStage={project.stage}
+                                roles={project.roles}
+                                isOwner={isOwner}
+                                isAuthenticated={isAuthenticated}
+                                currentUserApplication={currentUserApplication}
+                            />
 
-                    {/* Comments */}
-                    <div className="mt-6 border-t border-gray-200 pt-6 dark:border-white/10">
-                        <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
-                            {t('projects.show.comments')}
-                        </h2>
-                        {commentsLoading ? (
-                            <div className="mt-4 space-y-3">
-                                <div className="h-4 w-3/4 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
-                                <div className="h-4 w-1/2 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
-                            </div>
-                        ) : commentsList !== null ? (
-                            <div className="mt-4">
+                            {/* Equipo del proyecto */}
+                            <ProjectTeam roles={project.roles} />
+                        </div>
+                    )}
+
+                    {/* Tab: Actividad */}
+                    {activeTab === 'actividad' && (
+                        <div>
+                            <ProjectTimeline
+                                projectId={project.id}
+                                initialEntries={timeline.entries}
+                                initialNextCursor={timeline.nextCursor}
+                                isOwner={isOwner}
+                            />
+                        </div>
+                    )}
+
+                    {/* Tab: Comentarios */}
+                    {activeTab === 'comentarios' && (
+                        <div>
+                            {commentsLoading ? (
+                                <div className="mt-4 space-y-3">
+                                    <div className="h-4 w-3/4 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
+                                    <div className="h-4 w-1/2 animate-pulse rounded bg-gray-200 dark:bg-white/10" />
+                                </div>
+                            ) : commentsList !== null ? (
                                 <PostComments
                                     storeUrl={projectStore.url(project.id)}
                                     comments={commentsList}
                                     onCommentAdded={refreshComments}
                                 />
-                            </div>
-                        ) : null}
-                    </div>
+                            ) : null}
+                        </div>
+                    )}
                 </div>
             </div>
         </div>

From c272bc1e511e0ced3e3784ef2216986b1fdbdf5a Mon Sep 17 00:00:00 2001
From: Baruch Espinoza <baruch@webshift.software>
Date: Sun, 17 May 2026 20:56:48 +0000
Subject: [PATCH 2/3] fix(tests): click Actividad tab before timeline composer
 interaction

---
 tests/Browser/ProjectTimelineComposerTest.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/Browser/ProjectTimelineComposerTest.php b/tests/Browser/ProjectTimelineComposerTest.php
index d6843a6..c446e49 100644
--- a/tests/Browser/ProjectTimelineComposerTest.php
+++ b/tests/Browser/ProjectTimelineComposerTest.php
@@ -22,6 +22,7 @@
         ->press('Iniciar sesión');
 
     visit("/projects/{$post->id}")
+        ->click('Actividad')
         ->click('Actualización')
         ->fill('body', 'shipping the timeline composer')
         ->press('Publicar')

From 285fac7c65b96d60e7a02c03e91d1b1fad4bf363 Mon Sep 17 00:00:00 2001
From: Baruch Espinoza <baruch@webshift.software>
Date: Sun, 17 May 2026 21:21:18 +0000
Subject: [PATCH 3/3] feat(projects): merge team grid into Roles buscados card

---
 .../components/ui/proyectos/ProjectRoles.tsx  | 35 +++++++++++++++++++
 resources/js/pages/proyectos/show.tsx         |  3 --
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/ui/proyectos/ProjectRoles.tsx b/resources/js/components/ui/proyectos/ProjectRoles.tsx
index cdf5d6a..45138c7 100644
--- a/resources/js/components/ui/proyectos/ProjectRoles.tsx
+++ b/resources/js/components/ui/proyectos/ProjectRoles.tsx
@@ -439,6 +439,41 @@ export default function ProjectRoles({
                         />
                     </div>
                 )}
+
+                {/* Team members */}
+                {(() => {
+                    const members = roles.flatMap((role) =>
+                        role.volunteers.map((v) => ({ ...v, roleTitle: role.title })),
+                    )
+                    if (members.length === 0) return null
+                    return (
+                        <div className="mt-4 border-t border-gray-200 pt-4 dark:border-white/10">
+                            <h4 className="text-sm font-semibold text-gray-900 dark:text-white">{t('projects.team.title')}</h4>
+                            <ul
+                                role="list"
+                                className="mt-4 grid grid-cols-3 gap-x-4 gap-y-6 sm:grid-cols-4 md:grid-cols-5"
+                            >
+                                {members.map((member) => (
+                                    <li key={member.id} className="text-center">
+                                        {member.avatarUrl ? (
+                                            <img
+                                                alt=""
+                                                src={member.avatarUrl}
+                                                className="mx-auto size-14 rounded-full object-cover outline outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10"
+                                            />
+                                        ) : (
+                                            <div className="mx-auto flex size-14 items-center justify-center rounded-full bg-indigo-100 text-xl font-semibold text-indigo-600 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-indigo-500/20 dark:text-indigo-400 dark:outline-white/10">
+                                                {member.name.charAt(0).toUpperCase()}
+                                            </div>
+                                        )}
+                                        <p className="mt-2 text-xs font-semibold text-gray-900 dark:text-white">{member.name}</p>
+                                        <p className="text-xs text-gray-500 dark:text-gray-400">{member.roleTitle}</p>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    )
+                })()}
             </div>
 
             <ApplicantReviewModal
diff --git a/resources/js/pages/proyectos/show.tsx b/resources/js/pages/proyectos/show.tsx
index 685780c..5155114 100644
--- a/resources/js/pages/proyectos/show.tsx
+++ b/resources/js/pages/proyectos/show.tsx
@@ -20,7 +20,6 @@ import ProjectStageActions, {
     type AllowedTransition,
 } from '@/components/ui/proyectos/ProjectStageActions';
 import { type ProjectStageValue } from '@/components/ui/proyectos/ProjectStageBadge';
-import ProjectTeam from '@/components/ui/proyectos/ProjectTeam';
 import ProjectTimeline from '@/components/ui/proyectos/ProjectTimeline';
 import { type TimelineEntry } from '@/components/ui/proyectos/ProjectTimelineEntry';
 import WelcomeSidebar from '@/components/ui/WelcomeSidebar';
@@ -239,8 +238,6 @@ export default function ProyectoShow({
                                 currentUserApplication={currentUserApplication}
                             />
 
-                            {/* Equipo del proyecto */}
-                            <ProjectTeam roles={project.roles} />
                         </div>
                     )}