From 4f4f2f4f9ac12b2df69fcc9e4341d74ceaa8f40f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 15 Mar 2026 20:31:57 +0100
Subject: [PATCH] refactor: redesign top paths table to match Pulse patterns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace card-per-row with compact list rows + background bars
- Drop rank badges (order already communicates rank)
- Inline path sequence + stats into single row
- Truncate sequences longer than 7 steps (first 3 + … + last 2)
- Duration shows on hover with slide-in animation
- Use brand-orange bars proportional to top path count
---
 components/journeys/TopPathsTable.tsx | 105 ++++++++++++++++----------
 1 file changed, 65 insertions(+), 40 deletions(-)

diff --git a/components/journeys/TopPathsTable.tsx b/components/journeys/TopPathsTable.tsx
index f85e57c..72bdcd1 100644
--- a/components/journeys/TopPathsTable.tsx
+++ b/components/journeys/TopPathsTable.tsx
@@ -2,7 +2,7 @@
 
 import type { TopPath } from '@/lib/api/journeys'
 import { TableSkeleton } from '@/components/skeletons'
-import { Path, ArrowRight, Clock, Users } from '@phosphor-icons/react'
+import { Path, ArrowRight, Clock } from '@phosphor-icons/react'
 
 interface TopPathsTableProps {
   paths: TopPath[]
@@ -24,8 +24,16 @@ function smartLabel(path: string): string {
   return `…/${segments[segments.length - 1]}`
 }
 
+function truncateSequence(seq: string[], max: number): (string | null)[] {
+  if (seq.length <= max) return seq
+  const head = seq.slice(0, 3)
+  const tail = seq.slice(-2)
+  return [...head, null, ...tail]
+}
+
 export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
   const hasData = paths.length > 0
+  const maxCount = hasData ? paths[0].session_count : 0
 
   return (
     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
@@ -41,49 +49,66 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
       {loading ? (
         <TableSkeleton rows={7} cols={4} />
       ) : hasData ? (
-        <div className="space-y-2">
-          {paths.map((path, i) => (
-            <div
-              key={i}
-              className="group rounded-xl border border-neutral-100 dark:border-neutral-800 hover:border-neutral-200 dark:hover:border-neutral-700 p-4 transition-colors"
-            >
-              <div className="flex items-center justify-between mb-3">
-                <span className="text-xs font-medium text-neutral-400 dark:text-neutral-500">
-                  #{i + 1}
-                </span>
-                <div className="flex items-center gap-4 text-xs text-neutral-500 dark:text-neutral-400">
-                  <span className="flex items-center gap-1.5">
-                    <Users weight="bold" className="w-3.5 h-3.5" />
-                    {path.session_count.toLocaleString()}
-                  </span>
-                  {path.avg_duration > 0 && (
-                    <span className="flex items-center gap-1.5">
-                      <Clock weight="bold" className="w-3.5 h-3.5" />
-                      {formatDuration(path.avg_duration)}
-                    </span>
-                  )}
-                </div>
-              </div>
-              <div className="flex items-center flex-wrap gap-1.5">
-                {path.page_sequence.map((page, j) => (
-                  <div key={j} className="flex items-center gap-1.5">
-                    {j > 0 && (
-                      <ArrowRight
-                        weight="bold"
-                        className="w-3 h-3 text-neutral-300 dark:text-neutral-600 shrink-0"
-                      />
+        <div className="space-y-0.5">
+          {paths.map((path, i) => {
+            const barWidth = maxCount > 0 ? (path.session_count / maxCount) * 100 : 0
+            const displaySeq = truncateSequence(path.page_sequence, 7)
+
+            return (
+              <div
+                key={i}
+                className="relative flex items-center h-10 group hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg px-3 -mx-3 transition-colors"
+              >
+                {/* Background bar */}
+                <div
+                  className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                  style={{ width: `${barWidth}%` }}
+                />
+
+                {/* Content */}
+                <div className="relative flex items-center justify-between w-full min-w-0">
+                  {/* Path sequence */}
+                  <div className="flex items-center min-w-0 gap-1.5 flex-1 overflow-hidden">
+                    {displaySeq.map((page, j) => (
+                      <div key={j} className="flex items-center gap-1.5 shrink-0">
+                        {j > 0 && (
+                          <ArrowRight
+                            weight="bold"
+                            className="w-2.5 h-2.5 text-neutral-300 dark:text-neutral-600 shrink-0"
+                          />
+                        )}
+                        {page === null ? (
+                          <span className="text-xs text-neutral-400 dark:text-neutral-500">
+                            …
+                          </span>
+                        ) : (
+                          <span
+                            className="text-sm text-neutral-900 dark:text-white truncate"
+                            title={page}
+                          >
+                            {smartLabel(page)}
+                          </span>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* Stats */}
+                  <div className="relative flex items-center gap-4 ml-4 shrink-0">
+                    {path.avg_duration > 0 && (
+                      <span className="hidden sm:flex items-center gap-1 text-xs text-neutral-400 dark:text-neutral-500 opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                        <Clock weight="bold" className="w-3 h-3" />
+                        {formatDuration(path.avg_duration)}
+                      </span>
                     )}
-                    <span
-                      className="inline-flex px-2.5 py-1 rounded-md text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300"
-                      title={page}
-                    >
-                      {smartLabel(page)}
+                    <span className="text-sm tabular-nums font-semibold text-neutral-600 dark:text-neutral-400">
+                      {path.session_count.toLocaleString()}
                     </span>
                   </div>
-                ))}
+                </div>
               </div>
-            </div>
-          ))}
+            )
+          })}
         </div>
       ) : (
         <div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-3">