@seamapi/react 1.23.0 → 1.25.0

package/lib/ui/device/OnlineStatus.js

@@ -1,11 +1,20 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { OnlineStatusAccountOfflineIcon } from '../../../lib/icons/OnlineStatusAccountOffline.js';
 import { OnlineStatusDeviceOfflineIcon } from '../../../lib/icons/OnlineStatusDeviceOffline.js';
 import { OnlineStatusOnlineIcon } from '../../../lib/icons/OnlineStatusOnline.js';
 export function OnlineStatus(props) {
-    const { device: { properties: { online }, }, } = props;
-    return (_jsx("div", { className: 'seam-online-status', children: _jsx(Content, { isOnline: online }) }));
+    const { device } = props;
+    const isAccountOffline = device.errors.filter((error) => error.error_code === 'account_disconnected')
+        .length > 0;
+    if (isAccountOffline) {
+        return _jsx(AccountOfflineContent, {});
+    }
+    return (_jsxs("div", { className: 'seam-online-status', children: [isAccountOffline && _jsx(OnlineStatusAccountOfflineIcon, {}), _jsx(DeviceOnlineContent, { isOnline: device.properties.online })] }));
+}
+function AccountOfflineContent() {
+    return (_jsxs("div", { className: 'seam-online-status', children: [_jsx(OnlineStatusAccountOfflineIcon, {}), _jsx("span", { className: 'seam-text-danger', children: t.accountOffline })] }));
 }
