@tribe-nest/forge 3.59.0 → 3.61.0

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

@@ -1,12 +1,10 @@
-import { useState, type FormEvent } from "react";
-import { MessageSquare, Send } from "lucide-react";
-import { useThemeTokens, type ResolvedThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useId, useState, type FormEvent } from "react";
+import { Send } from "lucide-react";
+import { useForgeT } from "../../../i18n";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { Loading } from "../Loading";
-import {
-  formatWorkDate,
-  useWorkTaskComments,
-  type WorkTaskComment,
-} from "../../headless/work/useWorkPortal";
+import { useWorkTaskComments, type WorkTaskComment } from "../../headless/work/useWorkPortal";
+import { PortalBlock, usePortal, usePortalButtons } from "../portal/shared";
 
 export interface WorkTaskCommentsProps {
   /** The client project id (from the route). */
@@ -16,13 +14,15 @@ export interface WorkTaskCommentsProps {
 }
 
 /**
- * The authenticated client's comment thread for a single task — renders the
- * existing comments (author + time + content, newest first) and a composer
- * (textarea + submit) that posts a new one. Built on `useWorkTaskComments`;
- * theme tokens only.
+ * The authenticated client's comment thread for a single task. Renders the
+ * existing comments (author, time and content, newest first) and a composer
+ * that posts a new one. Built on `useWorkTaskComments`; theme tokens only.
  */
 export function WorkTaskComments({ projectId, taskId }: WorkTaskCommentsProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
+  const buttons = usePortalButtons();
+  const inputId = useId();
   const { comments, isLoading, error, addComment, isAdding } = useWorkTaskComments(projectId, taskId);
   const [content, setContent] = useState("");
 
@@ -38,112 +38,85 @@ export function WorkTaskComments({ projectId, taskId }: WorkTaskCommentsProps) {
     }
   };
 
-  return (
-    <div
-      data-testid="work-task-comments"
-      style={{ display: "flex", flexDirection: "column", gap: 16, color: t.text, fontFamily: t.fontFamily }}
-    >
-      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-        <MessageSquare size={16} style={{ color: t.primary }} />
-        <h2
-          style={{
-            fontSize: 13,
-            fontWeight: 600,
-            textTransform: "uppercase",
-            letterSpacing: "0.05em",
-            margin: 0,
-            color: t.text,
-          }}
-        >
-          Comments
-        </h2>
-      </div>
+  const empty = content.trim().length === 0;
 
-      {isLoading ? (
-        <Loading />
-      ) : error ? (
-        <p style={{ margin: 0, fontSize: 14, color: t.muted }}>We couldn&apos;t load comments right now.</p>
-      ) : comments.length === 0 ? (
-        <p style={{ margin: 0, fontSize: 14, color: t.muted }}>No comments yet. Start the conversation below.</p>
-      ) : (
-        <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
-          {comments.map((c) => (
-            <CommentItem key={c.id} comment={c} t={t} />
-          ))}
-        </ul>
-      )}
+  return (
+    <div data-testid="work-task-comments" style={{ color: t.text, fontFamily: t.fontFamily }}>
+      <PortalBlock title={tr("forge.work_task_comments.title")}>
+        {isLoading ? (
+          <Loading />
+        ) : error ? (
+          <p style={{ margin: 0, fontSize: 14, color: t.muted }}>{tr("forge.work_task_comments.load_error")}</p>
+        ) : comments.length === 0 ? (
+          <p style={{ margin: 0, fontSize: 14, color: t.muted }}>{tr("forge.work_task_comments.empty")}</p>
+        ) : (
+          <ul style={{ margin: 0, padding: 0, listStyle: "none", borderTop: `1px solid ${t.border}` }}>
+            {comments.map((c) => (
+              <CommentItem key={c.id} comment={c} />
+            ))}
+          </ul>
+        )}
 
-      {/* Composer */}
-      <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-        <textarea
-          data-testid="work-task-comment-input"
-          value={content}
-          onChange={(e) => setContent(e.target.value)}
-          placeholder="Add a comment…"
-          rows={3}
-          disabled={isAdding}
-          style={{
-            width: "100%",
-            resize: "vertical",
-            padding: "10px 12px",
-            fontFamily: t.fontFamily,
-            fontSize: 14,
-            color: t.text,
-            background: t.background,
-            border: `1px solid ${t.border}`,
-            borderRadius: t.cornerRadius,
-            boxSizing: "border-box",
-          }}
-        />
-        <div style={{ display: "flex", justifyContent: "flex-end" }}>
-          <button
-            type="submit"
-            data-testid="work-task-comment-submit"
-            disabled={isAdding || content.trim().length === 0}
+        <form onSubmit={handleSubmit} className="fg:mt-6 fg:flex fg:flex-col fg:gap-3">
+          <label htmlFor={inputId} className="fg:sr-only">
+            {tr("forge.work_task_comments.input_label")}
+          </label>
+          <textarea
+            id={inputId}
+            data-testid="work-task-comment-input"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder={tr("forge.work_task_comments.placeholder")}
+            rows={3}
+            disabled={isAdding}
             style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 8,
-              padding: "8px 16px",
+              width: "100%",
+              resize: "vertical",
+              padding: "10px 12px",
               fontFamily: t.fontFamily,
-              fontSize: 14,
-              fontWeight: 600,
-              color: t.textPrimary,
-              background: t.primary,
-              border: "none",
+              fontSize: 15,
+              color: t.text,
+              background: t.background,
+              border: `1px solid ${t.border}`,
               borderRadius: t.cornerRadius,
-              cursor: isAdding || content.trim().length === 0 ? "not-allowed" : "pointer",
-              opacity: isAdding || content.trim().length === 0 ? 0.6 : 1,
+              boxSizing: "border-box",
             }}
-          >
-            <Send size={14} />
-            {isAdding ? "Posting…" : "Post comment"}
-          </button>
-        </div>
-      </form>
+          />
+          <div className="fg:flex fg:justify-end">
+            <button
+              type="submit"
+              data-testid="work-task-comment-submit"
+              disabled={isAdding || empty}
+              style={{
+                ...buttons.primary,
+                cursor: isAdding || empty ? "not-allowed" : "pointer",
+                opacity: isAdding || empty ? 0.5 : 1,
+              }}
+            >
+              <Send size={14} aria-hidden />
+              {isAdding ? tr("forge.work_task_comments.posting") : tr("forge.work_task_comments.submit")}
+            </button>
+          </div>
+        </form>
+      </PortalBlock>
     </div>
   );
 }
 
