1. Interface Tour

This chapter describes how the main screen is laid out after you enter a server. HakoSpace Web and HakoSpace Desktop share the same main interface structure. HakoSpace Desktop adds a multi-server sidebar on the far left, which you use to switch between the servers you’ve joined (for details, see §10, Desktop-Only Features). The rest of this chapter describes the main interface within a server.

1.1 Overall Layout

From left to right, the HakoSpace main interface is divided into three areas. The layout is exactly the same in HakoSpace Web and HakoSpace Desktop:

• Left sidebar: contains the channel list and, at the very bottom, the personal control bar.
• Message area (center): the main area for reading and sending messages. When you join a voice channel, this area switches to the voice call interface.
• Member list (right): shows the server’s members, with the direct message list at the very bottom. You can collapse it to free up space (see §1.4).

You can drag the edge of the left sidebar to adjust its width freely. You can collapse the member list on the right with the button to the right of the Members heading. Once it’s collapsed, expand it again with the button on the right edge of the screen.

On narrower screens (such as phones), the interface switches to a bottom tab bar layout. For details, see §1.6.

1.2 Channel List (Left Sidebar)

The upper part of the left sidebar is the channel list, which holds two kinds of channels:

• Text channels (prefixed with #): for text discussions.
• Voice channels (prefixed with ♪): click one to join a live call directly.

Members who hold the Manage channels permission (the owner and admins always included) can organize channels into channel groups (channels on the same topic are gathered under one group, which makes them easier to browse).

The personal control bar is at the very bottom. For details, see §1.5.

1.3 Message Area (Center)

At the very top of the message area is the channel title bar, which shows the channel name. Above the title bar is the tab bar: the channels and direct messages you have open are lined up as tabs in this bar, and you click a tab to switch to it. The notification bell is on the right side of the tab bar (see §8.2). Messages run in time order from top to bottom, and the newest messages appear at the bottom.

When you first enter an empty channel that has no messages yet, two lines of guidance appear in the center of the message area:

• “Welcome to #{channel name}!”
• “This is the start of the #{channel name} channel. Be the first to say something!”

When you scroll to the top, HakoSpace automatically loads older messages (a loading indicator appears briefly). If new messages arrived while you were away from the channel, you see an unread divider labeled {count} new messages when you open the channel again, so you can pick up reading where you left off. When you scroll within a channel, HakoSpace doesn’t force you back to the bottom. New messages push the view up automatically only when you’re already at the bottom, so you aren’t interrupted while you read older messages.

When a channel’s messages don’t fill the screen yet, they line up upward from the input box at the bottom, and the newest message sits directly above the input box.

Removal notice at the start of a channel: Text channels and voice channels can be set with a Message limit or Keep messages for (days) (see Admin Manual §2.1), and older messages that go beyond them are removed automatically. When a channel has had messages removed this way and you scroll back to the earliest message, a notice box with a clock icon appears above the first message, reading “Earlier messages were removed by this channel’s retention rules ({count} in total, most recently on {date}).” If the server was upgraded from an older version, messages that were removed before the upgrade don’t get this notice. When all of a channel’s messages have been removed, the notice box appears above the two lines of guidance that start with “Welcome to #{channel name}!”.

1.4 Member List (Right Sidebar)

At the top of the member list on the right is the Members heading. Below it, the list is divided into the following sections, in this order. Each section heading is followed by the number of people in it, and you can click a section heading to collapse or expand that section:

• Favorites: members you’ve added to your favorites, listed here whether they’re online or offline. This section appears only when you have favorite members.
• Online: members other than your favorites who are currently online.
• Offline: members other than your favorites who aren’t online right now. This section appears only when there are such members, and it’s collapsed by default.

Below these sections, at the very bottom of the member list, is the Direct Messages section. For details, see §4.1.

To the right of each member’s name is a star button. Click it once to add that member to Favorites, and click it again to remove them. On a computer, the star appears only when you move the mouse pointer over that member. Members already in your favorites always show a filled star.

To give the message area more space, click the double-arrow button to the right of the Members heading (tooltip: Hide Members) to collapse the entire member list. Once it’s collapsed, a double-arrow button appears in the middle of the right edge of the screen (tooltip: Show Members). Click it to expand the list again.

Click any member in the list to open that member’s profile card in the center of the screen. The card contains:

• A profile banner (set by the member; if none is set, a default background is used)
• The avatar (round, with a border in the color the member chose under Avatar Border Color; see §7.2)
• The nickname and current online status
• The member’s row of badges
• @username (the member’s unique identifier on the server)
• About Me: the member’s self-introduction, shown only if they’ve filled it in
• Member Since: the date they joined the server
• User ID

At the bottom of someone else’s profile card is a Send Message button. Click it to open a 1:1 direct message with that member. To close the profile card, click anywhere outside it or press Esc.

Right-click a member (on touch devices, long-press instead) to open the member menu. The member’s nickname is at the top of the menu, and View Profile is below it; clicking it opens the same profile card. When you and that member are in the same voice channel, the middle of the menu also has a User Volume slider, which lets you adjust how loud that one member sounds to you (see §3.1).

When you right-click with a mouse on a computer, the menu appears next to the pointer. On touch devices such as phones and tablets, or when you long-press with a finger, the menu slides up from the bottom of the screen. Click anywhere outside the menu to close it.

You can also open the profile card or the member menu from the member rows under each voice channel in the channel list on the left, and from the tiles on the stage in the main window: members’ avatar tiles and the tiles that show their camera or screen share. For how each one works, see §3.1.

The member list shows members going online and offline in real time, so you don’t need to refresh it manually.

1.5 Personal Control Bar

The personal control bar is fixed at the bottom of the left sidebar. It contains your avatar, your nickname, and an online status indicator light. When you join a voice channel, a row of function buttons appears on it (see §3.2).

Click your avatar or nickname to open the status selector, where you can switch between these four statuses:

• Online: the default status. Other members see that you’re currently active.
• Idle: shows that you’re away from your computer for a while.
• Do Not Disturb: shows that you don’t want to be disturbed right now. Other members can still send you messages as usual.
• Invisible: you appear offline to other members, but you can still use all features as usual.

The function buttons that appear when you join a voice channel:

• Mute Microphone / Unmute Microphone: switches whether your microphone sends sound.
• Deafen / Undeafen: switches whether your speakers play sound. When you turn on Deafen, your microphone is muted at the same time.
• More: click it to show additional advanced options.

Settings and logout are on the right side of the tab bar above the message area. The gear icon (tooltip: User Settings) opens the settings panel, where you can adjust your own account, appearance, language, audio devices, volume, and more (see §7). If you hold management permissions, the panel also shows management groups such as Server Settings, depending on the permissions you hold (the owner and admins see all of them); see the Admin Manual. The logout icon next to the gear (tooltip: Logout) first opens the confirmation dialog Log out?. Click Logout to confirm and end your current login session.

1.6 Mobile Layout

On devices with a narrow screen (such as phones), the HakoSpace interface switches to a bottom tab bar layout, with three tabs fixed at the bottom of the screen:

1. Channels: corresponds to the left sidebar in the wide layout (the layout used on wider screens). Browse the channel list and switch conversations here.
2. Chat: corresponds to the message area in the middle. When you have unread direct messages, the tab icon shows the total number of unread direct messages (see §8.4).
3. Members: corresponds to the member list on the right.

The mobile layout shows one tab at a time. Tap the buttons at the bottom to switch tabs. The features are the same as in the wide layout.

When there isn’t enough width available, the message input box switches to a different arrangement. This depends on the width of the input box itself, not on the device or window size, so you also get the same arrangement on a computer when you make the window narrower, or when you shrink the text chat half of a voice channel. For details, see §2.1.