#430/conversation header

.github/workflows/supabase-ci.yml

@@ -13,15 +13,15 @@ jobs:
 
       - uses: supabase/setup-cli@v1
         with:
-          version: latest
+          version: 2.24.3
 
       - name: Start Supabase local development setup
         run: supabase start
 
       - name: Verify generated types are checked in
         run: |
           supabase gen types typescript --local > types/types.gen.ts
-          if ! git diff --ignore-space-at-eol --exit-code --quiet types/types.gen.ts; then
+          if ! git diff --ignore-space-at-eol --exit-code --quiet HEAD.. types/types.gen.ts; then
             echo "Detected uncommitted changes after build. See status below:"
             git diff
             exit 1

components/icons/EllipsisIcon.tsx

@@ -17,9 +17,9 @@ const EllipsisIcon: React.FC<EllipsisIconProps> = ({ width, height }) => {
         strokeLinejoin='round'
         strokeWidth='1.5'
       >
-        <circle cx='2.5' cy='8' r='.75' />
+        <circle cx='8' cy='2.5' r='.75' />
         <circle cx='8' cy='8' r='.75' />
-        <circle cx='13.5' cy='8' r='.75' />
+        <circle cx='8' cy='13.5' r='.75' />
       </g>
     </svg>
   );

components/menus/EllipsisMenu.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import EllipsisMenu from './EllipsisMenu';
+
+const meta: Meta<typeof EllipsisMenu> = {
+  title: 'General/EllipsisMenu',
+  component: EllipsisMenu,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DefaultEllipsisMenu: Story = {
+  args: {
+    menuOptions: [
+      {
+        buttonMessage: 'Chat rules',
+        clickHandler: fn(),
+      },
+      {
+        buttonMessage: 'Report user',
+        clickHandler: fn(),
+      },
+      {
+        buttonMessage: 'Delete chat',
+        clickHandler: fn(),
+      },
+    ],
+  },
+};

components/menus/EllipsisMenu.tsx

@@ -20,30 +20,35 @@ const EllipsisMenu: React.FC<EllipsisMenuType> = ({ menuOptions }) => {
   };
 
   return (
-    <>
+    <div className='relative'>
       <button
         onClick={toggleMenuClickHandler}
-        className='rounded-md p-[.05rem] hover:bg-gray-200 hover:bg-opacity-50'
+        className='rounded-md p-[.05rem]'
         name='ellipsis-button'
       >
         <EllipsisIcon width={25} height={25} />
       </button>
       {isMenuOpen && (
-        <div className='absolute right-0 top-10 z-20 flex w-40 flex-col gap-2 rounded-lg bg-secondaryGreen py-2 shadow-md'>
-          {menuOptions.map((option) => {
+        <div className='absolute right-0 top-10 z-20 flex w-40 flex-col gap-2 rounded-md bg-monoY py-2 shadow-md'>
+          {menuOptions.map((option, index) => {
             return (
-              <button
-                key={option.buttonMessage}
-                className='py-[.15rem] text-sm hover:bg-gray-200 hover:bg-opacity-50'
-                onClick={option.clickHandler}
-              >
-                {option.buttonMessage}
-              </button>
+              <>
+                <button
+                  key={option.buttonMessage}
+                  className='mx-5 py-[.15rem] text-sm hover:bg-gray-200 hover:bg-opacity-50'
+                  onClick={option.clickHandler}
+                >
+                  {option.buttonMessage}
+                </button>
+                {index !== menuOptions.length - 1 && (
+                  <hr className='mx-5 border-primaryOrange' />
+                )}
+              </>
             );
           })}
         </div>
       )}
-    </>
+    </div>
   );
 };
 

components/messaging/ConversationHeader/ConversationHeader.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ConversationHeader from './ConversationHeader';
+import ConversationContextProvider from '@/context/conversationContext';
+
+const meta: Meta<typeof ConversationHeader> = {
+  title: 'Messaging/ConversationHeader',
+  component: ConversationHeader,
+  decorators: [
+    (Story) => (
+      <ConversationContextProvider>
+        <Story />
+      </ConversationContextProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DefaultConversationHeader: Story = {
+  args: {
+    partnerName: 'Maria Melnyk',
+  },
+};

components/messaging/ConversationHeader/ConversationHeader.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import EllipsisMenu from '@/components/menus/EllipsisMenu';
+import { useConversationContext } from '@/context/conversationContext';
+
+export default function ConversationHeader({
+  partnerName,
+}: {
+  partnerName: string;
+}) {
+  const { dispatch } = useConversationContext();
+
+  const conversationOptions = [
+    {
+      buttonMessage: 'Chat rules',
+      clickHandler: (e: React.MouseEvent<HTMLButtonElement>) =>
+        console.log(`clicked at ${e.timeStamp}`),
+    },
+    {
+      buttonMessage: 'Report user',
+      clickHandler: (e: React.MouseEvent<HTMLButtonElement>) =>
+        console.log(`clicked at ${e.timeStamp}`),
+    },
+    {
+      buttonMessage: 'Delete chat',
+      clickHandler: (e: React.MouseEvent<HTMLButtonElement>) =>
+        console.log(`clicked at ${e.timeStamp}`),
+    },
+  ];
+
+  const toggleDisplay = () => {
+    dispatch({
+      type: 'SET_SHOW_CONVERSATIONS_LIST',
+      payload: true,
+    });
+  };
+
+  return (
+    <div className='flex items-center justify-between p-2'>
+      <button onClick={toggleDisplay}>
+        <svg
+          xmlns='http://www.w3.org/2000/svg'
+          width='40'
+          height='40'
+          viewBox='0 0 512 512'
+        >
+          <path
+            fill='none'
+            stroke='currentColor'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+            strokeWidth='48'
+            d='M244 400L100 256l144-144M120 256h292'
+          />
+        </svg>
+      </button>
+      <p className='text-xl font-bold'>{partnerName}</p>
+      <EllipsisMenu menuOptions={conversationOptions} />
+    </div>
+  );
+}

components/messaging/CurrentConversation.tsx

@@ -13,6 +13,8 @@ import {
 } from '../../utils/formatTimeStamp';
 import newClient from '@/supabase/utils/newClient';
 import SystemMessageCard from './SystemMessageCard';
+import ConversationHeader from './ConversationHeader/ConversationHeader';
+import useMediaQuery from '../hooks/useMediaQuery';
 
 const CurrentConversation: React.FC = () => {
   const {
@@ -25,6 +27,7 @@ const CurrentConversation: React.FC = () => {
   const [systemUser, setSystemUser] = useState<string | undefined>(undefined);
   const chatWindowRef = useRef<HTMLDivElement>(null);
   const supabase = newClient();
+  const isBreakPoint = useMediaQuery(1024);
 
   useEffect(() => {
     const getSystemUser = async () => {
@@ -130,6 +133,11 @@ const CurrentConversation: React.FC = () => {
 
   return (
     <div className='message-card-container flex flex-1 flex-col justify-between bg-[#fafaf9] shadow-inner'>
+      {isBreakPoint && (
+        <ConversationHeader
+          partnerName={currentConversation?.partner_username as string}
+        />
+      )}
       <div
         className='relative flex h-full flex-col-reverse overflow-y-auto overflow-x-hidden'
         ref={chatWindowRef}