fix(ui): git

Pipeline.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}

frontend/src/app/dashboard/page.tsx

@@ -1236,10 +1236,6 @@ export default function DashboardPage() {
                   <h3 className="text-lg font-semibold text-strong">
                     Git Activity
                   </h3>
-                  <p className="mt-1 text-sm text-muted">
-                    Issue contributions across all tracked repositories in the
-                    last 12 months.
-                  </p>
                 </div>
                 <ForgejoHeatmap
                   days={forgejoHeatmapQuery.data?.days ?? []}

frontend/src/components/git/ForgejoIssuesTable.tsx

@@ -3,18 +3,20 @@
 import { useMemo, useState } from "react";
 
 import {
-  type ColumnDef,
+  CheckCircle2,
-  getCoreRowModel,
+  CircleDot,
-  useReactTable,
+  ExternalLink,
-} from "@tanstack/react-table";
+  Loader2,
-import { CircleDot, ExternalLink, XCircle } from "lucide-react";
+  Milestone,
+  XCircle,
+} from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { DataTable } from "@/components/tables/DataTable";
 import type { ForgejoIssue, ForgejoIssueLabel } from "@/lib/api-forgejo";
 import type { ForgejoRepository } from "@/lib/api-forgejo";
 import { CloseForgejoIssueDialog } from "@/components/git/CloseForgejoIssueDialog";
