Pin-indicator refresh

Author: arnautov-anton

.gitignore

@@ -74,3 +74,8 @@ client/dist
 /.virtualgo
 .vscode/
 coverage.out
+
+# stream-chat-css/docusaurus files
+docusaurus/docs/React/theming
+docusaurus/docs/React/assets/stream-chat-css*
+shared

docusaurus/docs/React/assets/CustomPinMessage.png

@@ -1,262 +1,102 @@
 ---
 id: pin_indicator
-title: Pin Indicator and Permissions
+title: Pin Indicator
 ---
 
-import CustomPinMessage from '../../assets/CustomPinMessage.png';
-import CustomPinMessagePinned from '../../assets/CustomPinMessagePinned.png';
-import CustomPinMessagePinnedHover from '../../assets/CustomPinMessagePinnedHover.png';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
-In this example, we will demonstrate how to create a custom pin indicator component for pinned messages, as well as set custom permissions for pinning.
+In this example, we will demonstrate how to create a custom pin indicator for pinned messages.
 
-## Pin Permissions
+Let's start with the component based solution displaying the name of the user who pinned the message. We'll pass our custom component to the component context from which it'll be picked up by the [`MessageSimple`](../../components/message-components/message-ui.mdx) component to render.
 
-Stream provides a default set of pin permissions for each user type within each channel type:
+<Tabs groupId="example">
+<TabItem value="js" label="React">
 
-```tsx
-export const defaultPinPermissions: PinPermissions = {
-  commerce: {
-    admin: true,
-    anonymous: false,
-    channel_member: false,
-    channel_moderator: true,
-    guest: false,
-    member: false,
-    moderator: true,
-    owner: true,
-    user: false,
-  },
-  gaming: {
-    admin: true,
-    anonymous: false,
-    channel_member: false,
-    channel_moderator: true,
-    guest: false,
-    member: false,
-    moderator: true,
-    owner: false,
-    user: false,
-  },
-  livestream: {
-    admin: true,
-    anonymous: false,
-    channel_member: false,
-    channel_moderator: true,
-    guest: false,
-    member: false,
-    moderator: true,
-    owner: true,
-    user: false,
-  },
-  messaging: {
-    admin: true,
-    anonymous: false,
-    channel_member: true,
-    channel_moderator: true,
-    guest: false,
-    member: true,
-    moderator: true,
-    owner: true,
-    user: false,
-  },
-  team: {
-    admin: true,
-    anonymous: false,
-    channel_member: true,
-    channel_moderator: true,
-    guest: false,
-    member: true,
-    moderator: true,
-    owner: true,
-    user: false,
-  },
-};
-```
-
-:::important
-When using a custom channel type, these permissions must be set for each user role.
-:::
+```jsx
+import { Channel } from 'stream-chat-react';
 
-If you want to use different user permissions or create a custom channel type, the new permissions would need to be passed to `MessageList` using the `pinPermissions` prop.
+const CustomPinIndicator = () => {
+  const { message } = useMessageContext('CustomPinIndicator');
 
-```tsx
-const CustomPermissions = {
-  customChannelType: {
-    admin: true,
-    anonymous: false,
-    channel_member: false,
-    channel_moderator: true,
-    guest: false,
-    member: false,
-    moderator: true,
-    owner: true,
-    user: false,
-  },
-};
-```
+  const pinnedBy = message.pinned_by?.name || message.pinned_by?.id;
 
-```tsx
-<MessageList pinPermissions={CustomPermissions} />
-```
+  if (!pinnedBy) return null;
 
-## Custom Pin Indicator
-
-To utilize pinned messages, we will create a basic message component as well as a custom pin indicator to display when a message has been pinned. The custom pin indicator component will simply display the text 'pinned'. This is where you could get creative with custom icons and styles.
-
-```tsx
-export const CustomPinIndicator = () => {
-  return (
-    <div>
-      <div className='pin-text'>pinned</div>
-    </div>
-  );
+  return <div className='pin-indicator'>📌 Pinned by {pinnedBy}</div>;
 };
