Inbox view for call review

.storybook/main.cjs

@@ -1,7 +1,6 @@
 const { dirname, resolve } = require('node:path');
 
-const getAbsolutePath = (packageName) =>
-  dirname(require.resolve(`${packageName}/package.json`));
+const getAbsolutePath = (packageName) => dirname(require.resolve(`${packageName}/package.json`));
 
 /** @type {import('@storybook/react-vite').StorybookConfig} */
 const config = {

lib/atom/Avatar/Avatar.tsx

@@ -2,14 +2,14 @@ import { Avatar as RadixAvatar } from '@radix-ui/themes';
 import type { IAvatarProps } from './types';
 import styles from './Avatar.module.css';
 
-const Avatar = ({ name, pfp }: IAvatarProps) => {
+const Avatar = ({ name, pfp, size = '3' }: IAvatarProps) => {
   const fallback = name ? name.charAt(0).toUpperCase() : undefined;
 
   return (
     <RadixAvatar
       radius="full"
       color="blue"
-      size="3"
+      size={size}
       fallback={<>{fallback}</>}
       src={pfp}
       alt={pfp ? `${name}'s Avatar` : undefined}

lib/atom/Avatar/types.ts

@@ -1,4 +1,7 @@
+import type { AvatarProps } from '@radix-ui/themes';
+
 export interface IAvatarProps {
   name: string;
   pfp?: string;
+  size?: AvatarProps['size'];
 }

lib/atom/ContentWrapper/ContentWrapper.styles.module.css

@@ -3,3 +3,7 @@
   border-radius: var(--radius-5);
   border: 1px solid var(--gray-6);
 }
+
+.content {
+  height: 100%;
+}

lib/atom/ContentWrapper/ContentWrapper.tsx

@@ -1,13 +1,21 @@
 import { Box } from '@radix-ui/themes';
+import cn from 'classnames';
 import styles from './ContentWrapper.styles.module.css';
 import type { IContentWrapperProps } from './ContentWrapper.types';
 import Header from '../Header';
 
-const ContentWrapper = ({ children, title, subtitle, metaInfo, ...rest }: IContentWrapperProps) => {
+const ContentWrapper = ({
+  children,
+  title,
+  subtitle,
+  metaInfo,
+  className,
+  ...rest
+}: IContentWrapperProps) => {
   return (
-    <Box className={styles.wrapper} height="100%" {...rest}>
+    <Box className={cn(styles.wrapper, className)} height="100%" {...rest}>
       {title && <Header title={title} subtitle={subtitle} metaInfo={metaInfo} />}
-      <Box py="4" px="5">
+      <Box py="4" px="5" height="100%">
         {children}
       </Box>
     </Box>

lib/atom/MenuItem/MenuItem.module.css

@@ -34,7 +34,7 @@
     padding-left: var(--space-4);
 
     &::before {
-      content: ' ';
+      content: '';
       color: #dcdfe4;
       margin-left: var(--space-2);
       background-color: var(--blue-6);
@@ -68,7 +68,7 @@
   position: relative;
 
   &::before {
-    content: ' ';
+    content: '';
     display: block;
     background-color: #667085;
     width: 3px;

lib/compound/InboxView/InboxView.module.css

@@ -0,0 +1,47 @@
+.inboxViewWrapper,
+.transactionTimelineWrapper {
+  > div {
+    padding: 0;
+  }
+}
+
+.recentAlerts {
+  box-shadow: inset -1px 0 0 0 var(--gray-a5);
+}
+
+.alertDetails {
+  background-color: var(--color-background);
+  z-index: 1;
+}
+
+.callListItem {
+  border-radius: var(--radius-5);
+  background-color: var(--color-background);
+  box-shadow: inset 0 0 0 1px var(--gray-a4);
+  height: fit-content;
+  width: 100%;
+  align-items: start;
+}
+
+.callListItemHeading {
+  color: var(--gray-12);
+  width: 100%;
+}
+
+.callListItemSelected {
+  box-shadow: inset 0 0 0 1px var(--blue-9);
+}
+
+.newMessageBadge {
+  border-radius: var(--radius-5);
+  background-color: var(--blue-5);
+  width: 6px;
+  height: 6px;
+}
+
+.tabContentRoot {
+  height: 100%;
+  flex: 1;
+  position: relative;
+  padding-inline: var(--space-4);
+}

lib/compound/InboxView/InboxView.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { InboxView, type IInboxViewProps } from '../..';
+import TranscriptItem from './parts/TranscriptItem';
+import { Box, Text } from '@radix-ui/themes';
+
+const meta = {
+  title: 'Compound/InboxView',
+  component: InboxView,
+  parameters: {
+    layout: 'full',
+  },
+  tags: ['autodocs'],
+  render: (args) => (
+    <Box height="100vh">
+      <InboxView {...args} />
+    </Box>
+  ),
+  args: {
+    tabs: [
+      {
+        label: 'Transcript',
+        value: 'transcript',
+        content: (
+          <>
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+            <TranscriptItem />
+          </>
+        ),
+      },
+      {
+        label: 'Details',
+        value: 'details',
+        content: (
+          <Box>
+            <Text size="2" color="gray">
+              Meeting Details:
+            </Text>
+            <Text size="3">- Date: January 1, 2024</Text>
+            <Text size="3">- Time: 12:00 PM</Text>
+            <Text size="3">- Participants: Alice, Bob</Text>
+          </Box>
+        ),
+      },
+    ],
+  },
+} satisfies Meta<IInboxViewProps>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

lib/compound/InboxView/InboxView.tsx

@@ -0,0 +1,85 @@
+import type { IInboxViewProps } from './InboxView.types';
+import styles from './InboxView.module.css';
+import ContentWrapper from '../../atom/ContentWrapper/ContentWrapper';
+import { Box, Button, Flex, Heading, IconButton, Text } from '@radix-ui/themes';
+import { useState } from 'react';
+import CallList from './parts/CallList';
+import { SidebarSimpleIcon } from '@phosphor-icons/react';
+
+const InboxView = ({ content, callList }: IInboxViewProps) => {
+  const [callListCollapsed, setCallListCollapsed] = useState(false);
+
+  return (
+    <ContentWrapper className={styles.inboxViewWrapper} overflow={'hidden'} height="100%">
+      <Flex width="100%" height="100%">
+        {!callListCollapsed && <CallList calls={callList} />}
+
+        <Flex
+          pb="4"
+          minWidth={'250px'}
+          gap="2"
+          direction={'column'}
+          position={'relative'}
+          flexGrow={'1'}
+          overflowY="scroll"
+          overflowX="hidden"
+        >
+          <Flex
+            justify="between"
+            position="sticky"
+            top={'0'}
+            pt="4"
+            px="4"
+            pb="2"
+            style={{
+              position: 'sticky',
+              top: 0,
+              backgroundColor: 'var(--gray-1)',
+              zIndex: 1,
+              paddingTop: 'var(--space-4)',
+              paddingBottom: 'var(--space-2)',
+              boxShadow: 'inset 0 -1px 0 0 var(--gray-a4)',
+              paddingInline: 'var(--space-4)',
+              marginRight: '1px',
+            }}
+          >
+            <Flex gap="2">
+              <IconButton
+                variant="ghost"
+                size="2"
+                color="gray"
+                mt="1"
+                onClick={() => {
+                  setCallListCollapsed((prev) => !prev);
+                }}
+              >
+                <SidebarSimpleIcon weight="bold" size={20} aria-label="Toggle Call List" />
+              </IconButton>
+              <Box>
+                <Text size="2" color="gray">
+                  January 1, 2024 at 12:00 AM
+                </Text>
+                <Heading size="6" mt="1">
+                  New Year Sync
+                </Heading>
+              </Box>
+            </Flex>
+            <Box>
+              <Button variant="outline" size="2" color="blue" mr="2">
+                Join Meeting
+              </Button>
+              <Button variant="outline" size="2" color="red">
+                Remove Agent
+              </Button>
+            </Box>
+          </Flex>
+
+          <Box px="4">{content}</Box>
+        </Flex>
+      </Flex>
+    </ContentWrapper>
+  );
+};
+
+export default InboxView;
+export type { IInboxViewProps };

lib/compound/InboxView/InboxView.types.ts

@@ -0,0 +1,14 @@
+export type CallListItem = {
+  id: string;
+  label: React.ReactNode | string;
+  startTime: string;
+  severity: string;
+  onClick: () => void;
+  active: boolean;
+  read: boolean;
+};
+
+export interface IInboxViewProps {
+  content: React.ReactNode;
+  callList: Array<CallListItem>;
+}

lib/compound/InboxView/index.ts

@@ -0,0 +1,2 @@
+export { default } from './InboxView';
+export type { IInboxViewProps } from './InboxView.types';