✨ Plex and Jellyfin widget (#713)

src/widgets/media-server/TableRow.tsx

@@ -0,0 +1,73 @@
+import {
+  Avatar,
+  Card,
+  Collapse,
+  createStyles,
+  Flex,
+  Grid,
+  Group,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useState } from 'react';
+import { AppAvatar } from '../../components/AppAvatar';
+import { GenericSessionInfo } from '../../types/api/media-server/session-info';
+import { AppType } from '../../types/app';
+import { DetailCollapseable } from './DetailCollapseable';
+import { NowPlayingDisplay } from './NowPlayingDisplay';
+
+interface TableRowProps {
+  session: GenericSessionInfo;
+  app: AppType | undefined;
+}
+
+export const TableRow = ({ session, app }: TableRowProps) => {
+  const [collapseOpen, setCollapseOpen] = useState(false);
+  const hasUserThumb = session.userProfilePicture !== undefined;
+  const { classes } = useStyles();
+  return (
+    <>
+      <tr className={classes.dataRow} onClick={() => setCollapseOpen(!collapseOpen)}>
+        <td>
+          <Flex wrap="nowrap" gap="xs">
+            {app?.appearance.iconUrl && <AppAvatar iconUrl={app.appearance.iconUrl} />}
+            <Text lineClamp={1}>{session.sessionName}</Text>
+          </Flex>
+        </td>
+        <td>
+          <Flex wrap="nowrap" gap="sm">
+            {hasUserThumb ? (
+              <Avatar src={session.userProfilePicture} size="sm" />
+            ) : (
+              <Avatar src={null} alt={session.username} size="sm">
+                {session.username?.at(0)?.toUpperCase()}
+              </Avatar>
+            )}
+            <Text>{session.username}</Text>
+          </Flex>
+        </td>
+        <td>
+          <NowPlayingDisplay session={session} />
+        </td>
+      </tr>
+      <tr>
+        <td className={classes.collapseTableDataCell} colSpan={3}>
+          <Collapse in={collapseOpen} w="100%">
+            <DetailCollapseable session={session} />
+          </Collapse>
+        </td>
+      </tr>
+    </>
+  );
+};
+
+const useStyles = createStyles(() => ({
+  dataRow: {
+    cursor: 'pointer',
+  },
+  collapseTableDataCell: {
+    border: 'none !important',
+    padding: '0 !important',
+  },
+}));