Feature/component library (#40)

* Add @heroicons/react dependency

Required by the component library (issue #35) — all icon references
use @heroicons/react/24/outline instead of inline SVG paths.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add cn utility and useViewport hook

cn() merges class name strings, filtering falsy values. useViewport()
returns { isMobile } tracking whether the viewport is ≤899px — used
by TopBar and LeftRail to switch between desktop and mobile layouts.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add core primitive components (closes #35 partial)

Ports all primitive components from ui-kit-reference/components.jsx
into typed TypeScript modules under components/core/:

- Button: 4 variants (primary/secondary/ghost/destructive), 3 sizes,
  optional icon slots, CSS active:scale press animation
- Tag: skill/discipline/neutral variants, Geist Mono, 2px radius
- Chip: filter pill with active state (Nottingham Blue bg + Paper text)
- StatusPill: coloured dot + label for open/pending/urgent/closed/accepted
- Avatar: sm/md/lg/xl sizes, 4 UoN-palette gradients, 4px radius
- MatchMeter: colour-coded fill bar (≥70% Forest Green, ≥45% Gold)
- MatchBadge: compact Forest Green match% pill
- TextInput / Textarea: Nottingham Blue focus ring, optional icon, helper text
- Toast: fixed bottom-centre dismissible notification
- Eyebrow: 11px uppercase, 0.14em letter-spacing
- Hairline: 1px divider, horizontal or vertical

All components are named exports; icon-only buttons carry aria-label.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Add layout components (closes #35)

Ports layout.jsx from the ui-kit-reference prototype into typed
TypeScript modules under components/shared/:

- TopBar: sticky 60px header; desktop shows logo, divider, Matchboard
  wordmark, DRS label, search, Post button, bell and avatar; mobile
  collapses to hamburger, logo, compact wordmark, Post icon and avatar
- LeftRail: 220px sticky desktop sidebar with nav links and disciplines
  subsection; on mobile becomes a 280px slide-out drawer (220ms ease-out)
  with scrim overlay, closes on route change
- PageHeader: eyebrow, title scaling 24→28→36px across breakpoints,
  optional description, mono meta row, and action slot
- EmptyState: centred with circular icon background, title, description,
  optional CTA

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* implement first use of Button from the new comp lib

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: dcl10

frontend/components/core/Avatar.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import type { HTMLAttributes } from "react";
+
+import { cn } from "@/lib/utils";
+
+type AvatarSize = "sm" | "md" | "lg" | "xl";
+
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+  /** 1–2 character initials displayed inside the avatar. */
+  initials: string;
+  /** Gradient index (0–3); each maps to a UoN supporting-palette pairing. */
+  hue?: 0 | 1 | 2 | 3;
+  /** Preset dimensions; defaults to `"md"`. */
+  size?: AvatarSize;
+}
+
+const AVATAR_GRADIENTS = [
+  "linear-gradient(135deg, #DEB406, #B91C2E)", // Rebel's Gold → Jubilee Red
+  "linear-gradient(135deg, #10263B, #37B4B0)", // Nottingham Blue → Trent Turquoise
+  "linear-gradient(135deg, #792D85, #D7336C)", // Civic Purple → Pioneering Pink
+  "linear-gradient(135deg, #005F36, #DEB406)", // Forest Green → Rebel's Gold
+] as const;
+
+const SIZE_PX: Record<AvatarSize, number> = {
+  sm: 28,
+  md: 40,
+  lg: 56,
+  xl: 72,
+};
+
+const FONT_SIZE: Record<AvatarSize, string> = {
+  sm: "11px",
+  md: "14px",
+  lg: "18px",
+  xl: "22px",
+};
+
+/**
+ * User avatar with a UoN-palette gradient background and Paper-coloured initials.
+ * @param initials - 1–2 character initials to display
+ * @param hue - Gradient variant (0–3); defaults to `0`
+ * @param size - Preset dimension; defaults to `"md"`
+ */
+export function Avatar({
+  initials,
+  hue = 0,
+  size = "md",
+  className,
+  style,
+  onClick,
+  ...props
+}: AvatarProps) {
+  const px = SIZE_PX[size];
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center justify-center font-medium tracking-[-0.01em]",
+        "rounded-sm shrink-0 select-none text-paper",
+        onClick ? "cursor-pointer" : "cursor-default",
+        className,
+      )}
+      style={{
+        width: px,
+        height: px,
+        background: AVATAR_GRADIENTS[hue % AVATAR_GRADIENTS.length],
+        fontSize: FONT_SIZE[size],
+        ...style,
+      }}
+      onClick={onClick}
+      {...props}
+    >
+      {initials}
+    </span>
+  );
+}

