Almost done with rewrite

src/components/status/List.tsx

@@ -18,7 +18,7 @@ import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { RefreshCw, Clock, Wifi, WifiOff } from 'lucide-react';
+import { RefreshCw, Clock, Wifi, WifiOff, Calendar } from 'lucide-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { QueryErrorCodes } from '@/components/context';
 import { createClient } from '@/utils/supabase';
@@ -299,9 +299,14 @@ export const StatusList = ({ initialStatuses = [] }: ListProps) => {
       hour: 'numeric',
       minute: 'numeric',
     });
+    return `${time}`;
+  };
+
+  const formatDate = (timestamp: string) => {
+    const date = new Date(timestamp);
     const day = date.getDate();
     const month = date.toLocaleString('default', { month: 'long' });
-    return `${time} - ${month} ${day}`;
+    return `${month} ${day}`;
   };
 
   if (loading) {
@@ -326,27 +331,36 @@ export const StatusList = ({ initialStatuses = [] }: ListProps) => {
 
   const containerClassName = makeConditionalClassName({
     context: tvMode,
-    defaultClassName: 'mx-auto space-y-4',
+    defaultClassName: 'flex flex-col mx-auto space-y-4 items-center',
     on: 'lg:w-11/12 w-full mt-15',
-    off: 'w-5/6',
+    off: 'sm:w-5/6 md:3/4 lg:w-1/2',
   });
 
   const headerClassName = makeConditionalClassName({
+    context: tvMode,
+    defaultClassName: 'w-full',
+    on: 'hidden',
+    off: 'flex mb-4 justify-between',
+  });
+
+  const cardContainerClassName = makeConditionalClassName({
     context: tvMode,
     defaultClassName: '',
-    on: 'none',
-    off: 'flex items-center justify-between mb-4',
-  })
+    on: '',
+    off: 'space-y-3 items-center justify-center w-full',
+  });
 
   const cardClassName = makeConditionalClassName({
     context: tvMode,
-    defaultClassName: 'transition-all duration-300 hover:shadow-md',
+    defaultClassName:
+      'transition-all duration-300 hover:shadow-md hover:bg-muted/50 cursor-pointer',
     on: 'lg:text-4xl',
-    off: 'lg:text-base',
+    off: 'lg:text-base lg:w-full',
   });
 
   return (
     <div className={containerClassName}>
+
       <div className={headerClassName}>
         <div className='flex items-center gap-2'>
           <Checkbox
@@ -357,12 +371,112 @@ export const StatusList = ({ initialStatuses = [] }: ListProps) => {
           <label htmlFor='select-all' className='text-sm font-medium'>
             Select All
           </label>
+        </div>
+        <div className='flex items-center gap-2'>
           <Badge variant='outline' className='flex items-center gap-2'>
             {getConnectionIcon()}
             <span className='text-sm'>{getConnectionText()}</span>
           </Badge>
         </div>
       </div>
+
+      <div className={cardContainerClassName}>
+        {usersWithStatuses.map((userWithStatus) => {
+          const isSelected = selectedUsers.some((u) => u.user.id === userWithStatus.user.id);
+          const isNewStatus = newStatuses.has(userWithStatus);
+          const isUpdatedByOther = userWithStatus.updated_by &&
+            userWithStatus.updated_by.id !== userWithStatus.user.id;
+          return (
+            <Card
+              key={userWithStatus.user.id}
+              className={`
+                ${cardClassName}
+                ${isSelected ? 'ring2 ring-primary' : ''}
+                ${isNewStatus ? 'animate-pulse bg-primary/5 border-primary/20' : ''}
+              `}
+            >
+              <CardHeader className='pb-3'>
+                <div className='flex items-center justify-between'>
+                  <div className='flex items-center gap-3'>
+                    {!tvMode && (
+                      <Checkbox
+                        checked={isSelected}
+                        onCheckedChange={() => handleCheckboxChange(userWithStatus)}
+                        onClick={(e) => e.stopPropagation()}
+                      />
+                    )}
+                    <BasedAvatar
+                      src={userWithStatus.user.avatar_url}
+                      fullName={userWithStatus.user.full_name}
+                      className={tvMode ? 'w-24 h-24' : 'w-16 h-16'}
+                    />
+                    <div className='my-auto'>
+                      <h3 className={`font-semibold ${tvMode ? 'text-5xl' : 'text-2xl'}`}>
+                        {userWithStatus.user.full_name}
+                      </h3>
+                      {isUpdatedByOther && (
+                        <div className='flex items-center gap-1 text-muted-foreground'>
+                          <BasedAvatar
+                            src={userWithStatus.updated_by?.avatar_url}
+                            fullName={userWithStatus.updated_by?.full_name}
+                            className='w-5 h-5'
+                          />
+                          <span className={`${tvMode ? 'text-3xl' : 'text-sm'}`}>
+                            Updated by {userWithStatus.updated_by?.full_name}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className='my-auto'>
+                    <div className='flex items-center gap-2 text-muted-foreground'>
+                      <Clock className={`${tvMode ? 'w-8 h-8' : 'w-6 h-6'}`} />
+                      <span className={`${tvMode ? 'text-3xl' : 'text-xl'}`}>
+                        {formatTime(userWithStatus.created_at)}
+                      </span>
+                    </div>
+                    <div className='flex items-center gap-2 text-muted-foreground'>
+                      <Calendar className={`${tvMode ? 'w-8 h-8' : 'w-6 h-6'}`} />
+                      <span className={`${tvMode ? 'text-3xl' : 'text-xl'}`}>
+                        {formatDate(userWithStatus.created_at)}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </CardHeader>
+
+              <CardContent className='pt-0'>
+                <Drawer>
+                  <DrawerTrigger asChild>
+                    <div
+                      className={`
+                        p-4 rounded-lg bg-muted/30 hover:bg-muted/50
+                        transition-colors cursor-pointer text-left
+                        ${tvMode ? 'text-4xl' : 'text-xl'}
+                      `}
+                      onClick={() => setSelectedHistoryUser(userWithStatus.user)}
+                    >
+                      <p className='font-medium'>{userWithStatus.status}</p>
+                    </div>
+                  </DrawerTrigger>
+                    {selectedHistoryUser === userWithStatus.user && (
+                      <HistoryDrawer user={selectedHistoryUser} />
+                    )}
+                </Drawer>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {usersWithStatuses.length === 0 && (
+        <Card className='p-8 text-center'>
+          <p className={`text-muted-foreground ${tvMode ? 'text-4xl' : 'text-lg'}`}>
+            No status updates have been made in the past day.
+          </p>
+        </Card>
+      )}
+
     </div>
   );