[Glitch] Adds DisplayName component

Port 42be0ca0eb to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/display_name/index.tsx

@@ -0,0 +1,122 @@
+import type { ComponentPropsWithoutRef, FC } from 'react';
+import { useMemo } from 'react';
+
+import classNames from 'classnames';
+import type { LinkProps } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
+import { EmojiHTML } from '@/flavours/glitch/features/emoji/emoji_html';
+import type { Account } from '@/flavours/glitch/models/account';
+import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
+
+import { Skeleton } from '../skeleton';
+
+interface Props {
+  account?: Account;
+  localDomain?: string;
+  simple?: boolean;
+  noDomain?: boolean;
+}
+
+export const DisplayName: FC<Props & ComponentPropsWithoutRef<'span'>> = ({
+  account,
+  localDomain,
+  simple = false,
+  noDomain = false,
+  className,
+  ...props
+}) => {
+  const username = useMemo(() => {
+    if (!account || noDomain) {
+      return null;
+    }
+    let acct = account.get('acct');
+
+    if (!acct.includes('@') && localDomain) {
+      acct = `${acct}@${localDomain}`;
+    }
+    return `@${acct}`;
+  }, [account, localDomain, noDomain]);
+
+  if (!account) {
+    if (simple) {
+      return null;
+    }
+    return (
+      <span {...props} className={classNames('display-name', className)}>
+        <bdi>
+          <strong className='display-name__html'>
+            <Skeleton width='10ch' />
+          </strong>
+        </bdi>
+        {!noDomain && (
+          <span className='display-name__account'>
+            &nbsp;
+            <Skeleton width='7ch' />
+          </span>
+        )}
+      </span>
+    );
+  }
+  const accountName = isModernEmojiEnabled()
+    ? account.get('display_name')
+    : account.get('display_name_html');
+  if (simple) {
+    return (
+      <bdi>
+        <EmojiHTML {...props} htmlString={accountName} shallow as='span' />
+      </bdi>
+    );
+  }
+
+  return (
+    <span {...props} className={classNames('display-name', className)}>
+      <bdi>
+        <EmojiHTML
+          className='display-name__html'
+          htmlString={accountName}
+          shallow
+          as='strong'
+        />
+      </bdi>
+      {username && (
+        <span className='display-name__account'>&nbsp;{username}</span>
+      )}
+    </span>
+  );
+};
+
+export const LinkedDisplayName: FC<
+  Props & { asProps?: ComponentPropsWithoutRef<'span'> } & Partial<LinkProps>
+> = ({
+  account,
+  asProps = {},
+  className,
+  localDomain,
+  simple,
+  noDomain,
+  ...linkProps
+}) => {
+  const displayProps = {
+    account,
+    className,
+    localDomain,
+    simple,
+    noDomain,
+    ...asProps,
+  };
+  if (!account) {
+    return <DisplayName {...displayProps} />;
+  }
+
+  return (
+    <Link
+      to={`/@${account.acct}`}
+      title={`@${account.acct}`}
+      data-hover-card-account={account.id}
+      {...linkProps}
+    >
+      <DisplayName {...displayProps} />
+    </Link>
+  );
+};

app/javascript/flavours/glitch/features/emoji/emoji_html.tsx

@@ -1,7 +1,5 @@
 import type { ComponentPropsWithoutRef, ElementType } from 'react';
 
-import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
-
 import { useEmojify } from './hooks';
 import type { CustomEmojiMapArg } from './types';
 
@@ -12,16 +10,21 @@ type EmojiHTMLProps<Element extends ElementType = 'div'> = Omit<
   htmlString: string;
   extraEmojis?: CustomEmojiMapArg;
   as?: Element;
+  shallow?: boolean;
 };
 
