From 31a00fdf5245286cb2c340fee4d6ba12a0e20eeb Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Thu, 10 Sep 2026 10:44:48 -0400
Subject: [PATCH] Team: fold reference links into the toolbar, drop the
 duplicate Compare
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The reference links sat in their own strip under the header, reading as an
afterthought, and "Compare" appeared both there and as a Team mode.

- Reference links (Natures / Type chart / Breeding) now share one bar with
  the Coverage/Compare/Calc switch — quiet text links on the right, so
  they're still one tap away but clearly secondary chrome, not a pasted-on
  row. Right-aligned on wide screens, wrapping under the switch on mobile.
- Removed the standalone "Compare" reference link. The Team's own Compare
  mode now carries a "Compare any Pokémon →" link to #/compare in its
  intro line, so the free-form compare tool is reachable in context and
  only one "Compare" label is ever visible.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Ve7HLspzeG2xDPtJQ8vmu
---
 src/styles/layout.css | 60 ++++++++++++++++++++++++-------------------
 src/views/TeamView.js | 27 ++++++++++++++-----
 2 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/src/styles/layout.css b/src/styles/layout.css
index 0c3bf92..ef194cb 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -112,45 +112,53 @@
   color: var(--text-dim);
 }
 
-/* Row of shortcut chips under a view header (Team → Natures / Type chart / …) */
-.toollinks {
+/* Team toolbar: primary mode switch on the left, reference shortcuts on the
+   right. One band so the reference links read as part of the view's chrome
+   rather than a strip pasted above it. */
+.teamview__bar {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  margin: -6px 0 18px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 16px;
+  margin-bottom: 16px;
 }
-.toollink {
+.teamview__bar .seg {
+  margin-bottom: 0;
+}
+.teamview__refs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+}
+.reflink {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 7px 13px 7px 10px;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background: var(--surface);
-  color: var(--text);
-  font-size: 0.82rem;
+  gap: 5px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  color: var(--text-dim);
+  font-size: 0.8rem;
   font-weight: 600;
   text-decoration: none;
   line-height: 1;
-  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
+  transition: color 0.12s ease, background 0.12s ease;
 }
-.toollink:hover {
-  border-color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+.reflink:hover {
+  color: var(--text);
+  background: var(--surface-2);
 }
-.toollink:active {
+.reflink:active {
   transform: scale(0.96);
 }
-.toollink__ico {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--accent) 16%, transparent);
+.reflink__ico {
   color: var(--accent);
-  font-size: 0.72rem;
+  font-size: 0.82rem;
+}
+.teamcompare__note {
+  margin: 0 0 10px;
+  font-size: 0.82rem;
+  color: var(--text-dim);
 }
 
 .link {
diff --git a/src/views/TeamView.js b/src/views/TeamView.js
index 38e351f..a6bd596 100644
--- a/src/views/TeamView.js
+++ b/src/views/TeamView.js
@@ -67,16 +67,19 @@ export async function TeamView() {
       { class: 'view__header' },
       el('h1', {}, 'Team'),
       el('p', {}, `Up to ${MAX_TEAM} Pokémon — check weaknesses, coverage and stats.`),
+    ),
+    el(
+      'div',
+      { class: 'teamview__bar' },
+      seg,
       el(
         'nav',
-        { class: 'toollinks' },
-        el('a', { class: 'toollink', href: '#/natures' }, el('span', { class: 'toollink__ico', 'aria-hidden': 'true' }, '✦'), 'Natures'),
-        el('a', { class: 'toollink', href: '#/types' }, el('span', { class: 'toollink__ico', 'aria-hidden': 'true' }, '▦'), 'Type chart'),
-        el('a', { class: 'toollink', href: '#/compare' }, el('span', { class: 'toollink__ico', 'aria-hidden': 'true' }, '⇄'), 'Compare'),
-        el('a', { class: 'toollink', href: '#/breeding' }, el('span', { class: 'toollink__ico', 'aria-hidden': 'true' }, '⬡'), 'Breeding'),
+        { class: 'teamview__refs', 'aria-label': 'Reference tools' },
+        el('a', { class: 'reflink', href: '#/natures' }, el('span', { class: 'reflink__ico', 'aria-hidden': 'true' }, '✦'), 'Natures'),
+        el('a', { class: 'reflink', href: '#/types' }, el('span', { class: 'reflink__ico', 'aria-hidden': 'true' }, '▦'), 'Type chart'),
+        el('a', { class: 'reflink', href: '#/breeding' }, el('span', { class: 'reflink__ico', 'aria-hidden': 'true' }, '⬡'), 'Breeding'),
       ),
     ),
-    seg,
     lineup,
     body,
   );
@@ -355,7 +358,17 @@ export async function TeamView() {
   function compare(mem) {
     const vg = snap.versionGroupByKey.get(settings.get().versionGroup);
     const gen = vg ? vg.generation : 9;
-    return CompareTable(mem, { gen, style: settings.get().spriteStyle });
+    return el(
+      'div',
+      { class: 'teamcompare' },
+      el(
+        'p',
+        { class: 'teamcompare__note' },
+        'Your six side by side. ',
+        el('a', { class: 'link', href: '#/compare' }, 'Compare any Pokémon →'),
+      ),
+      CompareTable(mem, { gen, style: settings.get().spriteStyle }),
+    );
   }
 
   // ---- Damage calculator ------------------------------------------