Merge branch 'main' of https://github.com/deployment-helper/webapps

Author: vinaymavi

.gitignore

@@ -5,6 +5,10 @@
 /.pnp
 .pnp.js
 
+# lock files (use yarn.lock only)
+package-lock.json
+bun.lockb
+
 # testing
 /coverage
 
@@ -15,6 +19,9 @@
 # production
 /build
 
+# storybook
+storybook-static
+
 # misc
 .DS_Store
 *.pem

app/auth/slides/layout.tsx

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import Server from '../apis/server';
 import { Header } from '@/components/Header';
 
-export const SlidesLayout: FC<{ children: ReactNode }> = async ({
+const SlidesLayout: FC<{ children: ReactNode }> = async ({
   children,
 }) => {
   const user = await Server.getUserInfo();

bun.lockb

@@ -1,8 +1,9 @@
 import BaseHeader from '@/components/BaseHeader/BaseHeader';
-import { Avatar, mergeClasses } from '@fluentui/react-components';
+import { mergeClasses } from '@fluentui/react-components';
 import { useStyles } from './Header.styles';
 import { Navigation24Filled } from '@fluentui/react-icons';
 import { HeaderProps } from '@/components/Header/Header.types';
+import UserDropdown from '@/components/UserDropdown';
 
 export const Header2 = ({ title }: HeaderProps) => {
   const classes = useStyles();
@@ -16,13 +17,7 @@ export const Header2 = ({ title }: HeaderProps) => {
       }
       slot3={
         <div>
-          <Avatar
-            className="cursor-pointer"
-            image={{
-              src: 'https://placekitten.com/32/32',
-              as: 'img',
-            }}
-          />
+          <UserDropdown />
         </div>
       }
     />

components/Header/Header2.tsx

@@ -1,4 +1,4 @@
-import { Avatar, mergeClasses } from '@fluentui/react-components';
+import { mergeClasses } from '@fluentui/react-components';
 import { Navigation24Filled } from '@fluentui/react-icons';
 
 import BaseHeader from '@/components/BaseHeader/BaseHeader';
@@ -7,6 +7,7 @@ import { HeaderProps } from '@/components/Header/Header.types';
 import ProjectDropdown from '@/components/ProjectDropdown/ProjectDropdown';
 import { useVideoStore } from '@/src/stores/video.store';
 import { useRouter } from 'next/navigation';
+import UserDropdown from '@/components/UserDropdown';
 
 export const Header3 = ({ projectList }: HeaderProps) => {
   const router = useRouter();
@@ -34,13 +35,7 @@ export const Header3 = ({ projectList }: HeaderProps) => {
       }
       slot3={
         <div>
-          <Avatar
-            className="cursor-pointer"
-            image={{
-              src: 'https://placekitten.com/32/32',
-              as: 'img',
-            }}
-          />
+          <UserDropdown />
         </div>
       }
     />

components/Header/Header3.tsx

@@ -1,5 +1,4 @@
 import {
-  Avatar,
   Input,
   mergeClasses,
   Spinner,
@@ -21,6 +20,7 @@ import {
   useQueryGetVideo,
 } from '@/src/query/video.query';
 import Link from 'next/link';
+import UserDropdown from '@/components/UserDropdown';
 
 let debouncedMutation: any = undefined;
 
@@ -106,13 +106,7 @@ export const Header4 = ({ projectList }: HeaderProps) => {
       slot2={<Slot2 projectList={projectList} />}
       slot3={
         <div>
-          <Avatar
-            className="cursor-pointer"
-            image={{
-              src: 'https://placekitten.com/32/32',
-              as: 'img',
-            }}
-          />
+          <UserDropdown />
         </div>
       }
     />

components/Header/Header4.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { UserDropdown } from './UserDropdown';
+
+// Mock the store for storybook
+const meta: Meta<typeof UserDropdown> = {
+  title: 'Components/UserDropdown',
+  component: UserDropdown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

components/UserDropdown/UserDropdown.stories.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import {
+  Avatar,
+  Button,
+  Menu,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  tokens,
+} from '@fluentui/react-components';
+import { Person24Regular, SignOut24Regular } from '@fluentui/react-icons';
+import { useRouter } from 'next/navigation';
+import useSlidesStore from '@/src/stores/store';
+
+export const UserDropdown = () => {
+  const router = useRouter();
+  const { user } = useSlidesStore();
+
+  const handleProfileClick = () => {
+    // Navigate to profile page - assuming /auth/profile route
+    router.push('/auth/profile');
+  };
+
+  const handleLogoutClick = () => {
+    // Clear user session and redirect to auth page
+    // In a real app, you'd also clear authentication tokens/cookies
+    router.push('/auth');
+  };
+
+  return (
+    <Menu positioning="below-end">
+      <MenuTrigger disableButtonEnhancement>
+        <Button 
+          style={{ 
+            border: 'none', 
+            backgroundColor: 'transparent',
+            padding: 0, 
+            minWidth: 'auto', 
+            height: 'auto' 
+          }}
+        >
+          <Avatar
+            className="cursor-pointer"
+            image={{
+              src: 'https://placekitten.com/32/32',
+              as: 'img',
+            }}
+          />
+        </Button>
+      </MenuTrigger>
+
+      <MenuPopover>
+        <MenuList>
+          <div 
+            style={{ 
+              padding: '8px 12px',
+              borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+              pointerEvents: 'none' 
+            }}
+          >
+            <Avatar
+              size={40}
+              image={{
+                src: 'https://placekitten.com/40/40',
+                as: 'img',
+              }}
+            />
+            <div 
+              style={{
+                fontSize: '12px',
+                color: tokens.colorNeutralForeground2,
+                marginTop: '4px',
+              }}
+            >
+              {user?.email || 'user@example.com'}
+            </div>
+          </div>
+
+          <MenuItem 
+            icon={<Person24Regular />}
+            onClick={handleProfileClick}
+          >
+            Profile
+          </MenuItem>
+
+          <MenuItem 
+            icon={<SignOut24Regular />}
+            onClick={handleLogoutClick}
+          >
+            Logout
+          </MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+export default UserDropdown;

components/UserDropdown/UserDropdown.tsx

@@ -0,0 +1,2 @@
+export * from './UserDropdown';
+export { default } from './UserDropdown';