Refactor devices page components

src/apps/dashboard/features/devices/components/DeviceNameCell.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+import { DeviceInfoCell } from 'apps/dashboard/features/devices/types/deviceInfoCell';
+import { getDeviceIcon } from 'utils/image';
+
+const DeviceNameCell: FC<DeviceInfoCell> = ({ row, renderedCellValue }) => (
+    <>
+        <img
+            alt={row.original.AppName || undefined}
+            src={getDeviceIcon(row.original)}
+            style={{
+                display: 'inline-block',
+                maxWidth: '1.5em',
+                maxHeight: '1.5em',
+                marginRight: '1rem'
+            }}
+        />
+        {renderedCellValue}
+    </>
+);
+
+export default DeviceNameCell;

src/apps/dashboard/features/devices/types/deviceInfoCell.ts

@@ -0,0 +1,7 @@
+import type { DeviceInfoDto } from '@jellyfin/sdk/lib/generated-client/models/device-info-dto';
+import type { MRT_Row } from 'material-react-table';
+
+export interface DeviceInfoCell {
+    renderedCellValue: React.ReactNode
+    row: MRT_Row<DeviceInfoDto>
+}