Rename sidebar and topbar

components/app.js

@@ -508,10 +508,10 @@ export default class App extends Component {
 			activeBuffer = this.state.buffers.get(this.state.activeBuffer);
 		}
 
-		var topbar = null;
+		var bufferHeader = null;
 		if (activeBuffer) {
-			topbar = html`
-				<section id="topbar">
+			bufferHeader = html`
+				<section id="buffer-header">
 					<${BufferHeader} buffer=${activeBuffer} onClose=${() => this.close(activeBuffer.name)}/>
 				</section>
 			`;
@@ -530,10 +530,10 @@ export default class App extends Component {
 		}
 
 		return html`
-			<section id="sidebar">
+			<section id="buffer-list">
 				<${BufferList} buffers=${this.state.buffers} activeBuffer=${this.state.activeBuffer} onBufferClick=${this.handleBufferListClick}/>
 			</section>
-			${topbar}
+			${bufferHeader}
 			<${ScrollManager} target=${this.buffer} scrollKey=${this.state.activeBuffer}>
 				<section id="buffer" ref=${this.buffer}>
 					<${Buffer} buffer=${activeBuffer} onNickClick=${this.handleNickClick}/>

components/buffer-list.js

@@ -59,7 +59,7 @@ function compareBuffers(a, b) {
 
 export default function BufferList(props) {
 	return html`
-		<ul id="buffer-list">
+		<ul>
 			${Array.from(this.props.buffers.values()).sort(compareBuffers).map(buf => html`
 				<${BufferItem} key=${buf.name} buffer=${buf} onClick=${() => props.onBufferClick(buf.name)} active=${props.activeBuffer == buf.name}/>
 			`)}

components/member-list.js

@@ -16,7 +16,7 @@ function MemberItem(props) {
 
 export default function MemberList(props) {
 	return html`
-		<ul id="buffer-list">
+		<ul>
 			${Array.from(this.props.members.entries()).sort().map(([nick, membership]) => html`
 				<${MemberItem} key=${nick} nick=${nick} membership=${membership} onClick=${() => props.onNickClick(nick)}/>
 			`)}