feat: clickable project names in ProjectHealth widget

Project names in the health widget now link to /projects/[id] detail page.
Hover: brand color transition for visual feedback.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
2026-03-26 13:01:42 +01:00
parent 8be4ef47cd
commit d58f121c12
@@ -1,6 +1,7 @@
"use client"; "use client";
import { useMemo } from "react"; import { useMemo } from "react";
import Link from "next/link";
import { trpc } from "~/lib/trpc/client.js"; import { trpc } from "~/lib/trpc/client.js";
import type { WidgetProps } from "~/components/dashboard/widget-registry.js"; import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js"; import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
@@ -103,8 +104,10 @@ export function ProjectHealthWidget({ config, onConfigChange }: WidgetProps) {
{rows.map((row) => ( {rows.map((row) => (
<tr key={row.shortCode} className="hover:bg-gray-50 dark:hover:bg-gray-800/30"> <tr key={row.shortCode} className="hover:bg-gray-50 dark:hover:bg-gray-800/30">
<td className="px-3 py-2 font-medium text-gray-900 dark:text-gray-100 max-w-[160px] truncate"> <td className="px-3 py-2 font-medium text-gray-900 dark:text-gray-100 max-w-[160px] truncate">
<Link href={`/projects/${(row as any).id}`} className="hover:text-brand-600 dark:hover:text-brand-400 transition-colors">
<span className="font-mono text-gray-500 dark:text-gray-400 mr-1">{row.shortCode}</span> <span className="font-mono text-gray-500 dark:text-gray-400 mr-1">{row.shortCode}</span>
{row.projectName} {row.projectName}
</Link>
</td> </td>
<td className="px-3 py-2"> <td className="px-3 py-2">
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">