dev-api-ui 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev-api-ui",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": false,
   "files": [
     "ui"

package/ui/components/HubPage.tsx

@@ -70,6 +70,12 @@ const GROUP_CONFIG: Record<string, GroupConfig> = {
 
 type Row = { sym: string; name: string; last: string; delta: string; up: boolean; status: string; cat: string; slug: string };
 
+// Route slug derived from the symbol so links always follow the house lowercase-hyphen convention
+// (EUR/USD → eur-usd), matching every vertical's /<group>/<base>-<quote> routes. Used by BOTH the
+// leaf "Popular" cards and the list/search RowTable — the hand-maintained `slug` field shipped
+// un-hyphenated demo values (eurusd) that 404'd (BUG-3). Slash-less symbols (PJM-RT) just lowercase.
+const routeSlug = (sym: string) => sym.toLowerCase().replace('/', '-');
+
 const GROUP_ROWS: Record<string, Row[]> = {
   fx: [
     { sym: 'EUR/USD', name: 'Euro / US Dollar',              last: '1.08642',  delta: '+0.31%', up: true,  status: 'Live',    cat: 'Majors',  slug: 'eurusd'  },
@@ -145,12 +151,7 @@ function deltaColor(up: boolean): string {
 
 // The shared table / list layout used in both list and search modes
 function RowTable({ rows, group }: { rows: Row[]; group: string }) {
-  // Derive the route slug from the symbol so it always follows the house lowercase-hyphen
-  // convention (EUR/USD → eur-usd), matching every vertical's /<group>/<base>-<quote> routes.
-  // The hand-maintained `slug` field shipped un-hyphenated demo values (eurusd) that 404'd on the
-  // real hyphenated routes (BUG-3); deriving removes that drift class. Symbols without a slash
-  // (energy: PJM-RT) pass through lowercased, matching their existing slugs.
-  const slugFor = (r: Row) => r.sym.toLowerCase().replace('/', '-');
+  const slugFor = (r: Row) => routeSlug(r.sym);
   return (
     <div
       style={{
@@ -379,7 +380,7 @@ export default function HubPage({ group, description, pairs: pairsOverride, eyeb
                 {popular.map((p) => (
                   <Link
                     key={p.sym}
-                    href={`/${group}/${p.slug}`}
+                    href={`/${group}/${routeSlug(p.sym)}`}
                     style={{
                       display: 'block',
                       background: 'var(--surface)',