-function Content(props) {
+function DeviceOnlineContent(props) {
     const { isOnline } = props;
     if (isOnline) {
         return (_jsxs(_Fragment, { children: [_jsx(OnlineStatusOnlineIcon, {}), _jsx("span", { className: 'seam-status-text', children: t.online })] }));
@@ -14,6 +23,7 @@ function Content(props) {
 }
 const t = {
     online: 'Online',
+    accountOffline: 'Account Offline',
     deviceOffline: 'Device Offline',
 };
 //# sourceMappingURL=OnlineStatus.js.map

package/lib/ui/device/OnlineStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnlineStatus.js","sourceRoot":"","sources":["../../../src/lib/ui/device/OnlineStatus.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,6BAA6B,EAAE,MAAM,wCAAwC,CAAA;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AAMxE,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,MAAM,EAAE,EACN,UAAU,EAAE,EAAE,MAAM,EAAE,GACvB,GACF,GAAG,KAAK,CAAA;IAET,OAAO,CACL,cAAK,SAAS,EAAC,oBAAoB,YACjC,KAAC,OAAO,IAAC,QAAQ,EAAE,MAAM,GAAI,GACzB,CACP,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,KAA4B;IAC3C,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC1B,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,8BACE,KAAC,sBAAsB,KAAG,EAC1B,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,MAAM,GAAQ,IACnD,CACJ,CAAA;KACF;IAED,OAAO,CACL,8BACE,KAAC,6BAA6B,KAAG,EACjC,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,aAAa,GAAQ,IAC1D,CACJ,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,MAAM,EAAE,QAAQ;IAChB,aAAa,EAAE,gBAAgB;CAChC,CAAA"}
+{"version":3,"file":"OnlineStatus.js","sourceRoot":"","sources":["../../../src/lib/ui/device/OnlineStatus.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAA;AACxF,OAAO,EAAE,6BAA6B,EAAE,MAAM,wCAAwC,CAAA;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AAMxE,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAExB,MAAM,gBAAgB,GACpB,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,KAAK,sBAAsB,CAAC;SACzE,MAAM,GAAG,CAAC,CAAA;IAEf,IAAI,gBAAgB,EAAE;QACpB,OAAO,KAAC,qBAAqB,KAAG,CAAA;KACjC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,oBAAoB,aAChC,gBAAgB,IAAI,KAAC,8BAA8B,KAAG,EACvD,KAAC,mBAAmB,IAAC,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM,GAAI,IACvD,CACP,CAAA;AACH,CAAC;AAED,SAAS,qBAAqB;IAC5B,OAAO,CACL,eAAK,SAAS,EAAC,oBAAoB,aACjC,KAAC,8BAA8B,KAAG,EAClC,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,cAAc,GAAQ,IACxD,CACP,CAAA;AACH,CAAC;AAED,SAAS,mBAAmB,CAAC,KAA4B;IACvD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC1B,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,8BACE,KAAC,sBAAsB,KAAG,EAC1B,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,MAAM,GAAQ,IACnD,CACJ,CAAA;KACF;IAED,OAAO,CACL,8BACE,KAAC,6BAA6B,KAAG,EACjC,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,aAAa,GAAQ,IAC1D,CACJ,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,MAAM,EAAE,QAAQ;IAChB,cAAc,EAAE,iBAAiB;IACjC,aAAa,EAAE,gBAAgB;CAChC,CAAA"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "1.23.0";
+declare const seamapiReactVersion = "1.25.0";
 export default seamapiReactVersion;

package/lib/version.js

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.23.0';
+const seamapiReactVersion = '1.25.0';
 export default seamapiReactVersion;
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.23.0",
+  "version": "1.25.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -121,7 +121,7 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.2",
     "@r2wc/react-to-web-component": "^2.0.2",
-    "@seamapi/fake-seam-connect": "^0.8.0",
+    "@seamapi/fake-seam-connect": "^0.10.0",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-interactions": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.element.ts

@@ -6,6 +6,7 @@ export const name = 'seam-access-code-details'
 
 export const props: ElementProps<AccessCodeDetailsProps> = {
   accessCodeId: 'string',
+  disableLockUnlock: 'boolean',
   onBack: 'function',
   className: 'string',
 }

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.element.ts

@@ -6,6 +6,7 @@ export const name = 'seam-access-code-table'
 
 export const props: ElementProps<AccessCodeTableProps> = {
   deviceId: 'string',
+  disableLockUnlock: 'boolean',
   accessCodeFilter: 'function',
   accessCodeComparator: 'function',
   onAccessCodeClick: 'function',

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -32,6 +32,7 @@ import { Title } from 'lib/ui/typography/Title.js'
 
 export interface AccessCodeTableProps {
   deviceId: string
+  disableLockUnlock?: boolean
   accessCodeFilter?: (
     accessCode: AccessCode,
     searchInputValue: string
@@ -42,7 +43,6 @@ export interface AccessCodeTableProps {
   ) => number
   onAccessCodeClick?: (accessCodeId: string) => void
   preventDefaultOnAccessCodeClick?: boolean
-  disableLockUnlock?: boolean
   onBack?: () => void
   className?: string
 }
@@ -64,9 +64,9 @@ const defaultAccessCodeFilter = (
 
 export function AccessCodeTable({
   deviceId,
+  disableLockUnlock = false,
   onAccessCodeClick = () => {},
   preventDefaultOnAccessCodeClick = false,
-  disableLockUnlock = false,
   onBack,
   accessCodeFilter = defaultAccessCodeFilter,
   accessCodeComparator = compareByCreatedAtDesc,

package/src/lib/seam/components/DeviceDetails/DeviceDetails.element.ts

@@ -6,6 +6,7 @@ export const name = 'seam-device-details'
 
 export const props: ElementProps<DeviceDetailsProps> = {
   deviceId: 'string',
+  disableLockUnlock: 'boolean',
   onBack: 'function',
   className: 'string',
 }

package/src/lib/seam/components/DeviceTable/DeviceHealthBar.tsx

@@ -1,15 +1,17 @@
 import { CheckIcon } from 'lib/icons/Check.js'
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
+import { OnlineStatusAccountOfflineIcon } from 'lib/icons/OnlineStatusAccountOffline.js'
 import type { UseDevicesData } from 'lib/seam/devices/use-devices.js'
 import { TableFilterBar } from 'lib/ui/Table/TableFilterBar/TableFilterBar.js'
 import { TableFilterItem } from 'lib/ui/Table/TableFilterBar/TableFilterItem.js'
 
+export type AccountFilter = 'account_issues'
 export type DeviceFilter = 'device_issues'
 
 interface DeviceHealthBarProps {
   devices: Array<UseDevicesData[number]>
-  filter: DeviceFilter | null
-  onFilterSelect: (filter: DeviceFilter | null) => void
+  filter: AccountFilter | DeviceFilter | null
+  onFilterSelect: (filter: AccountFilter | DeviceFilter | null) => void
 }
 
 export function DeviceHealthBar({
@@ -17,25 +19,40 @@ export function DeviceHealthBar({
   filter,
   onFilterSelect,
 }: DeviceHealthBarProps): JSX.Element {
-  const erroredDevices = devices.filter((device) => device.errors.length > 0)
-  const issueCount = erroredDevices.length
+  const erroredAccounts = devices.filter((device) => {
+    return (
+      device.errors.filter((error) => 'is_connected_account_error' in error)
+        .length > 0
+    )
+  })
+  const erroredDevices = devices.filter((device) => {
+    return (
+      device.errors.filter((error) => 'is_device_error' in error).length > 0
+    )
+  })
+  const accountIssueCount = erroredAccounts.length
+  const deviceIssueCount = erroredDevices.length
 
-  const toggle = (target: DeviceFilter) => () => {
+  const toggle = (target: AccountFilter | DeviceFilter) => () => {
     const newFilter = target === filter ? null : target
     onFilterSelect(newFilter)
   }
 
-  const isPlural = issueCount === 0 || issueCount > 1
-  const label = isPlural
-    ? `${issueCount} ${t.deviceIssues}`
-    : `${issueCount} ${t.deviceIssue}`
+  const deviceLabel =
+    deviceIssueCount > 0
+      ? `${deviceIssueCount} ${t.deviceIssues}`
+      : `${deviceIssueCount} ${t.deviceIssue}`
+  const accountLabel =
+    accountIssueCount > 0
+      ? `${accountIssueCount} ${t.accountIssues}`
+      : `${accountIssueCount} ${t.accountIssue}`
 
-  if (issueCount === 0) {
+  if (accountIssueCount === 0 && deviceIssueCount === 0) {
     return (
       <TableFilterBar filterCleared>
         <TableFilterItem>
           <CheckIcon />
-          {t.devicesOk}
+          {t.devicesAndAccountsOk}
         </TableFilterItem>
       </TableFilterBar>
     )
@@ -48,19 +65,32 @@ export function DeviceHealthBar({
         onFilterSelect(null)
       }}
     >
-      <TableFilterItem
-        onClick={toggle('device_issues')}
-        selected={filter === 'device_issues'}
-      >
-        <ExclamationCircleOutlineIcon />
-        {label}
-      </TableFilterItem>
+      {deviceIssueCount > 0 && (
+        <TableFilterItem
+          onClick={toggle('device_issues')}
+          selected={filter === 'device_issues'}
+        >
+          <ExclamationCircleOutlineIcon />
+          {deviceLabel}
+        </TableFilterItem>
+      )}
+      {accountIssueCount > 0 && (
+        <TableFilterItem
+          onClick={toggle('account_issues')}
+          selected={filter === 'account_issues'}
+        >
+          <OnlineStatusAccountOfflineIcon />
+          {accountLabel}
+        </TableFilterItem>
+      )}
     </TableFilterBar>
   )
 }
 
 const t = {
-  devicesOk: 'Devices OK',
+  devicesAndAccountsOk: 'Devices & accounts OK',
+  accountIssue: 'account issue',
+  accountIssues: 'account issues',
   deviceIssue: 'device issue',
   deviceIssues: 'device issues',
 }

package/src/lib/seam/components/DeviceTable/DeviceRow.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import type {
   UseDevicesData,
   UseDevicesParams,
@@ -25,24 +27,61 @@ export function DeviceRow({
   device,
   onClick,
 }: DeviceRowProps): JSX.Element | null {
+  const opacityClass =
+    isAccountOffline(device) || isDeviceOffline(device)
+      ? 'seam-offline-fade'
+      : undefined
   return (
-    <TableRow key={device.device_id} onClick={onClick}>
-      <TableCell className='seam-image-cell'>
+    <TableRow onClick={onClick}>
+      <TableCell className={classNames('seam-image-cell', opacityClass)}>
         <DeviceImage device={device} />
       </TableCell>
       <TableCell className='seam-body-cell'>
-        <Title className='seam-truncated-text'>{device.properties.name}</Title>
+        <Title className={classNames('seam-truncated-text', opacityClass)}>
+          {device.properties.name}
+        </Title>
         <div className='seam-bottom'>
-          <span className='seam-device-model'>
+          <span className={classNames('seam-device-model', opacityClass)}>
             {device.properties.model.display_name}
           </span>
-          <div className='seam-device-statuses'>
-            <OnlineStatus device={device} />
-            <BatteryStatus device={device} />
-            <LockStatus device={device} />
-          </div>
+          <DeviceStatuses device={device} />
         </div>
       </TableCell>
     </TableRow>
   )
 }
+
+interface DeviceStatusesProps {
+  device: UseDevicesData[number]
+}
+
+function DeviceStatuses({ device }: DeviceStatusesProps): JSX.Element | null {
+  if (isAccountOffline(device) || isDeviceOffline(device)) {
+    return (
+      <div className='seam-device-statuses'>
+        <OnlineStatus device={device} />
+      </div>
+    )
+  }
+  return (
+    <div className='seam-device-statuses'>
+      <OnlineStatus device={device} />
+      <BatteryStatus device={device} />
+      <LockStatus device={device} />
+    </div>
+  )
+}
+
+const isAccountOffline = (device: UseDevicesData[number]): boolean => {
+  return (
+    device.errors.filter((error) => error.error_code === 'account_disconnected')
+      .length > 0
+  )
+}
+
+const isDeviceOffline = (device: UseDevicesData[number]): boolean => {
+  return (
+    device.errors.filter((error) => error.error_code === 'device_disconnected')
+      .length > 0
+  )
+}

package/src/lib/seam/components/DeviceTable/DeviceTable.element.ts

@@ -7,6 +7,7 @@ export const name = 'seam-device-table'
 export const props: ElementProps<DeviceTableProps> = {
   deviceIds: 'json',
   connectedAccountIds: 'json',
+  disableLockUnlock: 'boolean',
   deviceFilter: 'function',
   deviceComparator: 'function',
   onDeviceClick: 'function',

package/src/lib/seam/components/DeviceTable/DeviceTable.tsx

@@ -5,6 +5,7 @@ import { isLockDevice } from 'seamapi'
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import {
+  type AccountFilter,
   type DeviceFilter,
   DeviceHealthBar,
 } from 'lib/seam/components/DeviceTable/DeviceHealthBar.js'
@@ -26,11 +27,11 @@ type Device = UseDevicesData[number]
 export interface DeviceTableProps {
   deviceIds?: string[]
   connectedAccountIds?: string[]
+  disableLockUnlock?: boolean
   deviceFilter?: (device: Device, searchInputValue: string) => boolean
   deviceComparator?: (deviceA: Device, deviceB: Device) => number
   onDeviceClick?: (deviceId: string) => void
   preventDefaultOnDeviceClick?: boolean
-  disableLockUnlock?: boolean
   onBack?: () => void
   className?: string
 }
@@ -47,9 +48,9 @@ const defaultDeviceFilter = (
 export function DeviceTable({
   deviceIds,
   connectedAccountIds,
+  disableLockUnlock = false,
   onDeviceClick = () => {},
   preventDefaultOnDeviceClick = false,
-  disableLockUnlock = false,
   onBack,
   deviceFilter = defaultDeviceFilter,
   deviceComparator = compareByCreatedAtDesc,
@@ -127,7 +128,9 @@ function Content(props: {
   onDeviceClick: (deviceId: string) => void
 }): JSX.Element {
   const { devices, onDeviceClick } = props
-  const [filter, setFilter] = useState<DeviceFilter | null>(null)
+  const [filter, setFilter] = useState<AccountFilter | DeviceFilter | null>(
+    null
+  )
 
   if (devices.length === 0) {
     return <EmptyPlaceholder>{t.noDevicesMessage}</EmptyPlaceholder>
@@ -138,8 +141,17 @@ function Content(props: {
       return true
     }
 
+    if (filter === 'account_issues') {
+      return (
+        device.errors.filter((error) => 'is_connected_account_error' in error)
+          .length > 0
+      )
+    }
+
     if (filter === 'device_issues') {
-      return device.errors.length > 0
+      return (
+        device.errors.filter((error) => 'is_device_error' in error).length > 0
+      )
     }
 
     return true

package/src/lib/seam/components/SupportedDeviceTable/HiddenDevicesOverlay.tsx

@@ -0,0 +1,11 @@
+interface HiddenDevicesOverlayProps {
+  visible: boolean
+}
+
+export function HiddenDevicesOverlay({ visible }: HiddenDevicesOverlayProps) {
+  if (!visible) {
+    return null
+  }
+
+  return <div className='hidden-devices-overlay' />
+}

package/src/lib/seam/components/SupportedDeviceTable/ShowAllDevicesButton.tsx

@@ -0,0 +1,32 @@
+import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
+
+interface ShowAllDevicesButtonProps {
+  onClick: () => void
+  visible: boolean
+  expanded: boolean
+  totalDeviceCount: number
+}
+
+export function ShowAllDevicesButton({
+  onClick,
+  visible,
+  expanded,
+  totalDeviceCount,
+}: ShowAllDevicesButtonProps) {
+  if (!visible) {
+    return null
+  }
+
+  const label = expanded ? t.showLess : t.showAll(totalDeviceCount)
+
+  return (
+    <button className='show-all-devices-button' onClick={onClick}>
+      <ChevronRightIcon /> {label}
+    </button>
+  )
+}
+
+const t = {
+  showLess: 'Show less',
+  showAll: (count: number) => `See all ${count} devices`,
+}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceBrandSection.tsx

@@ -0,0 +1,96 @@
+import classNames from 'classnames'
+import type { DeviceModel } from 'seamapi'
+
+import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
+import { HiddenDevicesOverlay } from 'lib/seam/components/SupportedDeviceTable/HiddenDevicesOverlay.js'
+import { ShowAllDevicesButton } from 'lib/seam/components/SupportedDeviceTable/ShowAllDevicesButton.js'
+import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
+import { useDeviceProvider } from 'lib/seam/components/SupportedDeviceTable/use-device-provider.js'
+import { useToggle } from 'lib/ui/use-toggle.js'
+
+/**
+ * How many device models required before we collapse
+ * the list, and require the user to click to
+ * view all.
+ */
+const maxDevicesBeforeCollapsing = 3
+
+export interface SupportedDeviceBrandSectionProps {
+  brand: string
+  deviceModels: DeviceModel[]
+}
+
+export function SupportedDeviceBrandSection({
+  brand,
+  deviceModels,
+}: SupportedDeviceBrandSectionProps): JSX.Element | null {
+  const deviceProvider = useDeviceProvider(brand)
+
+  const [expanded, toggleExpand] = useToggle()
+
+  const canExpand = deviceModels.length > maxDevicesBeforeCollapsing
+
+  const visibleDevices = () => {
+    if (!canExpand || expanded) {
+      return deviceModels
+    }
+
+    return deviceModels.filter(
+      (_deviceModel, index) => index < maxDevicesBeforeCollapsing
+    )
+  }
+
+  const handleHeaderClick = () => {
+    if (!canExpand) {
+      return
+    }
+
+    toggleExpand()
+  }
+
+  return (
+    <div
+      className={classNames('seam-brand-section', {
+        'can-expand': canExpand,
+        expanded,
+      })}
+    >
+      <div className='seam-header' onClick={handleHeaderClick}>
+        <img
+          src={deviceProvider.image_url}
+          alt={brand}
+          className='seam-brand-image'
+        />
+        <h5 className='seam-brand-name'>
+          {deviceProvider.display_name} {t.devices}
+        </h5>
+        {canExpand && <ChevronRightIcon className='chevron' />}
+      </div>
+      <div className='seam-supported-device-table-content'>
+        {visibleDevices().map((deviceModel, index) => (
+          <SupportedDeviceRow
+            key={[
+              deviceModel.main_category,
+              deviceModel.brand,
+              deviceModel.model_name,
+              deviceModel.manufacturer_model_id,
+              index,
+            ].join(':')}
+            deviceModel={deviceModel}
+          />
+        ))}
+      </div>
+      <ShowAllDevicesButton
+        visible={canExpand}
+        onClick={toggleExpand}
+        expanded={expanded}
+        totalDeviceCount={deviceModels.length}
+      />
+      <HiddenDevicesOverlay visible={canExpand && !expanded} />
+    </div>
+  )
+}
+
+const t = {
+  devices: 'Devices',
+}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -1,25 +1,33 @@
-import { SupportedDeviceHeader } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceHeader.js'
-import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
+import type { DeviceModel } from 'seamapi'
+
+import { SupportedDeviceBrandSection } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceBrandSection.js'
+import { SupportedDeviceFilterResultRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterResultRowProps.js'
 import {
   type DeviceModelFilters,
   useFilteredDeviceModels,
 } from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
+import type { UseDeviceModelsData } from 'lib/seam/device-models/use-device-models.js'
 import { Button } from 'lib/ui/Button.js'
 
 interface SupportedDeviceContentProps {
   filterValue: string
   resetFilterValue: () => void
   filters: DeviceModelFilters
+  brands: string[]
 }
 
 export function SupportedDeviceContent({
   resetFilterValue,
   filterValue,
   filters,
+  brands,
 }: SupportedDeviceContentProps): JSX.Element | null {
   const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels(
-    filterValue,
-    filters
+    {
+      filterValue,
+      filters,
+      brands,
+    }
   )
 
   if (isLoading) {
@@ -51,12 +59,29 @@ export function SupportedDeviceContent({
     return null
   }
 
-  return (
-    <table className='seam-supported-device-table-content'>
-      <SupportedDeviceHeader />
-      <tbody>
+  const isEmpty = deviceModels.length === 0
+  if (isEmpty) {
+    return (
+      <div className='seam-supported-device-table-content'>
+        <EmptyResult
+          filterValue={filterValue}
+          resetFilterValue={resetFilterValue}
+        />
+      </div>
+    )
+  }
+
+  // If there are no active filters or search, show all the rows without any brand sections.
+  const hasFilters =
+    filterValue.trim() !== '' ||
+    filters.supportedOnly ||
+    filters.category !== null ||
+    filters.brand !== null
+  if (hasFilters) {
+    return (
+      <div className='seam-supported-device-table-content'>
         {deviceModels.map((deviceModel, index) => (
-          <SupportedDeviceRow
+          <SupportedDeviceFilterResultRow
             key={[
               deviceModel.main_category,
               deviceModel.brand,
@@ -67,14 +92,22 @@ export function SupportedDeviceContent({
             deviceModel={deviceModel}
           />
         ))}
-        {deviceModels.length === 0 && (
-          <EmptyResult
-            filterValue={filterValue}
-            resetFilterValue={resetFilterValue}
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {Object.entries(groupDeviceModelsByBrand(deviceModels)).map(
+        ([brand, models]) => (
+          <SupportedDeviceBrandSection
+            key={brand}
+            brand={brand}
+            deviceModels={models}
           />
-        )}
-      </tbody>
-    </table>
+        )
+      )}
+    </>
   )
 }
 
@@ -110,6 +143,19 @@ function EmptyResult({
   )
 }
 
+function groupDeviceModelsByBrand(
+  deviceModels: UseDeviceModelsData
+): Record<string, DeviceModel[]> {
+  const result: Record<string, DeviceModel[]> = {}
+
+  for (const model of deviceModels) {
+    const { brand } = model
+    const list = result[brand] ?? []
+    result[brand] = [...list, model]
+  }
+  return result
+}
+
 const t = {
   loading: 'Loading device models...',
   retry: 'Retry',

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContentRows.tsx

@@ -0,0 +1,27 @@
+import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
+import type { UseDeviceModelsData } from 'lib/seam/device-models/use-device-models.js'
+
+interface SupportedDeviceContentRowsProps {
+  deviceModels: UseDeviceModelsData
+}
+
+export function SupportedDeviceContentRows({
+  deviceModels,
+}: SupportedDeviceContentRowsProps): JSX.Element | null {
+  return (
+    <div className='seam-supported-device-table-content'>
+      {deviceModels.map((deviceModel, index) => (
+        <SupportedDeviceRow
+          key={[
+            deviceModel.main_category,
+            deviceModel.brand,
+            deviceModel.model_name,
+            deviceModel.manufacturer_model_id,
+            index,
+          ].join(':')}
+          deviceModel={deviceModel}
+        />
+      ))}
+    </div>
+  )
+}