67P/hyperchannel

<div id="channel" {{did-insert this.scheduleOnAfterRender}}
                  {{did-update this.channelChanged @channel}}>
  <main>
    <header id="channel-header">
      <h2 id="channel-name"
          class={{if @channel.connected "connected" "disconnected"}}
          {{on "click" (fn this.menu "global" "toggle")}}>
        {{@channel.name}}
      </h2>
      <p id="channel-title">
        {{@channel.formattedTopic}}
      </p>
      <nav id="channel-nav">
        <LinkTo @route="channel.index" @model={{@channel}} {{on "click" (fn this.menu "channel" "show")}}>
          <IconUsers />
        </LinkTo>
        <LinkTo @route="channel.shares" @model={{@channel}} {{on "click" (fn this.menu "channel" "show")}}>
          <IconPaperclip />
        </LinkTo>
        <LinkTo @route="channel.settings" @model={{@channel}} {{on "click" (fn this.menu "channel" "show")}}>
          <IconInfo />
        </LinkTo>
        <a {{on "click" (fn this.leaveChannel @channel)}} title="Leave {{@channel.name}}">
          <IconLogOut />
        </a>
      </nav>
    </header>

    <div class="content-container {{@sidebarClass}} {{if @showChannelMenu "channel-menu-open"}}">
      <div class="content">
        <section id="channel-content" class="main pt-4 pb-8 bg-white text-neutral-800">
          {{#if @channel.isLogged}}
            <a onclick={{perform this.loadPreviousMessages}} class="block px-4 text-sm" role="button">
              Load previous messages
            </a>
          {{/if}}

          <ul class="list-none">
            <li>
              <ScrollingObserver @rootElement="#channel-content"
                                 @rootMargin={{this.partialRenderingObserverMargin}}
                                 @enabled={{this.partialRenderingEnabled}}
                                 @onIntersect={{this.increaseRenderedMessagesCount}} />
            </li>
            {{#each this.renderedMessages as |message|}}
              <li {{did-insert this.messagesUpdated}}>
                {{component message.type message=message channel=@channel
                            sendMessage=@onMessage
                            onUsernameClick=this.addUsernameMentionToMessage}}
              </li>
            {{else}}
              <li class="px-4 text-neutral-400">
              {{#if (eq @channel.protocol "IRC")}}
                {{#if @channel.isLogged}}
                  No recent messages to display.
                {{else}}
                  No Kosmos logs configured for this channel. <a href="https://wiki.kosmos.org/Setting_up_channel_logs" target="_blank" rel="noopener noreferrer">Learn more</a>
                {{/if}}
              {{else}}
                  No recent messages to display.
              {{/if}}
              </li>
            {{/each}}
            <li>
            <ScrollingObserver @rootElement="#channel"
                               @rootMargin="0px"
                               @threshold={{1}}
                               @retriggeringEnabled={{false}}
                               @onIntersect={{fn this.setAutomaticScrolling true}}
                               @onDiverge={{fn this.setAutomaticScrolling false}} />
            </li>
          </ul>
        </section>

        <footer>
          <MessageInput @message={{@newMessage}}
                        @sendMessage={{this.processMessageOrCommand}}
                        @usernames={{@channel.userList}} />
        </footer>
      </div>

      <aside id="channel-sidebar">
        {{yield}}
      </aside>
    </div>
  </main>
</div>