+import { cn } from "@/lib/utils";
 
 /** Normalize a Forgejo label color to a valid 6-char hex string or null. */
 function normalizeLabelColor(raw: string | null | undefined): string | null {
@@ -40,7 +42,7 @@ function LabelChip({ label }: { label: ForgejoIssueLabel }) {
   return (
     <Badge
       variant="outline"
-      className="shrink-0 text-xs"
+      className="max-w-[14rem] shrink-0 truncate px-2 py-0.5 text-[11px] normal-case tracking-normal"
       style={
         bg
           ? { backgroundColor: bg, color: labelTextColor(bg), borderColor: bg }
@@ -53,6 +55,129 @@ function LabelChip({ label }: { label: ForgejoIssueLabel }) {
   );
 }
 
+function formatDateTime(value: string | null | undefined): string {
+  if (!value) return "Unknown date";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+}
+
+function formatRelativeTime(value: string | null | undefined): string {
+  if (!value) return "unknown";
+  const time = new Date(value).getTime();
+  if (Number.isNaN(time)) return value;
+
+  const diffSeconds = Math.round((Date.now() - time) / 1000);
+  const absSeconds = Math.abs(diffSeconds);
+  const direction = diffSeconds >= 0 ? "ago" : "from now";
+  const units = [
+    { max: 60, value: 1, name: "second" },
+    { max: 60 * 60, value: 60, name: "minute" },
+    { max: 60 * 60 * 24, value: 60 * 60, name: "hour" },
+    { max: 60 * 60 * 24 * 30, value: 60 * 60 * 24, name: "day" },
+    { max: 60 * 60 * 24 * 365, value: 60 * 60 * 24 * 30, name: "month" },
+    { max: Number.POSITIVE_INFINITY, value: 60 * 60 * 24 * 365, name: "year" },
+  ];
+  const unit =
+    units.find((candidate) => absSeconds < candidate.max) ?? units[0];
+  const amount = Math.max(1, Math.round(absSeconds / unit.value));
+
+  if (amount <= 5 && unit.name === "second") {
+    return diffSeconds >= 0 ? "just now" : "in a few seconds";
+  }
+
+  return `${amount} ${unit.name}${amount === 1 ? "" : "s"} ${direction}`;
+}
+
+function getAssigneeLogin(assignee: Record<string, unknown>): string | null {
+  const login = assignee.login ?? assignee.username ?? assignee.name;
+  return typeof login === "string" && login.trim() ? login : null;
+}
+
+function getInitials(login: string): string {
+  const normalized = login.trim();
+  if (!normalized) return "?";
+  const parts = normalized.split(/[\s._-]+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`.toUpperCase();
+  }
+  return normalized.slice(0, 2).toUpperCase();
+}
+
+function AssigneeStack({ issue }: { issue: ForgejoIssue }) {
+  const assignees = issue.assignees
+    .map(getAssigneeLogin)
+    .filter((login): login is string => login !== null);
+
+  if (assignees.length === 0) {
+    return (
+      <span className="whitespace-nowrap text-xs text-muted">Unassigned</span>
+    );
+  }
+
+  const visible = assignees.slice(0, 3);
+  const overflow = assignees.length - visible.length;
+
+  return (
+    <div
+      className="flex items-center justify-end -space-x-2"
+      title={assignees.join(", ")}
+      aria-label={`Assigned to ${assignees.join(", ")}`}
+    >
+      {visible.map((login) => (
+        <span
+          key={login}
+          className="flex h-7 w-7 items-center justify-center rounded-full border-2 border-[color:var(--surface)] bg-[color:var(--surface-muted)] text-[10px] font-semibold text-strong shadow-sm"
+        >
+          {getInitials(login)}
+        </span>
+      ))}
+      {overflow > 0 ? (
+        <span className="flex h-7 min-w-7 items-center justify-center rounded-full border-2 border-[color:var(--surface)] bg-[color:var(--accent-soft)] px-1.5 text-[10px] font-semibold text-[color:var(--accent)] shadow-sm">
+          +{overflow}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function IssueStateIcon({ state }: { state: string }) {
+  const isOpen = state === "open";
+  const Icon = isOpen ? CircleDot : CheckCircle2;
+
+  return (
+    <span
+      className={cn(
+        "mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center",
+        isOpen ? "text-[color:var(--success)]" : "text-[color:var(--danger)]",
+      )}
+      title={isOpen ? "Open issue" : "Closed issue"}
+    >
+      <Icon className="h-4 w-4" />
+    </span>
+  );
+}
+
+function LoadingIssuesList() {
+  return (
+    <div className="divide-y divide-[color:var(--border)]">
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div key={index} className="flex gap-3 px-4 py-4">
+          <div className="mt-1 h-4 w-4 shrink-0 animate-pulse rounded-full bg-[color:var(--surface-muted)]" />
+          <div className="min-w-0 flex-1 space-y-2">
+            <div className="h-4 w-2/3 animate-pulse rounded bg-[color:var(--surface-muted)]" />
+            <div className="h-3 w-1/2 animate-pulse rounded bg-[color:var(--surface-muted)]" />
+          </div>
+          <Loader2 className="h-4 w-4 animate-spin text-[color:var(--accent)]" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export type ForgejoIssuesTableProps = {
   issues: ForgejoIssue[];
   repositories: ForgejoRepository[];
@@ -81,173 +206,159 @@ export function ForgejoIssuesTable({
     }
     return map;
   }, [repositories]);
-  const columns: ColumnDef<ForgejoIssue>[] = useMemo(
+  const issueCounts = useMemo(
-    () => [
+    () =>
-      {
+      issues.reduce(
-        id: "repository",
+        (counts, issue) => {
-        header: "Repository",
+          if (issue.state === "closed") {
-        cell: ({ row }) => {
+            counts.closed += 1;
-          const fallback = row.original.repository_id;
+          } else {
-          return (
+            counts.open += 1;
-            <span className="block max-w-[220px] truncate text-muted">
-              {repositoryNameById.get(row.original.repository_id) ?? fallback}
-            </span>
-          );
-        },
-      },
-      {
-        accessorKey: "forgejo_issue_number",
-        header: "#",
-        cell: ({ row }) => (
-          <a
-            href={row.original.html_url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 font-mono text-sm text-[color:var(--accent)] hover:underline"
-          >
-            #{row.original.forgejo_issue_number}
-            <ExternalLink className="h-3 w-3" />
-          </a>
-        ),
-      },
-      {
-        accessorKey: "title",
-        header: "Title",
-        cell: ({ row }) => (
-          <div
-            className="max-w-[28rem] truncate font-medium text-strong"
-            title={row.original.title}
-          >
-            {row.original.title}
-          </div>
-        ),
-      },
-      {
-        accessorKey: "state",
-        header: "State",
-        cell: ({ row }) => {
-          const state = row.original.state;
-          return (
-            <Badge variant={state === "open" ? "success" : "default"}>
-              {state}
-            </Badge>
-          );
-        },
-      },
-      {
-        accessorKey: "labels",
-        header: "Labels",
-        cell: ({ row }) => {
-          const labels = row.original.labels;
-          if (!labels || labels.length === 0) return null;
-          const visible = labels.slice(0, 3);
-          const overflow = labels.length - visible.length;
-          return (
-            <div className="flex max-w-[240px] flex-wrap gap-1">
-              {visible.map((label, i) => (
-                <LabelChip key={i} label={label} />
-              ))}
-              {overflow > 0 && (
-                <span className="self-center text-xs text-muted">
-                  +{overflow}
-                </span>
-              )}
-            </div>
-          );
-        },
-      },
-      {
-        id: "assignee",
-        header: "Assignee",
-        cell: ({ row }) => {
-          const assignee = row.original.assignees?.[0];
-          const login =
-            assignee &&
-            typeof assignee === "object" &&
-            "login" in assignee &&
-            typeof assignee.login === "string"
-              ? assignee.login
-              : null;
-
-          return (
-            <span className="block max-w-[160px] truncate text-muted">
-              {login || "Unassigned"}
-            </span>
-          );
-        },
-      },
-      {
-        accessorKey: "forgejo_updated_at",
-        header: "Updated",
-        cell: ({ row }) => {
-          try {
-            return (
-              <span className="whitespace-nowrap text-muted">
-                {new Date(row.original.forgejo_updated_at).toLocaleDateString()}
-              </span>
-            );
-          } catch {
-            return (
-              <span className="text-muted">
-                {row.original.forgejo_updated_at}
-              </span>
-            );
           }
+          return counts;
         },
-      },
+        { open: 0, closed: 0 },
-      {
+      ),
-        id: "actions",
+    [issues],
-        header: "Actions",
-        cell: ({ row }) => {
-          const issue = row.original;
-          const canShowClose =
-            canClose && issue.state === "open" && !issue.is_pull_request;
-          if (!canShowClose) {
-            return null;
-          }
-          const repositoryName =
-            repositoryNameById.get(issue.repository_id) ?? issue.repository_id;
-          return (
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="h-8 w-8 p-0 text-[color:var(--danger)] hover:bg-[color:rgba(248,113,113,0.08)]"
-              title={`Close ${repositoryName}#${issue.forgejo_issue_number}`}
-              onClick={() => {
-                setIssueToClose(issue);
-                setIsCloseDialogOpen(true);
-              }}
-            >
-              <XCircle className="h-4 w-4" />
-            </Button>
-          );
-        },
-      },
-    ],
-    [canClose, repositoryNameById],
   );
