<NME> conversation-list-item.tsx
<BEF> // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

import UserAvatar from 'components/user-avatar';
import { computed, makeObservable } from 'mobx';
import { observer } from 'mobx-react';
import Channel from 'models/chat/channel';
import core from 'osu-core-singleton';
import * as React from 'react';
import { classWithModifiers } from 'utils/css';

interface Props {
  channel: Channel;
}

@observer
export default class ConversationListItem extends React.Component<Props> {
  private readonly ref = React.createRef<HTMLDivElement>();

  @computed
  get selected() {
    return this.props.channel.channelId === core.dataStore.chatState.selectedChannel?.channelId;
  }

  constructor(props: Props) {
@observer
export default class ConversationListItem extends React.Component<any, {}> {
  switch = (e: React.MouseEvent<HTMLElement>) => {
    e.preventDefault();

    if (this.props.dataStore.uiState.chat.selected !== this.props.channelId) {
      this.props.dispatcher.dispatch(new ChatChannelSwitchAction(this.props.channelId));
    }
  }

  part = (e: React.MouseEvent<HTMLElement>) => {
    e.preventDefault();

    this.props.dispatcher.dispatch(new ChatChannelPartAction(this.props.channelId));
  }

    this.ensureSelectedInView('nearest');
  }

  render(): React.ReactNode {
    const baseClassName = 'chat-conversation-list-item';

    return (
      <div ref={this.ref} className={classWithModifiers(baseClassName, { selected: this.selected })}>
        {this.props.channel.isUnread && !this.selected
          ? <div className={`${baseClassName}__unread-indicator`} />
          : null}

        <button className={`${baseClassName}__close-button`} onClick={this.part}>
          <i className='fas fa-times' />
        </button>

        <button className={`${baseClassName}__tile`} onClick={this.switch}>
          <div className={`${baseClassName}__avatar`}>

    return (
      <div className={className}>
        <a href='#' className={`${baseClassName}__close-button`} onClick={this.part}>
          <i className='fas fa-times' />
        </a>
        <div className={`${baseClassName}__unread-indicator`} />
        <a href='#' className={`${baseClassName}__tile`} onClick={this.switch}>
          <img className={`${baseClassName}__avatar`} src={conversation.icon} />
          <div className={`${baseClassName}__name`}>{conversation.name}</div>
          <div className={`${baseClassName}__chevron`}>
            <i className='fas fa-chevron-right' />
          </div>
        </a>
      </div>
    );
  }
  }

  private readonly part = () => {
    if (this.props.channel.type === 'ANNOUNCE' && !confirm(osu.trans('chat.channels.confirm_part'))){
      return;
    }

    core.dataStore.channelStore.partChannel(this.props.channel.channelId);
  };

  private readonly switch = () => {
    core.dataStore.chatState.selectChannel(this.props.channel.channelId);
  };
}

<MSG> Make close button easier to click

<DFF> @@ -26,16 +26,12 @@ import RootDataStore from 'stores/root-data-store';
 @observer
 export default class ConversationListItem extends React.Component<any, {}> {
   switch = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-
     if (this.props.dataStore.uiState.chat.selected !== this.props.channelId) {
       this.props.dispatcher.dispatch(new ChatChannelSwitchAction(this.props.channelId));
     }
   }
 
   part = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-
     this.props.dispatcher.dispatch(new ChatChannelPartAction(this.props.channelId));
   }
 
@@ -60,17 +56,17 @@ export default class ConversationListItem extends React.Component<any, {}> {
 
     return (
       <div className={className}>
-        <a href='#' className={`${baseClassName}__close-button`} onClick={this.part}>
+        <button className={`${baseClassName}__close-button`} onClick={this.part}>
           <i className='fas fa-times' />
-        </a>
+        </button>
         <div className={`${baseClassName}__unread-indicator`} />
-        <a href='#' className={`${baseClassName}__tile`} onClick={this.switch}>
+        <button className={`${baseClassName}__tile`} onClick={this.switch}>
           <img className={`${baseClassName}__avatar`} src={conversation.icon} />
           <div className={`${baseClassName}__name`}>{conversation.name}</div>
           <div className={`${baseClassName}__chevron`}>
             <i className='fas fa-chevron-right' />
           </div>
-        </a>
+        </button>
       </div>
     );
   }

{'addition_count': 4, 'commit_subject': 'Make close button easier to click', 'deletion_count': 8, 'file_extension': '.tsx', 'lang': 'tsx', 'license': 'agpl-3.0', 'repo_name': 'ppy/osu-web'}