Skip to content

feat: add review hub shared overlap #235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
iamasx wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add review hub shared overlap #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 147 additions & 5 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
--nav-height: 3.5rem;
--ops-accent: #0e7490;
--ops-accent-light: rgba(14, 116, 144, 0.08);
--review-accent: #be123c;
--review-accent-light: rgba(190, 24, 93, 0.12);
--review-accent-soft: rgba(251, 113, 133, 0.1);
--review-ink: #881337;
--navigator-accent: #0891b2;
--navigator-accent-light: rgba(8, 145, 178, 0.12);
--navigator-accent-soft: rgba(34, 211, 238, 0.08);
Expand Down Expand Up @@ -67,6 +71,7 @@ body {
color: var(--foreground);
background-image:
radial-gradient(circle at top, rgba(251, 191, 36, 0.18), transparent 32%),
radial-gradient(circle at left 18%, rgba(251, 113, 133, 0.12), transparent 24%),
radial-gradient(circle at right 18%, rgba(8, 145, 178, 0.14), transparent 26%),
linear-gradient(180deg, #fcf8ef 0%, #f4efe7 52%, #ebe5d9 100%);
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
Expand Down Expand Up @@ -147,7 +152,7 @@ a {
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(8, 145, 178, 0.75);
color: rgba(190, 24, 93, 0.76);
}

.app-nav__brand {
Expand All @@ -174,7 +179,7 @@ a {
}

.app-nav__link:hover {
color: var(--foreground);
color: var(--review-ink);
}

.app-nav__link--active {
Expand All @@ -184,14 +189,18 @@ a {

.app-nav__meta {
border-radius: 9999px;
border: 1px solid rgba(8, 145, 178, 0.18);
background: rgba(255, 255, 255, 0.58);
border: 1px solid rgba(190, 24, 93, 0.18);
background: linear-gradient(
135deg,
rgba(255, 241, 242, 0.9),
rgba(255, 255, 255, 0.7)
);
padding: 0.4rem 0.8rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--navigator-ink);
color: var(--review-ink);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

Expand Down Expand Up @@ -275,6 +284,139 @@ a {
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
}

/* ── Review-hub shared shell styles ───────────────────────── */

.review-hub-hero {
position: relative;
background-image: linear-gradient(
135deg,
rgba(255, 241, 242, 0.92) 0%,
rgba(255, 255, 255, 0.96) 44%,
rgba(255, 247, 237, 0.95) 100%
);
}

.review-hub-hero::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
background: linear-gradient(
90deg,
rgba(190, 24, 93, 0.76) 0%,
rgba(251, 113, 133, 0.38) 48%,
rgba(245, 158, 11, 0.52) 100%
);
opacity: 0.82;
}

.review-shell-card {
position: relative;
isolation: isolate;
}

.review-shell-card::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
background: linear-gradient(
90deg,
rgba(190, 24, 93, 0.72) 0%,
rgba(251, 113, 133, 0.36) 48%,
rgba(245, 158, 11, 0.5) 100%
);
opacity: 0.72;
}

.review-shell-link {
position: relative;
}

.review-shell-link::after {
content: "\2192";
margin-left: 0.45rem;
transition: transform 0.15s ease;
}

.review-shell-link:hover::after {
transform: translateX(2px);
}

.review-hub-orbit,
.review-hub-section {
position: relative;
}

.review-hub-track,
.review-hub-check {
transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}

.review-hub-track:hover,
.review-hub-check:hover {
transform: translateY(-2px);
border-color: rgba(190, 24, 93, 0.2);
box-shadow: 0 18px 34px rgba(190, 24, 93, 0.08);
}

.review-hub-kicker {
display: inline-flex;
align-items: center;
gap: 0.45rem;
border-radius: 9999px;
border: 1px solid rgba(190, 24, 93, 0.18);
background: rgba(255, 255, 255, 0.76);
padding: 0.35rem 0.8rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--review-ink);
}

.review-hub-kicker::before {
content: "";
width: 0.45rem;
height: 0.45rem;
border-radius: 9999px;
background: var(--review-accent);
box-shadow: 0 0 0 0.25rem var(--review-accent-light);
}

.review-hub-badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border: 1px solid rgba(190, 24, 93, 0.16);
background: rgba(255, 241, 242, 0.88);
padding: 0.35rem 0.75rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--review-ink);
}

