Make mobile better

src/components/layout/header/index.tsx

@@ -48,10 +48,10 @@ const Header = (headerProps: ComponentProps<'header'>) => {
               alt='Tech Tracker Logo'
               width={100}
               height={100}
-              className='max-w-[40px] md:max-w-[120px]'
+              className='w-10 md:w-[120px]'
             />
             <h1
-              className='title-text text-sm md:text-4xl lg:text-8xl
+              className='title-text text-base md:text-4xl lg:text-8xl
               bg-gradient-to-r from-[#281A65] via-[#363354] to-accent-foreground
               dark:from-[#bec8e6] dark:via-[#F0EEE4] dark:to-[#FFF8E7]
               font-bold pl-2 md:pl-12 text-transparent bg-clip-text'

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

@@ -18,9 +18,9 @@ import {
 } from '@/components/ui';
 
 const PAGE_SIZE = 25;
+
 export const HistoryTable = () => {
   const [pageIndex, setPageIndex] = useState(0);
-  // cursor for page N is the continueCursor returned from page N-1
   const [cursors, setCursors] = useState<(string | null)[]>([null]);
 
   const args = useMemo(() => {
@@ -33,17 +33,16 @@ export const HistoryTable = () => {
   }, [cursors, pageIndex]);
 
   const data = useQuery(api.statuses.listHistory, args);
-
-  // Track loading
   const isLoading = data === undefined;
 
-  // When a page loads, cache its "next" cursor if we don't have it yet
   useEffect(() => {
     if (!data) return;
     const nextIndex = pageIndex + 1;
     setCursors((prev) => {
       const copy = [...prev];
-      if (copy[nextIndex] === undefined) copy[nextIndex] = data.continueCursor;
+      if (copy[nextIndex] === undefined) {
+        copy[nextIndex] = data.continueCursor;
+      }
       return copy;
     });
   }, [data, pageIndex]);
@@ -62,13 +61,84 @@ export const HistoryTable = () => {
   };
 
   const rows = data?.page ?? [];
+
   return (
-    <div className='w-full'>
+    <div className='w-full px-4 sm:px-6'>
-      <div className='px-4'>
+      {/* Mobile: card list */}
-        <ScrollArea className='h-96 w-full px-6'>
+      <div className='md:hidden'>
+        <ScrollArea className='max-h-[70vh] w-full'>
           {isLoading ? (
             <div className='flex justify-center items-center h-32'>
-              <div className='animate-spin rounded-full h-8 w-8 border-b-2 border-primary' />
+              <div
+                className='animate-spin rounded-full h-8 w-8
+                border-b-2 border-primary'
+              />
+            </div>
+          ) : rows.length === 0 ? (
+            <div className='flex justify-center items-center h-32'>
+              <p className='text-muted-foreground'>No history found</p>
+            </div>
+          ) : (
+            <div className='space-y-2 pb-2'>
+              {rows.map((r, idx) => {
+                const key = `${r.status?.id ?? 'no-status'}-${idx}`;
+                const name = r.user.name ?? 'Technician';
+                const msg = r.status?.message ?? 'No status';
+                const updatedBy = r.status?.updatedBy?.name ?? null;
+                const stamp = r.status
+                  ? `${formatTime(r.status.updatedAt)} · ${formatDate(
+                      r.status.updatedAt,
+                    )}`
+                  : '--:-- · --/--';
+
+                return (
+                  <div key={key} className='rounded-lg border p-3'>
+                    <div className='flex items-start justify-between'>
+                      <div className='min-w-0'>
+                        <div className='font-medium truncate'>{name}</div>
+                        <div
+                          className='text-sm text-muted-foreground
+                            mt-0.5 line-clamp-2 break-words'
+                          title={msg}
+                        >
+                          {msg}
+                        </div>
+                      </div>
+                      {updatedBy && (
+                        <span
+                          className='ml-3 shrink-0 rounded
+                            bg-muted px-2 py-0.5 text-xs
+                            text-foreground'
+                          title={`Updated by ${updatedBy}`}
+                        >
+                          {updatedBy}
+                        </span>
+                      )}
+                    </div>
+
+                    <div
+                      className='mt-2 flex items-center gap-2
+                        text-xs text-muted-foreground'
+                    >
+                      <span>{stamp}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </ScrollArea>
+      </div>
+
+      {/* Desktop: original table */}
+      <div className='hidden md:block'>
+        <ScrollArea className='h-[600px] w-full px-4'>
+          {isLoading ? (
+            <div className='flex justify-center items-center h-32'>
+              <div
+                className='animate-spin rounded-full h-8 w-8
+                border-b-2 border-primary'
+              />
             </div>
           ) : rows.length === 0 ? (
             <div className='flex justify-center items-center h-32'>
@@ -115,6 +185,8 @@ export const HistoryTable = () => {
         </ScrollArea>
       </div>
 
+      {/* Pagination */}
+      <div className='mt-3 sm:mt-4'>
         <Pagination>
           <PaginationContent>
             <PaginationPrevious
@@ -126,7 +198,10 @@ export const HistoryTable = () => {
               aria-disabled={!canPrev}
               className={!canPrev ? 'pointer-events-none opacity-50' : ''}
             />
-          <div className='flex items-center gap-2 text-sm text-muted-foreground'>
+            <div
+              className='flex items-center gap-2 text-sm
+                text-muted-foreground'
+            >
               <span>Page</span>
               <span className='font-bold text-foreground'>{pageIndex + 1}</span>
             </div>
@@ -142,5 +217,6 @@ export const HistoryTable = () => {
           </PaginationContent>
         </Pagination>
       </div>
+    </div>
   );
 };

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

@@ -44,8 +44,8 @@ export const StatusList = ({
 }: StatusListProps) => {
   const user = usePreloadedQuery(preloadedUser);
   const statuses = usePreloadedQuery(preloadedStatuses);
-
   const { tvMode } = useTVMode();
+
   const [selectedUserIds, setSelectedUserIds] = useState<Id<'users'>[]>([]);
   const [selectAll, setSelectAll] = useState(false);
   const [statusInput, setStatusInput] = useState('');
@@ -59,15 +59,18 @@ export const StatusList = ({
     const newAnimatingIds = new Set<string>();
     statuses.forEach((curr) => {
       const previous = previousStatuses.find((p) => p.user.id === curr.user.id);
-      if (previous?.status?.updatedAt !== curr.status?.updatedAt)
+      if (previous?.status?.updatedAt !== curr.status?.updatedAt) {
         newAnimatingIds.add(curr.user.id);
+      }
     });
     if (newAnimatingIds.size > 0) {
       setAnimatingIds(newAnimatingIds);
       setTimeout(() => setAnimatingIds(new Set()), 800);
     }
     setPreviousStatuses(
-      statuses.sort(
+      statuses
+        .slice()
+        .sort(
           (a, b) => (b.status?.updatedAt ?? 0) - (a.status?.updatedAt ?? 0),
         ),
     );
@@ -91,11 +94,14 @@ export const StatusList = ({
     const message = statusInput.trim();
     setUpdatingStatus(true);
     try {
-      if (message.length < 3 || message.length > 80)
+      if (message.length < 3 || message.length > 80) {
         throw new Error('Status must be between 3 & 80 characters');
-      if (selectedUserIds.length === 0 && user?.id)
+      }
+      if (selectedUserIds.length === 0 && user?.id) {
         await bulkCreate({ message, userIds: [user.id] });
-      else await bulkCreate({ message, userIds: selectedUserIds });
+      } else {
+        await bulkCreate({ message, userIds: selectedUserIds });
+      }
       toast.success('Status updated.');
       setSelectedUserIds([]);
       setSelectAll(false);
@@ -118,14 +124,14 @@ export const StatusList = ({
 
   const containerCn = ccn({
     context: tvMode,
-    className: 'w-full max-w-4xl mx-auto',
+    className: 'max-w-4xl mx-auto',
-    on: 'px-12 max-w-3xl',
+    on: 'px-6',
-    off: 'px-6',
+    off: 'px-4 sm:px-6',
   });
 
   const tabsCn = ccn({
     context: tvMode,
-    className: 'w-full py-8',
+    className: 'w-full py-4 sm:py-8',
     on: 'hidden',
     off: '',
   });
@@ -134,31 +140,54 @@ export const StatusList = ({
     context: tvMode,
     className: 'w-full mb-2',
     on: 'hidden',
-    off: 'flex justify-end items-center',
+    off: 'hidden sm:flex justify-end items-center',
   });
 
   return (
     <div className={containerCn}>
       <Tabs defaultValue='status'>
         <TabsList className={tabsCn}>
-          <TabsTrigger value='status' className='py-8'>
+          <TabsTrigger value='status' className='py-3 sm:py-8'>
-            <div className='flex items-center gap-3'>
+            <div className='flex items-center gap-2 sm:gap-3'>
-              <Activity className='w-6 h-6 text-primary' />
+              <Activity className='text-primary w-4 h-4 sm:w-5 sm:h-5' />
-              <h1 className='text-2xl font-bold'>Team Status</h1>
+              <h1 className='text-base sm:text-2xl font-bold'>Team Status</h1>
             </div>
           </TabsTrigger>
-          <TabsTrigger value='history' className='py-8'>
+          <TabsTrigger value='history' className='py-3 sm:py-8'>
-            <div className='flex items-center gap-3'>
+            <div className='flex items-center gap-2 sm:gap-3'>
-              <History className='w-6 h-6 text-primary' />
+              <History className='text-primary w-4 h-4 sm:w-5 sm:h-5' />
-              <h1 className='text-2xl font-bold'>Status History</h1>
+              <h1 className='text-base sm:text-2xl font-bold'>
+                Status History
+              </h1>
             </div>
           </TabsTrigger>
         </TabsList>
+
         <TabsContent value='status'>
-          <div className={headerCn}>
+          {/* Mobile toolbar */}
-            <div className='flex items-center gap-4'>
+          <div className='sm:hidden mb-3 flex items-center justify-between'>
             <div className='flex items-center gap-2 text-muted-foreground'>
               <Users className='w-4 h-4' />
+              <span className='text-sm'>{statuses.length} members</span>
+            </div>
+            <div className='flex items-center gap-2'>
+              <Button variant='outline' size='sm' onClick={handleSelectAll}>
+                {selectAll ? 'Clear' : 'Select all'}
+              </Button>
+              <Link
+                href='/table'
+                className='text-sm font-medium hover:underline'
+              >
+                Table
+              </Link>
+            </div>
+          </div>
+
+          {/* Desktop header */}
+          <div className={headerCn}>
+            <div className='flex items-center gap-4 text-xs sm:text-base'>
+              <div className='flex items-center gap-2 text-muted-foreground'>
+                <Users className='sm:w-4 sm:h-4 w-3 h-3' />
                 <span>{statuses.length} members</span>
               </div>
               <div className='flex items-center gap-2 text-xs'>
@@ -168,83 +197,78 @@ export const StatusList = ({
               </div>
             </div>
           </div>
-          <div className='space-y-3'>
+
+          {/* Card list */}
+          <div className='space-y-2 sm:space-y-3 pb-24 sm:pb-0'>
             {statuses.map((statusData) => {
               const { user: u, status: s } = statusData;
               const isSelected = selectedUserIds.includes(u.id);
               const isAnimating = animatingIds.has(u.id);
               const isUpdatedByOther = s?.updatedBy?.id !== u.id;
+
               return (
                 <div
                   key={u.id}
                   className={`
-                    group relative overflow-hidden rounded-xl border transition-all duration-700 ease-out
+                    relative rounded-xl border transition-all
-                    ${isAnimating ? 'animate-pulse bg-primary/5 border-primary/30 shadow-xl scale-[1.03] -translate-y-2' : ''}
+                    ${isAnimating ? 'bg-primary/5 border-primary/30' : ''}
-                    ${isSelected ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'}
+                    ${
-                    ${tvMode ? 'p-6' : 'p-4'}
+                      isSelected
-                    ${!tvMode ? 'hover:shadow-md cursor-pointer' : ''}
+                        ? 'border-primary bg-primary/5'
+                        : 'border-border'
+                    }
+                    ${tvMode ? 'p-5' : 'p-3 sm:p-4'}
+                    ${!tvMode ? 'active:scale-[0.99]' : ''}
                   `}
-                  style={{
-                    transform: isAnimating
-                      ? 'translateY(-8px) scale(1.02)'
-                      : 'translateY(0) scale(1)',
-                    boxShadow: isAnimating ? '0 20px 40px rgba(0,0,0,0.1)' : '',
-                  }}
                   onClick={!tvMode ? () => handleSelectUser(u.id) : undefined}
+                  role='button'
+                  aria-pressed={isSelected}
                 >
-                  {/* Selection indicator */}
                   {isSelected && !tvMode && (
                     <div className='absolute top-3 right-3'>
                       <CheckCircle2 className='w-5 h-5 text-primary' />
                     </div>
                   )}
 
-                  {/* Enhanced animation effect */}
+                  <div className='flex items-start gap-3 sm:gap-4'>
-                  {isAnimating && (
-                    <div className='absolute inset-0 bg-gradient-to-r from-transparent via-primary/10 to-transparent animate-pulse' />
-                  )}
-
-                  <div className='relative flex items-center gap-4'>
                     {/* Avatar */}
-                    <div className='relative flex-shrink-0'>
+                    <div className='flex-shrink-0'>
                       <BasedAvatar
                         src={u.imageUrl}
                         fullName={u.name ?? 'User'}
                         className={`
-                          transition-all duration-500 ring-2 ring-transparent
+                          transition-all duration-300
-                          ${tvMode ? 'w-18 h-18' : 'w-15 h-15'}
+                          ${tvMode ? 'w-18 h-18' : 'w-10 h-10 sm:w-12 sm:h-12'}
                           ${isAnimating ? 'ring-primary/30 ring-4' : ''}
                         `}
                       />
                     </div>
 
-                    {/* Main Content */}
+                    {/* Content */}
                     <div className='flex-1 min-w-0'>
-                      <div className='flex items-center gap-3 mb-2'>
+                      <div className='flex items-center gap-2 sm:gap-3 mb-1'>
                         <h3
                           className={`
-                            font-bold truncate
+                            font-semibold truncate
-                            ${tvMode ? 'text-3xl' : 'text-2xl'}
+                            ${tvMode ? 'text-3xl' : 'text-base sm:text-xl'}
                           `}
+                          title={u.name ?? u.email ?? 'User'}
                         >
                           {u.name ?? u.email ?? 'User'}
                         </h3>
 
                         {isUpdatedByOther && s?.updatedBy && (
-                          <div className='flex items-center gap-2 text-muted-foreground'>
+                          <div
-                            <span className={tvMode ? 'text-lg' : 'text-base'}>
+                            className='hidden sm:flex items-center gap-2
-                              via
+                            text-muted-foreground min-w-0'
-                            </span>
+                          >
+                            <span className='text-sm'>via</span>
                             <BasedAvatar
                               src={s.updatedBy.imageUrl}
                               fullName={s.updatedBy.name ?? 'User'}
-                              className={tvMode ? 'w-6 h-6' : 'w-4 h-4'}
+                              className='w-4 h-4'
                             />
-                            <span
+                            <span className='text-sm truncate'>
-                              className={
-                                tvMode ? 'text-lg font-semibold' : 'text-base'
-                              }
-                            >
                               {s.updatedBy.name ??
                                 s.updatedBy.email ??
                                 'another user'}
@@ -255,36 +279,41 @@ export const StatusList = ({
 
                       <div
                         className={`
-                          mb-3 leading-relaxed
+                          mb-2 sm:mb-3 leading-relaxed break-words
-                          ${tvMode ? 'text-2xl' : 'text-xl'}
+                          ${tvMode ? 'text-2xl' : 'text-[0.95rem] sm:text-lg'}
-                          ${s ? 'text-foreground' : 'text-muted-foreground italic'}
+                          ${
+                            s
+                              ? 'text-foreground'
+                              : 'text-muted-foreground italic'
+                          }
+                          line-clamp-2
                         `}
+                        title={s?.message ?? undefined}
                       >
                         {s?.message ?? 'No status yet.'}
                       </div>
 
-                      {/* Time Info */}
+                      {/* Meta */}
-                      <div className='flex items-center gap-4 text-muted-foreground'>
+                      <div
-                        <div className='flex items-center gap-2'>
+                        className='flex items-center gap-3 sm:gap-4
-                          <Clock className={tvMode ? 'w-5 h-5' : 'w-4 h-4'} />
+                        text-muted-foreground'
-                          <span className={tvMode ? 'text-lg' : 'text-base'}>
+                      >
+                        <div className='flex items-center gap-1.5'>
+                          <Clock className='w-4 h-4 sm:w-4 sm:h-4' />
+                          <span className='text-xs sm:text-sm'>
                             {s ? formatTime(s.updatedAt) : '--:--'}
                           </span>
                         </div>
-                        <div className='flex items-center gap-2'>
+                        <div className='hidden xs:flex items-center gap-1.5'>
-                          <Calendar
+                          <Calendar className='w-4 h-4' />
-                            className={tvMode ? 'w-5 h-5' : 'w-4 h-4'}
+                          <span className='text-xs sm:text-sm'>
-                          />
-                          <span className={tvMode ? 'text-lg' : 'text-base'}>
                             {s ? formatDate(s.updatedAt) : '--/--'}
                           </span>
                         </div>
                         {s && (
-                          <div className='flex items-center gap-2'>
+                          <div className='flex items-center gap-1.5'>
-                            <Activity
+                            <Activity className='w-4 h-4' />
-                              className={tvMode ? 'w-5 h-5' : 'w-4 h-4'}
+                            <span className='text-xs sm:text-sm'>
-                            />
-                            <span className={tvMode ? 'text-lg' : 'text-base'}>
                               {getStatusAge(s.updatedAt)}
                             </span>
                           </div>
@@ -292,43 +321,72 @@ export const StatusList = ({
                       </div>
                     </div>
 
-                    {/* History Drawer */}
+                    {/* Actions */}
                     {!tvMode && (
+                      <div className='flex flex-col items-end gap-2'>
                         <Drawer>
                           <DrawerTrigger asChild>
                             <Button
-                            variant='outline'
+                              variant='ghost'
-                            className={`
+                              size='sm'
-                              md:text-lg
+                              className='h-8 px-2 sm:px-3'
-                              opacity-0 group-hover:opacity-100 transition-opacity
+                              onClick={(e) => e.stopPropagation()}
-                            `}
                             >
-                            History
+                              <History className='w-4 h-4 sm:mr-2' />
+                              <span className='hidden sm:inline'>History</span>
                             </Button>
                           </DrawerTrigger>
                           <StatusHistory user={u} />
                         </Drawer>
+                      </div>
                     )}
                   </div>
+
+                  {/* Mobile "via user" line */}
+                  {isUpdatedByOther && s?.updatedBy && (
+                    <div
+                      className='sm:hidden mt-2 flex items-center gap-2
+                      text-muted-foreground'
+                    >
+                      <span className='text-xs'>via</span>
+                      <BasedAvatar
+                        src={s.updatedBy.imageUrl}
+                        fullName={s.updatedBy.name ?? 'User'}
+                        className='w-4 h-4'
+                      />
+                      <span className='text-xs truncate'>
+                        {s.updatedBy.name ??
+                          s.updatedBy.email ??
+                          'another user'}
+                      </span>
+                    </div>
+                  )}
                 </div>
               );
             })}
           </div>
-          {/* Update Status Section */}
+
+          {/* Desktop composer */}
           {!tvMode && (
-            <Card className='mt-5 border-2 border-dashed border-muted-foreground/20 hover:border-primary/50 transition-colors'>
+            <Card
+              className='mt-5 hidden md:block border-2 border-dashed
+              border-muted-foreground/20 hover:border-primary/50
+              transition-colors'
+            >
               <CardContent className='p-6'>
                 <div className='flex flex-col gap-4'>
                   <div className='flex items-center gap-3'>
                     <Zap className='w-5 h-5 text-primary' />
                     <h3 className='text-lg font-semibold'>Update Status</h3>
                     {selectedUserIds.length > 0 && (
-                      <span className='px-2 py-1 bg-primary/10 text-primary text-sm rounded-full'>
+                      <span
+                        className='px-2 py-1 bg-primary/10 text-primary
+                        text-sm rounded-full'
+                      >
                         {selectedUserIds.length} selected
                       </span>
                     )}
                   </div>
-
                   <div className='flex gap-3'>
                     <Input
                       autoFocus
@@ -355,11 +413,12 @@ export const StatusList = ({
                       className='px-6 h-12'
                     >
                       {selectedUserIds.length > 0
-                        ? `Update ${selectedUserIds.length} ${selectedUserIds.length > 1 ? 'users' : 'user'}`
+                        ? `Update ${selectedUserIds.length} ${
+                            selectedUserIds.length > 1 ? 'users' : 'user'
+                          }`
                         : 'Update Status'}
                     </SubmitButton>
                   </div>
-
                   <div className='flex justify-between items-center'>
                     <div className='flex gap-2'>
                       <Button
@@ -378,7 +437,56 @@ export const StatusList = ({
               </CardContent>
             </Card>
           )}
+
+          {/* Mobile sticky composer */}
+          {!tvMode && (
+            <div
+              className='md:hidden fixed bottom-0 left-0 right-0 z-50
+                border-t bg-background/95 backdrop-blur
+                supports-[backdrop-filter]:bg-background/60 p-3
+                pb-[calc(0.75rem+env(safe-area-inset-bottom))]'
+            >
+              <div className='flex items-center justify-between mb-2'>
+                {selectedUserIds.length > 0 ? (
+                  <span className='text-xs text-muted-foreground'>
+                    {selectedUserIds.length} selected
+                  </span>
+                ) : (
+                  <span className='text-xs text-muted-foreground'>
+                    Update your status
+                  </span>
+                )}
+                <Button variant='outline' size='sm' onClick={handleSelectAll}>
+                  {selectAll ? 'Clear' : 'Select all'}
+                </Button>
+              </div>
+              <div className='flex gap-2'>
+                <Input
+                  type='text'
+                  placeholder="What's happening?"
+                  className='h-11 text-base'
+                  value={statusInput}
+                  disabled={updatingStatus}
+                  onChange={(e) => setStatusInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey && !updatingStatus) {
+                      e.preventDefault();
+                      void handleUpdateStatus();
+                    }
+                  }}
+                />
+                <SubmitButton
+                  onClick={handleUpdateStatus}
+                  disabled={updatingStatus}
+                  className='h-11 px-4'
+                >
+                  Update
+                </SubmitButton>
+              </div>
+            </div>
+          )}
         </TabsContent>
+
         <TabsContent value='history'>
           <HistoryTable />
         </TabsContent>