-function CommentItem({ comment, t }: { comment: WorkTaskComment; t: ResolvedThemeTokens }) {
+function CommentItem({ comment }: { comment: WorkTaskComment }) {
+  const t = useThemeTokens();
+  const { formatDate } = usePortal();
   return (
     <li
       data-testid="work-task-comment-item"
-      style={{
-        padding: 14,
-        border: `1px solid ${t.border}`,
-        borderRadius: t.cornerRadius,
-        background: t.surface,
-        display: "flex",
-        flexDirection: "column",
-        gap: 6,
-      }}
+      className="fg:flex fg:flex-col fg:gap-1.5 fg:py-4"
+      style={{ borderBottom: `1px solid ${t.border}` }}
     >
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, flexWrap: "wrap" }}>
+      <div className="fg:flex fg:flex-wrap fg:items-baseline fg:gap-x-3">
         <span style={{ fontWeight: 600, fontSize: 14, color: t.text }}>{comment.fullName}</span>
-        <span style={{ fontSize: 12, color: t.muted }}>{formatWorkDate(comment.createdAt)}</span>
+        <span style={{ fontSize: 13, color: t.muted }}>{formatDate(comment.createdAt)}</span>
       </div>
-      <p style={{ margin: 0, fontSize: 14, color: t.text, whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
+      <p style={{ margin: 0, fontSize: 15, lineHeight: 1.5, color: t.text, whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
         {comment.content}
       </p>
     </li>

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

@@ -1,7 +1,11 @@
-import { ArrowLeft, CheckCircle2, Circle } from "lucide-react";
+import type { MouseEvent } from "react";
+import { ArrowLeft } from "lucide-react";
+import { useForgeT } from "../../../i18n";
+import { internalPath } from "../../../runtime/pages";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { Loading } from "../Loading";
-import { formatWorkDate, useWorkProjectReport } from "../../headless/work/useWorkPortal";
+import { useWorkProjectReport } from "../../headless/work/useWorkPortal";
+import { PortalHeading, usePortal } from "../portal/shared";
 import { WorkTaskComments } from "./WorkTaskComments";
 import { WorkTaskAttachments } from "./WorkTaskAttachments";
 
@@ -10,81 +14,66 @@ export interface WorkTaskDetailProps {
   projectId: string;
   /** The task id (from the route). */
   taskId: string;
-  /** Href back to the project report. Rendered as an `<a>` unless `onBack` is
-   * supplied. Defaults to `/i/work/projects/{projectId}`. */
+  /** Href back to the project report. Defaults to
+   * `internalPath("account/projects/$projectId")`. */
   backHref?: string;
-  /** Router-driven back handler. When provided, the back link renders as a
-   * button calling this instead of an anchor. */
+  /** Router-driven back handler. The back link stays a real `<a href>`, and a
+   * plain left click calls this instead of reloading the page. */
   onBack?: () => void;
 }
 
 /**
- * The authenticated client's single-task detail — the task title/status plus
- * the comment thread (`WorkTaskComments`). Resolves the task from the project
- * report so it shows a friendly title. Theme tokens only.
+ * The authenticated client's single-task detail: the task title and status,
+ * its attachments and the comment thread (`WorkTaskComments`). Resolves the
+ * task from the project report so it shows a friendly title. Theme tokens only.
  */
 export function WorkTaskDetail({ projectId, taskId, backHref, onBack }: WorkTaskDetailProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
+  const { formatDate } = usePortal();
   const { data: report, isLoading } = useWorkProjectReport(projectId);
-  const href = backHref ?? `/i/work/projects/${projectId}`;
+  const href = backHref ?? internalPath("account/projects/$projectId", { projectId });
 
   const task = report?.tasks.find((tk) => tk.id === taskId);
 
-  const backLinkStyle: React.CSSProperties = {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: 6,
-    fontSize: 13,
-    fontWeight: 600,
-    color: t.primary,
-    background: "transparent",
-    border: "none",
-    padding: 0,
-    cursor: "pointer",
-    textDecoration: "none",
-  };
-
-  const backLink = onBack ? (
-    <button type="button" data-testid="work-task-back" onClick={onBack} style={backLinkStyle}>
-      <ArrowLeft size={14} /> Back to project
-    </button>
-  ) : (
-    <a data-testid="work-task-back" href={href} style={backLinkStyle}>
-      <ArrowLeft size={14} /> Back to project
-    </a>
-  );
-
   return (
-    <div
-      data-testid="work-task-detail"
-      style={{ display: "flex", flexDirection: "column", gap: 24, color: t.text, fontFamily: t.fontFamily }}
-    >
-      {backLink}
+    <div data-testid="work-task-detail" style={{ color: t.text, fontFamily: t.fontFamily }}>
+      <a
+        data-testid="work-task-back"
+        href={href}
+        className="fg:mb-4 fg:inline-flex fg:items-center fg:gap-1.5"
+        style={{ fontSize: 14, color: t.muted, textDecoration: "none" }}
+        onClick={
+          onBack
+            ? (event: MouseEvent<HTMLAnchorElement>) => {
+                if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+                event.preventDefault();
+                onBack();
+              }
+            : undefined
+        }
+      >
+        <ArrowLeft size={14} aria-hidden /> {tr("forge.work_task_detail.back_to_project")}
+      </a>
 
       {isLoading ? (
-        <Loading fullPage />
+        <Loading />
       ) : (
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
-          <h1
-            data-testid="work-task-title"
-            style={{ fontSize: 22, fontWeight: 800, margin: 0, color: t.text, display: "inline-flex", alignItems: "center", gap: 10 }}
-          >
-            {task ? (
-              task.done ? (
-                <CheckCircle2 size={20} style={{ color: t.primary }} />
-              ) : (
-                <Circle size={20} style={{ color: t.muted }} />
-              )
-            ) : null}
-            {task ? task.title : "Task"}
-          </h1>
-          {task?.dueDate && <span style={{ fontSize: 13, color: t.muted }}>Due {formatWorkDate(task.dueDate)}</span>}
-        </div>
+        <PortalHeading
+          title={<span data-testid="work-task-title">{task ? task.title : tr("forge.work_task_detail.fallback_title")}</span>}
+          lead={task?.dueDate ? tr("forge.work_task_detail.due_on", { date: formatDate(task.dueDate) }) : undefined}
+          actions={
+            task ? (
+              <span data-testid="work-task-status" style={{ fontSize: 14, color: t.muted }}>
+                {task.done ? tr("forge.work_task_detail.status_done") : tr("forge.work_task_detail.status_open")}
+              </span>
+            ) : undefined
+          }
+        />
       )}
 
-      <WorkTaskAttachments projectId={projectId} taskId={taskId} />
-
-      <div style={{ padding: 20, border: `1px solid ${t.border}`, borderRadius: t.cornerRadius, background: t.surface }}>
+      <div className="fg:flex fg:flex-col fg:gap-10">
+        <WorkTaskAttachments projectId={projectId} taskId={taskId} />
         <WorkTaskComments projectId={projectId} taskId={taskId} />
       </div>
     </div>

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

@@ -1,21 +1,24 @@
+import { useForgeT } from "../../../i18n";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { Loading } from "../Loading";
 import { useWorkTokenReport } from "../../headless/work/useWorkPortal";
+import { PortalEmpty } from "../portal/shared";
 import { WorkReportBody } from "./WorkReportBody";
 
 export interface WorkTokenReportProps {
-  /** Signed share token from the URL (`/i/work/time-report/:token`). */
+  /** Signed share token from the URL (`/i/account/time-report/:token`). */
   token: string;
 }
 
 /**
  * Public, login-free tokenized share of a project's time report. The signed
- * token IS the authorization — no auth guard. Invalid/expired tokens resolve to
- * a friendly not-found notice (the API returns 404). Built on
+ * token IS the authorization, so there is no auth guard. Invalid or expired
+ * tokens resolve to a friendly not-found notice (the API returns 404). Built on
  * `useWorkTokenReport`; wraps `WorkReportBody`. Theme tokens only.
  */
 export function WorkTokenReport({ token }: WorkTokenReportProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const { data: report, isLoading, isError } = useWorkTokenReport(token);
 
   if (isLoading) {
@@ -24,19 +27,8 @@ export function WorkTokenReport({ token }: WorkTokenReportProps) {
 
   if (isError || !report) {
     return (
-      <div
-        data-testid="work-token-report-error"
-        style={{
-          border: `1px solid ${t.border}`,
-          borderRadius: t.cornerRadius,
-          background: t.surface,
-          padding: 32,
-          textAlign: "center",
-          color: t.text,
-          fontFamily: t.fontFamily,
-        }}
-      >
-        <p style={{ margin: 0, color: t.muted }}>This report link is invalid or has expired.</p>
+      <div data-testid="work-token-report-error" style={{ fontFamily: t.fontFamily }}>
+        <PortalEmpty title={tr("forge.work_token_report.invalid_link")} />
       </div>
     );
   }

package/src/ui/styled/work/index.ts

@@ -2,7 +2,7 @@
 export { WorkPortalProjects, type WorkPortalProjectsProps } from "./WorkPortalProjects";
 export { WorkProjectReport, type WorkProjectReportProps } from "./WorkProjectReport";
 export { WorkTokenReport, type WorkTokenReportProps } from "./WorkTokenReport";
-export { WorkReportBody, type WorkReportBodyProps } from "./WorkReportBody";
+export { WorkReportBody, type WorkReportBodyProps, type WorkReportSection } from "./WorkReportBody";
 export { WorkTaskComments, type WorkTaskCommentsProps } from "./WorkTaskComments";
 export { WorkTaskAttachments, type WorkTaskAttachmentsProps } from "./WorkTaskAttachments";
 export { WorkTaskDetail, type WorkTaskDetailProps } from "./WorkTaskDetail";