@nextclaw/ui 0.24.0-beta.0 → 0.24.0

package/src/features/projects/pages/project-home-page.tsx

@@ -1,12 +1,10 @@
 import { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import type {
-  ObservedRequest,
-  ProjectObservationSnapshot,
-} from "@nextclaw/client-sdk";
+import type { ObservedRequest } from "@nextclaw/client-sdk";
 import { toast } from "sonner";
 import { useProjects } from "@/shared/hooks/use-projects";
+import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { t } from "@/shared/lib/i18n";
 import {
   Tabs,
@@ -19,9 +17,12 @@ import { ProjectArtifacts } from "@/features/projects/components/project-artifac
 import { ProjectOverview } from "@/features/projects/components/project-overview";
 import { ProjectRequests } from "@/features/projects/components/project-requests";
 import { ProjectSkills } from "@/features/projects/components/project-skills";
-import { ProjectWorkItems } from "@/features/projects/components/project-work-items";
-import { ChatConversationWorkspaceSection } from "@/features/chat/components/conversation/chat-conversation-workspace-section";
-import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+import { ProjectWorkItemDrawer } from "@/features/projects/components/work/project-work-item-drawer";
+import { ProjectWorkItems } from "@/features/projects/components/work/project-work-items";
+import {
+  ChatConversationWorkspaceSection,
+  usePresenter,
+} from "@/features/chat";
 import {
   projectObservationQueryKey,
   useProjectObservation,
@@ -44,42 +45,41 @@ const PROJECT_TABS: ProjectHomeTab[] = [
   "agreement",
 ];
 
-function shouldOfferObservationSetup(
-  sources: ProjectObservationSnapshot["sources"],
-): boolean {
-  const config = sources.find((source) => source.id === "config");
-  return !config || config.status !== "available";
-}
-
-function hasObservedProjectSessions(
-  sources: ProjectObservationSnapshot["sources"],
-): boolean {
-  return (sources.find((source) => source.id === "sessions")?.itemCount ?? 0) > 0;
-}
-
 export function ProjectsPage() {
-  const { projectId, tab: tabParam } = useParams<{ projectId?: string; tab?: string }>();
+  const { projectId, tab: tabParam } = useParams<{
+    projectId?: string;
+    tab?: string;
+  }>();
   const navigate = useNavigate();
-  const [pendingRequestId, setPendingRequestId] = useState<string | null>(null);
-  const queryClient = useQueryClient();
   const presenter = usePresenter();
+  const queryClient = useQueryClient();
+  const { isMobile } = useViewportLayout();
   const projects = useProjects();
+  const [selectedWorkItemId, setSelectedWorkItemId] = useState<string | null>(
+    null,
+  );
+  const [pendingRequestId, setPendingRequestId] = useState<string | null>(null);
   const registered = projects.data?.projects ?? [];
-  const selectedProject = registered.find((project) => project.id === projectId) ?? null;
-  const tab: ProjectHomeTab | null = isProjectHomeTab(tabParam) ? tabParam : null;
+  const selectedProject =
+    registered.find((project) => project.id === projectId) ?? null;
+  const tab: ProjectHomeTab | null = isProjectHomeTab(tabParam)
+    ? tabParam
+    : null;
+  const needsObservation =
+    tab === "artifacts" || tab === "skills" || tab === "agreement";
   const observation = useProjectObservation(
     selectedProject?.id ?? null,
     selectedProject?.rootPath ?? null,
+    needsObservation,
   );
   const response = useMutation({
     mutationFn: sendProjectRequestResponse,
     onMutate: (input) => setPendingRequestId(input.requestId),
     onSuccess: async () => {
-      if (selectedProject) {
+      if (selectedProject)
         await queryClient.invalidateQueries({
           queryKey: projectObservationQueryKey(selectedProject.id),
         });
-      }
       toast.success(t("projectsResponseSent"));
     },
     onError: (error) =>
@@ -88,7 +88,6 @@ export function ProjectsPage() {
       ),
     onSettled: () => setPendingRequestId(null),
   });
-
   const reply = (
     request: ObservedRequest,
     decision: ProjectRequestDecision,
@@ -102,46 +101,31 @@ export function ProjectsPage() {
     });
   };
 
-  if (projects.isLoading) {
+  if (projects.isLoading)
     return (
       <main className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">
         {t("projectsLoading")}
       </main>
     );
-  }
-  if (projects.isError) {
+  if (projects.isError)
     return (
       <main className="p-6 text-sm text-destructive">
         {t("projectsLoadFailed")}: {projects.error.message}
       </main>
     );
-  }
-  if (registered.length === 0) {
+  if (!registered.length)
     return (
       <main className="p-6 text-sm text-muted-foreground">
         {t("projectsEmpty")}
       </main>
     );
-  }
-  if (!selectedProject || !tab) {
+  if (!selectedProject || !tab)
     return (
       <main className="p-6 text-sm text-muted-foreground">
         {t("projectsChoose")}
       </main>
     );
-  }
 
-  const snapshot = observation.data;
-  const startObservationSetup = () =>
-    presenter.chatSessionListManager.createSession({
-      projectRoot: selectedProject.rootPath,
-      prompt: t("projectsObservationSetupPrompt"),
-    });
-  const startProjectWork = () =>
-    presenter.chatSessionListManager.createSession({
-      projectRoot: selectedProject.rootPath,
-      prompt: t("projectsStartProjectWorkPrompt"),
-    });
   const openProjectFile = (path: string, label: string) =>
     presenter.chatThreadManager.openFilePreview({
       path,
@@ -149,105 +133,102 @@ export function ProjectsPage() {
       viewMode: "preview",
       previewViewer: "rendered",
     });
+  const snapshot = observation.data;
   return (
     <>
-    <main className="h-full min-w-0 flex-1 overflow-y-auto p-4 md:p-6">
-      <div className="mx-auto max-w-6xl space-y-4">
-        <header className="flex flex-wrap items-center gap-3">
-          <h1 className="text-xl font-semibold">{t("projectsTitle")}</h1>
-        </header>
-
-        {observation.isLoading ? (
-          <div className="rounded-xl border border-border/60 p-5 text-sm text-muted-foreground">
-            {t("projectsLoading")}
-          </div>
-        ) : null}
-        {observation.isError ? (
-          <div className="rounded-xl border border-destructive/40 bg-destructive/5 p-5 text-sm text-destructive">
-            {t("projectsLoadFailed")}: {observation.error.message}
-          </div>
-        ) : null}
-        {snapshot ? (
-          <>
-            <section className="rounded-2xl border border-border/60 bg-card p-4">
-              <h2 className="text-lg font-semibold">{snapshot.project.name}</h2>
-              {snapshot.project.summary ? (
-                <p className="mt-1 text-sm text-muted-foreground">
-                  {snapshot.project.summary}
-                </p>
-              ) : null}
-              <p className="mt-2 break-all text-xs text-muted-foreground">
-                {snapshot.project.rootPath}
-              </p>
-            </section>
+      <main className="h-full min-w-0 flex-1 overflow-y-auto p-3 sm:p-4 md:p-6">
+        <div className="mx-auto max-w-6xl space-y-4">
+          <header className="rounded-2xl border border-border/60 bg-card p-3 sm:p-4">
+            <h1 className="text-lg font-semibold">{selectedProject.name}</h1>
+            <p className="mt-1 break-all text-xs text-muted-foreground">
+              {selectedProject.rootPath}
+            </p>
+          </header>
+          {snapshot ? (
             <ProjectRequests
               requests={getOpenProjectRequests(snapshot)}
               pendingRequestId={pendingRequestId}
               onReply={reply}
             />
-            <Tabs
-              value={tab}
-              onValueChange={(value) =>
-                navigate(`/projects/${encodeURIComponent(selectedProject.id)}/${value}`)
-              }
-            >
-              <div className="min-w-0 overflow-x-auto pb-1">
-                <TabsList className="w-max">
-                  {PROJECT_TABS.map((key) => (
-                    <TabsTrigger key={key} value={key}>
-                      {t(`projects${key[0].toUpperCase()}${key.slice(1)}`)}
-                    </TabsTrigger>
-                  ))}
-                </TabsList>
+          ) : null}
+          <Tabs
+            value={tab}
+            onValueChange={(value) =>
+              navigate(
+                `/projects/${encodeURIComponent(selectedProject.id)}/${value}`,
+              )
+            }
+          >
+            <div className="min-w-0 overflow-x-auto pb-1">
+              <TabsList className="w-max">
+                {PROJECT_TABS.map((key) => (
+                  <TabsTrigger key={key} value={key}>
+                    {t(`projects${key[0].toUpperCase()}${key.slice(1)}`)}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+            <TabsContent value="overview" className="mt-4">
+              <ProjectOverview
+                projectId={selectedProject.id}
+                onOpenWorkItem={setSelectedWorkItemId}
+              />
+            </TabsContent>
+            <TabsContent value="work" className="mt-4">
+              <ProjectWorkItems
+                projectId={selectedProject.id}
+                onOpenWorkItem={setSelectedWorkItemId}
+              />
+            </TabsContent>
+            {needsObservation && observation.isLoading ? (
+              <div className="mt-4 rounded-xl border border-border/60 p-5 text-sm text-muted-foreground">
+                {t("projectsLoading")}
               </div>
-              <TabsContent value="overview" className="mt-4">
-                <ProjectOverview
-                  hasProjectSessions={hasObservedProjectSessions(snapshot.sources)}
-                  snapshot={snapshot}
-                  shouldOfferObservationSetup={shouldOfferObservationSetup(snapshot.sources)}
-                  onOpenFile={openProjectFile}
-                  onStartObservationSetup={startObservationSetup}
-                  onStartProjectWork={startProjectWork}
-                />
-              </TabsContent>
-              <TabsContent value="work" className="mt-4">
-                <ProjectWorkItems
-                  hasProjectSessions={hasObservedProjectSessions(snapshot.sources)}
-                  snapshot={snapshot}
-                  shouldOfferObservationSetup={shouldOfferObservationSetup(snapshot.sources)}
-                  onStartObservationSetup={startObservationSetup}
-                  onStartProjectWork={startProjectWork}
-                />
-              </TabsContent>
-              <TabsContent value="artifacts" className="mt-4">
-                <ProjectArtifacts snapshot={snapshot} onOpenFile={openProjectFile} />
-              </TabsContent>
-              <TabsContent value="skills" className="mt-4">
-                <ProjectSkills
-                  snapshot={snapshot}
-                  onOpen={(skill) =>
-                    presenter.chatThreadManager.openFilePreview({
-                      path: skill.path,
-                      label: skill.name,
-                      viewMode: "preview",
-                      previewViewer: "rendered",
-                    })
-                  }
-                />
-              </TabsContent>
-              <TabsContent value="agreement" className="mt-4">
-                <ProjectAgreement snapshot={snapshot} onOpenFile={openProjectFile} />
-              </TabsContent>
-            </Tabs>
-          </>
-        ) : null}
-      </div>
-    </main>
-    <ChatConversationWorkspaceSection
-      layoutMode="desktop"
-      sessionKey={null}
-      projectRoot={selectedProject.rootPath}
-    />
+            ) : null}
+            {needsObservation && observation.isError ? (
+              <div className="mt-4 rounded-xl border border-destructive/40 p-5 text-sm text-destructive">
+                {t("projectsLoadFailed")}: {observation.error.message}
+              </div>
+            ) : null}
+            {snapshot ? (
+              <>
+                <TabsContent value="artifacts" className="mt-4">
+                  <ProjectArtifacts
+                    snapshot={snapshot}
+                    onOpenFile={openProjectFile}
+                  />
+                </TabsContent>
+                <TabsContent value="skills" className="mt-4">
+                  <ProjectSkills
+                    snapshot={snapshot}
+                    onOpen={(skill) => openProjectFile(skill.path, skill.name)}
+                  />
+                </TabsContent>
+                <TabsContent value="agreement" className="mt-4">
+                  <ProjectAgreement
+                    snapshot={snapshot}
+                    onOpenFile={openProjectFile}
+                  />
+                </TabsContent>
+              </>
+            ) : null}
+          </Tabs>
+        </div>
+      </main>
+      <ProjectWorkItemDrawer
+        projectId={selectedProject.id}
+        projectRoot={selectedProject.rootPath}
+        workItemId={selectedWorkItemId}
+        onOpenChange={(open) => {
+          if (!open) setSelectedWorkItemId(null);
+        }}
+        onOpenArtifact={openProjectFile}
+      />
+      <ChatConversationWorkspaceSection
+        layoutMode={isMobile ? "mobile" : "desktop"}
+        sessionKey={null}
+        projectRoot={selectedProject.rootPath}
+      />
     </>
   );
 }