@tribe-nest/forge 3.60.0 → 3.63.0

package/src/ui/styled/work/WorkPortalProjects.tsx

@@ -1,36 +1,38 @@
-import { ArrowRight, FolderKanban } from "lucide-react";
-import { useThemeTokens, type ResolvedThemeTokens } from "../../theme/ForgeThemeProvider";
+import type { MouseEvent } from "react";
+import { useForgeT } from "../../../i18n";
+import { internalPath } from "../../../runtime/pages";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { Loading } from "../Loading";
-import {
-  formatWorkDate,
-  useWorkPortalProjects,
-  type WorkProjectSummary,
-} from "../../headless/work/useWorkPortal";
+import { useWorkPortalProjects, type WorkProjectSummary } from "../../headless/work/useWorkPortal";
+import { PortalEmpty, PortalHeading, PortalList, PortalProgress, usePortal } from "../portal/shared";
+import { workStatusLabel } from "./WorkReportBody";
 
 export interface WorkPortalProjectsProps {
-  /** Build the href for a project's report page. Rendered as an `<a>` unless
-   * `onOpenProject` is supplied. Defaults to `/i/work/projects/{id}`. */
+  /** Build the href for a project's report page. Defaults to
+   * `internalPath("account/projects/$projectId")`. */
   projectHref?: (projectId: string) => string;
-  /** Router-driven open handler. When provided, cards render as buttons calling
-   * this instead of anchors (lets the host app keep its own navigation/prefix). */
+  /** Router-driven open handler. When provided, rows stay real links (so a new
+   * tab still works) but a plain left click calls this instead of reloading. */
   onOpenProject?: (projectId: string) => void;
-  /** Heading above the grid. Pass `null` to hide it. */
+  /** Heading above the list. Pass `null` to hide it. */
   heading?: string | null;
 }
 
 /**
  * The authenticated client's read-only list of their (non-archived) client
- * projects, as cards with a task/done progress bar. Built on
- * `useWorkPortalProjects`; theme tokens only. Tapping a card opens the project
- * report (`WorkProjectReport`).
+ * projects, as hairline-divided rows with a task/done progress line. Built on
+ * `useWorkPortalProjects`; theme tokens only. Opening a row goes to the
+ * project report (`WorkProjectReport`).
  */
 export function WorkPortalProjects({
-  projectHref = (id) => `/i/work/projects/${id}`,
+  projectHref = (projectId) => internalPath("account/projects/$projectId", { projectId }),
   onOpenProject,
-  heading = "Your projects",
+  heading,
 }: WorkPortalProjectsProps = {}) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const { data: projects, isLoading } = useWorkPortalProjects();
+  const title = heading === undefined ? tr("forge.work_portal_projects.title") : heading;
 
   if (isLoading) {
     return <Loading fullPage />;
@@ -38,126 +40,72 @@ export function WorkPortalProjects({
 
   if (!projects || projects.length === 0) {
     return (
-      <div
-        data-testid="work-portal-empty"
-        style={{
-          border: `1px solid ${t.border}`,
-          borderRadius: t.cornerRadius,
-          background: t.surface,
-          padding: 32,
-          textAlign: "center",
-          color: t.text,
-          fontFamily: t.fontFamily,
-        }}
-      >
-        <FolderKanban size={28} style={{ margin: "0 auto 12px", color: t.primary }} />
-        <p style={{ margin: 0, color: t.muted }}>You don&apos;t have any projects yet.</p>
+      <div data-testid="work-portal-empty" style={{ fontFamily: t.fontFamily }}>
+        {title ? <PortalHeading title={title} /> : null}
+        <PortalEmpty title={tr("forge.work_portal_projects.empty_title")} />
       </div>
     );
   }
 
   return (
-    <div
-      data-testid="work-portal-projects"
-      style={{ display: "flex", flexDirection: "column", gap: 24, color: t.text, fontFamily: t.fontFamily }}
-    >
-      {heading && <h1 style={{ fontSize: 22, fontWeight: 800, margin: 0, color: t.text }}>{heading}</h1>}
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-          gap: 12,
-        }}
-      >
+    <div data-testid="work-portal-projects" style={{ color: t.text, fontFamily: t.fontFamily }}>
+      {title ? <PortalHeading title={title} /> : null}
+      <PortalList>
         {projects.map((p) => (
-          <ProjectCard
+          <ProjectRow
             key={p.id}
             project={p}
-            t={t}
-            href={onOpenProject ? undefined : projectHref(p.id)}
+            href={projectHref(p.id)}
             onOpen={onOpenProject ? () => onOpenProject(p.id) : undefined}
           />
         ))}
-      </div>
+      </PortalList>
     </div>
   );
 }
 
