Pinned Messages (#2081)

* add pinned room events hook

* room pinned message - WIP

* add room event hook

* fetch pinned messages before displaying

* use react-query in room event hook

* disable staleTime and gc to 1 hour in room event hook

* use room event hook in reply component

* render pinned messages

* add option to pin/unpin messages

* remove message base from message placeholders and add variant

* display message placeholder while loading pinned messages

* render pinned event error

* show no pinned message placeholder

* fix message placeholder flickering

src/app/components/message/placeholder/CompactPlaceholder.tsx

@@ -1,22 +1,27 @@
-import React from 'react';
-import { as, toRem } from 'folds';
+import React, { useMemo } from 'react';
+import { as, ContainerColor, toRem } from 'folds';
 import { randomNumberBetween } from '../../../utils/common';
 import { LinePlaceholder } from './LinePlaceholder';
-import { CompactLayout, MessageBase } from '../layout';
+import { CompactLayout } from '../layout';
 
-export const CompactPlaceholder = as<'div'>(({ ...props }, ref) => (
-  <MessageBase>
-    <CompactLayout
-      {...props}
-      ref={ref}
-      before={
-        <>
-          <LinePlaceholder style={{ maxWidth: toRem(50) }} />
-          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
-        </>
-      }
-    >
-      <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(120, 500)) }} />
-    </CompactLayout>
-  </MessageBase>
-));
+export const CompactPlaceholder = as<'div', { variant?: ContainerColor }>(
+  ({ variant, ...props }, ref) => {
+    const nameSize = useMemo(() => randomNumberBetween(40, 100), []);
+    const msgSize = useMemo(() => randomNumberBetween(120, 500), []);
+
+    return (
+      <CompactLayout
+        {...props}
+        ref={ref}
+        before={
+          <>
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(nameSize) }} />
+          </>
+        }
+      >
+        <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
+      </CompactLayout>
+    );
+  }
+);

src/app/components/message/placeholder/DefaultPlaceholder.tsx

@@ -1,25 +1,39 @@
-import React, { CSSProperties } from 'react';
-import { Avatar, Box, as, color, toRem } from 'folds';
+import React, { CSSProperties, useMemo } from 'react';
+import { Avatar, Box, ContainerColor, as, color, toRem } from 'folds';
 import { randomNumberBetween } from '../../../utils/common';
 import { LinePlaceholder } from './LinePlaceholder';
-import { MessageBase, ModernLayout } from '../layout';
+import { ModernLayout } from '../layout';
 
 const contentMargin: CSSProperties = { marginTop: toRem(3) };
-const avatarBg: CSSProperties = { backgroundColor: color.SurfaceVariant.Container };
 
-export const DefaultPlaceholder = as<'div'>(({ ...props }, ref) => (
-  <MessageBase>
-    <ModernLayout {...props} ref={ref} before={<Avatar style={avatarBg} size="300" />}>
-      <Box style={contentMargin} grow="Yes" direction="Column" gap="200">
-        <Box grow="Yes" gap="200" alignItems="Center" justifyContent="SpaceBetween">
-          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }} />
-          <LinePlaceholder style={{ maxWidth: toRem(50) }} />
+export const DefaultPlaceholder = as<'div', { variant?: ContainerColor }>(
+  ({ variant, ...props }, ref) => {
+    const nameSize = useMemo(() => randomNumberBetween(40, 100), []);
+    const msgSize = useMemo(() => randomNumberBetween(80, 200), []);
+    const msg2Size = useMemo(() => randomNumberBetween(80, 200), []);
+
+    return (
+      <ModernLayout
+        {...props}
+        ref={ref}
+        before={
+          <Avatar
+            style={{ backgroundColor: color[variant ?? 'SurfaceVariant'].Container }}
+            size="300"
+          />
+        }
+      >
+        <Box style={contentMargin} grow="Yes" direction="Column" gap="200">
+          <Box grow="Yes" gap="200" alignItems="Center" justifyContent="SpaceBetween">
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(nameSize) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
+          </Box>
+          <Box grow="Yes" gap="200" wrap="Wrap">
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msg2Size) }} />
+          </Box>
         </Box>
-        <Box grow="Yes" gap="200" wrap="Wrap">
-          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }} />
-          <LinePlaceholder style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }} />
-        </Box>
-      </Box>
-    </ModernLayout>
-  </MessageBase>
-));
+      </ModernLayout>
+    );
+  }
+);

src/app/components/message/placeholder/LinePlaceholder.css.ts

@@ -1,12 +1,35 @@
-import { style } from '@vanilla-extract/css';
-import { DefaultReset, color, config, toRem } from 'folds';
+import { ComplexStyleRule } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { ContainerColor, DefaultReset, color, config, toRem } from 'folds';
 
-export const LinePlaceholder = style([
-  DefaultReset,
-  {
-    width: '100%',
-    height: toRem(16),
-    borderRadius: config.radii.R300,
-    backgroundColor: color.SurfaceVariant.Container,
+const getVariant = (variant: ContainerColor): ComplexStyleRule => ({
+  backgroundColor: color[variant].Container,
+});
+
+export const LinePlaceholder = recipe({
+  base: [
+    DefaultReset,
+    {
+      width: '100%',
+      height: toRem(16),
+      borderRadius: config.radii.R300,
+    },
+  ],
+  variants: {
+    variant: {
+      Background: getVariant('Background'),
+      Surface: getVariant('Surface'),
+      SurfaceVariant: getVariant('SurfaceVariant'),
+      Primary: getVariant('Primary'),
+      Secondary: getVariant('Secondary'),
+      Success: getVariant('Success'),
+      Warning: getVariant('Warning'),
+      Critical: getVariant('Critical'),
+    },
   },
-]);
+  defaultVariants: {
+    variant: 'SurfaceVariant',
+  },
+});
+
+export type LinePlaceholderVariants = RecipeVariants<typeof LinePlaceholder>;

src/app/components/message/placeholder/LinePlaceholder.tsx

@@ -3,6 +3,13 @@ import { Box, as } from 'folds';
 import classNames from 'classnames';
 import * as css from './LinePlaceholder.css';
 
-export const LinePlaceholder = as<'div'>(({ className, ...props }, ref) => (
-  <Box className={classNames(css.LinePlaceholder, className)} shrink="No" {...props} ref={ref} />
-));
+export const LinePlaceholder = as<'div', css.LinePlaceholderVariants>(
+  ({ className, variant, ...props }, ref) => (
+    <Box
+      className={classNames(css.LinePlaceholder({ variant }), className)}
+      shrink="No"
+      {...props}
+      ref={ref}
+    />
+  )
+);