@tanstack/router-devtools 0.0.1-beta.140 → 0.0.1-beta.142

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/router-devtools",
   "author": "Tanner Linsley",
-  "version": "0.0.1-beta.140",
+  "version": "0.0.1-beta.142",
   "license": "MIT",
   "repository": "tanstack/router",
   "homepage": "https://tanstack.com/router/",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "date-fns": "^2.29.1",
-    "@tanstack/router": "0.0.1-beta.140"
+    "@tanstack/router": "0.0.1-beta.142"
   },
   "scripts": {
     "build": "rollup --config rollup.config.js"

package/src/devtools.tsx

@@ -422,7 +422,7 @@ function RouteComp({
   activeRouteId: string | undefined
   setActiveRouteId: (id: string) => void
 }) {
-  const isActive = matches.find((d) => d.routeId === route.id)
+  const match = matches.find((d) => d.routeId === route.id)
 
   return (
     <div>
@@ -430,13 +430,13 @@ function RouteComp({
         role="button"
         aria-label={`Open match details for ${route.id}`}
         onClick={() => {
-          if (isActive)
+          if (match)
             setActiveRouteId(activeRouteId === route.id ? '' : route.id)
         }}
         style={{
           display: 'flex',
           borderBottom: `solid 1px ${theme.grayAlt}`,
-          cursor: isActive ? 'pointer' : 'default',
+          cursor: match ? 'pointer' : 'default',
           alignItems: 'center',
           background:
             route.id === activeRouteId ? 'rgba(255,255,255,.1)' : undefined,
@@ -455,17 +455,23 @@ function RouteComp({
               borderRadius: '100%',
               transition: 'all .2s ease-out',
               background: getRouteStatusColor(matches, route, theme),
-              opacity: isActive ? 1 : 0.3,
+              opacity: match ? 1 : 0.3,
             }}
           />
         )}
         <Code
           style={{
-            padding: '.25rem 0',
+            flex: '1 0 auto',
+            display: 'flex',
+            justifyContent: 'space-between',
+            padding: '.25rem .5rem .25rem 0',
             paddingLeft: isRoot ? '.5rem' : 0,
-            opacity: isActive ? 1 : 0.7,
+            opacity: match ? 1 : 0.7,
           }}
-        >{`${route.path || trimPath(route.id)}`}</Code>
+        >
+          <span>{route.path || trimPath(route.id)} </span>
+          {match ? <span style={{ opacity: 0.3 }}>{match.id}</span> : null}
+        </Code>
       </div>
       {(route.children as Route[])?.length ? (
         <div