Online users list ui, remove from followers list

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 (
     <Row className={clsx('items-center justify-between gap-2 p-2', className)}>
-      <OnlineUserAvatar user={user} />
+      <Row className="items-center gap-2">
+        <Avatar username={user?.username} avatarUrl={user?.avatarUrl} />
+        {user && <UserLink name={user.name} username={user.username} />}
+      </Row>
       {!hideFollowButton && (
         <FollowButton
           isFollowing={isFollowing}

web/components/online-user-list.tsx

@@ -7,6 +7,8 @@ import { User } from 'common/user'
 import { UserCircleIcon } from '@heroicons/react/solid'
 import { useUsers } from 'web/hooks/use-users'
 import { partition } from 'lodash'
+import { useWindowSize } from 'web/hooks/use-window-size'
+import { useState } from 'react'
 
 const isOnline = (user?: User) =>
   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<HTMLDivElement | null>(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 (
-    <Col className="mt-4 gap-1">
+    <Col
+      className="mt-4 flex-1 gap-1 hover:overflow-auto"
+      ref={setContainerRef}
+      style={{ height: remainingHeight }}
+    >
       {onlineUsers
-        .concat(offlineUsers)
+        .concat(
+          offlineUsers.sort(
+            (a, b) => (b.lastPingTime ?? 0) - (a.lastPingTime ?? 0)
+          )
+        )
         .slice(0, 15)
         .map((user) => (
           <Row
             key={user.id}
             className={clsx('items-center justify-between gap-2 p-2')}
           >
-            <OnlineUserAvatar key={user.id} user={user} />
+            <OnlineUserAvatar key={user.id} user={user} size={'sm'} />
           </Row>
         ))}
     </Col>
   )
 }
 
-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 (
     <Row className={clsx('relative items-center gap-2', className)}>
       <Avatar
         username={user?.username}
         avatarUrl={user?.avatarUrl}
-        className={className}
+        size={size}
+        className={!isOnline(user) ? 'opacity-50' : ''}
       />
-      {user && <UserLink name={user.name} username={user.username} />}
+      {user && (
+        <UserLink
+          name={user.name}
+          username={user.username}
+          className={!isOnline(user) ? 'text-gray-500' : ''}
+        />
+      )}
       {isOnline(user) && (
         <div className="absolute left-0 top-0 ">
           <UserCircleIcon className="text-primary bg-primary h-3 w-3 rounded-full border-2 border-white" />