resolve issues with new features

frontend/src/components/shared/ChatAwareFab.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Fab } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { useLayout } from '../../contexts/LayoutContext';
+
+interface ChatAwareFabProps {
+  onClick: () => void;
+  children: React.ReactNode;
+  color?: 'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning';
+  size?: 'small' | 'medium' | 'large';
+  'aria-label'?: string;
+  sx?: SxProps<Theme>;
+}
+
+/**
+ * A Fab that automatically shifts right to avoid overlapping the chat panel.
+ * Must be rendered inside DashboardLayout (i.e. inside LayoutProvider).
+ */
+const ChatAwareFab = React.forwardRef<HTMLButtonElement, ChatAwareFabProps>(
+  ({ onClick, children, color = 'primary', size, 'aria-label': ariaLabel, sx }, ref) => {
+    const { chatPanelOpen } = useLayout();
+    return (
+      <Fab
+        ref={ref}
+        color={color}
+        size={size}
+        aria-label={ariaLabel}
+        onClick={onClick}
+        sx={[
+          {
+            position: 'fixed',
+            bottom: 32,
+            right: chatPanelOpen ? 376 : 80,
+            transition: 'right 225ms cubic-bezier(0.4, 0, 0.6, 1)',
+          },
+          ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+        ]}
+      >
+        {children}
+      </Fab>
+    );
+  },
+);
+
+ChatAwareFab.displayName = 'ChatAwareFab';
+
+export default ChatAwareFab;