Weird stopping point but whatever

src/components/layout/status/list/index.tsx

@@ -18,6 +18,7 @@ import {
 import { toast } from 'sonner';
 import { ccn, formatTime, formatDate } from '@/lib/utils';
 import { Clock, Calendar, CheckCircle2 } from 'lucide-react';
+import { StatusHistory } from '@/components/layout/status';
 
 type StatusListProps = {
   preloadedUser: Preloaded<typeof api.auth.getUser>;
@@ -36,6 +37,7 @@ export const StatusList = ({
   const [selectAll, setSelectAll] = useState(false);
   const [statusInput, setStatusInput] = useState('');
   const [updatingStatus, setUpdatingStatus] = useState(false);
+  const [selectedHistoryUserId, setSelectedHistoryUserId] = useState<Id<'users'>>();
 
   const bulkCreate = useMutation(api.statuses.bulkCreate);
 
@@ -155,19 +157,25 @@ export const StatusList = ({
               )}
               <CardContent className='p-0'>
                 <div className='flex items-start gap-3'>
-                  <div
-                    data-profile-trigger
-                    className='flex-shrink-0 cursor-pointer
-                      hover:opacity-80 transition-opacity'
-                    // TODO: open history drawer
-                  >
-                    <BasedAvatar
-                      // Swap to a URL once you resolve storage URLs
-                      src={u.imageUrl}
-                      fullName={u.name ?? 'Technician'}
-                      className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
-                    />
-                  </div>
+                  <Drawer>
+                    <DrawerTrigger asChild>
+                      <div
+                        data-profile-trigger
+                        className='flex-shrink-0 cursor-pointer
+                        hover:opacity-80 transition-opacity'
+                        onClick={() => setSelectedHistoryUserId(u.id)}
+                      >
+                        <BasedAvatar
+                          src={u.imageUrl}
+                          fullName={u.name ?? 'Technician'}
+                          className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
+                        />
+                      </div>
+                    </DrawerTrigger>
+                    {selectedHistoryUserId === u.id && (
+                      <StatusHistory userId={u.id} />
+                    )}
+                  </Drawer>
 
                   <div className='flex-1'>
                     <div className='flex items-start justify-between mb-2'>