dashboard redesign (#162)

src/components/DeviceLocation.tsx

@@ -153,7 +153,7 @@ const DeviceLocation: VoidComponent<DeviceLocationProps> = (props) => {
 
   return (
     <div class="relative">
-      <div ref={mapRef} class="h-[200px] w-full !bg-surface-container-low" />
+      <div ref={mapRef} class="h-[240px] w-full !bg-surface-container-low" />
 
       <Show when={!userPosition()}>
         <div class="absolute bottom-2 right-2 z-[9999]">

src/components/RouteStaticMap.tsx

@@ -30,7 +30,7 @@ const getStaticMapUrl = (gpsPoints: GPSPathPoint[]): string | undefined => {
     path.push([lng, lat])
   })
   const themeId = getThemeId()
-  return getPathStaticMapUrl(themeId, path, 343, 256, true)
+  return getPathStaticMapUrl(themeId, path, 512, 512, true)
 }
 
 const State = (props: {

src/components/material/ButtonBase.tsx

@@ -7,6 +7,7 @@ export type ButtonBaseProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
   class?: string
   onClick?: (e: MouseEvent) => void
   href?: string
+  activeClass?: string
 }
 
 const ButtonBase: Component<ButtonBaseProps> = (props) => {
@@ -32,8 +33,9 @@ const ButtonBase: Component<ButtonBaseProps> = (props) => {
       {(href) => (
         <A
           class={clsx('relative isolate overflow-hidden', props.class)}
-          href={href}
           onClick={onClick}
+          href={href}
+          activeClass={props.activeClass}
         >
           {props.children}
         </A>

src/components/material/Card.tsx

@@ -13,9 +13,7 @@ type CardHeaderProps = {
 
 export const CardHeader: VoidComponent<CardHeaderProps> = (props) => {
   return (
-    <div
-      class={clsx('flex h-[72px] items-center gap-4 px-4 py-3', props.class)}
-    >
+    <div class={clsx('flex h-[72px] items-center gap-4 px-4 py-3', props.class)}>
       {props.leading}
       <div class="flex h-12 grow flex-col justify-between">
         {props.headline && <span class="text-title-md">{props.headline}</span>}
@@ -75,17 +73,19 @@ type CardProps = {
   class?: string
   onClick?: () => void
   href?: string
+  activeClass?: string
 }
 
 const Card: ParentComponent<CardProps> = (props) => {
   return (
     <ButtonBase
       class={clsx(
-        'state-layer elevation-1 flex max-w-md flex-col rounded-lg bg-surface-container-low text-on-surface before:bg-on-surface',
+        'state-layer flex max-w-md flex-col rounded-lg bg-surface-container-low text-on-surface before:bg-on-surface',
         props.class,
       )}
       onClick={props.onClick}
       href={props.href}
+      activeClass={clsx('before:opacity-[.12]', props.activeClass)}
     >
       {props.children}
     </ButtonBase>

src/components/material/List.tsx

@@ -25,6 +25,7 @@ type ListItemProps = {
   trailing?: JSXElement
   onClick?: () => void
   href?: string
+  activeClass?: string
 }
 
 // TODO: guess variant from content
@@ -47,6 +48,7 @@ export const ListItem: ParentComponent<ListItemProps> = (props) => {
       )}
       onClick={props.onClick}
       href={props.href}
+      activeClass={clsx('before:opacity-[.12]', props.activeClass)}
     >
       {props.leading}
       {props.children}

src/pages/dashboard/Dashboard.tsx

@@ -36,7 +36,7 @@ const DashboardDrawer: VoidComponent<DashboardDrawerProps> = (props) => {
       >
         comma connect
       </TopAppBar>
-      <h2 class="mx-4 mb-2 text-label-sm">
+      <h2 class="mx-4 mb-2 text-label-sm uppercase">
         Devices
       </h2>
       <Show when={props.devices} keyed>
@@ -52,7 +52,7 @@ const DashboardDrawer: VoidComponent<DashboardDrawerProps> = (props) => {
   )
 }
 
-const TwoPaneLayout: Component<{
+const DashboardLayout: Component<{
   paneOne: JSXElement
   paneTwo: JSXElement
   paneTwoContent: boolean
@@ -61,7 +61,7 @@ const TwoPaneLayout: Component<{
     <div class="relative size-full overflow-hidden">
       <div
         class={clsx(
-          'mx-auto size-full max-w-screen-2xl md:grid md:grid-cols-2 lg:gap-2',
+          'mx-auto size-full max-w-[1560px] md:grid md:grid-cols-2 lg:gap-2',
           // Flex layout for mobile with horizontal transition
           'flex transition-transform duration-300 ease-in-out',
           props.paneTwoContent ? '-translate-x-full md:translate-x-0' : 'translate-x-0',
@@ -76,7 +76,7 @@ const TwoPaneLayout: Component<{
   )
 }
 
-const DashboardLayout: Component<RouteSectionProps> = () => {
+const Dashboard: Component<RouteSectionProps> = () => {
   const location = useLocation()
 
   const pathParts = () => location.pathname.split('/').slice(1).filter(Boolean)
@@ -107,7 +107,7 @@ const DashboardLayout: Component<RouteSectionProps> = () => {
           <PairActivity />
         </Match>
         <Match when={dongleId()} keyed>{(id) => (
-          <TwoPaneLayout
+          <DashboardLayout
             paneOne={<DeviceActivity dongleId={id} />}
             paneTwo={<Switch
               fallback={<div class="hidden size-full flex-col items-center justify-center gap-4 md:flex">
@@ -133,4 +133,4 @@ const DashboardLayout: Component<RouteSectionProps> = () => {
   )
 }
 
-export default DashboardLayout
+export default Dashboard

src/pages/dashboard/activities/DeviceActivity.tsx

@@ -155,7 +155,7 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
           )}
         </div>
         <div class="flex flex-col gap-2">
-          <span class="text-label-sm">Routes</span>
+          <span class="text-label-sm uppercase">Routes</span>
           <RouteList dongleId={props.dongleId} />
         </div>
       </div>

src/pages/dashboard/activities/RouteActivity.tsx

@@ -8,13 +8,13 @@ import {
 
 import { getRoute } from '~/api/route'
 
+import IconButton from '~/components/material/IconButton'
+import TopAppBar from '~/components/material/TopAppBar'
 import RouteStaticMap from '~/components/RouteStaticMap'
 import RouteStatistics from '~/components/RouteStatistics'
 import Timeline from '~/components/Timeline'
 import { parseDateStr } from '~/utils/date'
 
-import ActivityBar from '../components/ActivityBar'
-
 const RouteVideoPlayer = lazy(() => import('~/components/RouteVideoPlayer'))
 
 type RouteActivityProps = {
@@ -37,9 +37,9 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
 
   return (
     <>
-      <ActivityBar backHref={`/${props.dongleId}`}>
+      <TopAppBar leading={<IconButton class="md:hidden" href={`/${props.dongleId}`}>arrow_back</IconButton>}>
         {startTime()}
-      </ActivityBar>
+      </TopAppBar>
 
       <div class="flex flex-col gap-6 px-4 pb-4">
         <Suspense
@@ -64,8 +64,8 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
         </div>
 
         <div class="flex flex-col gap-2">
-          <h3 class="text-label-sm">Route Map</h3>
-          <div class="h-64 overflow-hidden rounded-lg">
+          <h3 class="text-label-sm uppercase">Route Map</h3>
+          <div class="aspect-square overflow-hidden rounded-lg">
             <Suspense fallback={<div class="skeleton-loader size-full bg-surface" />}>
               <RouteStaticMap route={route()} />
             </Suspense>

src/pages/dashboard/activities/SettingsActivity.tsx

@@ -10,9 +10,10 @@ import ButtonBase from '~/components/material/ButtonBase'
 import Button from '~/components/material/Button'
 import CircularProgress from '~/components/material/CircularProgress'
 import Icon from '~/components/material/Icon'
+import IconButton from '~/components/material/IconButton'
+import TopAppBar from '~/components/material/TopAppBar'
 import { createQuery } from '~/utils/createQuery'
 
-import ActivityBar from '../components/ActivityBar'
 
 const useAction = <T,>(action: () => Promise<T>): [() => void, Resource<T>] => {
   const [source, setSource] = createSignal(false)
@@ -352,9 +353,9 @@ const SettingsActivity: VoidComponent<PrimeActivityProps> = (props) => {
   const [device] = createResource(() => props.dongleId, getDevice)
   return (
     <>
-      <ActivityBar backHref={`/${props.dongleId}`}>
+      <TopAppBar leading={<IconButton class="md:hidden" href={`/${props.dongleId}`}>arrow_back</IconButton>}>
         Device Settings
-      </ActivityBar>
+      </TopAppBar>
       <div class="max-w-lg px-4">
         <h2 class="mb-4 text-headline-sm">comma prime</h2>
         <Suspense>

src/pages/dashboard/components/DeviceList.tsx

@@ -37,6 +37,7 @@ const DeviceList: VoidComponent<DeviceListProps> = (props) => {
               selected={isSelected(device)}
               onClick={onClick(device)}
               href={`/${device.dongle_id}`}
+              activeClass="before:bg-primary"
             >
               <ListItemContent
                 headline={getDeviceName(device)}

src/pages/dashboard/components/RouteList.tsx

@@ -13,7 +13,6 @@ import dayjs from 'dayjs'
 
 import { fetcher } from '~/api'
 import Card, { CardContent, CardHeader } from '~/components/material/Card'
-import RouteStaticMap from '~/components/RouteStaticMap'
 import RouteStatistics from '~/components/RouteStatistics'
 import type { RouteSegments } from '~/types'
 import { useDimensions } from '~/utils/window'
@@ -28,18 +27,16 @@ const RouteCard: VoidComponent<RouteCardProps> = (props) => {
   const endTime = () => dayjs(props.route.end_time_utc_millis)
 
   return (
-    <Card href={`/${props.route.dongle_id}/${props.route.fullname.slice(17)}`}>
+    <Card
+      class="max-w-none"
+      href={`/${props.route.dongle_id}/${props.route.fullname.slice(17)}`}
+      activeClass="md:before:bg-primary"
+    >
       <CardHeader
         headline={startTime().format('ddd, MMM D, YYYY')}
         subhead={`${startTime().format('h:mm A')} to ${endTime().format('h:mm A')}`}
       />
 
-      <div class="mx-2 h-48 overflow-hidden rounded-lg">
-        <Suspense fallback={<div class="skeleton-loader size-full bg-surface" />}>
-          <RouteStaticMap route={props.route} />
-        </Suspense>
-      </div>
-
       <CardContent>
         <RouteStatistics route={props.route} />
       </CardContent>
@@ -54,7 +51,7 @@ type RouteListProps = {
 
 const RouteList: VoidComponent<RouteListProps> = (props) => {
   const dimensions = useDimensions()
-  const pageSize = () => Math.max(Math.ceil((dimensions().height / 2) / 348), 1)
+  const pageSize = () => Math.max(Math.ceil((dimensions().height / 2) / 140), 1)
   const endpoint = () => `/v1/devices/${props.dongleId}/routes_segments?limit=${pageSize()}`
   const getKey = (previousPageData?: RouteSegments[]): string | undefined => {
     if (!previousPageData) return endpoint()
@@ -105,7 +102,7 @@ const RouteList: VoidComponent<RouteListProps> = (props) => {
           return (
             <Suspense
               fallback={<Index each={new Array(pageSize())}>{() => (
-                <div class="skeleton-loader elevation-1 flex h-[336px] max-w-md flex-col rounded-lg bg-surface-container-low" />
+                <div class="skeleton-loader flex h-[140px] flex-col rounded-lg" />
               )}</Index>}
             >
               <For each={routes()}>