-function ProjectCard({
-  project,
-  t,
-  href,
-  onOpen,
-}: {
-  project: WorkProjectSummary;
-  t: ResolvedThemeTokens;
-  href?: string;
-  onOpen?: () => void;
-}) {
+function ProjectRow({ project, href, onOpen }: { project: WorkProjectSummary; href: string; onOpen?: () => void }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const { formatDate } = usePortal();
   const pct = project.taskCount > 0 ? Math.round((project.doneCount / project.taskCount) * 100) : 0;
 
-  const inner = (
-    <>
-      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
-        <span style={{ fontWeight: 600, color: t.text }}>{project.name}</span>
-        <ArrowRight size={16} style={{ color: t.muted, flexShrink: 0 }} />
-      </div>
-
-      <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
-        <span
-          style={{
-            fontSize: 12,
-            fontWeight: 600,
-            padding: "2px 8px",
-            borderRadius: 999,
-            textTransform: "capitalize",
-            background: t.border,
-            color: t.primary,
-          }}
-        >
-          {project.status.replace(/_/g, " ")}
-        </span>
-        <span style={{ fontSize: 12, color: t.muted }}>Due {formatWorkDate(project.dueDate)}</span>
-      </div>
-
-      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 12, color: t.muted }}>
-          <span>
-            {project.doneCount} / {project.taskCount} tasks
-          </span>
-          <span>{pct}%</span>
-        </div>
-        <div style={{ width: "100%", height: 6, borderRadius: 999, overflow: "hidden", background: t.border }}>
-          <div style={{ height: "100%", borderRadius: 999, width: `${pct}%`, background: t.primary }} />
-        </div>
-      </div>
-    </>
-  );
-
-  const style: React.CSSProperties = {
-    display: "flex",
-    flexDirection: "column",
-    gap: 12,
-    textAlign: "left",
-    padding: 20,
-    cursor: "pointer",
-    border: `1px solid ${t.border}`,
-    borderRadius: t.cornerRadius,
-    background: t.surface,
-    color: t.text,
-    textDecoration: "none",
-  };
-
-  if (onOpen) {
-    return (
-      <button type="button" data-testid="work-project-card" onClick={onOpen} style={style}>
-        {inner}
-      </button>
-    );
-  }
   return (
-    <a data-testid="work-project-card" href={href} style={style}>
-      {inner}
-    </a>
+    <li style={{ listStyle: "none", borderBottom: `1px solid ${t.border}` }}>
+      <a
+        data-testid="work-project-card"
+        href={href}
+        className="fg:block fg:py-5"
+        style={{ color: t.text, textDecoration: "none" }}
+        onClick={
+          onOpen
+            ? (event: MouseEvent<HTMLAnchorElement>) => {
+                if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+                event.preventDefault();
+                onOpen();
+              }
+            : undefined
+        }
+      >
+        <span className="fg:flex fg:flex-wrap fg:items-baseline fg:justify-between fg:gap-3">
+          <span style={{ fontSize: 17, fontWeight: 600 }}>{project.name}</span>
+          <span style={{ fontSize: 13, color: t.muted }}>{workStatusLabel(tr, project.status)}</span>
+        </span>
+        <span style={{ display: "block", margin: "12px 0 8px" }}>
+          <PortalProgress
+            done={project.doneCount}
+            total={project.taskCount}
+            label={tr("forge.work_portal_projects.progress_label", { name: project.name })}
+          />
+        </span>
+        <span className="fg:flex fg:flex-wrap fg:gap-x-4" style={{ fontSize: 13, color: t.muted }}>
+          <span>{tr("forge.work_portal_projects.tasks_done", { done: project.doneCount, total: project.taskCount })}</span>
+          <span>{tr("forge.work_portal_projects.percent_done", { percent: pct })}</span>
+          {project.dueDate ? (
+            <span>{tr("forge.work_portal_projects.due_on", { date: formatDate(project.dueDate) })}</span>
+          ) : null}
+        </span>
+      </a>
+    </li>
   );
 }

package/src/ui/styled/work/WorkProjectDocuments.tsx

@@ -1,13 +1,14 @@
 import { useRef, useState } from "react";
 import { FileText, Paperclip, Upload } from "lucide-react";
+import { useForgeT, type ForgeT } from "../../../i18n";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import {
-  formatWorkDate,
   useUploadWorkDocument,
   useWorkOpenSharedDocument,
   useWorkSharedDocuments,
   type WorkSharedDocument,
 } from "../../headless/work/useWorkPortal";
