diff --git a/src/client/channel.jsx b/src/client/channel.jsx
index 146235e..4d8c159 100644
--- a/src/client/channel.jsx
+++ b/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"
>
{icon}
diff --git a/src/client/channel.scss b/src/client/channel.scss
index e86ccb9..aebfa77 100644
--- a/src/client/channel.scss
+++ b/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;
}
}
diff --git a/src/client/chat--leftFriends.jsx b/src/client/chat--leftFriends.jsx
index e504c53..af3407b 100644
--- a/src/client/chat--leftFriends.jsx
+++ b/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 (
);
}
diff --git a/src/client/chat--rightUsers.jsx b/src/client/chat--rightUsers.jsx
new file mode 100644
index 0000000..aabfb84
--- /dev/null
+++ b/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 (
+
+
Users
+
+ {list.map((username) => (
+ -
+
+
+ ))}
+
+
+ );
+}
+
+ChatRightUsers.propTypes = {};
diff --git a/src/client/chat--rightUsers.scss b/src/client/chat--rightUsers.scss
new file mode 100644
index 0000000..7d47c9f
--- /dev/null
+++ b/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%);
+ }
+ }
+}
diff --git a/src/common/state/chat.js b/src/common/state/chat.js
index e22288f..bd6c9a3 100644
--- a/src/common/state/chat.js
+++ b/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(