feat: chat users

src/client/channel.jsx

@@ -32,13 +32,13 @@ export default function Channel(props) {
             // eslint-disable-next-line react/no-array-index-key
             key={i}
             onClick={onClick}
+            title={label}
             type="button"
           >
             <span
               className="channel__icon"
               role="img"
               aria-label={label}
-              title={label}
             >
               {icon}
             </span>

src/client/channel.scss

@@ -32,8 +32,13 @@
   background-color: transparent;
   border: 0;
   color: inherit;
+  opacity: 0.2;
   padding: 0.5em;
-  &:hover {
+  .channel:hover & {
+    opacity: 0.5;
+  }
+  .channel:hover &:hover {
     background-color: rgba(255, 255, 255, 0.1);
+    opacity: 1;
   }
 }

src/client/chat--leftFriends.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import Channel from './channel';
 
-export default function ChatLeftRooms() {
+export default function ChatLeftFriends() {
   const favorites = ['BabeHasHiccups'];
   const friends = ['BabeHasHiccups', 'mystifired'].filter((channel) => -1 === favorites.indexOf(channel));
   const favoritesActions = [
@@ -33,7 +33,7 @@ export default function ChatLeftRooms() {
   ];
   return (
     <div
-      className="chat--leftRooms"
+      className="chat--leftFriends"
     >
       <label className="friends__add">
         Add
@@ -75,4 +75,4 @@ export default function ChatLeftRooms() {
   );
 }
 
-ChatLeftRooms.propTypes = {};
+ChatLeftFriends.propTypes = {};

src/client/chat--right.jsx

@@ -5,6 +5,7 @@ import React, {useState} from 'react';
 
 import useBreakpoints from './hooks/useBreakpoints';
 import Bar from './bar';
+import ChatRightUsers from './chat--rightUsers';
 
 export default function ChatRight() {
   const {desktop, tablet} = useBreakpoints();
@@ -30,6 +31,7 @@ export default function ChatRight() {
           }
         }}
       />
+      <ChatRightUsers />
     </div>
   );
 }

src/client/chat--rightUsers.jsx

@@ -0,0 +1,58 @@
+import './chat--rightUsers.scss';
+
+import React from 'react';
+import {useSelector} from 'react-redux';
+
+import {channelUsersSelector} from '~/common/state/chat';
+import {usernamesSelector} from '~/common/state/usernames';
+
+import useChannel from '~/client/hooks/useChannel';
+
+import Channel from './channel';
+
+export default function ChatRightUsers() {
+  const channel = useChannel();
+  const ids = useSelector((state) => channelUsersSelector(state, channel));
+  const usernames = useSelector(usernamesSelector);
+  const list = ids.map((id) => usernames[id]).sort();
+  const usersActions = [
+    {
+      icon: '❤️',
+      label: 'Favorite',
+      onClick: () => {},
+    },
+    {
+      icon: '🚫',
+      label: 'Unfriend',
+      onClick: () => {},
+    },
+    {
+      icon: '☢️',
+      label: 'Block',
+      onClick: () => {},
+    },
+  ];
+  return (
+    <div
+      className="chat--rightUsers"
+    >
+      <h2 className="users__chatsTitle">Users</h2>
+      <ul className="users__chatsList">
+        {list.map((username) => (
+          <li
+            className="users__item"
+          >
+            <Channel
+              actions={usersActions}
+              href={`/chat/u/${username}`}
+              name={username}
+              prefix="/u/"
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+ChatRightUsers.propTypes = {};

src/client/chat--rightUsers.scss

@@ -0,0 +1,51 @@
+@import '~/client/scss/colors.scss';
+
+.users__add[class] {
+  background-color: #272727;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.users__addTextWrapper::before {
+  content: '/u/';
+  font-size: 0.8em;
+  padding: 0 0.25em 0 0.5em;
+  position: relative;
+  top: 1px;
+}
+
+.users__addText {
+  padding-left: 0.25em;
+}
+
+.users__chatsTitle {
+  color: $color-muted;
+  font-family: var(--thick-title-font-family);
+  font-size: 0.7em;
+  font-weight: bold;
+  padding: 2.5em 1em 0.625em 1.375em;
+  text-transform: uppercase;
+}
+
+.users__item {
+  position: relative;
+  width: 100%;
+  &:nth-of-type(even) {
+    background-color: rgba(0, 0, 0, 0.1);
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+  &:nth-of-type(odd) {
+    background-color: rgba(0, 0, 0, 0.2);
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+  &.active[class] {
+    background-color: $color-active;
+    &:hover {
+      background-color: lighten($color-active, 5%);
+    }
+  }
+}

src/common/state/chat.js

@@ -13,6 +13,11 @@ export const channelSelector = createSelector(
   (channels, channel) => channels[channel],
 );
 
+export const channelUsersSelector = createSelector(
+  [channelSelector],
+  ({users}) => users,
+);
+
 export const messagesSelector = (state) => state.chat.messages;
 
 export const channelMessagesSelector = createSelector(