RocketChat / EmbeddedChat

An easy to use full-stack component (ReactJS) embedding Rocket.Chat into your webapp

Home Page:https://www.npmjs.com/package/@embeddedchat/react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Change starred and pinned message windows to sidebar

JeffreytheCoder opened this issue · comments

As an EmbeddedChat developer

I need to:
Change starred and pinned message windows to sidebar

So That:
They match with other options in the chat room (threads, search, mentions, members, and room information), which all show information in sidebars. RC also displays these options in sidebars.

Currently, it's weird to have starred and pinned messages expand to full window while other options show as sidebar. Having this inconsistent UI could confuse users.

Acceptance Criteria

  • Change starred messages window to sidebar
  • Change pinned messages window to sidebar

Working on it. Welcome to share any opinions on this issue since it involves design choices

Sidebar is indeed a better choice but currently it is not a good choice, to be honest, for other purposes as well. It hides the space of the chat window rather than resizing the chat window and placing another window next to it with a border line, just as it is in the RC. So, it would be great if you could try addressing that first before focusing on this particular issue.

Working on it. Welcome to share any opinions on this issue since it involves design choices

@Spiral-Memory Open a PR with the changes - feel free to try it out. I feel like the sidebars work better than the windows because they are consistent with the UI/UX flow of other options.

I think RC keeps these features as sidebars for a reason. Keeping the "special messages" in a separate place avoid confusing them with the normal flow of messages in the chat room.

You can see design in Slack and Discord also follow a popup window design.
Screenshot 2024-03-07 at 12 26 20 PM
Screenshot 2024-03-07 at 12 25 56 PM

I think RC keeps these features as sidebars for a reason. Keeping the "special messages" in a separate place avoid confusing them with the normal flow of messages in the chat room.

You can see design in Slack and Discord also follow a popup window design.
Screenshot 2024-03-07 at 12 26 20 PM
Screenshot 2024-03-07 at 12 25 56 PM

I understand, but it would be great if we follow a similar pattern in EC as well which is in RC —keeping two windows separate and not overlapping with each other.

Could you explain on this? I see all the current sidebars overlaying the chat window

Screenshot from 2024-03-08 22-23-45
Screenshot from 2024-03-08 22-23-59

Look in RC. You can see that when you open the sidebar, the chat window shrinks, and both the chat window and sidebar are separated by a border.

While in EC, when you open the sidebar, it doesn't happen; rather, it is just above the chat window, hiding some of its parts.

image

Good point 👍 resizing the Window could be helpful. I noticed the sidebars all have individual components and I plan to do some refactoring...I could include this change while refactoring.

Regardless of this general issue, do you think keeping pinned and starred messages in sidebars is better?

Yes, it is better to keep "pinned" and "starred" in sidebars, in my opinion if this issue is not there.

Sure, bro. While refactoring, please ensure that it remains an individual component even after that. What can be done is creating a general Sidebar component to encapsulate all the common code, and then other components can customize it. I was attempting this earlier, but doing it may introduce several bugs, so make sure you proceed with caution.

Created a new issue for the refactoring job: #504. @Spiral-Memory What were the issues you encountered when trying to do this?

@sidmohanty11 The PR #501 is good for review

@sidmohanty11 The PR #501 is good for review

It's already been reviewed by Siddharth, and he has also approved the changes. Just to let you know Abhinav is another maintainer of the EmbeddedChat project, and he has been asked by Siddharth to do the review too. Once done, if he will respond.

Created a new issue for the refactoring job: #504. @Spiral-Memory What were the issues you encountered when trying to do this?

Mmm... The major issue lies in extracting the common part and placing it into a shared sidebar component. However, various components have different variations, making it challenging to extract the common code. If you proceed, just be a little careful, as overlooking anything might lead to code breaks. As you move into this task, you'll sense it.

Additionally, there could be levels of modularization; for instance, the search box might be considered a separate component, or it could be part of the common sidebar. These architectural choices require careful consideration to ensure stability.