Re-organize folders

app/soapbox/features/chats/components/__tests__/chat-pane-header.test.tsx

@@ -2,10 +2,10 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { render, screen } from '../../../../jest/test-helpers';
-import ChatPaneHeader from '../chat-pane-header';
+import ChatPaneHeader from '../chat-widget/chat-pane-header';
 
 describe('<ChatPaneHeader />', () => {
-  it('handles the onToggle prop', async() => {
+  it('handles the onToggle prop', async () => {
     const mockFn = jest.fn();
     render(<ChatPaneHeader title='title' onToggle={mockFn} isOpen />);
 
@@ -64,7 +64,7 @@ describe('<ChatPaneHeader />', () => {
   });
 
   describe('secondaryAction prop', () => {
-    it('handles the secondaryAction callback', async() => {
+    it('handles the secondaryAction callback', async () => {
       const mockFn = jest.fn();
       render(
         <ChatPaneHeader

app/soapbox/features/chats/components/__tests__/chat-widget.test.tsx

@@ -5,7 +5,7 @@ import { Route, Switch } from 'react-router-dom';
 import { normalizeAccount } from 'soapbox/normalizers';
 
 import { render, rootState } from '../../../../jest/test-helpers';
-import ChatWidget from '../chat-widget';
+import ChatWidget from '../chat-widget/chat-widget';
 
 const id = '1';
 const account = normalizeAccount({

app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -113,15 +113,15 @@ const ChatPageMain = () => {
             children={null}
           />
 
-          <MenuList className='w-80 py-6'>
-            <Stack space={4} className='w-5/6 mx-auto'>
-              <Stack alignItems='center' space={2}>
-                <Avatar src={chat.account.avatar_static} size={75} />
+          <MenuList className='w-80'>
+            <Stack space={4} className='px-6 py-5'>
+              <HStack alignItems='center' space={3}>
+                <Avatar src={chat.account.avatar_static} size={50} />
                 <Stack>
-                  <Text size='lg' weight='semibold' align='center'>{chat.account.display_name}</Text>
-                  <Text theme='primary' align='center'>@{chat.account.acct}</Text>
+                  <Text weight='semibold'>{chat.account.display_name}</Text>
+                  <Text size='sm' theme='primary'>@{chat.account.acct}</Text>
                 </Stack>
-              </Stack>
+              </HStack>
 
               <Divider />
 

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

@@ -7,11 +7,11 @@ import { useDebounce, useFeatures } from 'soapbox/hooks';
 import { IChat, useChats } from 'soapbox/queries/chats';
 
 import ChatList from '../chat-list';
-import ChatPaneHeader from '../chat-pane-header';
+import ChatPaneHeader from '../chat-widget/chat-pane-header';
 import ChatSearchInput from '../chat-search-input';
 import ChatSearch from '../chat-search/chat-search';
 import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate';
-import ChatWindow from '../chat-window';
+import ChatWindow from '../chat-widget/chat-window';
 import { Pane } from '../ui';
 
 import Blankslate from './blankslate';

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

@@ -12,7 +12,7 @@ import { queryClient } from 'soapbox/queries/client';
 import useAccountSearch from 'soapbox/queries/search';
 
 import { ChatKeys } from '../../../../queries/chats';
-import ChatPaneHeader from '../chat-pane-header';
+import ChatPaneHeader from '../chat-widget/chat-pane-header';
 import { Pane } from '../ui';
 
 import Blankslate from './blankslate';

app/soapbox/features/chats/components/chat-widget/chat-settings.tsx

@@ -92,13 +92,13 @@ const ChatSettings = () => {
       />
 
       <Stack space={4} className='w-5/6 mx-auto'>
-        <Stack alignItems='center' space={2}>
-          <Avatar src={chat.account.avatar_static} size={75} />
+        <HStack alignItems='center' space={3}>
+          <Avatar src={chat.account.avatar_static} size={50} />
           <Stack>
-            <Text size='lg' weight='semibold' align='center'>{chat.account.display_name}</Text>
-            <Text theme='primary' align='center'>@{chat.account.acct}</Text>
+            <Text weight='semibold'>{chat.account.display_name}</Text>
+            <Text size='sm' theme='primary'>@{chat.account.acct}</Text>
           </Stack>
-        </Stack>
+        </HStack>
 
         <Divider />
 

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

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { ChatProvider } from 'soapbox/contexts/chat-context';
 import { useOwnAccount } from 'soapbox/hooks';
 
-import ChatPane from './chat-pane/chat-pane';
+import ChatPane from '../chat-pane/chat-pane';
 
 const ChatWidget = () => {
   const account = useOwnAccount();

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

@@ -5,7 +5,8 @@ import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 
-import Chat from './chat';
+import Chat from '../chat';
+
 import ChatPaneHeader from './chat-pane-header';
 import ChatSettings from './chat-settings';
 

app/soapbox/features/ui/util/async-components.ts

@@ -291,7 +291,7 @@ export function ChatIndex() {
 }
 
 export function ChatWidget() {
-  return import(/* webpackChunkName: "features/chats/components/chat-widget" */'../../chats/components/chat-widget');
+  return import(/* webpackChunkName: "features/chats/components/chat-widget" */'../../chats/components/chat-widget/chat-widget');
 }
 
 export function ServerInfo() {