refactor: remake journeys page with pricing-style slider, remove top paths table

app/sites/[id]/journeys/page.tsx

@@ -5,15 +5,15 @@ import { useParams } from 'next/navigation'
 import { getDateRange, formatDate } from '@ciphera-net/ui'
 import { Select, DatePicker } from '@ciphera-net/ui'
 import SankeyDiagram from '@/components/journeys/SankeyDiagram'
-import TopPathsTable from '@/components/journeys/TopPathsTable'
 import { JourneysSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import {
   useDashboard,
   useJourneyTransitions,
-  useJourneyTopPaths,
   useJourneyEntryPoints,
 } from '@/lib/swr/dashboard'
 
+const DEPTH_STEPS = [2, 3, 4, 5, 6, 7, 8, 9, 10]
+
 function getThisWeekRange(): { start: string; end: string } {
   const today = new Date()
   const dayOfWeek = today.getDay()
@@ -38,12 +38,11 @@ export default function JourneysPage() {
   const [depth, setDepth] = useState(3)
   const [entryPath, setEntryPath] = useState('')
 
+  const sliderIndex = DEPTH_STEPS.indexOf(depth)
+
   const { data: transitionsData, isLoading: transitionsLoading } = useJourneyTransitions(
     siteId, dateRange.start, dateRange.end, depth, 1, entryPath || undefined
   )
-  const { data: topPaths, isLoading: topPathsLoading } = useJourneyTopPaths(
-    siteId, dateRange.start, dateRange.end, 20, 1, entryPath || undefined
-  )
   const { data: entryPoints } = useJourneyEntryPoints(siteId, dateRange.start, dateRange.end)
   const { data: dashboard } = useDashboard(siteId, dateRange.start, dateRange.end)
 
@@ -65,6 +64,8 @@ export default function JourneysPage() {
 
   if (showSkeleton) return <JourneysSkeleton />
 
+  const totalSessions = transitionsData?.total_sessions ?? 0
+
   return (
     <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
@@ -115,53 +116,72 @@ export default function JourneysPage() {
         />
       </div>
 
-      {/* Controls */}
+      {/* Single card: toolbar + chart */}
-      <div className="flex flex-wrap items-center gap-4 mb-6">
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
-        <div className="flex items-center gap-3">
+        {/* Toolbar */}
-          <label className="text-sm text-neutral-500 dark:text-neutral-400">Depth</label>
+        <div className="p-6 border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50">
-          <input
+          <div className="flex flex-col sm:flex-row sm:items-center gap-6">
-            type="range"
+            {/* Depth slider */}
-            min={2}
+            <div className="flex-1">
-            max={10}
+              <div className="flex justify-between text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-3">
-            step={1}
+                <span>2 steps</span>
-            value={depth}
+                <span className="text-brand-orange font-bold">
-            onChange={(e) => setDepth(Number(e.target.value))}
+                  {depth} steps deep
-            className="w-32 accent-brand-orange"
+                </span>
-          />
+                <span>10 steps</span>
-          <span className="text-sm font-medium text-neutral-900 dark:text-white w-5">{depth}</span>
+              </div>
+              <input
+                type="range"
+                min="0"
+                max={DEPTH_STEPS.length - 1}
+                step="1"
+                value={sliderIndex}
+                onChange={(e) => setDepth(DEPTH_STEPS[parseInt(e.target.value)])}
+                aria-label="Journey depth"
+                aria-valuetext={`${depth} steps deep`}
+                className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
+              />
+            </div>
+
+            {/* Entry point + Reset */}
+            <div className="flex items-center gap-3 shrink-0">
+              <Select
+                variant="input"
+                className="min-w-[180px]"
+                value={entryPath}
+                onChange={(value) => setEntryPath(value)}
+                options={entryPointOptions}
+              />
+              {(depth !== 3 || entryPath) && (
+                <button
+                  onClick={() => { setDepth(3); setEntryPath('') }}
+                  className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors whitespace-nowrap"
+                >
+                  Reset
+                </button>
+              )}
+            </div>
+          </div>
         </div>
 
-        <Select
+        {/* Sankey Diagram */}
-          variant="input"
+        <div className="p-6">
-          className="min-w-[180px]"
+          <SankeyDiagram
-          value={entryPath}
+            transitions={transitionsData?.transitions ?? []}
-          onChange={(value) => setEntryPath(value)}
+            totalSessions={totalSessions}
-          options={entryPointOptions}
+            depth={depth}
-        />
+            onNodeClick={(path) => setEntryPath(path)}
+          />
+        </div>
 
-        {(depth !== 3 || entryPath) && (
+        {/* Footer */}
-          <button
+        {totalSessions > 0 && (
-            onClick={() => { setDepth(3); setEntryPath('') }}
+          <div className="px-6 pb-5 text-sm text-neutral-500 dark:text-neutral-400">
-            className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors"
+            {totalSessions.toLocaleString()} sessions tracked
-          >
+          </div>
-            Reset
-          </button>
         )}
       </div>
 
-      {/* Sankey Diagram */}
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 mb-6">
-        <SankeyDiagram
-          transitions={transitionsData?.transitions ?? []}
-          totalSessions={transitionsData?.total_sessions ?? 0}
-          depth={depth}
-          onNodeClick={(path) => setEntryPath(path)}
-        />
-      </div>
-
-      {/* Top Paths */}
-      <TopPathsTable paths={topPaths ?? []} loading={topPathsLoading} />
-
       {/* Date Picker Modal */}
       <DatePicker
         isOpen={isDatePickerOpen}