-  const table = useReactTable({
-    data: issues,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-  });
 
   return (
     <>
       <div className="overflow-hidden rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] shadow-lush">
-        <DataTable
+        <div className="flex flex-col gap-3 border-b border-[color:var(--border)] bg-[color:var(--surface-muted)] px-4 py-3 text-sm sm:flex-row sm:items-center sm:justify-between">
-          table={table}
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
-          isLoading={isLoading}
+            <span className="inline-flex items-center gap-1.5 font-medium text-strong">
-          loadingLabel="Loading Git Project issues…"
+              <CircleDot className="h-4 w-4 text-[color:var(--success)]" />
-          tableClassName="min-w-[980px] w-full text-left text-sm"
+              {issueCounts.open} Open
-          emptyState={{
+            </span>
-            icon: <CircleDot className="h-12 w-12" />,
+            <span className="inline-flex items-center gap-1.5 text-muted">
-            title: "No Git Project issues found",
+              <CheckCircle2 className="h-4 w-4" />
-            description:
+              {issueCounts.closed} Closed
-              "Sync a repository to pull issues into Pipeline, or adjust your filters.",
+            </span>
-          }}
+          </div>
-        />
+          <span className="text-xs text-muted">
+            {issues.length} visible issue{issues.length === 1 ? "" : "s"}
+          </span>
+        </div>
+
+        {isLoading ? (
+          <LoadingIssuesList />
+        ) : issues.length === 0 ? (
+          <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
+            <div className="mb-4 rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4 text-[color:var(--text-muted)]">
+              <CircleDot className="h-12 w-12" />
+            </div>
+            <h3 className="mb-2 text-lg font-semibold text-strong">
+              No Git Project issues found
+            </h3>
+            <p className="max-w-md text-sm text-muted">
+              Sync a repository to pull issues into Pipeline, or adjust your
+              filters.
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-[color:var(--border)]">
+            {issues.map((issue) => {
+              const repositoryName =
+                repositoryNameById.get(issue.repository_id) ??
+                issue.repository_id;
+              const visibleLabels = issue.labels.slice(0, 4);
+              const hiddenLabelCount =
+                issue.labels.length - visibleLabels.length;
+              const updatedAt =
+                issue.state === "closed"
+                  ? issue.forgejo_closed_at || issue.forgejo_updated_at
+                  : issue.forgejo_updated_at;
+              const stateVerb = issue.state === "closed" ? "closed" : "updated";
+              const canShowClose =
+                canClose && issue.state === "open" && !issue.is_pull_request;
+
+              return (
+                <article
+                  key={issue.id}
+                  className="group grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-3 px-4 py-4 transition-colors hover:bg-[color:var(--surface-muted)] sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:gap-x-4"
+                >
+                  <IssueStateIcon state={issue.state} />
+
+                  <div className="min-w-0 flex-1">
+                    <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                      <a
+                        href={issue.html_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="min-w-0 break-words text-sm font-semibold text-strong hover:text-[color:var(--accent)] hover:underline"
+                        title={issue.title}
+                      >
+                        {issue.title}
+                      </a>
+                      {visibleLabels.map((label, i) => (
+                        <LabelChip key={`${label.name}-${i}`} label={label} />
+                      ))}
+                      {hiddenLabelCount > 0 ? (
+                        <span className="text-xs text-muted">
+                          +{hiddenLabelCount}
+                        </span>
+                      ) : null}
+                    </div>
+
+                    <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
+                      <span className="font-medium text-strong">
+                        {repositoryName}
+                      </span>
+                      <span className="font-mono">
+                        #{issue.forgejo_issue_number}
+                      </span>
+                      <span title={formatDateTime(updatedAt)}>
+                        {stateVerb} {formatRelativeTime(updatedAt)}
+                      </span>
+                      {issue.author ? <span>by {issue.author}</span> : null}
+                      {issue.milestone?.title ? (
+                        <span className="inline-flex min-w-0 items-center gap-1">
+                          <Milestone className="h-3.5 w-3.5 shrink-0" />
+                          <span className="truncate">
+                            {issue.milestone.title}
+                          </span>
+                        </span>
+                      ) : null}
+                    </div>
+                  </div>
+
+                  <div className="col-span-2 flex shrink-0 items-center justify-between gap-2 pl-7 sm:col-span-1 sm:min-w-[9rem] sm:justify-end sm:pl-0">
+                    <AssigneeStack issue={issue} />
+                    <div className="flex items-center gap-1">
+                      <a
+                        href={issue.html_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted transition-colors hover:bg-[color:var(--surface-strong)] hover:text-[color:var(--accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]"
+                        title={`Open ${repositoryName}#${issue.forgejo_issue_number} in Forgejo`}
+                        aria-label={`Open ${repositoryName}#${issue.forgejo_issue_number} in Forgejo`}
+                      >
+                        <ExternalLink className="h-4 w-4" />
+                      </a>
+                      {canShowClose ? (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="h-8 w-8 rounded-lg p-0 text-[color:var(--danger)] hover:bg-[color:rgba(248,113,113,0.08)]"
+                          title={`Close ${repositoryName}#${issue.forgejo_issue_number}`}
+                          aria-label={`Close ${repositoryName}#${issue.forgejo_issue_number}`}
+                          onClick={() => {
+                            setIssueToClose(issue);
+                            setIsCloseDialogOpen(true);
+                          }}
+                        >
+                          <XCircle className="h-4 w-4" />
+                        </Button>
+                      ) : null}
+                    </div>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        )}
       </div>
       <CloseForgejoIssueDialog
         issue={issueToClose}