Preact: Add roomlist overflow popup (#2374)

play.pokemonshowdown.com/src/panel-popups.tsx

@@ -7,6 +7,7 @@ import { PSRoom, type RoomOptions, PS, type PSLoginState, type RoomID, type Time
 import { type BattleRoom } from "./panel-battle";
 import type { ChatRoom } from "./panel-chat";
 import { PSRoomPanel, PSPanelWrapper } from "./panels";
+import { PSHeader } from "./panel-topbar";
 
 /**
  * User popup
@@ -1207,6 +1208,25 @@ class PopupPanel extends PSRoomPanel {
 		</div></PSPanelWrapper>;
 	}
 }
+
+class RoomTabListPanel extends PSRoomPanel {
+	static readonly id = 'roomtablist';
+	static readonly routes = ['roomtablist'];
+	static readonly location = 'semimodal-popup';
+	static readonly noURL = true;
+
+	override render() {
+		return <PSPanelWrapper room={this.props.room}><div class="tablist">
+			<ul>
+				{PS.leftRoomList.map(roomid => PSHeader.renderRoomTab(roomid))}
+			</ul>
+			<ul>
+				{PS.rightRoomList.map(roomid => PSHeader.renderRoomTab(roomid))}
+			</ul>
+		</div></PSPanelWrapper>;
+	}
+}
+
 PS.addRoomType(
 	UserPanel,
 	UserOptionsPanel,
@@ -1218,5 +1238,6 @@ PS.addRoomType(
 	RegisterPanel,
 	BattleForfeitPanel,
 	ReplacePlayerPanel,
-	PopupPanel
+	PopupPanel,
+	RoomTabListPanel
 );

play.pokemonshowdown.com/src/panel-topbar.tsx

@@ -41,7 +41,7 @@ window.addEventListener('dragover', e => {
 });
 
 export class PSHeader extends preact.Component<{ style: object }> {
-	handleDragEnter = (e: DragEvent) => {
+	static handleDragEnter = (e: DragEvent) => {
 		console.log('dragenter ' + e.dataTransfer!.dropEffect);
 		e.preventDefault();
 		if (!PS.dragging) return; // TODO: handle dragging other things onto roomtabs
@@ -72,7 +72,7 @@ export class PSHeader extends preact.Component<{ style: object }> {
 		// Chrome/Safari/Opera
 		// if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
 	};
-	handleDragStart = (e: DragEvent) => {
+	static handleDragStart = (e: DragEvent) => {
 		const roomid = PS.router.extractRoomID((e.currentTarget as HTMLAnchorElement).href);
 		if (!roomid) return; // should never happen
 
@@ -120,7 +120,7 @@ export class PSHeader extends preact.Component<{ style: object }> {
 		}
 		return { icon, title };
 	}
-	renderRoomTab(id: RoomID) {
+	static renderRoomTab(id: RoomID) {
 		const room = PS.rooms[id];
 		if (!room) return null;
 		const closable = (id === '' || id === 'rooms' ? '' : ' closable');
@@ -150,10 +150,33 @@ export class PSHeader extends preact.Component<{ style: object }> {
 			{closeButton}
 		</li>;
 	}
+	handleRoomTabOverflow() {
+		if (!PS.rightPanel) return; // TODO handle vertical overflow
+		const avaliableSpace = PS.rightPanel.width - 165; // 165 is the width of the userbar
+		let usedSpace = 0;
+
+		const roomTabs = this.base?.querySelectorAll('ul.siderooms > li');
+		if (!roomTabs) return; // No rooms
+
+		for (const tab of Array.from(roomTabs)) {
+			usedSpace += tab.clientWidth;
+		}
+
+		const overflow = this.base?.querySelector('.overflow');
+		if (usedSpace > avaliableSpace) {
+			overflow?.classList.remove('hidden');
+		} else {
+			overflow?.classList.add('hidden');
+		}
+	}
 	override componentDidMount() {
 		PS.user.subscribe(() => {
 			this.forceUpdate();
 		});
+		this.handleRoomTabOverflow();
+	}
+	override componentDidUpdate() {
+		this.handleRoomTabOverflow();
 	}
 	renderUser() {
 		if (!PS.connected) {
@@ -182,16 +205,16 @@ export class PSHeader extends preact.Component<{ style: object }> {
 				/>
 				<div class="tablist">
 					<ul>
-						{this.renderRoomTab(PS.leftRoomList[0])}
+						{PSHeader.renderRoomTab(PS.leftRoomList[0])}
 					</ul>
 					<ul>
-						{PS.miniRoomList.map(roomid => this.renderRoomTab(roomid))}
+						{PS.miniRoomList.map(roomid => PSHeader.renderRoomTab(roomid))}
 					</ul>
 					<ul>
-						{PS.leftRoomList.slice(1).map(roomid => this.renderRoomTab(roomid))}
+						{PS.leftRoomList.slice(1).map(roomid => PSHeader.renderRoomTab(roomid))}
 					</ul>
 					<ul class="siderooms">
-						{PS.rightRoomList.map(roomid => this.renderRoomTab(roomid))}
+						{PS.rightRoomList.map(roomid => PSHeader.renderRoomTab(roomid))}
 					</ul>
 				</div>
 			</div>
@@ -228,14 +251,19 @@ export class PSHeader extends preact.Component<{ style: object }> {
 			/>
 			<div class="tabbar maintabbar"><div class="inner">
 				<ul>
-					{this.renderRoomTab(PS.leftRoomList[0])}
+					{PSHeader.renderRoomTab(PS.leftRoomList[0])}
 				</ul>
 				<ul>
-					{PS.leftRoomList.slice(1).map(roomid => this.renderRoomTab(roomid))}
+					{PS.leftRoomList.slice(1).map(roomid => PSHeader.renderRoomTab(roomid))}
 				</ul>
 				<ul class="siderooms" style={{ float: 'none', marginLeft: Math.max(PS.leftPanelWidth - 52, 0) }}>
-					{PS.rightRoomList.map(roomid => this.renderRoomTab(roomid))}
+					{PS.rightRoomList.map(roomid => PSHeader.renderRoomTab(roomid))}
 				</ul>
+				<div class="overflow hidden" aria-hidden="true">
+					<button name="tablist" class="button" data-href="roomtablist" aria-label="More" type="button">
+						<i class="fa fa-caret-down"></i>
+					</button>
+				</div>
 			</div></div>
 			<div class="userbar">
 				{this.renderUser()} {}