-```
-
-```css
-.pin-text {
-  font-style: italic;
-  color: grey;
-}
-```
-
-This component can now be passed to `Channel` and later pulled from the `ComponentContext` when used.
-
-```tsx
-<Channel PinIndicator={CustomPinIndicator}>{/* children of Channel component */}</Channel>
-```
-
-Now we will build a message component that changes its background from turquoise to yellow when a message is pinned. Our custom pin indicator will also replace the `MessageOptions` component unless the message is currently being hovered.
 
-```tsx
-export const CustomMessage = () => {
-  const [hovering, setHovering] = useState(false);
-
-  const { message } = useMessageContext();
-  const { PinIndicator = DefaultPinIndicator } = useComponentContext();
-
-  const messageWrapperRef = useRef<HTMLDivElement>(null);
-
-  const { pinned } = message;
-
-  return (
-    <div
-      className={pinned ? 'pinned-custom-message-wrapper' : 'custom-message-wrapper'}
-      onMouseEnter={() => setHovering(true)}
-      onMouseLeave={() => setHovering(false)}
-    >
-      <div className='custom-message-wrapper-content'>
-        <div className='custom-message-header'>
-          <div className='custom-message-header-name'>{message.user?.name || message.user?.id}</div>
-        </div>
-        <MessageText />
-        <MessageRepliesCountButton reply_count={message.reply_count} />
-      </div>
-      <div className='custom-message-right-wrapper'>
-        {hovering ? (
-          <MessageOptions messageWrapperRef={messageWrapperRef} />
-        ) : (
-          pinned && <PinIndicator />
-        )}
-      </div>
-    </div>
-  );
+export const ChannelWrapper = ({ children }) => {
+  return <Channel PinIndicator={CustomPinIndicator}>{children}</Channel>;
 };
 ```
 
-```css
-.custom-message-wrapper {
-  display: flex;
-  padding: 12px;
-  width: fit-content;
-  border-radius: 16px;
-}
-
-.custom-message-wrapper-content {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
+</TabItem>
 
-.right-wrapper {
-  margin-left: 80px;
-  margin-right: 16px;
-  width: 48px;
-}
+<TabItem value="css" label="CSS">
 
-.custom-message-header-name {
-  color: black;
-  font-weight: bold;
-  font-size: 14;
+```css
+.pin-indicator {
+  grid-area: pin;
 }
 
-.str-chat__message-text-inner {
-  color: grey;
-  background: white;
-  border: none;
-  padding: 0;
+.str-chat__message.str-chat__message--other,
+.str-chat__message.str-chat__quoted-message-preview {
+  grid-template-areas:
+    '. pin'
+    'avatar message'
+    '. replies'
+    '. translation-notice'
+    '. custom-metadata'
+    '. metadata';
 }
 
-.str-chat__message-simple__actions {
-  display: flex;
+.str-chat__message.str-chat__message--me {
+  grid-template-areas:
+    'pin'
+    'message'
+    'replies'
+    'translation-notice'
+    'custom-metadata'
+    'metadata';
 }
+```
 
-.custom-message-wrapper {
-  background: turquoise;
-  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.07);
-}
+</TabItem>
 
-.custom-message-wrapper:hover .str-chat__message-text-inner {
-  background: turquoise;
-}
+</Tabs>
 
-.str-chat__message-replies-count-button {
-  align-self: flex-start;
-}
+![Custom Pin Indicator](../../assets/custom-pin-indicator.png)
 
-/** Pinned Message */
+You can omit the component based solution altogether, all the class names you need are in place and toggled appropriately, here's solution based purely on styles; we'll add `::before` to our message bubble with a 📌 icon to display whenever message has been pinned.
 
-.pinned-custom-message-wrapper {
+```css
+.str-chat__message--pinned .str-chat__message-bubble::before {
+  content: '📌';
   display: flex;
-  padding: 12px;
-  width: fit-content;
-  border-radius: 16px;
-}
-
-.pinned-custom-message-wrapper {
-  background: papayawhip;
-  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.07);
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  background-color: papayawhip;
+  font-size: 0.6rem;
+  width: 1.4rem;
+  height: 1.4rem;
+  border-radius: 9999px;
+  z-index: 1;
+  top: -10px;
 }
 
-.pinned-custom-message-wrapper:hover .str-chat__message-text-inner {
-  background: papayawhip;
+.str-chat__message--other.str-chat__message--pinned .str-chat__message-bubble::before {
+  right: -10px;
 }
 
-.pinned-custom-message-wrapper .str-chat__message-text-inner {
-  background: papayawhip;
+.str-chat__message--me.str-chat__message--pinned .str-chat__message-bubble::before {
+  left: -10px;
 }
 ```
 
-From here all we need to do is override the default component in `Channel` at the `App.tsx` level:
-
-```tsx
-<Channel Message={CustomMessage}>{/* children of Channel component */}</Channel>
-```
-
-## The Result
-
-Unpinned Message:
-
-<img src={CustomPinMessage} alt='Custom Pin Indicator UI Component for Chat' width='650' />
-
-Pinned Message (not hovered):
-
-<img src={CustomPinMessagePinned} alt='Custom Pin Indicator UI Component for Chat' width='650' />
+![Custom Pin Indicator CSS Based Solution](../../assets/custom-pin-indicator-css.png)
 
-Pinned Message (hovered):
+### Read More
 
-<img
-  src={CustomPinMessagePinnedHover}
-  alt='Custom Pin Indicator UI Component for Chat'
-  width='700'
-/>
+See more on permissions regarding message pinning in [_Permissions v2_](https://getstream.io/chat/docs/react/user_permissions/?language=javascript) section of our JS documentation.