refactor: sandbox details header + sidebar is active state determination

Author: ben-fornefeld

src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/layout.tsx

@@ -1,5 +1,5 @@
 import { SandboxProvider } from '@/features/dashboard/sandbox/context'
-import SandboxDetailsHeader from '@/features/dashboard/sandbox/header'
+import SandboxDetailsHeader from '@/features/dashboard/sandbox/header/header'
 import SandboxDetailsTabs from '@/features/dashboard/sandbox/tabs'
 import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
 import { getSandboxDetails } from '@/server/sandboxes/get-sandbox-details'

src/features/dashboard/sandbox/header.tsx

@@ -0,0 +1,9 @@
+import { SandboxInfo } from '@/types/api'
+
+interface CreatedAtProps {
+  startedAt: SandboxInfo['startedAt']
+}
+
+export default function CreatedAt({ startedAt }: CreatedAtProps) {
+  return <p>{new Date(startedAt).toLocaleString()}</p>
+}

src/features/dashboard/sandbox/header/created_at.tsx

@@ -0,0 +1,90 @@
+import { PROTECTED_URLS } from '@/configs/urls'
+import { SandboxInfo } from '@/types/api'
+import { Label } from '@/ui/primitives/label'
+import { ChevronLeftIcon, Dot } from 'lucide-react'
+import Link from 'next/link'
+import RanFor from './ran-for'
+import Status from './status'
+import Resource from './resource'
+import CreatedAt from './created_at'
+
+interface SandboxDetailsHeaderProps {
+  teamIdOrSlug: string
+  sandboxInfo: SandboxInfo
+}
+
+export default function SandboxDetailsHeader({
+  teamIdOrSlug,
+  sandboxInfo,
+}: SandboxDetailsHeaderProps) {
+  const headerItems = {
+    state: {
+      label: 'status',
+      value: <Status state={sandboxInfo.state} />,
+    },
+    templateID: {
+      label: 'template id',
+      value: sandboxInfo.templateID?.toString(),
+    },
+    startedAt: {
+      label: 'created at',
+      value: <CreatedAt startedAt={sandboxInfo.startedAt} />,
+    },
+    endAt: {
+      label: sandboxInfo.state === 'running' ? 'running since' : 'ran for',
+      value: (
+        <RanFor
+          state={sandboxInfo.state}
+          startedAt={sandboxInfo.startedAt}
+          endAt={sandboxInfo.endAt}
+        />
+      ),
+    },
+    memoryMB: {
+      label: 'mem',
+      value: <Resource type="mem" value={sandboxInfo.memoryMB?.toString()} />,
+    },
+    cpuCount: {
+      label: 'cpu',
+      value: <Resource type="cpu" value={sandboxInfo.cpuCount?.toString()} />,
+    },
+  }
+
+  return (
+    <header className="flex w-full flex-col gap-16 p-8">
+      <div className="flex flex-col gap-1">
+        <Link
+          href={PROTECTED_URLS.SANDBOXES(teamIdOrSlug)}
+          className="text-fg-300 hover:text-fg flex items-center gap-1.5 transition-colors"
+          prefetch
+          shallow
+        >
+          <ChevronLeftIcon className="size-5" />
+          Sandboxes
+        </Link>
+        <h1 className="text-fg-500 text-2xl font-bold">
+          <span className="text-fg">{sandboxInfo.sandboxID}</span>'S DETAILS
+        </h1>
+      </div>
+      <div className="flex flex-wrap items-center gap-7">
+        {Object.entries(headerItems).map(([key, { label, value }]) => (
+          <HeaderItem key={key} label={label} value={value} />
+        ))}
+      </div>
+    </header>
+  )
+}
+
+interface HeaderItemProps {
+  label: string
+  value: string | React.ReactNode
+}
+
+function HeaderItem({ label, value }: HeaderItemProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      <Label className="text-fg-500 text-xs uppercase">{label}</Label>
+      {typeof value === 'string' ? <p className="text-sm">{value}</p> : value}
+    </div>
+  )
+}

src/features/dashboard/sandbox/header/header.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { SandboxInfo } from '@/types/api'
+import { useState, useEffect } from 'react'
+
+interface RanForProps {
+  state?: SandboxInfo['state']
+  startedAt: SandboxInfo['startedAt']
+  endAt?: SandboxInfo['endAt']
+}
+
+export default function RanFor({ state, startedAt, endAt }: RanForProps) {
+  const [ranFor, setRanFor] = useState<string>('-')
+
+  useEffect(() => {
+    function calcRanFor() {
+      if (!startedAt) return '-'
+
+      const start = new Date(startedAt)
+      const end =
+        state === 'running' ? new Date() : endAt ? new Date(endAt) : new Date()
+      const diffMs = end.getTime() - start.getTime()
+      if (diffMs < 0) return '-'
+
+      const hours = Math.floor(diffMs / (1000 * 60 * 60))
+      const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60))
+      return `${hours} hours ${minutes} minutes`
+    }
+
+    setRanFor((prev) => {
+      const next = calcRanFor()
+      return prev !== next ? next : prev
+    })
+
+    const interval = setInterval(() => {
+      setRanFor((prev) => {
+        const next = calcRanFor()
+        return prev !== next ? next : prev
+      })
+    }, 5000)
+
+    return () => clearInterval(interval)
+  }, [state, startedAt, endAt])
+
+  return <p>{ranFor}</p>
+}

src/features/dashboard/sandbox/header/ran-for.tsx

@@ -0,0 +1,14 @@
+interface ResourceProps {
+  type: 'mem' | 'cpu'
+  value: string
+}
+
+export default function Resource({ type, value }: ResourceProps) {
+  const label = type === 'mem' ? 'MB' : 'Core'
+
+  return (
+    <p>
+      {value} {label}
+    </p>
+  )
+}

src/features/dashboard/sandbox/header/resource.tsx

@@ -0,0 +1,20 @@
+import { SandboxInfo } from '@/types/api'
+import { Badge } from '@/ui/primitives/badge'
+
+interface StatusProps {
+  state: SandboxInfo['state']
+}
+
+export default function Status({ state }: StatusProps) {
+  return (
+    <Badge
+      variant={state === 'running' ? 'success' : 'error'}
+      className="gap-1 uppercase"
+    >
+      <span className="line-height-0 h-0 w-2.5 -translate-y-0.25 align-middle text-xl leading-0">
+        •
+      </span>
+      {state}
+    </Badge>
+  )
+}

src/features/dashboard/sandbox/header/status.tsx

@@ -44,7 +44,23 @@ export default function DashboardSidebarContent() {
   )
 
   const isActive = (href: string) => {
-    return href === pathname
+    if (!pathname) return false
+
+    if (pathname === href) return true
+
+    // split into segments for prefix comparison
+    const hrefSegments = href.split('/').filter(Boolean)
+    const pathSegments = pathname.split('/').filter(Boolean)
+
+    if (pathSegments.length < hrefSegments.length) return false
+
+    for (let i = 0; i < hrefSegments.length; i++) {
+      if (hrefSegments[i] !== pathSegments[i]) {
+        return false
+      }
+    }
+
+    return true
   }
 
   return (