Weird stopping point but whatever

src/app/(auth)/signin/page.tsx

@@ -24,7 +24,7 @@ import {
   TabsTrigger,
 } from '@/components/ui';
 import { toast } from 'sonner';
-import { PASSWORD_MIN, PASSWORD_MAX, PASSWORD_REGEX } from '~/convex/auth';
+import { PASSWORD_MIN, PASSWORD_MAX, PASSWORD_REGEX } from '@/lib/utils';
 
 const signInFormSchema = z.object({
   email: z.email({

src/components/layout/profile/reset-password.tsx

@@ -21,7 +21,7 @@ import {
   SubmitButton,
 } from '@/components/ui';
 import { toast } from 'sonner';
-import { PASSWORD_MIN, PASSWORD_MAX, PASSWORD_REGEX } from '~/convex/auth';
+import { PASSWORD_MIN, PASSWORD_MAX, PASSWORD_REGEX } from '@/lib/utils';
 
 const formSchema = z
   .object({

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

@@ -29,15 +29,14 @@ import {
 import { toast } from 'sonner';
 
 type StatusHistoryProps = {
-  preloadedUser: Preloaded<typeof api.auth.getUser>;
+  userId?: Id<'users'>;
 };
 
 export const StatusHistory = ({
-  preloadedUser,
+  userId,
 }: StatusHistoryProps) => {
-  const user = usePreloadedQuery(preloadedUser);
 
   return (
-
+    <div/>
   );
 };

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'>

src/lib/utils.ts

@@ -19,6 +19,10 @@ export const ccn = ({
   return twMerge(className, context ? on : off);
 };
 
+export const PASSWORD_MIN = 8;
+export const PASSWORD_MAX = 100;
+export const PASSWORD_REGEX = /^(?=.{8,100}$)(?!.*\s)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\p{P}\p{S}]).*$/u;
+
 type Timestamp = number | string | Date;
 
 const toDate = (ts: Timestamp): Date | null => {