Add Channel Mention selection ability

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Added "Shuffle" option on Lists ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
 - Added Play Next/Previous buttons (with shortcuts SHIFT+N/SHIFT+P) ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
 - Added separate control for autoplay next on video player ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
+- Added Channel Mention selection ability while creating a comment ([#7151](https://github.com/lbryio/lbry-desktop/pull/7151))
 
 ### Changed
 - Changing the supported language from Filipino to Tagalog _community pr!_ ([#6951](https://github.com/lbryio/lbry-desktop/pull/6951))

ui/component/channelMentionSuggestion/index.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux';
+import ChannelMentionSuggestion from './view';
+
+const select = (state, props) => ({
+  claim: makeSelectClaimForUri(props.uri)(state),
+  isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
+});
+
+export default connect(select)(ChannelMentionSuggestion);

ui/component/channelMentionSuggestion/view.jsx

@@ -0,0 +1,32 @@
+// @flow
+import { ComboboxOption } from '@reach/combobox';
+import ChannelThumbnail from 'component/channelThumbnail';
+import React from 'react';
+
+type Props = {
+  claim: ?Claim,
+  uri?: string,
+  isResolvingUri: boolean,
+};
+
+export default function ChannelMentionSuggestion(props: Props) {
+  const { claim, uri, isResolvingUri } = props;
+
+  return !claim ? null : (
+    <ComboboxOption value={uri}>
+      {isResolvingUri ? (
+        <div className="channel-mention__suggestion">
+          <div className="media__thumb media__thumb--resolving" />
+        </div>
+      ) : (
+        <div className="channel-mention__suggestion">
+          <ChannelThumbnail xsmall uri={uri} />
+          <span className="channel-mention__suggestion-label">
+            <div className="channel-mention__suggestion-name">{claim.name}</div>
+            <div className="channel-mention__suggestion-title">{(claim.value && claim.value.title) || claim.name}</div>
+          </span>
+        </div>
+      )}
+    </ComboboxOption>
+  );
+}

ui/component/channelMentionSuggestions/index.js

@@ -0,0 +1,28 @@
+import { connect } from 'react-redux';
+import { selectShowMatureContent } from 'redux/selectors/settings';
+import { selectSubscriptions } from 'redux/selectors/subscriptions';
+import { withRouter } from 'react-router';
+import { doResolveUris, makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectTopLevelCommentsForUri } from 'redux/selectors/comments';
+import ChannelMentionSuggestions from './view';
+
+const select = (state, props) => {
+  const subscriptionUris = selectSubscriptions(state).map(({ uri }) => uri);
+  const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state);
+
+  let commentorUris = [];
+  topLevelComments.map(({ channel_url }) => !commentorUris.includes(channel_url) && commentorUris.push(channel_url));
+
+  const getUnresolved = (uris) =>
+    uris.map((uri) => !makeSelectClaimForUri(uri)(state) && uri).filter((uri) => uri !== false);
+
+  return {
+    commentorUris,
+    subscriptionUris,
+    unresolvedCommentors: getUnresolved(commentorUris),
+    unresolvedSubscriptions: getUnresolved(subscriptionUris),
+    showMature: selectShowMatureContent(state),
+  };
+};
+
+export default withRouter(connect(select, { doResolveUris })(ChannelMentionSuggestions));

ui/component/channelMentionSuggestions/view.jsx

@@ -0,0 +1,220 @@
+// @flow
+import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList } from '@reach/combobox';
+import { Form } from 'component/common/form';
+import { parseURI } from 'lbry-redux';
+import { SEARCH_OPTIONS } from 'constants/search';
+import * as KEYCODES from 'constants/keycodes';
+import ChannelMentionSuggestion from 'component/channelMentionSuggestion';
+import ChannelMentionTopSuggestion from 'component/channelMentionTopSuggestion';
+import React from 'react';
+import Spinner from 'component/spinner';
+import type { ElementRef } from 'react';
+import useLighthouse from 'effects/use-lighthouse';
+
+const INPUT_DEBOUNCE_MS = 1000;
+const LIGHTHOUSE_MIN_CHARACTERS = 3;
+
+type Props = {
+  inputRef: any,
+  mentionTerm: string,
+  noTopSuggestion?: boolean,
+  showMature: boolean,
+  creatorUri: string,
+  isLivestream: boolean,
+  commentorUris: Array<string>,
+  unresolvedCommentors: Array<string>,
+  subscriptionUris: Array<string>,
+  unresolvedSubscriptions: Array<string>,
+  doResolveUris: (Array<string>) => void,
+  customSelectAction?: (string) => void,
+};
+
+export default function ChannelMentionSuggestions(props: Props) {
+  const {
+    unresolvedCommentors,
+    unresolvedSubscriptions,
+    isLivestream,
+    creatorUri,
+    inputRef,
+    showMature,
+    noTopSuggestion,
+    mentionTerm,
+    doResolveUris,
+    customSelectAction,
+  } = props;
+  const comboboxInputRef: ElementRef<any> = React.useRef();
+  const comboboxListRef: ElementRef<any> = React.useRef();
+  const [debouncedTerm, setDebouncedTerm] = React.useState('');
+
+  const isRefFocused = (ref) => ref && ref.current && ref.current === document.activeElement;
+
+  let subscriptionUris = props.subscriptionUris.filter((uri) => uri !== creatorUri);
+  let commentorUris = props.commentorUris.filter((uri) => uri !== creatorUri && !subscriptionUris.includes(uri));
+
+  const termToMatch = mentionTerm && mentionTerm.replace('@', '').toLowerCase();
+  const allShownUris = [creatorUri, ...subscriptionUris, ...commentorUris];
+  const possibleMatches = allShownUris.filter((uri) => {
+    try {
+      const { channelName } = parseURI(uri);
+      return channelName.toLowerCase().includes(termToMatch);
+    } catch (e) {}
+  });
+  const hasSubscriptionsResolved =
+    subscriptionUris &&
+    !subscriptionUris.every((uri) => unresolvedSubscriptions && unresolvedSubscriptions.includes(uri));
+  const hasCommentorsShown =
+    commentorUris.length > 0 && commentorUris.some((uri) => possibleMatches && possibleMatches.includes(uri));
+
+  const searchSize = 5;
+  const additionalOptions = { isBackgroundSearch: false, [SEARCH_OPTIONS.CLAIM_TYPE]: SEARCH_OPTIONS.INCLUDE_CHANNELS };
+  const { results, loading } = useLighthouse(debouncedTerm, showMature, searchSize, additionalOptions, 0);
+  const stringifiedResults = JSON.stringify(results);
+
+  const hasMinLength = mentionTerm && mentionTerm.length >= LIGHTHOUSE_MIN_CHARACTERS;
+  const isTyping = debouncedTerm !== mentionTerm;
+  const showPlaceholder = isTyping || loading;
+
+  const handleSelect = React.useCallback(
+    (value) => {
+      if (customSelectAction) {
+        // Give them full results, as our resolved one might truncate the claimId.
+        customSelectAction(value || (results && results.find((r) => r.startsWith(value))) || '');
+      }
+      if (inputRef && inputRef.current) inputRef.current.focus();
+    },
+    [customSelectAction, inputRef, results]
+  );
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (isTyping) setDebouncedTerm(!hasMinLength ? '' : mentionTerm);
+    }, INPUT_DEBOUNCE_MS);
+
+    return () => clearTimeout(timer);
+  }, [isTyping, mentionTerm, hasMinLength, possibleMatches.length]);
+
+  React.useEffect(() => {
+    if (!inputRef) return;
+
+    if (mentionTerm) {
+      inputRef.current.classList.add('textarea-mention');
+    } else {
+      inputRef.current.classList.remove('textarea-mention');
+    }
+  }, [inputRef, mentionTerm]);
+
+  React.useEffect(() => {
+    if (!inputRef || !comboboxInputRef || !mentionTerm) return;
+
+    function handleKeyDown(event) {
+      const { keyCode } = event;
+      const activeElement = document.activeElement;
+
+      if (keyCode === KEYCODES.UP || keyCode === KEYCODES.DOWN) {
+        if (isRefFocused(comboboxInputRef)) {
+          const selectedId = activeElement && activeElement.getAttribute('aria-activedescendant');
+          const selectedItem = selectedId && document.querySelector(`li[id="${selectedId}"]`);
+          if (selectedItem) selectedItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        } else {
+          comboboxInputRef.current.focus();
+        }
+      } else {
+        if (keyCode === KEYCODES.TAB) {
+          event.preventDefault();
+          const activeValue = activeElement && activeElement.getAttribute('value');
+
+          if (activeValue) {
+            handleSelect(activeValue);
+          } else if (possibleMatches.length) {
+            handleSelect(possibleMatches[0]);
+          } else if (results) {
+            handleSelect(mentionTerm);
+          }
+        }
+        inputRef.current.focus();
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleSelect, inputRef, mentionTerm, possibleMatches, results]);
+
+  React.useEffect(() => {
+    if (!stringifiedResults) return;
+
+    const arrayResults = JSON.parse(stringifiedResults);
+    if (arrayResults && arrayResults.length > 0) doResolveUris(arrayResults);
+  }, [doResolveUris, stringifiedResults]);
+
+  // Only resolve commentors on Livestreams if actually mentioning/looking for it
+  React.useEffect(() => {
+    if (isLivestream && unresolvedCommentors && mentionTerm) doResolveUris(unresolvedCommentors);
+  }, [doResolveUris, isLivestream, mentionTerm, unresolvedCommentors]);
+
+  // Only resolve the subscriptions that match the mention term, instead of all
+  React.useEffect(() => {
+    if (isTyping) return;
+
+    let urisToResolve = [];
+    subscriptionUris.map(
+      (uri) =>
+        hasMinLength &&
+        possibleMatches.includes(uri) &&
+        unresolvedSubscriptions.includes(uri) &&
+        urisToResolve.push(uri)
+    );
+
+    if (urisToResolve.length > 0) doResolveUris(urisToResolve);
+  }, [doResolveUris, hasMinLength, isTyping, possibleMatches, subscriptionUris, unresolvedSubscriptions]);
+
+  const suggestionsRow = (label: string, suggestions: Array<string>, hasSuggestionsBelow: boolean) => {
+    if (mentionTerm !== '@' && suggestions !== results) {
+      suggestions = suggestions.filter((uri) => possibleMatches.includes(uri));
+    } else if (suggestions === results) {
+      suggestions = suggestions.filter((uri) => !allShownUris.includes(uri));
+    }
+
+    return !suggestions.length ? null : (
+      <>
+        <div className="channel-mention__label">{label}</div>
+        {suggestions.map((uri) => (
+          <ChannelMentionSuggestion key={uri} uri={uri} />
+        ))}
+        {hasSuggestionsBelow && <hr className="channel-mention__top-separator" />}
+      </>
+    );
+  };
+
+  return (
+    <Form onSubmit={() => handleSelect(mentionTerm)}>
+      <Combobox className="channel-mention" onSelect={handleSelect}>
+        <ComboboxInput ref={comboboxInputRef} className="channel-mention__input--none" value={mentionTerm} />
+        {mentionTerm && (
+          <ComboboxPopover portal={false} className="channel-mention__suggestions">
+            <ComboboxList ref={comboboxListRef}>
+              {creatorUri &&
+                suggestionsRow(
+                  __('Creator'),
+                  [creatorUri],
+                  hasSubscriptionsResolved || hasCommentorsShown || !showPlaceholder
+                )}
+              {hasSubscriptionsResolved &&
+                suggestionsRow(__('Following'), subscriptionUris, hasCommentorsShown || !showPlaceholder)}
+              {commentorUris.length > 0 && suggestionsRow(__('From comments'), commentorUris, !showPlaceholder)}
+
+              {showPlaceholder
+                ? hasMinLength && <Spinner type="small" />
+                : results && (
+                    <>
+                      {!noTopSuggestion && <ChannelMentionTopSuggestion query={debouncedTerm} />}
+                      {suggestionsRow(__('From search'), results, false)}
+                    </>
+                  )}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </Form>
+  );
+}

ui/component/channelMentionTopSuggestion/index.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { makeSelectIsUriResolving, doResolveUri } from 'lbry-redux';
+import { makeSelectWinningUriForQuery } from 'redux/selectors/search';
+import ChannelMentionTopSuggestion from './view';
+
+const select = (state, props) => {
+  const uriFromQuery = `lbry://${props.query}`;
+  return {
+    uriFromQuery,
+    isResolvingUri: makeSelectIsUriResolving(uriFromQuery)(state),
+    winningUri: makeSelectWinningUriForQuery(props.query)(state),
+  };
+};
+
+export default connect(select, { doResolveUri })(ChannelMentionTopSuggestion);

ui/component/channelMentionTopSuggestion/view.jsx

@@ -0,0 +1,43 @@
+// @flow
+import ChannelMentionSuggestion from 'component/channelMentionSuggestion';
+import LbcSymbol from 'component/common/lbc-symbol';
+import React from 'react';
+
+type Props = {
+  uriFromQuery: string,
+  winningUri: string,
+  isResolvingUri: boolean,
+  doResolveUri: (string) => void,
+};
+
+export default function ChannelMentionTopSuggestion(props: Props) {
+  const { uriFromQuery, winningUri, isResolvingUri, doResolveUri } = props;
+
+  React.useEffect(() => {
+    if (uriFromQuery) doResolveUri(uriFromQuery);
+  }, [doResolveUri, uriFromQuery]);
+
+  if (isResolvingUri) {
+    return (
+      <div className="channel-mention__winning-claim">
+        <div className="channel-mention__label channel-mention__placeholder-label" />
+
+        <div className="channel-mention__suggestion channel-mention__placeholder-suggestion">
+          <div className="channel-mention__placeholder-thumbnail" />
+          <div className="channel-mention__placeholder-info" />
+        </div>
+        <hr className="channel-mention__top-separator" />
+      </div>
+    );
+  }
+
+  return !winningUri ? null : (
+    <>
+      <div className="channel-mention__label">
+        <LbcSymbol prefix={__('Most Supported')} />
+      </div>
+      <ChannelMentionSuggestion uri={winningUri} />
+      <hr className="channel-mention__top-separator" />
+    </>
+  );
+}

ui/component/commentCreate/index.js

@@ -6,16 +6,13 @@ import {
   selectFetchingMyChannels,
   doSendTip,
 } from 'lbry-redux';
-import { doOpenModal, doSetActiveChannel } from 'redux/actions/app';
 import { doCommentCreate, doFetchCreatorSettings, doCommentById } from 'redux/actions/comments';
-import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectSettingsByChannelId } from 'redux/selectors/comments';
 import { CommentCreate } from './view';
 import { doToast } from 'redux/actions/notifications';
 
 const select = (state, props) => ({
-  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
   claim: makeSelectClaimForUri(props.uri)(state),
   channels: selectMyChannelClaims(state),
   isFetchingChannels: selectFetchingMyChannels(state),
@@ -38,8 +35,6 @@ const perform = (dispatch, ownProps) => ({
         environment
       )
     ),
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-  setActiveChannel: (claimId) => dispatch(doSetActiveChannel(claimId)),
   sendTip: (params, callback, errorCallback) => dispatch(doSendTip(params, false, callback, errorCallback, false)),
   doToast: (options) => dispatch(doToast(options)),
   doFetchCreatorSettings: (channelClaimId) => dispatch(doFetchCreatorSettings(channelClaimId)),

ui/component/commentCreate/view.jsx

@@ -1,26 +1,27 @@
 // @flow
-import type { ElementRef } from 'react';
-import { SIMPLE_SITE } from 'config';
-import * as PAGES from 'constants/pages';
-import * as ICONS from 'constants/icons';
-import * as KEYCODES from 'constants/keycodes';
-import React from 'react';
-import classnames from 'classnames';
-import { FormField, Form } from 'component/common/form';
-import Icon from 'component/common/icon';
-import Button from 'component/button';
-import SelectChannel from 'component/selectChannel';
-import usePersistedState from 'effects/use-persisted-state';
 import { FF_MAX_CHARS_IN_COMMENT, FF_MAX_CHARS_IN_LIVESTREAM_COMMENT } from 'constants/form-field';
-import { useHistory } from 'react-router';
+import { FormField, Form } from 'component/common/form';
-import WalletTipAmountSelector from 'component/walletTipAmountSelector';
-import CreditAmount from 'component/common/credit-amount';
-import ChannelThumbnail from 'component/channelThumbnail';
-import I18nMessage from 'component/i18nMessage';
-import UriIndicator from 'component/uriIndicator';
-import Empty from 'component/common/empty';
 import { getChannelIdFromClaim } from 'util/claim';
 import { Lbryio } from 'lbryinc';
+import { SIMPLE_SITE } from 'config';
+import { useHistory } from 'react-router';
+import * as ICONS from 'constants/icons';
+import * as KEYCODES from 'constants/keycodes';
+import * as PAGES from 'constants/pages';
+import Button from 'component/button';
+import ChannelMentionSuggestions from 'component/channelMentionSuggestions';
+import ChannelThumbnail from 'component/channelThumbnail';
+import classnames from 'classnames';
+import CreditAmount from 'component/common/credit-amount';
+import Empty from 'component/common/empty';
+import I18nMessage from 'component/i18nMessage';
+import Icon from 'component/common/icon';
+import React from 'react';
+import SelectChannel from 'component/selectChannel';
+import type { ElementRef } from 'react';
+import UriIndicator from 'component/uriIndicator';
+import usePersistedState from 'effects/use-persisted-state';
+import WalletTipAmountSelector from 'component/walletTipAmountSelector';
 
 import { getStripeEnvironment } from 'util/stripe';
 let stripeEnvironment = getStripeEnvironment();
@@ -31,10 +32,7 @@ const TAB_LBC = 'TabLBC';
 type Props = {
   uri: string,
   claim: StreamClaim,
-  createComment: (string, string, string, ?string, ?string, ?string) => Promise<any>,
   channels: ?Array<ChannelClaim>,
-  onDoneReplying?: () => void,
-  onCancelReplying?: () => void,
   isNested: boolean,
   isFetchingChannels: boolean,
   parentId: string,
@@ -44,25 +42,26 @@ type Props = {
   bottom: boolean,
   livestream?: boolean,
   embed?: boolean,
-  toast: (string) => void,
   claimIsMine: boolean,
-  sendTip: ({}, (any) => void, (any) => void) => void,
-  doToast: ({ message: string }) => void,
   supportDisabled: boolean,
-  doFetchCreatorSettings: (channelId: string) => Promise<any>,
   settingsByChannelId: { [channelId: string]: PerChannelSettings },
+  shouldFetchComment: boolean,
+  doToast: ({ message: string }) => void,
+  createComment: (string, string, string, ?string, ?string, ?string) => Promise<any>,
+  onDoneReplying?: () => void,
+  onCancelReplying?: () => void,
+  toast: (string) => void,
+  sendTip: ({}, (any) => void, (any) => void) => void,
+  doFetchCreatorSettings: (channelId: string) => Promise<any>,
   setQuickReply: (any) => void,
   fetchComment: (commentId: string) => Promise<any>,
-  shouldFetchComment: boolean,
 };
 
 export function CommentCreate(props: Props) {
   const {
-    createComment,
+    uri,
     claim,
     channels,
-    onDoneReplying,
-    onCancelReplying,
     isNested,
     isFetchingChannels,
     isReply,
@@ -72,36 +71,47 @@ export function CommentCreate(props: Props) {
     livestream,
     embed,
     claimIsMine,
-    sendTip,
-    doToast,
-    doFetchCreatorSettings,
     settingsByChannelId,
     supportDisabled,
+    shouldFetchComment,
+    doToast,
+    createComment,
+    onDoneReplying,
+    onCancelReplying,
+    sendTip,
+    doFetchCreatorSettings,
     setQuickReply,
     fetchComment,
-    shouldFetchComment,
   } = props;
+  const formFieldRef: ElementRef<any> = React.useRef();
   const buttonRef: ElementRef<any> = React.useRef();
   const {
     push,
     location: { pathname },
   } = useHistory();
+
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [commentFailure, setCommentFailure] = React.useState(false);
   const [successTip, setSuccessTip] = React.useState({ txid: undefined, tipAmount: undefined });
-  const claimId = claim && claim.claim_id;
   const [isSupportComment, setIsSupportComment] = React.useState();
   const [isReviewingSupportComment, setIsReviewingSupportComment] = React.useState();
   const [tipAmount, setTipAmount] = React.useState(1);
   const [commentValue, setCommentValue] = React.useState('');
+  const [channelMention, setChannelMention] = React.useState('');
   const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
-  const hasChannels = channels && channels.length;
-  const charCount = commentValue.length;
   const [activeTab, setActiveTab] = React.useState('');
   const [tipError, setTipError] = React.useState();
   const [deletedComment, setDeletedComment] = React.useState(false);
-  const disabled = deletedComment || isSubmitting || isFetchingChannels || !commentValue.length;
   const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState();
+
+  const commentWords = commentValue ? commentValue && commentValue.split(' ') : [];
+  const lastCommentWord = commentWords && commentWords[commentWords.length - 1];
+  const claimId = claim && claim.claim_id;
+  const signingChannel = (claim && claim.signing_channel) || claim;
+  const channelUri = signingChannel && signingChannel.permanent_url;
+  const hasChannels = channels && channels.length;
+  const charCount = commentValue ? commentValue.length : 0;
+  const disabled = deletedComment || isSubmitting || isFetchingChannels || !commentValue.length;
   const channelId = getChannelIdFromClaim(claim);
   const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
   const minSuper = (channelSettings && channelSettings.min_tip_amount_super_chat) || 0;
@@ -109,15 +119,6 @@ export function CommentCreate(props: Props) {
   const minAmount = minTip || minSuper || 0;
   const minAmountMet = minAmount === 0 || tipAmount >= minAmount;
 
-  // Fetch top-level comments to identify if it has been deleted and can reply to it
-  React.useEffect(() => {
-    if (shouldFetchComment && fetchComment) {
-      fetchComment(parentId).then((result) => {
-        setDeletedComment(String(result).includes('Error'));
-      });
-    }
-  }, [fetchComment, shouldFetchComment, parentId]);
-
   const minAmountRef = React.useRef(minAmount);
   minAmountRef.current = minAmount;
 
@@ -157,6 +158,19 @@ export function CommentCreate(props: Props) {
     setCommentValue(commentValue);
   }
 
+  function handleSelectMention(mentionValue) {
+    const newCommentValue = commentWords.slice(0, -1).join(' ');
+    let newMentionValue = mentionValue;
+    if (mentionValue.includes('#')) {
+      newMentionValue = mentionValue
+        .substring(0, mentionValue.indexOf('#') + 3)
+        .replace('lbry://', '')
+        .replace('#', ':');
+    }
+
+    setCommentValue(newCommentValue + (commentWords.length > 1 ? ' ' : '') + `${newMentionValue} `);
+  }
+
   function altEnterListener(e: SyntheticKeyboardEvent<*>) {
     if ((livestream || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODES.ENTER) {
       e.preventDefault();
@@ -365,10 +379,6 @@ export function CommentCreate(props: Props) {
       });
   }
 
-  function toggleEditorMode() {
-    setAdvancedEditor(!advancedEditor);
-  }
-
   // **************************************************************************
   // Effects
   // **************************************************************************
@@ -378,7 +388,21 @@ export function CommentCreate(props: Props) {
     if (!channelSettings && channelId) {
       doFetchCreatorSettings(channelId);
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [channelId, channelSettings, doFetchCreatorSettings]);
+
+  // Notifications: Fetch top-level comments to identify if it has been deleted and can reply to it
+  React.useEffect(() => {
+    if (shouldFetchComment && fetchComment) {
+      fetchComment(parentId).then((result) => {
+        setDeletedComment(String(result).includes('Error'));
+      });
+    }
+  }, [fetchComment, shouldFetchComment, parentId]);
+
+  React.useEffect(() => {
+    const isMentioning = lastCommentWord && lastCommentWord.indexOf('@') === 0;
+    setChannelMention(isMentioning ? lastCommentWord : '');
+  }, [lastCommentWord]);
 
   // **************************************************************************
   // Render
@@ -466,10 +490,22 @@ export function CommentCreate(props: Props) {
         'comment__create--bottom': bottom,
       })}
     >
+      {!advancedEditor && (
+        <ChannelMentionSuggestions
+          uri={uri}
+          isLivestream={livestream}
+          inputRef={formFieldRef && formFieldRef.current && formFieldRef.current.input}
+          mentionTerm={channelMention}
+          creatorUri={channelUri}
+          customSelectAction={handleSelectMention}
+        />
+      )}
       <FormField
         disabled={isFetchingChannels}
         type={SIMPLE_SITE ? 'textarea' : advancedEditor && !isReply ? 'markdown' : 'textarea'}
         name={isReply ? 'content_reply' : 'content_description'}
+        ref={formFieldRef}
+        className={isReply ? 'content_reply' : 'content_comment'}
         label={
           <span className="comment-new__label-wrapper">
             {!livestream && (
@@ -481,7 +517,7 @@ export function CommentCreate(props: Props) {
         quickActionLabel={
           !SIMPLE_SITE && (isReply ? undefined : advancedEditor ? __('Simple Editor') : __('Advanced Editor'))
         }
-        quickActionHandler={!SIMPLE_SITE && toggleEditorMode}
+        quickActionHandler={() => !SIMPLE_SITE && setAdvancedEditor(!advancedEditor)}
         onFocus={onTextareaFocus}
         onBlur={onTextareaBlur}
         placeholder={__('Say something about this...')}

ui/component/commentsList/view.jsx

@@ -278,6 +278,7 @@ function CommentList(props: Props) {
 
   return (
     <Card
+      className="card--enable-overflow"
       title={
         totalComments > 0
           ? totalComments === 1

ui/scss/all.scss

@@ -14,6 +14,7 @@
 @import 'component/button';
 @import 'component/card';
 @import 'component/channel';
+@import 'component/channel-mention';
 @import 'component/claim-list';
 @import 'component/collection';
 @import 'component/comments';
@@ -67,4 +68,3 @@
 @import 'component/empty';
 @import 'component/stripe-card';
 @import 'component/wallet-tip-send';
-

ui/scss/component/_channel-mention.scss

@@ -0,0 +1,115 @@
+.channel-mention {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: calc(100% - 1.8rem);
+  z-index: 3;
+  font-size: var(--font-small);
+  padding-left: var(--spacing-s);
+
+  > .icon {
+    top: 0;
+    left: var(--spacing-m);
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    stroke: var(--color-input-placeholder);
+  }
+
+  @media (min-width: $breakpoint-small) {
+    padding: 0;
+  }
+}
+
+.channel-mention__suggestions {
+  @extend .card;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: 30vh;
+  position: absolute;
+  text-overflow: ellipsis;
+  width: 22rem;
+  z-index: 3;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-shadow: var(--card-box-shadow);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-bottom: none;
+
+  .channel-mention__label:first-of-type {
+    margin-top: var(--spacing-xs);
+  }
+}
+
+.channel-mention__input--none {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.channel-mention__label {
+  @extend .wunderbar__label;
+}
+
+.channel-mention__top-separator {
+  @extend .wunderbar__top-separator;
+}
+
+.channel-mention__suggestion {
+  @extend .wunderbar__suggestion;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .channel-thumbnail {
+    @include handleChannelGif(2.1rem);
+    position: absolute;
+
+    @media (min-width: $breakpoint-small) {
+      @include handleChannelGif(2.1rem);
+    }
+  }
+}
+
+.channel-mention__suggestion-label {
+  @extend .wunderbar__suggestion-label;
+  margin-left: var(--spacing-m);
+  display: block;
+  position: relative;
+}
+
+.channel-mention__suggestion-name {
+  display: inline;
+  margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
+
+  &::after {
+    margin-left: var(--spacing-xxs);
+    content: '•';
+  }
+}
+
+.channel-mention__suggestion-title {
+  display: inline;
+  margin-left: var(--spacing-xxs);
+}
+
+.channel-mention__placeholder-suggestion {
+  @extend .wunderbar__suggestion-name;
+}
+
+.channel-mention__placeholder-label {
+  @extend .wunderbar__suggestion-name;
+}
+
+.channel-mention__placeholder-thumbnail {
+  @extend .wunderbar__suggestion-name;
+}
+.channel-mention__placeholder-info {
+  @extend .wunderbar__suggestion-name;
+}
+
+.textarea-mention {
+  color: var(--color-primary);
+}

ui/scss/component/_comments.scss

@@ -34,6 +34,12 @@ $thumbnailWidthSmall: 1rem;
 
 .comment__create {
   font-size: var(--font-small);
+  position: relative;
+
+  fieldset-section,
+  .form-field--SimpleMDE {
+    margin-top: 0;
+  }
 }
 
 .comment__create--reply {
@@ -80,6 +86,10 @@ $thumbnailWidthSmall: 1rem;
   }
 }
 
+.content_comment {
+  position: relative;
+}
+
 .comment__thumbnail-wrapper {
   flex: 0;
   margin-top: var(--spacing-xxs);

web/scss/lbrytv.scss

@@ -15,6 +15,7 @@
 @import '../../ui/scss/component/button';
 @import '../../ui/scss/component/card';
 @import '../../ui/scss/component/channel';
+@import '../../ui/scss/component/channel-mention';
 @import '../../ui/scss/component/claim-list';
 @import '../../ui/scss/component/collection';
 @import '../../ui/scss/component/comments';

web/scss/odysee.scss

@@ -15,6 +15,7 @@
 @import '../../ui/scss/component/button';
 @import '../../ui/scss/component/card';
 @import '../../ui/scss/component/channel';
+@import '../../ui/scss/component/channel-mention';
 @import '../../ui/scss/component/claim-list';
 @import '../../ui/scss/component/collection';
 @import '../../ui/scss/component/comments';