@igstack/app-catalog-frontend-core 0.9.0 → 0.9.1

package/dist/esm/modules/appCatalog/ui/components/ViewToggle.d.ts

@@ -1,6 +1,12 @@
 /**
  * Compact segmented toggle for the header (Apps | Service Desks). Rendered in
  * the header's `middle` slot so it adds no header height. Uses router Links so
- * the active segment reflects the current route and each is deep-linkable.
+ * each segment is deep-linkable.
+ *
+ * The active segment is derived from the current pathname rather than a plain
+ * exact-match on the Link: the "Apps" tab must stay active on the app-detail
+ * routes (`/app/<slug>`) too, since the detail panel is part of the Apps view
+ * (#23). A plain `activeOptions={{ exact: true }}` on `to="/"` left both tabs
+ * inactive on `/app/<slug>`.
  */
 export declare function ViewToggle(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/components/ViewToggle.js

@@ -1,7 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Link } from "@tanstack/react-router";
+import { useRouterState, Link } from "@tanstack/react-router";
 import { cn } from "../../../../lib/utils.js";
 function ViewToggle() {
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const appsActive = pathname === "/" || pathname.startsWith("/app/");
+  const desksActive = pathname.startsWith("/service-desks");
   const segment = "inline-flex items-center rounded-md px-3 py-1 text-sm font-medium transition-colors";
   const active = "bg-background text-foreground shadow-sm";
   const inactive = "text-muted-foreground hover:text-foreground";
@@ -17,9 +20,8 @@ function ViewToggle() {
           {
             to: "/",
             "aria-label": "Apps",
-            className: cn(segment, inactive),
-            activeOptions: { exact: true },
-            activeProps: { className: cn(segment, active) },
+            "aria-current": appsActive ? "page" : void 0,
+            className: cn(segment, appsActive ? active : inactive),
             children: "Apps"
           }
         ),
@@ -28,8 +30,8 @@ function ViewToggle() {
           {
             to: "/service-desks",
             "aria-label": "Service Desks",
-            className: cn(segment, inactive),
-            activeProps: { className: cn(segment, active) },
+            "aria-current": desksActive ? "page" : void 0,
+            className: cn(segment, desksActive ? active : inactive),
             children: "Service Desks"
           }
         )

package/dist/esm/modules/appCatalog/ui/components/ViewToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewToggle.js","sources":["../../../../../../src/modules/appCatalog/ui/components/ViewToggle.tsx"],"sourcesContent":["import { Link } from '@tanstack/react-router'\nimport { cn } from '~/lib/utils'\n\n/**\n * Compact segmented toggle for the header (Apps | Service Desks). Rendered in\n * the header's `middle` slot so it adds no header height. Uses router Links so\n * the active segment reflects the current route and each is deep-linkable.\n */\nexport function ViewToggle() {\n  const segment =\n    'inline-flex items-center rounded-md px-3 py-1 text-sm font-medium transition-colors'\n  const active = 'bg-background text-foreground shadow-sm'\n  const inactive = 'text-muted-foreground hover:text-foreground'\n\n  return (\n    <div\n      role=\"tablist\"\n      aria-label=\"View\"\n      className=\"inline-flex items-center gap-1 rounded-lg bg-muted p-[3px]\"\n    >\n      <Link\n        to=\"/\"\n        aria-label=\"Apps\"\n        className={cn(segment, inactive)}\n        activeOptions={{ exact: true }}\n        activeProps={{ className: cn(segment, active) }}\n      >\n        Apps\n      </Link>\n      <Link\n        to=\"/service-desks\"\n        aria-label=\"Service Desks\"\n        className={cn(segment, inactive)}\n        activeProps={{ className: cn(segment, active) }}\n      >\n        Service Desks\n      </Link>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAQO,SAAS,aAAa;AAC3B,QAAM,UACJ;AACF,QAAM,SAAS;AACf,QAAM,WAAW;AAEjB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,cAAW;AAAA,YACX,WAAW,GAAG,SAAS,QAAQ;AAAA,YAC/B,eAAe,EAAE,OAAO,KAAA;AAAA,YACxB,aAAa,EAAE,WAAW,GAAG,SAAS,MAAM,EAAA;AAAA,YAC7C,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,cAAW;AAAA,YACX,WAAW,GAAG,SAAS,QAAQ;AAAA,YAC/B,aAAa,EAAE,WAAW,GAAG,SAAS,MAAM,EAAA;AAAA,YAC7C,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ViewToggle.js","sources":["../../../../../../src/modules/appCatalog/ui/components/ViewToggle.tsx"],"sourcesContent":["import { Link, useRouterState } from '@tanstack/react-router'\nimport { cn } from '~/lib/utils'\n\n/**\n * Compact segmented toggle for the header (Apps | Service Desks). Rendered in\n * the header's `middle` slot so it adds no header height. Uses router Links so\n * each segment is deep-linkable.\n *\n * The active segment is derived from the current pathname rather than a plain\n * exact-match on the Link: the \"Apps\" tab must stay active on the app-detail\n * routes (`/app/<slug>`) too, since the detail panel is part of the Apps view\n * (#23). A plain `activeOptions={{ exact: true }}` on `to=\"/\"` left both tabs\n * inactive on `/app/<slug>`.\n */\nexport function ViewToggle() {\n  const pathname = useRouterState({ select: (s) => s.location.pathname })\n\n  const appsActive = pathname === '/' || pathname.startsWith('/app/')\n  const desksActive = pathname.startsWith('/service-desks')\n\n  const segment =\n    'inline-flex items-center rounded-md px-3 py-1 text-sm font-medium transition-colors'\n  const active = 'bg-background text-foreground shadow-sm'\n  const inactive = 'text-muted-foreground hover:text-foreground'\n\n  return (\n    <div\n      role=\"tablist\"\n      aria-label=\"View\"\n      className=\"inline-flex items-center gap-1 rounded-lg bg-muted p-[3px]\"\n    >\n      <Link\n        to=\"/\"\n        aria-label=\"Apps\"\n        aria-current={appsActive ? 'page' : undefined}\n        className={cn(segment, appsActive ? active : inactive)}\n      >\n        Apps\n      </Link>\n      <Link\n        to=\"/service-desks\"\n        aria-label=\"Service Desks\"\n        aria-current={desksActive ? 'page' : undefined}\n        className={cn(segment, desksActive ? active : inactive)}\n      >\n        Service Desks\n      </Link>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAcO,SAAS,aAAa;AAC3B,QAAM,WAAW,eAAe,EAAE,QAAQ,CAAC,MAAM,EAAE,SAAS,UAAU;AAEtE,QAAM,aAAa,aAAa,OAAO,SAAS,WAAW,OAAO;AAClE,QAAM,cAAc,SAAS,WAAW,gBAAgB;AAExD,QAAM,UACJ;AACF,QAAM,SAAS;AACf,QAAM,WAAW;AAEjB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,cAAW;AAAA,YACX,gBAAc,aAAa,SAAS;AAAA,YACpC,WAAW,GAAG,SAAS,aAAa,SAAS,QAAQ;AAAA,YACtD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,cAAW;AAAA,YACX,gBAAc,cAAc,SAAS;AAAA,YACrC,WAAW,GAAG,SAAS,cAAc,SAAS,QAAQ;AAAA,YACvD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -134,8 +134,8 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "0.9.0",
-    "@igstack/app-catalog-shared-core": "0.9.0"
+    "@igstack/app-catalog-backend-core": "0.9.1",
+    "@igstack/app-catalog-shared-core": "0.9.1"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -144,7 +144,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "a27e7c29dd93494100f891f47b2bc4cea4091125",
+  "gitHead": "69c9cf1a9802f07ead88d1d97496cbabaec5ca37",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/integration/serviceDesks.integration.test.ts

@@ -123,3 +123,39 @@ describe('Service Desks view (#9)', () => {
     await waitFor(() => expect(search).toHaveFocus())
   })
 })
+
+// #23: the header "Apps" tab must stay active while viewing an app-detail route
+// (/app/<slug>) — the detail panel is part of the Apps view. Previously the Apps
+// link was active only on the exact "/" route, so /app/quicksight highlighted
+// neither tab.
+describe('ViewToggle active tab (#23)', () => {
+  const appsTab = () => screen.getByRole('link', { name: 'Apps' })
+  const deskTab = () => screen.getByRole('link', { name: 'Service Desks' })
+
+  it('activates the Apps tab on an app-detail route (/app/$slug)', async () => {
+    await given(magazine.full(), { initialRoute: '/app/jira' })
+
+    await waitFor(() =>
+      expect(appsTab()).toHaveAttribute('aria-current', 'page'),
+    )
+    expect(deskTab()).not.toHaveAttribute('aria-current')
+  })
+
+  it('activates the Apps tab on the root route', async () => {
+    await given(magazine.full(), { initialRoute: '/' })
+
+    await waitFor(() =>
+      expect(appsTab()).toHaveAttribute('aria-current', 'page'),
+    )
+    expect(deskTab()).not.toHaveAttribute('aria-current')
+  })
+
+  it('activates only Service Desks on the /service-desks route', async () => {
+    await given(magazine.full(), { initialRoute: '/service-desks' })
+
+    await waitFor(() =>
+      expect(deskTab()).toHaveAttribute('aria-current', 'page'),
+    )
+    expect(appsTab()).not.toHaveAttribute('aria-current')
+  })
+})

package/src/modules/appCatalog/ui/components/ViewToggle.tsx

@@ -1,12 +1,23 @@
-import { Link } from '@tanstack/react-router'
+import { Link, useRouterState } from '@tanstack/react-router'
 import { cn } from '~/lib/utils'
 
 /**
  * Compact segmented toggle for the header (Apps | Service Desks). Rendered in
  * the header's `middle` slot so it adds no header height. Uses router Links so
- * the active segment reflects the current route and each is deep-linkable.
+ * each segment is deep-linkable.
+ *
+ * The active segment is derived from the current pathname rather than a plain
+ * exact-match on the Link: the "Apps" tab must stay active on the app-detail
+ * routes (`/app/<slug>`) too, since the detail panel is part of the Apps view
+ * (#23). A plain `activeOptions={{ exact: true }}` on `to="/"` left both tabs
+ * inactive on `/app/<slug>`.
  */
 export function ViewToggle() {
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+
+  const appsActive = pathname === '/' || pathname.startsWith('/app/')
+  const desksActive = pathname.startsWith('/service-desks')
+
   const segment =
     'inline-flex items-center rounded-md px-3 py-1 text-sm font-medium transition-colors'
   const active = 'bg-background text-foreground shadow-sm'
@@ -21,17 +32,16 @@ export function ViewToggle() {
       <Link
         to="/"
         aria-label="Apps"
-        className={cn(segment, inactive)}
-        activeOptions={{ exact: true }}
-        activeProps={{ className: cn(segment, active) }}
+        aria-current={appsActive ? 'page' : undefined}
+        className={cn(segment, appsActive ? active : inactive)}
       >
         Apps
       </Link>
       <Link
         to="/service-desks"
         aria-label="Service Desks"
-        className={cn(segment, inactive)}
-        activeProps={{ className: cn(segment, active) }}
+        aria-current={desksActive ? 'page' : undefined}
+        className={cn(segment, desksActive ? active : inactive)}
       >
         Service Desks
       </Link>