Chats: break out Pane into a UI component

app/soapbox/features/chats/components/chat-panes.tsx

@@ -15,6 +15,7 @@ import { Chat } from 'soapbox/types/entities';
 
 import ChatList from './chat-list';
 import ChatWindow from './chat-window';
+import { Pane, WindowState } from './ui';
 
 const messages = defineMessages({
   searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
@@ -43,7 +44,7 @@ const ChatPanes = () => {
   const history = useHistory();
 
   const panes = useAppSelector((state) => normalizeChatPanes(state));
-  const mainWindowState = useSettings().getIn(['chats', 'mainWindow']);
+  const mainWindowState = useSettings().getIn(['chats', 'mainWindow']) as WindowState;
   const unreadCount = useAppSelector((state) => getChatsUnreadCount(state));
 
   const handleClickChat = ((chat: Chat) => {
@@ -61,7 +62,7 @@ const ChatPanes = () => {
   const open = mainWindowState === 'open';
 
   const mainWindowPane = (
-    <div className={`pane pane--main pane--${mainWindowState}`}>
+    <Pane windowState={mainWindowState} index={0} main>
       <div className='pane__header'>
         {unreadCount > 0 && (
           <div className='mr-2 flex-none'>
@@ -87,7 +88,7 @@ const ChatPanes = () => {
           </>
         )}
       </div>
-    </div>
+    </Pane>
   );
 
   return (
@@ -95,7 +96,7 @@ const ChatPanes = () => {
       {mainWindowPane}
       {panes.map((pane, i) => (
         <ChatWindow
-          idx={i}
+          idx={i + 1}
           key={pane.get('chat_id')}
           chatId={pane.get('chat_id')}
           windowState={pane.get('state')}

app/soapbox/features/chats/components/chat-window.tsx

@@ -15,11 +15,10 @@ import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn as getDisplayFqn } from 'soapbox/utils/state';
 
 import ChatBox from './chat-box';
+import { Pane, WindowState } from './ui';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
-type WindowState = 'open' | 'minimized';
-
 const getChat = makeGetChat();
 
 interface IChatWindow {
@@ -72,8 +71,6 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
 
   if (!chat) return null;
   const account = chat.account as unknown as AccountEntity;
-
-  const right = (285 * (idx + 1)) + 20;
   const unreadCount = chat.unread;
 
   const unreadIcon = (
@@ -91,7 +88,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
   );
 
   return (
-    <div className={`pane pane--${windowState}`} style={{ right: `${right}px` }}>
+    <Pane windowState={windowState} index={idx}>
       <HStack space={2} className='pane__header'>
         {unreadCount > 0 ? unreadIcon : avatar }
         <button className='pane__title' onClick={handleChatToggle(chat.id)}>
@@ -107,7 +104,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
           onSetInputRef={handleInputRef}
         />
       </div>
-    </div>
+    </Pane>
   );
 };
 

app/soapbox/features/chats/components/ui/index.ts

@@ -0,0 +1,2 @@
+export { Pane } from './pane';
+export type { WindowState } from './pane';

app/soapbox/features/chats/components/ui/pane.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import React from 'react';
+
+/** Chat pane state. */
+export type WindowState = 'open' | 'minimized';
+
+interface IPane {
+  /** Whether the pane is open or minimized. */
+  windowState: WindowState,
+  /** Positions the pane on the screen, with 0 at the right. */
+  index: number,
+  /** Children to display in the pane. */
+  children: React.ReactNode,
+  /** Whether this is the main chat pane. */
+  main?: boolean,
+}
+
+/** Chat pane UI component for desktop. */
+const Pane: React.FC<IPane> = ({ windowState, index, children, main = false }) => {
+  const right = (285 * index) + 20;
+
+  return (
+    <div
+      className={classNames(`pane pane--${windowState}`, { 'pane--main': main })}
+      style={{ right: `${right}px` }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export { Pane };