frontend/components/core/Button.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import type { ButtonHTMLAttributes, ComponentType } from "react";
+
+import { cn } from "@/lib/utils";
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
+type ButtonSize = "sm" | "md" | "lg";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual style; defaults to `"primary"`. */
+  variant?: ButtonVariant;
+  /** Button dimensions; defaults to `"md"`. */
+  size?: ButtonSize;
+  /** Leading icon component from `@heroicons/react/24/outline`. */
+  icon?: ComponentType<{ className?: string }>;
+  /** Trailing icon component from `@heroicons/react/24/outline`. */
+  iconRight?: ComponentType<{ className?: string }>;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    "bg-nottingham-blue text-paper border border-nottingham-blue hover:bg-[var(--color-primary-deep)]",
+  secondary:
+    "bg-paper text-ink border border-[var(--border-strong)] hover:bg-portland-stone",
+  ghost:
+    "bg-transparent text-ink border border-transparent hover:bg-[rgba(16,38,59,0.06)]",
+  destructive:
+    "bg-paper text-jubilee-red border border-[rgba(185,28,46,0.4)] hover:bg-jubilee-red-20",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: "px-[10px] py-[5px] text-[12px] [&_svg]:w-[14px] [&_svg]:h-[14px]",
+  md: "px-[16px] py-[9px] text-[14px] [&_svg]:w-[16px] [&_svg]:h-[16px]",
+  lg: "px-[20px] py-[12px] text-[15px] [&_svg]:w-[16px] [&_svg]:h-[16px]",
+};
+
+/**
+ * Primary interaction button with four visual variants and three sizes.
+ * Icon-only buttons must provide an `aria-label`.
+ * @param variant - Visual style; defaults to `"primary"`
+ * @param size - Button dimensions; defaults to `"md"`
+ * @param icon - Optional leading icon component
+ * @param iconRight - Optional trailing icon component
+ */
+export function Button({
+  variant = "primary",
+  size = "md",
+  icon: Icon,
+  iconRight: IconRight,
+  children,
+  className,
+  disabled,
+  type = "button",
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "inline-flex items-center gap-2 font-sans font-medium tracking-[-0.005em] rounded-sm cursor-pointer",
+        "transition-[background-color,transform,border-color] duration-[120ms] ease-[cubic-bezier(0.2,0,0,1)]",
+        "active:scale-[0.98] active:transition-[transform] active:duration-[80ms]",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        variantClasses[variant],
+        sizeClasses[size],
+        className,
+      )}
+      {...props}
+    >
+      {Icon && <Icon className="shrink-0" />}
+      {children}
+      {IconRight && <IconRight className="shrink-0" />}
+    </button>
+  );
+}

frontend/components/core/Chip.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Whether the chip is in its selected/active state. */
+  active?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * Filter pill toggle. Active state uses Nottingham Blue background with Paper text.
+ * @param active - Whether the chip is selected
+ */
+export function Chip({ active, children, className, ...props }: ChipProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 px-3 py-[5px]",
+        "rounded-pill text-[13px] border cursor-pointer select-none",
+        "transition-all duration-[120ms] ease-[cubic-bezier(0.2,0,0,1)]",
+        active
+          ? "bg-nottingham-blue text-paper border-nottingham-blue font-medium"
+          : "bg-paper text-ink border-[var(--border)] font-normal hover:border-[var(--border-strong)]",
+        className,
+      )}
+      role="button"
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}

