Make mobile better
This commit is contained in:
@@ -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'
|
||||
|
||||
@@ -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='px-4'>
|
||||
<ScrollArea className='h-96 w-full px-6'>
|
||||
<div className='w-full px-4 sm:px-6'>
|
||||
{/* Mobile: card list */}
|
||||
<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,32 +185,38 @@ export const HistoryTable = () => {
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationPrevious
|
||||
href='#'
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handlePrev();
|
||||
}}
|
||||
aria-disabled={!canPrev}
|
||||
className={!canPrev ? 'pointer-events-none opacity-50' : ''}
|
||||
/>
|
||||
<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>
|
||||
<PaginationNext
|
||||
href='#'
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleNext();
|
||||
}}
|
||||
aria-disabled={!canNext}
|
||||
className={!canNext ? 'pointer-events-none opacity-50' : ''}
|
||||
/>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
{/* Pagination */}
|
||||
<div className='mt-3 sm:mt-4'>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationPrevious
|
||||
href='#'
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handlePrev();
|
||||
}}
|
||||
aria-disabled={!canPrev}
|
||||
className={!canPrev ? 'pointer-events-none opacity-50' : ''}
|
||||
/>
|
||||
<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>
|
||||
<PaginationNext
|
||||
href='#'
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleNext();
|
||||
}}
|
||||
aria-disabled={!canNext}
|
||||
className={!canNext ? 'pointer-events-none opacity-50' : ''}
|
||||
/>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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,17 +59,20 @@ 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(
|
||||
(a, b) => (b.status?.updatedAt ?? 0) - (a.status?.updatedAt ?? 0),
|
||||
),
|
||||
statuses
|
||||
.slice()
|
||||
.sort(
|
||||
(a, b) => (b.status?.updatedAt ?? 0) - (a.status?.updatedAt ?? 0),
|
||||
),
|
||||
);
|
||||
}, [statuses]);
|
||||
|
||||
@@ -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',
|
||||
on: 'px-12 max-w-3xl',
|
||||
off: 'px-6',
|
||||
className: 'max-w-4xl mx-auto',
|
||||
on: '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'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<Activity className='w-6 h-6 text-primary' />
|
||||
<h1 className='text-2xl font-bold'>Team Status</h1>
|
||||
<TabsTrigger value='status' className='py-3 sm:py-8'>
|
||||
<div className='flex items-center gap-2 sm:gap-3'>
|
||||
<Activity className='text-primary w-4 h-4 sm:w-5 sm:h-5' />
|
||||
<h1 className='text-base sm:text-2xl font-bold'>Team Status</h1>
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value='history' className='py-8'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<History className='w-6 h-6 text-primary' />
|
||||
<h1 className='text-2xl font-bold'>Status History</h1>
|
||||
<TabsTrigger value='history' className='py-3 sm:py-8'>
|
||||
<div className='flex items-center gap-2 sm:gap-3'>
|
||||
<History className='text-primary w-4 h-4 sm:w-5 sm:h-5' />
|
||||
<h1 className='text-base sm:text-2xl font-bold'>
|
||||
Status History
|
||||
</h1>
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value='status'>
|
||||
{/* Mobile toolbar */}
|
||||
<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'>
|
||||
<div className='flex items-center gap-4 text-xs sm:text-base'>
|
||||
<div className='flex items-center gap-2 text-muted-foreground'>
|
||||
<Users className='w-4 h-4' />
|
||||
<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
|
||||
${isAnimating ? 'animate-pulse bg-primary/5 border-primary/30 shadow-xl scale-[1.03] -translate-y-2' : ''}
|
||||
${isSelected ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'}
|
||||
${tvMode ? 'p-6' : 'p-4'}
|
||||
${!tvMode ? 'hover:shadow-md cursor-pointer' : ''}
|
||||
relative rounded-xl border transition-all
|
||||
${isAnimating ? 'bg-primary/5 border-primary/30' : ''}
|
||||
${
|
||||
isSelected
|
||||
? '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 */}
|
||||
{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'>
|
||||
<div className='flex items-start gap-3 sm: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
|
||||
${tvMode ? 'w-18 h-18' : 'w-15 h-15'}
|
||||
transition-all duration-300
|
||||
${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
|
||||
${tvMode ? 'text-3xl' : 'text-2xl'}
|
||||
font-semibold truncate
|
||||
${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'>
|
||||
<span className={tvMode ? 'text-lg' : 'text-base'}>
|
||||
via
|
||||
</span>
|
||||
<div
|
||||
className='hidden sm:flex items-center gap-2
|
||||
text-muted-foreground min-w-0'
|
||||
>
|
||||
<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
|
||||
className={
|
||||
tvMode ? 'text-lg font-semibold' : 'text-base'
|
||||
}
|
||||
>
|
||||
<span className='text-sm truncate'>
|
||||
{s.updatedBy.name ??
|
||||
s.updatedBy.email ??
|
||||
'another user'}
|
||||
@@ -255,36 +279,41 @@ export const StatusList = ({
|
||||
|
||||
<div
|
||||
className={`
|
||||
mb-3 leading-relaxed
|
||||
${tvMode ? 'text-2xl' : 'text-xl'}
|
||||
${s ? 'text-foreground' : 'text-muted-foreground italic'}
|
||||
mb-2 sm:mb-3 leading-relaxed break-words
|
||||
${tvMode ? 'text-2xl' : 'text-[0.95rem] sm:text-lg'}
|
||||
${
|
||||
s
|
||||
? 'text-foreground'
|
||||
: 'text-muted-foreground italic'
|
||||
}
|
||||
line-clamp-2
|
||||
`}
|
||||
title={s?.message ?? undefined}
|
||||
>
|
||||
{s?.message ?? 'No status yet.'}
|
||||
</div>
|
||||
|
||||
{/* Time Info */}
|
||||
<div className='flex items-center gap-4 text-muted-foreground'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Clock className={tvMode ? 'w-5 h-5' : 'w-4 h-4'} />
|
||||
<span className={tvMode ? 'text-lg' : 'text-base'}>
|
||||
{/* Meta */}
|
||||
<div
|
||||
className='flex items-center gap-3 sm:gap-4
|
||||
text-muted-foreground'
|
||||
>
|
||||
<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'>
|
||||
<Calendar
|
||||
className={tvMode ? 'w-5 h-5' : 'w-4 h-4'}
|
||||
/>
|
||||
<span className={tvMode ? 'text-lg' : 'text-base'}>
|
||||
<div className='hidden xs:flex items-center gap-1.5'>
|
||||
<Calendar className='w-4 h-4' />
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{s ? formatDate(s.updatedAt) : '--/--'}
|
||||
</span>
|
||||
</div>
|
||||
{s && (
|
||||
<div className='flex items-center gap-2'>
|
||||
<Activity
|
||||
className={tvMode ? 'w-5 h-5' : 'w-4 h-4'}
|
||||
/>
|
||||
<span className={tvMode ? 'text-lg' : 'text-base'}>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<Activity className='w-4 h-4' />
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{getStatusAge(s.updatedAt)}
|
||||
</span>
|
||||
</div>
|
||||
@@ -292,43 +321,72 @@ export const StatusList = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* History Drawer */}
|
||||
{/* Actions */}
|
||||
{!tvMode && (
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>
|
||||
<Button
|
||||
variant='outline'
|
||||
className={`
|
||||
md:text-lg
|
||||
opacity-0 group-hover:opacity-100 transition-opacity
|
||||
`}
|
||||
>
|
||||
History
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<StatusHistory user={u} />
|
||||
</Drawer>
|
||||
<div className='flex flex-col items-end gap-2'>
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
className='h-8 px-2 sm:px-3'
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user