fix: show device type name if no alias set (commaai#28)

src/pages/dashboard/activities/DeviceActivity.tsx

@@ -6,9 +6,11 @@ import { getDevice } from '~/api/devices'
 import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
 import Typography from '~/components/material/Typography'
+import DeviceStatistics from '~/components/DeviceStatistics'
+import { getDeviceName } from '~/utils/device'
+
 import RouteList from '../components/RouteList'
 import { DashboardContext } from '../Dashboard'
-import DeviceStatistics from '~/components/DeviceStatistics'
 
 type DeviceActivityProps = {
   dongleId: string
@@ -18,10 +20,11 @@ const DeviceActivity: VoidComponent<DeviceActivityProps> = (props) => {
   const { toggleDrawer } = useContext(DashboardContext)!
 
   const [device] = createResource(() => props.dongleId, getDevice)
+  const [deviceName] = createResource(device, getDeviceName)
   return (
     <>
       <TopAppBar leading={<IconButton onClick={toggleDrawer}>menu</IconButton>}>
-        <Suspense fallback={<></>}>{device()?.alias}</Suspense>
+        {deviceName()}
       </TopAppBar>
       <div class="flex flex-col gap-4 px-4 pb-4">
         <div class="h-[72px] overflow-hidden rounded-lg bg-surface-container-low">

src/pages/dashboard/components/DeviceList.tsx

@@ -3,11 +3,12 @@ import type { VoidComponent } from 'solid-js'
 import { useLocation } from '@solidjs/router'
 import clsx from 'clsx'
 
-import type { Device } from '~/types'
-
 import Icon from '~/components/material/Icon'
 import List, { ListItem, ListItemContent } from '~/components/material/List'
 import Typography from '~/components/material/Typography'
+import type { Device } from '~/types'
+import { getDeviceName } from '~/utils/device'
+
 import { DashboardContext } from '../Dashboard'
 
 type DeviceListProps = {
@@ -34,7 +35,7 @@ const DeviceList: VoidComponent<DeviceListProps> = (props) => {
               href={`/${device.dongle_id}`}
             >
               <ListItemContent
-                headline={device.alias}
+                headline={getDeviceName(device)}
                 subhead={
                   <Typography class="lowercase" variant="label-sm">
                     {device.dongle_id}

src/utils/device.ts

@@ -0,0 +1,6 @@
+import type { Device } from '~/types'
+
+export function getDeviceName(device: Device) {
+  if (device.alias) return device.alias
+  return `comma ${device.device_type}`
+}