.review-hub-note {
border-left: 3px solid rgba(190, 24, 93, 0.24);
}

.review-hub-chip {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border: 1px solid rgba(190, 24, 93, 0.14);
background: rgba(255, 241, 242, 0.8);
padding: 0.35rem 0.7rem;
font-size: 0.6875rem;
font-weight: 600;
color: var(--review-ink);
}

/* ── Navigator-hub shared shell styles ────────────────────── */

.navigator-shell-card {
Expand Down
9 changes: 5 additions & 4 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,12 @@ export const metadata: Metadata = {
template: "%s | Archive Signals",
},
description:
"Operational dashboards, navigator handoff surfaces, experiment registries, and field guides for archive-driven teams.",
"Operational dashboards, navigator and review handoff surfaces, experiment registries, and field guides for archive-driven teams.",
};

const navLinks = [
{ href: "/", label: "Home" },
{ href: "/review-hub", label: "Review Hub" },
{ href: "/navigator-hub", label: "Navigator Hub" },
{ href: "/team-directory", label: "Team Directory" },
{ href: "/archive-browser", label: "Archive" },
Expand All @@ -49,7 +50,7 @@ export default function RootLayout({
<body className="flex min-h-full flex-col bg-slate-50/40">
<nav className="app-nav" aria-label="Primary">
<div className="app-nav__cluster">
<p className="app-nav__eyebrow">Conflict surface</p>
<p className="app-nav__eyebrow">Shared review surface</p>
<Link href="/" className="app-nav__brand">
Archive Signals
</Link>
Expand All @@ -63,12 +64,12 @@ export default function RootLayout({
</li>
))}
</ul>
<p className="app-nav__meta">Navigator overlap active</p>
<p className="app-nav__meta">Review overlap active</p>
</nav>
{children}
<footer className="mt-auto border-t border-[var(--line)] py-6 text-center">
<p className="section-label text-slate-500">
Archive Signals &middot; Navigator Hub &middot; Status Board &middot;
Archive Signals &middot; Review Hub &middot; Navigator Hub &middot;
Built for conflict testing
</p>
</footer>
Expand Down
23 changes: 23 additions & 0 deletions src/app/page.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";

import Home from "./page";

describe("Home", () => {
it("features the review hub entry from the landing page", () => {
render(<Home />);

expect(
screen.getByRole("heading", {
level: 1,
name: /stage the shared landing-page overlap from the review hub\./i,
}),
).toBeInTheDocument();
expect(
screen.getByRole("link", { name: /open review hub/i }),
).toHaveAttribute("href", "/review-hub");
expect(
screen.queryByText(/issue 216 \/ navigator hub/i),
).not.toBeInTheDocument();
});
});
50 changes: 26 additions & 24 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import Link from "next/link";
import { teamGroups, getDirectoryMetrics } from "@/data/team-directory";

const navigatorHubHighlights = [
"New navigator hub route with linked intervention rails across queue, parcel, and command views",
"Shared landing-page overlap that rewrites the featured hero around the new route",
"Global shell styling updates that intentionally modify the common app nav, footer, and theme tokens",
const reviewHubHighlights = [
"Dedicated review-hub route with file-by-file overlap targets and a release cadence for shared-shell changes",
"Featured landing-page hero rewritten so the common entry point routes directly into the review surface",
"Global shell copy and presentation updates intentionally widen the merge-conflict surface in shared files",
];

const notebookHighlights = [
Expand Down Expand Up @@ -70,39 +70,41 @@ export default function Home() {

return (
<main className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-[var(--section-gap)] px-6 py-12 sm:px-10 lg:px-12">
<section className="overflow-hidden rounded-[2rem] border border-[var(--line)] bg-[var(--surface)] shadow-[0_20px_90px_rgba(15,23,42,0.08)]">
<section className="review-hub-hero route-entry-link overflow-hidden rounded-[2rem] border border-[var(--line)] bg-[var(--surface)] shadow-[0_20px_90px_rgba(15,23,42,0.08)]">
<div className="grid gap-10 px-6 py-10 sm:px-10 lg:grid-cols-[minmax(0,1.2fr)_minmax(260px,0.8fr)] lg:px-12 lg:py-14">
<div className="space-y-6">
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-cyan-700">
Issue 216 / Navigator Hub
</p>
<div className="flex flex-wrap items-center gap-3">
<span className="review-hub-badge">Landing overlap route</span>
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-rose-700">
Issue 217 / Review Hub
</p>
</div>
<div className="space-y-4">
<h1 className="max-w-3xl text-4xl font-semibold tracking-tight text-slate-950 sm:text-5xl">
Coordinate shared app-shell handoffs from a dedicated navigator
hub.
Stage the shared landing-page overlap from the review hub.
</h1>
<p className="max-w-2xl text-lg leading-8 text-slate-600">
The navigator hub is the new conflict surface for issue 216:
one route that pulls together lane pressure, handoff timing,
and shared-shell entry points while also rewriting common
landing and global presentation files.
Review Hub is the new conflict surface for issue 217: one route
that inventories the shared files, tracks the active review
lanes, and keeps the landing page plus app shell intentionally
overlapped while adjacent PRs are still in flight.
</p>
</div>
<div className="flex flex-col gap-4 sm:flex-row">
<Link
href="/navigator-hub"
className="inline-flex items-center justify-center rounded-full bg-cyan-700 px-6 py-3 text-sm font-semibold text-cyan-50 transition hover:bg-cyan-800"
href="/review-hub"
className="inline-flex items-center justify-center rounded-full bg-rose-700 px-6 py-3 text-sm font-semibold text-rose-50 transition hover:bg-rose-800"
>
Open navigator hub
Open review hub
</Link>
<Link
href="/operations-center"
className="inline-flex items-center justify-center rounded-full border border-slate-300 bg-white px-6 py-3 text-sm font-semibold text-slate-700 transition hover:border-slate-950 hover:text-slate-950"
href="/navigator-hub"
className="review-shell-link inline-flex items-center justify-center rounded-full border border-slate-300 bg-white px-6 py-3 text-sm font-semibold text-slate-700 transition hover:border-slate-950 hover:text-slate-950"
>
Open ops center
Open navigator hub
</Link>
<a
href="https://github.com/iamasx/api-test/issues/216"
href="https://github.com/iamasx/api-test/issues/217"
className="inline-flex items-center justify-center rounded-full border border-slate-300 px-6 py-3 text-sm font-semibold text-slate-700 transition hover:border-slate-950 hover:text-slate-950"
target="_blank"
rel="noreferrer"
Expand All @@ -114,13 +116,13 @@ export default function Home() {

<div className="rounded-[1.75rem] border border-slate-200/80 bg-[var(--surface-strong)] p-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]">
<p className="text-sm font-semibold uppercase tracking-[0.24em] text-slate-500">
Conflict checks
Review checks
</p>
<ul className="mt-5 space-y-4">
{navigatorHubHighlights.map((item) => (
{reviewHubHighlights.map((item) => (
<li
key={item}
className="rounded-2xl border border-slate-200 bg-white/75 px-4 py-4 text-sm leading-6 text-slate-600"
className="review-hub-note rounded-2xl border border-rose-100 bg-white/80 px-4 py-4 text-sm leading-6 text-slate-600"
>
{item}
</li>
Expand Down
Loading
Loading