diff --git a/web/components/follow-list.tsx b/web/components/follow-list.tsx index 670eba09..c935f73d 100644 --- a/web/components/follow-list.tsx +++ b/web/components/follow-list.tsx @@ -2,10 +2,11 @@ import clsx from 'clsx' import { useFollows } from 'web/hooks/use-follows' import { useUser, useUserById } from 'web/hooks/use-user' import { follow, unfollow } from 'web/lib/firebase/users' +import { Avatar } from './avatar' import { FollowButton } from './follow-button' import { Col } from './layout/col' import { Row } from './layout/row' -import { OnlineUserAvatar } from 'web/components/online-user-list' +import { UserLink } from './user-page' export function FollowList(props: { userIds: string[] }) { const { userIds } = props @@ -62,7 +63,10 @@ function UserFollowItem(props: { return ( - + + + {user && } + {!hideFollowButton && ( user && user.lastPingTime && user.lastPingTime > Date.now() - 5 * 60 * 1000 @@ -18,34 +20,59 @@ export function OnlineUserList(props: { users: User[] }) { ) if (liveUsers) users = liveUsers const [onlineUsers, offlineUsers] = partition(users, (user) => isOnline(user)) + const { width, height } = useWindowSize() + const [containerRef, setContainerRef] = useState(null) + // Subtract bottom bar when it's showing (less than lg screen) + const bottomBarHeight = (width ?? 0) < 1024 ? 58 : 0 + const remainingHeight = + (height ?? 0) - (containerRef?.offsetTop ?? 0) - bottomBarHeight return ( - + {onlineUsers - .concat(offlineUsers) + .concat( + offlineUsers.sort( + (a, b) => (b.lastPingTime ?? 0) - (a.lastPingTime ?? 0) + ) + ) .slice(0, 15) .map((user) => ( - + ))} ) } -export function OnlineUserAvatar(props: { user?: User; className?: string }) { - const { user, className } = props +export function OnlineUserAvatar(props: { + user?: User + className?: string + size?: 'sm' | 'xs' | number +}) { + const { user, className, size } = props return ( - {user && } + {user && ( + + )} {isOnline(user) && (