feat: improve episodes table appearance (#183)

Author: trybick

front/src/features/show/EpisodesTable.tsx

@@ -1,15 +1,18 @@
-import { Table, Text } from '@chakra-ui/react';
+import { Badge, Flex, Icon, Table, Text } from '@chakra-ui/react';
 import {
   ColumnDef,
   flexRender,
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table';
+import { FaStar } from 'react-icons/fa';
 
 import { useIsMobile } from '~/hooks/useIsMobile';
 import { EpisodeForSeason } from '~/store/tv/types/transformed';
 import dayjs from '~/utils/dayjs';
 
+import TableHeader from './TableHeader';
+
 type Props = {
   episodes: EpisodeForSeason[];
 };
@@ -22,36 +25,71 @@ const EpisodesTable = ({ episodes }: Props) => {
       id: 'episodeNumber',
       accessorKey: 'episodeNumber',
       size: 40,
-      header: () => <Text color="fg.muted">#</Text>,
+      header: () => <TableHeader>Number</TableHeader>,
+      cell: ({ row }) => (
+        <Text color="fg.muted" fontSize="sm">
+          {row.original.episodeNumber}
+        </Text>
+      ),
     },
     {
       id: 'name',
       accessorKey: 'name',
       size: 100,
-      header: () => <Text color="fg.muted">Title</Text>,
+      header: () => <TableHeader>Title</TableHeader>,
+      cell: ({ row }) => (
+        <Text fontWeight="semibold" fontSize="sm" color="fg">
+          {row.original.name}
+        </Text>
+      ),
     },
     {
       id: 'airDate',
       size: 80,
       accessorFn: row =>
-        row.airDate && dayjs(row.airDate).format('MMMM D, YYYY'),
-      header: () => <Text color="fg.muted">Air Date</Text>,
+        row.airDate && dayjs(row.airDate).format('MMM D, YYYY'),
+      header: () => <TableHeader>Air Date</TableHeader>,
+      cell: ({ getValue }) => (
+        <Text fontSize="sm" whiteSpace="nowrap" color="fg.muted">
+          {getValue() as string}
+        </Text>
+      ),
     },
     {
       id: 'voteAverage',
       size: 50,
-      meta: {
-        style: { textAlign: 'center' },
+      header: () => <TableHeader textAlign="center">Rating</TableHeader>,
+      cell: ({ row }) => {
+        const ratingStr = row.original.voteAverage;
+        if (!ratingStr || ratingStr === '-') {
+          return (
+            <Text color="fg.muted" textAlign="center">
+              -
+            </Text>
+          );
+        }
+        const rating = parseFloat(ratingStr);
+
+        return (
+          <Flex justify="center">
+            <Badge
+              variant="subtle"
+              colorPalette={
+                rating >= 8 ? 'green' : rating >= 6.5 ? 'yellow' : 'orange'
+              }
+              size="sm"
+              borderRadius="full"
+              px="2"
+              display="flex"
+              alignItems="center"
+              gap="1"
+            >
+              {rating.toFixed(1)}
+              <Icon as={FaStar} boxSize="2" />
+            </Badge>
+          </Flex>
+        );
       },
-      accessorFn: row => row.voteAverage,
-      header: () => (
-        <Text color="fg.muted" textAlign="center">
-          Rating
-        </Text>
-      ),
-      cell: ({ row }) => (
-        <Text textAlign="center">{row.original.voteAverage}</Text>
-      ),
     },
   ];
 
@@ -67,12 +105,16 @@ const EpisodesTable = ({ episodes }: Props) => {
   });
 
   return (
-    <Table.Root size="sm">
+    <Table.Root size={isMobile ? 'sm' : 'md'} variant="outline" interactive>
       <Table.Header>
         {getHeaderGroups().map(headerGroup => (
-          <Table.Row key={headerGroup.id}>
+          <Table.Row key={headerGroup.id} borderBottomWidth="2px">
             {headerGroup.headers.map(header => (
-              <Table.ColumnHeader key={header.id}>
+              <Table.ColumnHeader
+                key={header.id}
+                py="4"
+                px={isMobile ? '2' : '4'}
+              >
                 {header.isPlaceholder
                   ? null
                   : flexRender(
@@ -87,9 +129,15 @@ const EpisodesTable = ({ episodes }: Props) => {
 
       <Table.Body>
         {getRowModel().rows.map(row => (
-          <Table.Row key={row.id}>
+          <Table.Row
+            key={row.id}
+            _hover={{ bg: 'whiteAlpha.50' }}
+            transition="background 0.2s"
+            borderBottomWidth="1px"
+            borderColor="whiteAlpha.50"
+          >
             {row.getVisibleCells().map(cell => (
-              <Table.Cell key={cell.id}>
+              <Table.Cell key={cell.id} py="4" px={isMobile ? '2' : '4'}>
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </Table.Cell>
             ))}

front/src/features/show/SeasonAccordionGroup.tsx

@@ -22,27 +22,39 @@ const SeasonAccordionGroup = () => {
   const createAccordionItems = () =>
     seasonsWithEpisodes?.map(
       ({ airDate, episodes, id, isSpecialsSeason, nameForDisplay }) => (
-        <Accordion.Item key={id} value={id.toString()}>
+        <Accordion.Item
+          key={id}
+          value={id.toString()}
+          borderBottomWidth="1px"
+          borderColor="whiteAlpha.100"
+          _last={{ borderBottomWidth: 0 }}
+        >
           <Accordion.ItemTrigger
             cursor="pointer"
             px={isMobile ? '8px' : '16px'}
+            py={4}
+            _hover={{ bg: 'whiteAlpha.50' }}
+            _open={{ bg: 'whiteAlpha.50' }}
+            transition="background 0.2s"
           >
             <Box flex="1" textAlign="left">
-              <Text display="inline" fontSize="lg" fontWeight="600">
+              <Text display="inline" fontSize="lg" fontWeight="600" color="fg">
                 {nameForDisplay}
               </Text>{' '}
               {!isSpecialsSeason && airDate && (
-                <Text display="inline" fontSize="md">
+                <Text display="inline" fontSize="md" color="fg.muted" ml={0.5}>
                   ({dayjs(airDate).year()})
                 </Text>
               )}
             </Box>
             <Box mr="20px" textAlign="right">
-              <Text fontSize="md">{episodes.length} Episodes</Text>
+              <Text fontSize="sm" color="fg.muted">
+                {episodes.length} Episodes
+              </Text>
             </Box>
             <Accordion.ItemIndicator />
           </Accordion.ItemTrigger>
-          <Accordion.ItemContent p={isMobile ? '10px 0 5px' : '10px'}>
+          <Accordion.ItemContent>
             <EpisodesTable episodes={episodes} />
           </Accordion.ItemContent>
         </Accordion.Item>

front/src/features/show/TableHeader.tsx

@@ -0,0 +1,19 @@
+import { Text, TextProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+const TableHeader = ({
+  children,
+  ...textProps
+}: { children: ReactNode } & TextProps) => (
+  <Text
+    color="fg.muted"
+    fontSize="xs"
+    fontWeight="bold"
+    textTransform="uppercase"
+    {...textProps}
+  >
+    {children}
+  </Text>
+);
+
+export default TableHeader;