+import { PortalBlock, PortalEmpty, PortalList, PortalRow, usePortal, usePortalButtons } from "../portal/shared";
 
 export interface WorkProjectDocumentsProps {
   /** The client project id. */
@@ -28,9 +29,9 @@ const humanSize = (size: number | null | undefined): string => {
   return `${n.toFixed(n >= 10 || i === 0 ? 0 : 1)} ${units[i]}`;
 };
 
-const errorMessage = (error: unknown): string =>
+const errorMessage = (tr: ForgeT, error: unknown): string =>
   (error as { response?: { data?: { message?: string } } })?.response?.data?.message ||
-  "The upload didn't go through. Please try again.";
+  tr("forge.work_project_documents.upload_error");
 
 /**
  * The documents on a client's project: what the firm shared with them, and
@@ -45,6 +46,9 @@ const errorMessage = (error: unknown): string =>
  */
 export function WorkProjectDocuments({ projectId, allowUpload = true }: WorkProjectDocumentsProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
+  const buttons = usePortalButtons();
+  const { formatDate } = usePortal();
   const { data: documents, isLoading } = useWorkSharedDocuments(projectId);
   const open = useWorkOpenSharedDocument(projectId);
   const upload = useUploadWorkDocument(projectId);
@@ -63,7 +67,9 @@ export function WorkProjectDocuments({ projectId, allowUpload = true }: WorkProj
       try {
         await upload.mutateAsync({ file });
       } catch (err) {
-        setError(`${file.name}: ${errorMessage(err)}`);
+        setError(
+          tr("forge.work_project_documents.upload_error_file", { file_name: file.name, message: errorMessage(tr, err) }),
+        );
         return;
       }
     }
@@ -76,7 +82,7 @@ export function WorkProjectDocuments({ projectId, allowUpload = true }: WorkProj
       const { url } = await open.mutateAsync(doc.id);
       window.open(url, "_blank", "noopener");
     } catch (err) {
-      setError(errorMessage(err));
+      setError(errorMessage(tr, err));
     } finally {
       setOpening(null);
     }
@@ -84,141 +90,106 @@ export function WorkProjectDocuments({ projectId, allowUpload = true }: WorkProj
 
   const list = documents ?? [];
 
-  return (
-    <div
-      data-testid="work-project-documents"
-      style={{
-        border: `1px solid ${t.border}`,
-        borderRadius: t.cornerRadius,
-        background: t.surface,
-        padding: 20,
-        color: t.text,
-        fontFamily: t.fontFamily,
-      }}
-    >
-      <div
+  const uploadControl = allowUpload ? (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        hidden
+        aria-label={tr("forge.work_project_documents.file_input_aria")}
+        data-testid="work-document-file-input"
+        onChange={(e) => {
+          void onFiles(e.target.files);
+          e.target.value = "";
+        }}
+      />
+      <button
+        type="button"
+        data-testid="work-document-upload"
+        onClick={() => fileInputRef.current?.click()}
+        disabled={upload.isPending}
         style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 12,
-          flexWrap: "wrap",
-          marginBottom: 14,
+          ...buttons.quiet,
+          minHeight: 34,
+          padding: "6px 14px",
+          cursor: upload.isPending ? "wait" : "pointer",
+          opacity: upload.isPending ? 0.6 : 1,
         }}
       >
-        <h2 style={{ fontSize: 16, fontWeight: 800, margin: 0 }}>Documents</h2>
-        {allowUpload && (
-          <>
-            <input
-              ref={fileInputRef}
-              type="file"
-              multiple
-              hidden
-              data-testid="work-document-file-input"
-              onChange={(e) => {
-                void onFiles(e.target.files);
-                e.target.value = "";
-              }}
-            />
-            <button
-              type="button"
-              data-testid="work-document-upload"
-              onClick={() => fileInputRef.current?.click()}
-              disabled={upload.isPending}
-              style={{
-                display: "inline-flex",
-                alignItems: "center",
-                gap: 8,
-                padding: "8px 16px",
-                borderRadius: t.cornerRadius,
-                border: "none",
-                background: t.primary,
-                color: t.textPrimary,
-                fontWeight: 700,
-                fontSize: 13,
-                cursor: upload.isPending ? "wait" : "pointer",
-                opacity: upload.isPending ? 0.7 : 1,
-              }}
-            >
-              <Upload size={14} />
-              {upload.isPending ? "Uploading…" : "Upload a document"}
-            </button>
-          </>
-        )}
-      </div>
+        <Upload size={14} aria-hidden />
+        {upload.isPending ? tr("forge.work_project_documents.uploading") : tr("forge.work_project_documents.upload")}
+      </button>
+    </>
+  ) : null;
 
-      {error && (
-        <p
-          data-testid="work-document-error"
-          role="alert"
-          style={{ margin: "0 0 12px", fontSize: 13, color: "#ef4444" }}
-        >
-          {error}
-        </p>
-      )}
+  return (
+    <div data-testid="work-project-documents" style={{ color: t.text, fontFamily: t.fontFamily }}>
+      <PortalBlock title={tr("forge.work_project_documents.title")} aside={uploadControl}>
+        {error && (
+          <p
+            data-testid="work-document-error"
+            role="alert"
+            style={{ margin: "0 0 12px", fontSize: 14, color: t.text, fontWeight: 600 }}
+          >
+            {error}
+          </p>
+        )}
 
-      {list.length === 0 ? (
-        <p data-testid="work-project-documents-empty" style={{ margin: 0, fontSize: 13, color: t.muted }}>
-          {allowUpload
-            ? "Nothing here yet. Upload a document to add it to this project."
-            : "Nothing has been shared with you yet."}
-        </p>
-      ) : (
-        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
-          {list.map((doc) => (
-            <li
-              key={doc.id}
-              data-testid={`work-document-${doc.id}`}
-              style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                gap: 12,
-                flexWrap: "wrap",
-                padding: "10px 14px",
-                border: `1px solid ${t.border}`,
-                borderRadius: t.cornerRadius,
-              }}
-            >
-              <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
+        {list.length === 0 ? (
+          <div data-testid="work-project-documents-empty">
+            {allowUpload ? (
+              <PortalEmpty
+                title={tr("forge.work_project_documents.empty_title")}
+                body={tr("forge.work_project_documents.empty_body")}
+              />
+            ) : (
+              <PortalEmpty title={tr("forge.work_project_documents.empty_shared_title")} />
+            )}
+          </div>
+        ) : (
+          <PortalList>
+            {list.map((doc) => (
+              <PortalRow key={doc.id} testId={`work-document-${doc.id}`}>
                 {doc.file ? (
-                  <Paperclip size={14} style={{ color: t.muted, flexShrink: 0 }} />
+                  <Paperclip size={16} aria-hidden style={{ color: t.muted, flexShrink: 0 }} />
                 ) : (
-                  <FileText size={14} style={{ color: t.muted, flexShrink: 0 }} />
+                  <FileText size={16} aria-hidden style={{ color: t.muted, flexShrink: 0 }} />
                 )}
-                <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
-                  <span style={{ fontWeight: 700, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                <div className="fg:flex fg:min-w-0 fg:flex-1 fg:flex-col fg:gap-1">
+                  <span
+                    style={{
+                      fontWeight: 600,
+                      fontSize: 15,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
                     {doc.title}
                   </span>
-                  <span style={{ fontSize: 12, color: t.muted }}>
-                    {formatWorkDate(doc.sharedAt)}
-                    {doc.file?.size ? ` · ${humanSize(doc.file.size)}` : ""}
+                  <span className="fg:flex fg:flex-wrap fg:gap-x-3" style={{ fontSize: 13, color: t.muted }}>
+                    <span>{tr("forge.work_project_documents.shared_on", { date: formatDate(doc.sharedAt) })}</span>
+                    {doc.file?.size ? <span>{humanSize(doc.file.size)}</span> : null}
                   </span>
                 </div>
-              </div>
-              {doc.file && (
-                <button
-                  type="button"
-                  data-testid={`work-document-open-${doc.id}`}
-                  onClick={() => void openDocument(doc)}
-                  disabled={opening === doc.id}
-                  style={{
-                    background: "transparent",
-                    border: "none",
-                    padding: 0,
-                    color: t.primary,
-                    fontSize: 13,
-                    textDecoration: "underline",
-                    cursor: opening === doc.id ? "wait" : "pointer",
-                  }}
-                >
-                  {opening === doc.id ? "Opening…" : "Open"}
-                </button>
-              )}
-            </li>
-          ))}
-        </ul>
-      )}
+                {doc.file && (
+                  <button
+                    type="button"
+                    data-testid={`work-document-open-${doc.id}`}
+                    onClick={() => void openDocument(doc)}
+                    disabled={opening === doc.id}
+                    aria-label={tr("forge.work_project_documents.open_aria", { title: doc.title })}
+                    style={{ ...buttons.text, cursor: opening === doc.id ? "wait" : "pointer" }}
+                  >
+                    {opening === doc.id ? tr("forge.work_project_documents.opening") : tr("forge.work_project_documents.open")}
+                  </button>
+                )}
+              </PortalRow>
+            ))}
+          </PortalList>
+        )}
+      </PortalBlock>
     </div>
   );
 }