add ticket header, selected ticket style

src/pages/dashboard/Content/Support/TicketList/TicketItem.tsx

@@ -1,8 +1,8 @@
-import CircleIcon from '@mui/icons-material/Circle';
-import { Box, Card, CardActionArea, CardContent, useTheme } from "@mui/material";
-import { green } from '@mui/material/colors';
+import CircleIcon from "@mui/icons-material/Circle";
+import { Box, Card, CardActionArea, CardContent, CardHeader, Divider, Typography, useTheme } from "@mui/material";
+import { green } from "@mui/material/colors";
 import { Ticket } from "@root/model/ticket";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from "react-router-dom";
 
 
 const flexCenterSx = {
@@ -14,13 +14,16 @@ const flexCenterSx = {
 };
 
 interface Props {
-    isUnread?: boolean;
     ticket: Ticket;
 }
 
-export default function TicketItem({ isUnread, ticket }: Props) {
+export default function TicketItem({ ticket }: Props) {
     const theme = useTheme();
     const navigate = useNavigate();
+    const ticketId = useParams().ticketId;
+
+    const isUnread = ticket.user === ticket.top_message.user_id;
+    const isSelected = ticket.id === ticketId;
 
     const unreadSx = {
         border: "1px solid",
@@ -28,6 +31,10 @@ export default function TicketItem({ isUnread, ticket }: Props) {
         backgroundColor: theme.palette.goldenMedium.main
     };
 
+    const selectedSx = {
+        border: `2px solid ${theme.palette.secondary.main}`,
+    };
+
     function handleCardClick() {
         navigate(`/support/${ticket.id}`);
     }
@@ -37,18 +44,35 @@ export default function TicketItem({ isUnread, ticket }: Props) {
             minHeight: "70px",
             backgroundColor: "transparent",
             color: "white",
+            ...(isUnread && unreadSx),
+            ...(isSelected && selectedSx),
         }}>
             <CardActionArea onClick={handleCardClick}>
+                <CardHeader
+                    title={<Typography>{ticket.title}</Typography>}
+                    disableTypography
+                    sx={{
+                        textAlign: "center",
+                        p: "4px",
+                    }}
+                />
+                <Divider />
                 <CardContent sx={{
                     display: "flex",
                     justifyContent: "space-between",
                     backgroundColor: "transparent",
-                    ...(isUnread && unreadSx),
+                    p: 0,
                 }}>
                     <Box sx={flexCenterSx}>
                         {new Date(ticket.top_message.created_at).toLocaleDateString()}
                     </Box>
-                    <Box sx={flexCenterSx}>
+                    <Box sx={{
+                        ...flexCenterSx,
+                        overflow: "hidden",
+                        whiteSpace: "nowrap",
+                        display: "block",
+                        flexGrow: 1,
+                    }}>
                         {ticket.top_message.message}
                     </Box>
                     <Box sx={flexCenterSx}>

src/pages/dashboard/Content/Support/TicketList/TicketList.tsx

@@ -106,7 +106,7 @@ export default function TicketList({ fetchingStateRef, incrementCurrentPage }: P
                 }}
             >
                 {sortedTickets.map(ticket =>
-                    <TicketItem ticket={ticket} key={ticket.id} isUnread={ticket.user === ticket.top_message.user_id} />
+                    <TicketItem ticket={ticket} key={ticket.id} />
                 )}
             </Box>
         </Box>