-export const ModernEmojiHTML = <Element extends ElementType>({
+export const EmojiHTML = ({
   extraEmojis,
   htmlString,
-  as: asElement, // Rename for syntax highlighting
+  as: Wrapper = 'div', // Rename for syntax highlighting
+  shallow,
   ...props
-}: EmojiHTMLProps<Element>) => {
-  const Wrapper = asElement ?? 'div';
-  const emojifiedHtml = useEmojify(htmlString, extraEmojis);
+}: EmojiHTMLProps<ElementType>) => {
+  const emojifiedHtml = useEmojify({
+    text: htmlString,
+    extraEmojis,
+    deep: !shallow,
+  });
 
   if (emojifiedHtml === null) {
     return null;
@@ -31,14 +34,3 @@ export const ModernEmojiHTML = <Element extends ElementType>({
     <Wrapper {...props} dangerouslySetInnerHTML={{ __html: emojifiedHtml }} />
   );
 };
-
-export const EmojiHTML = <Element extends ElementType>(
-  props: EmojiHTMLProps<Element>,
-) => {
-  if (isModernEmojiEnabled()) {
-    return <ModernEmojiHTML {...props} />;
-  }
-  const { as: asElement, htmlString, extraEmojis, ...rest } = props;
-  const Wrapper = asElement ?? 'div';
-  return <Wrapper {...rest} dangerouslySetInnerHTML={{ __html: htmlString }} />;
-};

app/javascript/flavours/glitch/features/emoji/hooks.ts

@@ -8,6 +8,7 @@ import { isModernEmojiEnabled } from '@/flavours/glitch/utils/environment';
 
 import { toSupportedLocale } from './locale';
 import { determineEmojiMode } from './mode';
+import { emojifyElement, emojifyText } from './render';
 import type {
   CustomEmojiMapArg,
   EmojiAppState,
@@ -15,7 +16,17 @@ import type {
 } from './types';
 import { stringHasAnyEmoji } from './utils';
 
-export function useEmojify(text: string, extraEmojis?: CustomEmojiMapArg) {
+interface UseEmojifyOptions {
+  text: string;
+  extraEmojis?: CustomEmojiMapArg;
+  deep?: boolean;
+}
+
+export function useEmojify({
+  text,
+  extraEmojis,
+  deep = true,
+}: UseEmojifyOptions) {
   const [emojifiedText, setEmojifiedText] = useState<string | null>(null);
 
   const appState = useEmojiAppState();
@@ -36,17 +47,23 @@ export function useEmojify(text: string, extraEmojis?: CustomEmojiMapArg) {
 
   const emojify = useCallback(
     async (input: string) => {
-      const wrapper = document.createElement('div');
-      wrapper.innerHTML = input;
-      const { emojifyElement } = await import('./render');
-      const result = await emojifyElement(wrapper, appState, extra);
+      let result: string | null = null;
+      if (deep) {
+        const wrapper = document.createElement('div');
+        wrapper.innerHTML = input;
+        if (await emojifyElement(wrapper, appState, extra)) {
+          result = wrapper.innerHTML;
+        }
+      } else {
+        result = await emojifyText(text, appState, extra);
+      }
       if (result) {
-        setEmojifiedText(result.innerHTML);
+        setEmojifiedText(result);
       } else {
         setEmojifiedText(input);
       }
     },
-    [appState, extra],
+    [appState, deep, extra, text],
   );
   useLayoutEffect(() => {
     if (isModernEmojiEnabled() && !!text.trim() && stringHasAnyEmoji(text)) {

app/javascript/flavours/glitch/reducers/index.ts

@@ -103,9 +103,9 @@ const RootStateRecord = ImmutableRecord(initialRootState, 'RootState');
 export const rootReducer = combineReducers(reducers, RootStateRecord);
 
 export function reducerWithInitialState(
-  stateOverrides: Record<string, unknown> = {},
+  ...stateOverrides: Record<string, unknown>[]
 ) {
-  const initialStateRecord = mergeDeep(initialRootState, stateOverrides);
+  const initialStateRecord = mergeDeep(initialRootState, ...stateOverrides);
   const PatchedRootStateRecord = ImmutableRecord(
     initialStateRecord,
     'RootState',