frontend/components/core/Eyebrow.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface EyebrowProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+/**
+ * Small uppercase label used above section titles or content blocks.
+ * @param children - Label text
+ */
+export function Eyebrow({ children, className, ...props }: EyebrowProps) {
+  return (
+    <div
+      className={cn(
+        "text-[11px] font-medium tracking-[0.14em] uppercase text-ink-muted",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

frontend/components/core/Hairline.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface HairlineProps extends HTMLAttributes<HTMLDivElement> {
+  /** Renders as a vertical 1px line instead of a horizontal one. */
+  vertical?: boolean;
+}
+
+/**
+ * 1px visual separator; horizontal by default.
+ * @param vertical - Render as a vertical divider instead
+ */
+export function Hairline({ vertical, className, ...props }: HairlineProps) {
+  return (
+    <div
+      className={cn(
+        "bg-[var(--border)]",
+        vertical ? "w-px self-stretch" : "h-px w-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

frontend/components/core/MatchBadge.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils";
+
+interface MatchBadgeProps {
+  /** Match percentage (0–100). */
+  pct: number;
+  className?: string;
+}
+
+/**
+ * Compact inline pill displaying a match percentage in Forest Green.
+ * @param pct - Match percentage (0–100)
+ */
+export function MatchBadge({ pct, className }: MatchBadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 px-[9px] py-[3px]",
+        "bg-forest-green-20 text-forest-green",
+        "rounded-sm font-mono text-[11.5px] font-medium",
+        className,
+      )}
+    >
+      {pct}% match
+    </span>
+  );
+}

frontend/components/core/MatchMeter.tsx

@@ -0,0 +1,41 @@
+import { cn } from "@/lib/utils";
+
+interface MatchMeterProps {
+  /** Match percentage (0–100). */
+  pct: number;
+  /** Bar width in pixels; defaults to `120`. */
+  width?: number;
+  className?: string;
+}
+
+/**
+ * Horizontal progress bar showing a match percentage with colour-coded fill.
+ * Fill colour: Forest Green (≥70%), Rebel's Gold (≥45%), muted otherwise.
+ * @param pct - Match percentage (0–100)
+ * @param width - Bar width in pixels; defaults to `120`
+ */
+export function MatchMeter({ pct, width = 120, className }: MatchMeterProps) {
+  const fillColor =
+    pct >= 70
+      ? "var(--color-forest-green)"
+      : pct >= 45
+        ? "var(--color-rebels-gold)"
+        : "var(--color-ink-faint)";
+
+  return (
+    <div className={cn("inline-flex items-center gap-2", className)}>
+      <div
+        className="h-[6px] rounded-[2px] overflow-hidden bg-portland-stone shrink-0"
+        style={{ width }}
+      >
+        <div
+          className="h-full rounded-[2px] transition-[width] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]"
+          style={{ width: `${pct}%`, background: fillColor }}
+        />
+      </div>
+      <span className="font-mono text-[12px] font-medium text-ink tabular-nums text-right min-w-[32px]">
+        {pct}%
+      </span>
+    </div>
+  );
+}

frontend/components/core/StatusPill.tsx

@@ -0,0 +1,51 @@
+import { cn } from "@/lib/utils";
+
+type StatusType = "open" | "pending" | "urgent" | "closed" | "accepted";
+
+interface StatusPillProps {
+  status: StatusType;
+  /** Optional label override; falls back to the status default. */
+  label?: string;
+  className?: string;
+}
+
+const STATUS_CONFIG: Record<
+  StatusType,
+  { color: string; defaultLabel: string }
+> = {
+  open: { color: "var(--color-forest-green)", defaultLabel: "Open" },
+  pending: {
+    color: "var(--color-mandarin-orange)",
+    defaultLabel: "Awaiting review",
+  },
+  urgent: {
+    color: "var(--color-jubilee-red)",
+    defaultLabel: "Closing today",
+  },
+  closed: { color: "var(--color-ink-muted)", defaultLabel: "Closed" },
+  accepted: { color: "var(--color-forest-green)", defaultLabel: "Accepted" },
+};
+
+/**
+ * Coloured dot with a label indicating project or request status.
+ * @param status - One of the defined status states
+ * @param label - Optional override for the default status label
+ */
+export function StatusPill({ status, label, className }: StatusPillProps) {
+  const config = STATUS_CONFIG[status];
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 font-mono text-[11.5px] font-medium",
+        className,
+      )}
+      style={{ color: config.color }}
+    >
+      <span
+        className="w-2 h-2 rounded-full shrink-0"
+        style={{ background: config.color }}
+      />
+      {label ?? config.defaultLabel}
+    </span>
+  );
+}