Move joining down to the account it happens on

Issue #9. The button sat in the heading above the channel list, beside
whichever server was open - so a "+" next to a guild's name read as
adding something to that guild, when what it does is join something on
the account. It is now in the plaque at the foot of that list, where
the account is named right beside it, which is the question the button
actually answers.

Co-Authored-By: Claude Opus 5 <[email protected]>

src/renderer/src/components/BufferList.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react'
-import { Icon, IconButton, MaskIcon } from './Icon'
+import { Icon, MaskIcon } from './Icon'
 import { ContextMenu, useContextMenu, type MenuEntry } from './ContextMenu'
 import { UserFooter } from './UserFooter'
 import { VoiceChannels } from './VoiceChannels'
@@ -21,8 +21,7 @@ import {
   bufferKindGlyph,
   classes,
   resolveMediaUrl,
-  serviceIcon,
-  serviceLabel
+  serviceIcon
 } from '../lib/util'
 import type { Account, Member } from '../../../shared/wire'
 import { Avatar } from './Avatar'
@@ -220,14 +219,6 @@ export function BufferList(): JSX.Element {
                   says it in the confident green of something that means
                   something. */}
               {activeGroup.accountId && groupAccount && <ConnectionDot state={groupAccount.state} />}
-              {groupAccount && (
-                <IconButton
-                  name="add"
-                  size={16}
-                  title={`Join on ${serviceLabel(groupAccount.service)}`}
-                  onClick={() => store.setActivePanel('join', groupAccount.id)}
-                />
-              )}
             </div>
 
             {groupBuffers.length === 0 && (

src/renderer/src/components/UserFooter.tsx

@@ -3,6 +3,7 @@ import { Icon } from './Icon'
 import { Avatar } from './Avatar'
 import { useStore, useChat } from '../state/hooks'
 import { presenceLabel } from '../lib/presence'
+import { serviceLabel } from '../lib/util'
 import type { Account } from '../../../shared/wire'
 
 /**
@@ -96,6 +97,21 @@ export function UserFooter({ account }: { account?: Account }): JSX.Element {
         >
           <Icon name={voice.deafened ? 'headset_off' : 'headset_mic'} size={18} />
         </button>
+
+        {/* Joining something new, beside the account it would be joined on.
+            It used to sit in the heading above the channel list, where it read
+            as belonging to whichever server was open rather than to the
+            account - and where "+" next to a guild's name suggests adding
+            something *to that guild*. Down here the account is named right
+            beside it, which is the question the button actually answers. */}
+        <button
+          type="button"
+          className="user-audio-button"
+          title={`Join or add on ${serviceLabel(account.service)}`}
+          onClick={() => store.setActivePanel('join', account.id)}
+        >
+          <Icon name="add" size={18} />
+        </button>
       </div>
 
       {menu && (