feat(ui): add Button, Modal, Spinner, Toast, and Tooltip components with styles

- Implemented Button component with various props for customization.
- Created Modal component with header, content, and footer subcomponents.
- Added Spinner component for loading indicators.
- Developed Toast component for displaying notifications.
- Introduced Tooltip component for contextual hints with keyboard shortcuts.
- Added corresponding CSS modules for styling each component.
- Updated index file to export new components.
- Configured TypeScript settings for the UI package.

packages/shared/src/components/channel/ChannelChatLayout.tsx

@@ -0,0 +1,38 @@
+import { useCallback, useState } from 'react';
+import { ChannelTextarea } from './ChannelTextarea';
+import { Messages } from './Messages';
+import { TypingUsers } from './TypingUsers';
+import styles from './ChannelChatLayout.module.css';
+
+interface ChannelChatLayoutProps {
+	channelId: string;
+}
+
+interface ReplyState {
+	eventId: string;
+	username: string;
+}
+
+export function ChannelChatLayout({ channelId }: ChannelChatLayoutProps) {
+	const [replyTo, setReplyTo] = useState<ReplyState | null>(null);
+
+	const handleReply = useCallback((eventId: string, username: string) => {
+		setReplyTo({ eventId, username });
+	}, []);
+
+	const handleCancelReply = useCallback(() => {
+		setReplyTo(null);
+	}, []);
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.messagesWrapper}>
+				<Messages channelId={channelId} onReply={handleReply} />
+			</div>
+			<div className={styles.inputArea}>
+				<TypingUsers channelId={channelId} />
+				<ChannelTextarea channelId={channelId} replyTo={replyTo} onCancelReply={handleCancelReply} />
+			</div>
+		</div>
+	);
+}