@reqord/web 0.1.0 → 0.3.0

package/src/components/specification/specification-table.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import Link from "next/link";
 import type { Specification, Status } from "@reqord/shared";
 import { StatusBadge } from "@/components/ui/badge";
@@ -84,18 +84,37 @@ export function SpecificationTable({
   }
 
   function renderSortHeader(column: SortKey, label: string) {
-    const arrow = sortKey === column ? (sortDir === "asc" ? " ↑" : " ↓") : "";
+    const isActive = sortKey === column;
     return (
       <th
         key={column}
-        className="cursor-pointer px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 hover:text-gray-900"
-        onClick={() => handleSort(column)}
+        scope="col"
+        aria-sort={isActive ? (sortDir === "asc" ? "ascending" : "descending") : undefined}
+        className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
       >
-        {label}{arrow}
+        <button
+          type="button"
+          onClick={() => handleSort(column)}
+          className={`inline-flex items-center gap-1 transition-colors ${
+            isActive ? "text-warm-900 font-semibold" : "hover:text-gray-900"
+          }`}
+        >
+          {label}
+          <span aria-hidden="true" className={`text-[10px] ${isActive ? "opacity-100" : "opacity-30"}`}>
+            {isActive && sortDir === "desc" ? "▼" : "▲"}
+          </span>
+        </button>
       </th>
     );
   }
 
+  const hasActiveFilters = search || statusFilter !== "all";
+
+  function clearAllFilters() {
+    setSearch("");
+    setStatusFilter("all");
+  }
+
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center gap-3">
@@ -104,12 +123,14 @@ export function SpecificationTable({
           placeholder="Search by ID, title, or requirement..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}
+          aria-label="Search specifications by ID, title, or requirement"
           className="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
         />
         <select
           value={statusFilter}
           onChange={(e) => setStatusFilter(e.target.value as Status | "all")}
-          className="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm"
+          aria-label="Filter by status"
+          className="rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
         >
           {STATUS_OPTIONS.map((o) => (
             <option key={o.value} value={o.value}>
@@ -124,7 +145,7 @@ export function SpecificationTable({
 
       <div className="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
         <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
+          <thead className="bg-gray-50 border-b-2 border-gray-200">
             <tr>
               {renderSortHeader("id", "ID")}
               {renderSortHeader("title", "Title")}
@@ -137,14 +158,35 @@ export function SpecificationTable({
           <tbody className="divide-y divide-gray-200">
             {filtered.length === 0 ? (
               <tr>
-                <td colSpan={6} className="px-4 py-8 text-center text-sm text-gray-500">
-                  No specifications found.
+                <td colSpan={6} className="px-4 py-12 text-center">
+                  <div className="text-gray-400">
+                    <svg className="mx-auto h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                    <p className="mt-2 text-sm font-medium text-gray-900">No specifications found</p>
+                    <p className="mt-1 text-sm text-gray-500">Try adjusting your search or filter criteria</p>
+                    {hasActiveFilters && (
+                      <button
+                        type="button"
+                        onClick={clearAllFilters}
+                        className="mt-3 text-sm font-medium text-blue-600 hover:text-blue-800"
+                      >
+                        Clear all filters
+                      </button>
+                    )}
+                  </div>
                 </td>
               </tr>
             ) : (
-              filtered.map((spec) => (
-                <tr key={spec.id} className="hover:bg-gray-50">
-                  <td className="whitespace-nowrap px-4 py-3 text-sm font-mono">
+              filtered.map((spec, index) => (
+                <tr
+                  key={spec.id}
+                  className={`hover:bg-blue-50/50 transition-colors duration-150 ${
+                    index % 2 === 1 ? "bg-gray-50/50" : ""
+                  }`}
+                >
+                  <td className="whitespace-nowrap px-4 py-3.5 text-sm font-mono">
                     <Link
                       href={`/specifications/${spec.id}`}
                       className="text-blue-600 hover:text-blue-800 hover:underline"
@@ -152,7 +194,7 @@ export function SpecificationTable({
                       {spec.id}
                     </Link>
                   </td>
-                  <td className="px-4 py-3 text-sm">
+                  <td className="px-4 py-3.5 text-sm">
                     <Link
                       href={`/specifications/${spec.id}`}
                       className="text-gray-900 hover:text-blue-600"
@@ -160,7 +202,7 @@ export function SpecificationTable({
                       {spec.title || <span className="italic text-gray-400">Untitled</span>}
                     </Link>
                   </td>
-                  <td className="px-4 py-3 text-sm">
+                  <td className="px-4 py-3.5 text-sm">
                     <Link
                       href={`/requirements/${spec.requirementId}`}
                       className="text-blue-600 hover:text-blue-800 hover:underline"
@@ -173,13 +215,13 @@ export function SpecificationTable({
                       </span>
                     </Link>
                   </td>
-                  <td className="whitespace-nowrap px-4 py-3">
+                  <td className="whitespace-nowrap px-4 py-3.5">
                     <StatusBadge status={spec.status} />
                   </td>
-                  <td className="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
+                  <td className="whitespace-nowrap px-4 py-3.5 text-sm text-gray-500">
                     {spec.version}
                   </td>
-                  <td className="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
+                  <td className="whitespace-nowrap px-4 py-3.5 text-sm text-gray-500">
                     {new Date(spec.updatedAt).toLocaleDateString("ja-JP")}
                   </td>
                 </tr>

package/src/components/ui/badge.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import type { Status, Priority, Complexity } from "@reqord/shared";
 
 const STATUS_STYLES: Record<Status, string> = {
-  draft: "bg-gray-100 text-gray-700",
-  approved: "bg-green-100 text-green-800",
-  implemented: "bg-blue-100 text-blue-800",
-  deprecated: "bg-red-100 text-red-700",
+  draft: "bg-gray-100 text-gray-600 ring-1 ring-inset ring-gray-300",
+  approved: "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-200",
+  implemented: "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200",
+  deprecated: "bg-red-50 text-red-700 ring-1 ring-inset ring-red-200",
 };
 
 const STATUS_LABELS: Record<Status, string> = {

package/src/components/ui/button.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    "bg-warm-800 text-white hover:bg-warm-900",
+  secondary:
+    "border border-warm-300 bg-white text-warm-700 hover:bg-warm-50",
+  danger: "bg-accent text-white hover:bg-accent-hover",
+  ghost: "text-warm-700 hover:bg-warm-200/60 hover:text-warm-900",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-2 text-sm",
+  lg: "px-6 py-3 text-base",
+};
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none disabled:opacity-50 ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/ui/card.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+type CardVariant = "default" | "hero";
+
+const variantClasses: Record<CardVariant, string> = {
+  default: "rounded-xl border border-warm-200 bg-white p-6 shadow-sm",
+  hero: "rounded-xl border border-warm-200 bg-warm-100 p-6 shadow-sm",
+};
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant;
+}
+
+export function Card({
+  variant = "default",
+  className = "",
+  children,
+  ...props
+}: CardProps) {
+  return (
+    <div className={`${variantClasses[variant]} ${className}`} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/ui/nav.tsx

@@ -1,45 +1,45 @@
+"use client";
+import React from "react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const NAV_ITEMS = [
+  { href: "/dashboard", label: "Dashboard" },
+  { href: "/requirements", label: "Requirements" },
+  { href: "/specifications", label: "Specifications" },
+  { href: "/feedback", label: "Feedback" },
+  { href: "/graph", label: "Graph" },
+];
 
 export function Nav() {
+  const pathname = usePathname();
   return (
-    <nav className="border-b border-gray-200 bg-white">
+    <nav className="border-b border-warm-200 bg-warm-100">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="flex h-14 items-center justify-between">
+        <div className="flex h-16 items-center justify-between">
           <div className="flex items-center gap-8">
-            <Link href="/requirements" className="text-lg font-bold text-gray-900">
-              Reqord
+            <Link href="/dashboard" className="flex items-center">
+              <img src="/reqord-logo.svg" alt="Reqord" className="h-10" />
             </Link>
-            <div className="flex gap-4">
-              <Link
-                href="/dashboard"
-                className="text-sm font-medium text-gray-600 hover:text-gray-900"
-              >
-                Dashboard
-              </Link>
-              <Link
-                href="/requirements"
-                className="text-sm font-medium text-gray-600 hover:text-gray-900"
-              >
-                Requirements
-              </Link>
-              <Link
-                href="/specifications"
-                className="text-sm font-medium text-gray-600 hover:text-gray-900"
-              >
-                Specifications
-              </Link>
-              <Link
-                href="/feedback"
-                className="text-sm font-medium text-gray-600 hover:text-gray-900"
-              >
-                Feedback
-              </Link>
-              <Link
-                href="/graph"
-                className="text-sm font-medium text-gray-600 hover:text-gray-900"
-              >
-                Graph
-              </Link>
+            <div className="flex gap-1">
+              {NAV_ITEMS.map(({ href, label }) => {
+                const isActive =
+                  pathname === href || pathname.startsWith(href + "/");
+                return (
+                  <Link
+                    key={href}
+                    href={href}
+                    aria-current={isActive ? "page" : undefined}
+                    className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+                      isActive
+                        ? "bg-warm-200 text-warm-900 font-semibold"
+                        : "text-warm-700 hover:bg-warm-200/60 hover:text-warm-900"
+                    }`}
+                  >
+                    {label}
+                  </Link>
+                );
+              })}
             </div>
           </div>
         </div>

package/src/components/ui/tabs.tsx

@@ -19,6 +19,8 @@ export function Tabs({ tabs, activeTab, onTabChange }: TabsProps) {
           return (
             <button
               key={tab.id}
+              role="tab"
+              aria-selected={isActive}
               onClick={() => onTabChange(tab.id)}
               className={`
                 whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium

package/src/lib/drilldown-graph-data.ts

@@ -23,11 +23,29 @@ export function buildDrillDownGraphData(
   const nodes: Node[] = [];
   const edges: Edge[] = [];
 
-  // 1. Requirement node (left)
+  // Pre-calculate task counts per spec for dynamic Y positioning
+  const specTaskCounts = specifications.map(
+    (spec) =>
+      tasks.filter(
+        (t) => t.linkedTo.specifications.includes(spec.id),
+      ).length,
+  );
+
+  // Calculate cumulative Y positions for specs based on previous spec's task count
+  const specYPositions: number[] = [];
+  let currentY = 0;
+  for (let i = 0; i < specifications.length; i++) {
+    specYPositions.push(currentY);
+    const issueHeight = specTaskCounts[i] * LAYOUT.ISSUE_VERTICAL_GAP;
+    currentY += Math.max(LAYOUT.VERTICAL_GAP, issueHeight);
+  }
+
+  // Center requirement node vertically
+  const lastSpecY = specYPositions.length > 0 ? specYPositions[specYPositions.length - 1] : 0;
   nodes.push({
     id: requirement.id,
     type: "requirement",
-    position: { x: LAYOUT.REQ_X, y: 0 },
+    position: { x: LAYOUT.REQ_X, y: lastSpecY / 2 },
     data: {
       label: requirement.title,
       status: requirement.status,
@@ -40,10 +58,11 @@ export function buildDrillDownGraphData(
   const addedIssueIds = new Set<string>();
   specifications.forEach((spec, i) => {
     const specNodeId = spec.id;
+    const specY = specYPositions[i];
     nodes.push({
       id: specNodeId,
       type: "specification",
-      position: { x: LAYOUT.SPEC_X, y: i * LAYOUT.VERTICAL_GAP },
+      position: { x: LAYOUT.SPEC_X, y: specY },
       data: {
         label: spec.id,
         status: spec.status,
@@ -72,7 +91,7 @@ export function buildDrillDownGraphData(
           type: "issue",
           position: {
             x: LAYOUT.ISSUE_X,
-            y: i * LAYOUT.VERTICAL_GAP + issueOffset * LAYOUT.ISSUE_VERTICAL_GAP,
+            y: specY + issueOffset * LAYOUT.ISSUE_VERTICAL_GAP,
           },
           data: {
             label: task.title,