From de78926142792ba9b09fbfd679a7da0bf2745311 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 28 Sep 2022 19:39:22 -0500
Subject: [PATCH] ChatsPage: add settings cog

---
 .../chats/components/chat-page/chat-page.tsx  |  4 ++++
 .../components/chat-page-sidebar.tsx          | 22 ++++++++++++++-----
 app/soapbox/features/ui/index.tsx             |  1 +
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
index bd968a1bf..f26bb2e5a 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
@@ -9,6 +9,7 @@ import { useChat } from 'soapbox/queries/chats';
 import ChatPageMain from './components/chat-page-main';
 import ChatPageNew from './components/chat-page-new';
 import ChatPageSidebar from './components/chat-page-sidebar';
+import Welcome from './components/welcome';
 
 interface IChatPage {
   chatId?: string,
@@ -78,6 +79,9 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
             <Route path='/chats/new'>
               <ChatPageNew />
             </Route>
+            <Route path='/chats/settings'>
+              <Welcome />
+            </Route>
             <Route>
               <ChatPageMain />
             </Route>
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index b0deac4be..568d20f87 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
@@ -33,17 +33,29 @@ const ChatPageSidebar = () => {
     history.push('/chats/new');
   };
 
+  const handleSettingsClick = () => {
+    history.push('/chats/settings');
+  };
+
   return (
     <Stack space={4} className='h-full'>
       <Stack space={4} className='px-4 pt-4'>
         <HStack alignItems='center' justifyContent='between'>
           <CardTitle title={intl.formatMessage(messages.title)} />
 
-          <IconButton
-            src={require('@tabler/icons/edit.svg')}
-            iconClassName='w-5 h-5 text-gray-600'
-            onClick={handleChatCreate}
-          />
+          <HStack space={1}>
+            <IconButton
+              src={require('@tabler/icons/settings.svg')}
+              iconClassName='w-5 h-5 text-gray-600'
+              onClick={handleSettingsClick}
+            />
+
+            <IconButton
+              src={require('@tabler/icons/edit.svg')}
+              iconClassName='w-5 h-5 text-gray-600'
+              onClick={handleChatCreate}
+            />
+          </HStack>
         </HStack>
 
         {features.chatsSearch && (
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index b4d2fa324..56d0e473e 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -244,6 +244,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
 
       {features.chats && <WrappedRoute path='/chats' exact page={ChatsPage} component={ChatIndex} content={children} />}
       {features.chats && <WrappedRoute path='/chats/new' page={ChatsPage} component={ChatIndex} content={children} />}
+      {features.chats && <WrappedRoute path='/chats/settings' page={ChatsPage} component={ChatIndex} content={children} />}
       {features.chats && <WrappedRoute path='/chats/:chatId' page={ChatsPage} component={ChatIndex} content={children} />}
 
       <WrappedRoute path='/follow_requests' page={DefaultPage} component={FollowRequests} content={children} />