@messenger-box/slack-ui-browser 10.0.3-alpha.176

package/src/screens/Home/HomeScreen.tsx

@@ -0,0 +1,1308 @@
+import React, { createContext, useMemo, useState, useCallback, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { userSelector } from '@adminide-stack/user-auth0-client';
+import { useLocation, useNavigate, useParams, Outlet } from '@remix-run/react';
+import { RoomType, ApplicationRoles } from 'common';
+import { 
+    FiEdit, FiHash, FiLock, FiUser, FiX, FiMessageSquare, 
+    FiUsers, FiUserPlus, FiMail, FiShare2, FiBell, FiBookmark, FiSearch,
+    FiAlertCircle, FiCheck
+} from '../../icons';
+import { FiFile } from '@react-icons/all-files/fi/FiFile.js';
+import { TopCommonSlider, Teams, Channels, DirectChannels, InviteMembers } from '../../components/Home';
+import { useOptimizedChannelsQueries } from '../../hooks/useOptimizedChannelsQueries';
+import { useRouteState } from '../../hooks/useRouteState';
+import { slackUiRoutePaths, SLACK_UI_ROUTES } from '../../constants/routes';
+import { RouteState } from '../../machines/routeMachine';
+import { 
+    useAddChannelMutation, 
+    useAddDirectChannelMutation, 
+    useCreateTeamMutation,
+    useSendOrganizationInvitationMutation,
+    useGetOrganizationMembersQuery,
+    useOrganizationSharableLinkQuery,
+    useGetOrganizationDetailQuery,
+} from '../../queries/slackuiQueries';
+
+// Create a context to control refetching across child components
+export const RefetchContext = createContext({
+    shouldRefetch: false,
+    setRefetchStatus: (status: boolean) => {},
+});
+
+// Create a context to share optimized channel data across child components
+export const ChannelsDataContext = createContext<{
+    channelsData: any[];
+    directChannelsData: any[];
+    loading: boolean;
+    error: any;
+    refetchChannels: () => void;
+    hasChannels: boolean;
+    hasDirectChannels: boolean;
+}>({
+    channelsData: [],
+    directChannelsData: [],
+    loading: false,
+    error: null,
+    refetchChannels: () => {},
+    hasChannels: false,
+    hasDirectChannels: false,
+});
+
+const HomeScreen: React.FC = () => {
+    const currentUser: any = useSelector(userSelector);
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [shouldRefetch, setShouldRefetch] = useState(false);
+    const orgSlug = location.pathname.split('/')[2];
+
+    // Use optimized channels queries hook
+    const {
+        channelsData,
+        directChannelsData,
+        loading,
+        error,
+        refetchChannels,
+        hasChannels,
+        hasDirectChannels,
+    } = useOptimizedChannelsQueries({
+        orgName: orgSlug,
+        enabled: !!orgSlug,
+    });
+
+    // Memoize the refetch context value
+    const refetchContextValue = useMemo(
+        () => ({
+            shouldRefetch,
+            setRefetchStatus: setShouldRefetch,
+        }),
+        [shouldRefetch],
+    );
+
+    // Memoize the channels data context value
+    const channelsDataContextValue = useMemo(
+        () => ({
+            channelsData,
+            directChannelsData,
+            loading,
+            error,
+            refetchChannels,
+            hasChannels,
+            hasDirectChannels,
+        }),
+        [channelsData, directChannelsData, loading, error, refetchChannels, hasChannels, hasDirectChannels],
+    );
+
+    // Refetch on mount
+    useEffect(() => {
+        if (orgSlug) {
+            refetchChannels();
+        }
+    }, [orgSlug]);
+
+    // Navigate to new message/channel creation
+    const handleNewMessage = useCallback(() => {
+        navigate(slackUiRoutePaths.messageNew(orgSlug));
+    }, [navigate, orgSlug]);
+
+    // Loading state
+    if (!currentUser) {
+        return (
+            <div className="flex items-center justify-center h-full bg-white">
+                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
+            </div>
+        );
+    }
+
+    if (!orgSlug) {
+        return (
+            <div className="flex items-center justify-center h-full bg-white">
+                <p className="text-gray-500">No Organization found</p>
+            </div>
+        );
+    }
+
+    return (
+        <RefetchContext.Provider value={refetchContextValue}>
+            <ChannelsDataContext.Provider value={channelsDataContextValue}>
+                <div className="flex h-full bg-white">
+                    {/* Left Sidebar - Channels List */}
+                    <div className="w-72 flex-shrink-0 border-r border-gray-200 flex flex-col h-full overflow-hidden">
+                        {/* Sidebar Header */}
+                        <div className="p-4 border-b border-gray-200">
+                            <h2 className="text-lg font-semibold text-gray-900 truncate">
+                                {orgSlug}
+                            </h2>
+                        </div>
+                        
+                        {/* Scrollable Sidebar Content */}
+                        <div className="flex-1 overflow-y-auto">
+                            {/* Top Common Slider */}
+                            <TopCommonSlider />
+                            
+                            <hr className="border-gray-200 my-2" />
+                            
+                            {/* Teams Section */}
+                            <Teams 
+                                teams={[]}
+                                loading={false}
+                                error={null}
+                                onRefetch={() => {}}
+                            />
+                            
+                            <hr className="border-gray-200 my-2" />
+                            
+                            {/* Channels Section */}
+                            <Channels 
+                                channels={channelsData}
+                                loading={loading}
+                                error={error}
+                                onRefetch={refetchChannels}
+                                currentUser={currentUser}
+                            />
+                            
+                            <hr className="border-gray-200 my-2" />
+                            
+                            {/* Direct Messages Section */}
+                            <DirectChannels 
+                                directChannels={directChannelsData}
+                                loading={loading}
+                                error={error}
+                                onRefetch={refetchChannels}
+                                currentUser={currentUser}
+                            />
+                            
+                            <hr className="border-gray-200 my-2" />
+                            
+                            {/* Invite Members Section */}
+                            <InviteMembers 
+                                organizationName={orgSlug}
+                            />
+                        </div>
+
+                        {/* Floating Action Button in Sidebar */}
+                        <div className="p-4 border-t border-gray-200">
+                            <button
+                                onClick={handleNewMessage}
+                                className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
+                            >
+                                <FiEdit className="w-4 h-4" />
+                                <span>New Message</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Right Panel - Message/Content Area */}
+                    <div className="flex-1 flex flex-col h-full overflow-hidden">
+                        <MessagePanel 
+                            orgSlug={orgSlug}
+                            currentUser={currentUser}
+                            channelsData={channelsData}
+                            directChannelsData={directChannelsData}
+                        />
+                    </div>
+                </div>
+            </ChannelsDataContext.Provider>
+        </RefetchContext.Provider>
+    );
+};
+
+// Message Panel Component - handles route-based content
+interface MessagePanelProps {
+    orgSlug: string;
+    currentUser: any;
+    channelsData: any[];
+    directChannelsData: any[];
+}
+
+const MessagePanel: React.FC<MessagePanelProps> = ({ orgSlug, currentUser, channelsData, directChannelsData }) => {
+    // Use XState-based route state management
+    const routeState = useRouteState(orgSlug);
+    
+    const {
+        currentState,
+        channelName,
+        teamName,
+        isHome,
+        isChannelView,
+        isChannelNew,
+        isMessageView,
+        isMessageNew,
+        isTeamView,
+        isTeamNew,
+        isThreads,
+        isActivity,
+        isDrafts,
+        isSaved,
+        isFiles,
+        isSearch,
+        isInvite,
+        isInviteContacts,
+        isInviteEmail,
+        isInviteLink,
+        navigateToHome,
+        navigateToChannel,
+        navigateToChannelNew,
+        navigateToMessage,
+        navigateToMessageNew,
+    } = routeState;
+
+    // Find the selected channel/dm
+    const selectedChannel = useMemo(() => {
+        if (isChannelView && channelName) {
+            return channelsData.find((ch: any) => ch.title === channelName || ch.name === channelName);
+        }
+        if (isMessageView && channelName) {
+            return directChannelsData.find((dm: any) => 
+                dm.title === channelName || 
+                dm.name === channelName ||
+                dm.displayName?.includes(channelName)
+            );
+        }
+        return null;
+    }, [isChannelView, isMessageView, channelName, channelsData, directChannelsData]);
+
+    // New Channel Screen
+    if (isChannelNew) {
+        return (
+            <NewChannelPanel 
+                orgSlug={orgSlug} 
+                onClose={navigateToHome} 
+            />
+        );
+    }
+
+    // New Message Screen
+    if (isMessageNew) {
+        return (
+            <NewMessagePanel 
+                orgSlug={orgSlug} 
+                currentUser={currentUser}
+                onClose={navigateToHome} 
+            />
+        );
+    }
+
+    // New Team Screen
+    if (isTeamNew) {
+        return (
+            <GenericPanel 
+                title="Create a Team"
+                icon={<FiUsers className="w-12 h-12 text-blue-600" />}
+                description="Teams help organize groups of people working together"
+                orgSlug={orgSlug}
+                onClose={navigateToHome}
+            >
+                <NewTeamForm orgSlug={orgSlug} onClose={navigateToHome} />
+            </GenericPanel>
+        );
+    }
+
+    // Team view
+    if (isTeamView && teamName) {
+        return (
+            <GenericPanel 
+                title={`Team: ${teamName}`}
+                icon={<FiUsers className="w-12 h-12 text-blue-600" />}
+                description="Team details and members"
+                orgSlug={orgSlug}
+            />
+        );
+    }
+
+    // Threads view
+    if (isThreads) {
+        return (
+            <GenericPanel 
+                title="Threads"
+                icon={<FiMessageSquare className="w-12 h-12 text-blue-600" />}
+                description="Your thread replies will appear here"
+                orgSlug={orgSlug}
+            />
+        );
+    }
+
+    // Invite Contacts view
+    if (isInviteContacts) {
+        return (
+            <GenericPanel 
+                title="Invite from Contacts"
+                icon={<FiUserPlus className="w-12 h-12 text-blue-600" />}
+                description="Select contacts to invite to your workspace"
+                orgSlug={orgSlug}
+                onClose={() => routeState.navigateToInvite()}
+            >
+                <InviteContactsForm orgSlug={orgSlug} />
+            </GenericPanel>
+        );
+    }
+
+    // Invite Email view
+    if (isInviteEmail) {
+        return (
+            <GenericPanel 
+                title="Invite by Email"
+                icon={<FiMail className="w-12 h-12 text-blue-600" />}
+                description="Send email invitations to join your workspace"
+                orgSlug={orgSlug}
+                onClose={() => routeState.navigateToInvite()}
+            >
+                <InviteEmailForm orgSlug={orgSlug} />
+            </GenericPanel>
+        );
+    }
+
+    // Invite Link view
+    if (isInviteLink) {
+        return (
+            <GenericPanel 
+                title="Invite Link"
+                icon={<FiShare2 className="w-12 h-12 text-blue-600" />}
+                description="Share this link to invite people to your workspace"
+                orgSlug={orgSlug}
+                onClose={() => routeState.navigateToInvite()}
+            >
+                <InviteLinkForm orgSlug={orgSlug} />
+            </GenericPanel>
+        );
+    }
+
+    // Invite view (main)
+    if (isInvite) {
+        return (
+            <InvitePanel orgSlug={orgSlug} routeState={routeState} />
+        );
+    }
+
+    // Activity view
+    if (isActivity) {
+        return (
+            <GenericPanel 
+                title="Activity"
+                icon={<FiBell className="w-12 h-12 text-blue-600" />}
+                description="Your recent activity and notifications"
+                orgSlug={orgSlug}
+            />
+        );
+    }
+
+    // Drafts view
+    if (isDrafts) {
+        return (
+            <GenericPanel 
+                title="Drafts"
+                icon={<FiEdit className="w-12 h-12 text-blue-600" />}
+                description="Your unsent message drafts"
+                orgSlug={orgSlug}
+            />
+        );
+    }
+
+    // Saved view
+    if (isSaved) {
+        return (
+            <GenericPanel 
+                title="Saved Items"
+                icon={<FiBookmark className="w-12 h-12 text-blue-600" />}
+                description="Messages and files you've saved for later"
+                orgSlug={orgSlug}
+            />
+        );
+    }
+
+    // Files view
+    if (isFiles) {
+        return (
+            <GenericPanel 
+                title="Files"
+                icon={<FiFile className="w-12 h-12 text-blue-600" />}
+                description="Files shared in your workspace"
+                orgSlug={orgSlug}
+            />
+        );
+    }
+
+    // Search view
+    if (isSearch) {
+        return (
+            <GenericPanel 
+                title="Search"
+                icon={<FiSearch className="w-12 h-12 text-blue-600" />}
+                description="Search messages, files, and channels"
+                orgSlug={orgSlug}
+            >
+                <SearchForm orgSlug={orgSlug} />
+            </GenericPanel>
+        );
+    }
+
+    // Channel or DM selected - show messaging view
+    if (selectedChannel) {
+        return (
+            <ChannelMessagingView 
+                channel={selectedChannel}
+                currentUser={currentUser}
+                isDirectMessage={isMessageView}
+            />
+        );
+    }
+
+    // Default - Welcome screen
+    return (
+        <div className="flex-1 flex flex-col items-center justify-center text-gray-500 p-8">
+            <div className="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6">
+                <FiMessageSquare className="w-12 h-12 text-blue-600" />
+            </div>
+            <h3 className="text-xl font-semibold text-gray-900 mb-2">Welcome to {orgSlug}</h3>
+            <p className="text-center text-gray-600 mb-6 max-w-md">
+                Select a channel or direct message from the sidebar to start chatting, 
+                or create a new conversation.
+            </p>
+            <div className="flex gap-3">
+                <button
+                    onClick={navigateToChannelNew}
+                    className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                >
+                    <FiHash className="w-4 h-4" />
+                    <span>Create Channel</span>
+                </button>
+                <button
+                    onClick={navigateToMessageNew}
+                    className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                    <FiEdit className="w-4 h-4" />
+                    <span>New Message</span>
+                </button>
+            </div>
+        </div>
+    );
+};
+
+// New Channel Panel
+interface NewChannelPanelProps {
+    orgSlug: string;
+    onClose: () => void;
+    onSuccess?: () => void;
+}
+
+const NewChannelPanel: React.FC<NewChannelPanelProps> = ({ orgSlug, onClose, onSuccess }) => {
+    const [channelName, setChannelName] = useState('');
+    const [description, setDescription] = useState('');
+    const [isPrivate, setIsPrivate] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const navigate = useNavigate();
+
+    const [createChannel, { loading: isLoading }] = useAddChannelMutation({
+        onCompleted: (data: any) => {
+            if (data?.createChannel) {
+                const createdChannel = data.createChannel;
+                // Navigate to the new channel
+                navigate(slackUiRoutePaths.channel(orgSlug, createdChannel.title || createdChannel.name));
+                onSuccess?.();
+            }
+        },
+        onError: (err: any) => {
+            console.error('Error creating channel:', err);
+            setError(err.message || 'Failed to create channel. Please try again.');
+        },
+    });
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!channelName.trim()) return;
+        
+        setError(null);
+        
+        createChannel({
+            variables: {
+                name: channelName.toLowerCase().replace(/\s+/g, '-'),
+                description: description || undefined,
+                type: isPrivate ? RoomType.Private : RoomType.Public,
+            },
+        });
+    };
+
+    return (
+        <div className="flex-1 flex flex-col h-full">
+            {/* Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+                <h2 className="text-lg font-semibold text-gray-900">Create a Channel</h2>
+                <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full">
+                    <FiX className="w-5 h-5 text-gray-500" />
+                </button>
+            </div>
+
+            {/* Form */}
+            <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-6 space-y-6">
+                {/* Channel Type */}
+                <div className="space-y-3">
+                    <label className="block text-sm font-medium text-gray-700">Channel Type</label>
+                    <div className="flex gap-4">
+                        <button
+                            type="button"
+                            onClick={() => setIsPrivate(false)}
+                            className={`flex-1 flex items-center gap-3 p-4 rounded-lg border-2 transition-colors ${
+                                !isPrivate ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'
+                            }`}
+                        >
+                            <FiHash className={`w-5 h-5 ${!isPrivate ? 'text-blue-600' : 'text-gray-400'}`} />
+                            <div className="text-left">
+                                <div className={`font-medium ${!isPrivate ? 'text-blue-700' : 'text-gray-700'}`}>Public</div>
+                                <div className="text-xs text-gray-500">Anyone can join</div>
+                            </div>
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => setIsPrivate(true)}
+                            className={`flex-1 flex items-center gap-3 p-4 rounded-lg border-2 transition-colors ${
+                                isPrivate ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'
+                            }`}
+                        >
+                            <FiLock className={`w-5 h-5 ${isPrivate ? 'text-blue-600' : 'text-gray-400'}`} />
+                            <div className="text-left">
+                                <div className={`font-medium ${isPrivate ? 'text-blue-700' : 'text-gray-700'}`}>Private</div>
+                                <div className="text-xs text-gray-500">Invite only</div>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+
+                {/* Channel Name */}
+                <div className="space-y-2">
+                    <label className="block text-sm font-medium text-gray-700">Name</label>
+                    <div className="relative">
+                        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+                            {isPrivate ? <FiLock className="w-4 h-4" /> : <FiHash className="w-4 h-4" />}
+                        </span>
+                        <input
+                            type="text"
+                            value={channelName}
+                            onChange={(e) => setChannelName(e.target.value.toLowerCase().replace(/\s+/g, '-'))}
+                            placeholder="e.g. marketing"
+                            className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        />
+                    </div>
+                </div>
+
+                {/* Description */}
+                <div className="space-y-2">
+                    <label className="block text-sm font-medium text-gray-700">
+                        Description <span className="text-gray-400">(optional)</span>
+                    </label>
+                    <textarea
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="What's this channel about?"
+                        rows={3}
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
+                    />
+                </div>
+
+                {/* Error Message */}
+                {error && (
+                    <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700">
+                        <FiAlertCircle className="w-5 h-5 flex-shrink-0" />
+                        <span className="text-sm">{error}</span>
+                    </div>
+                )}
+
+                {/* Submit */}
+                <button
+                    type="submit"
+                    disabled={!channelName.trim() || isLoading}
+                    className="w-full py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                    {isLoading ? 'Creating...' : 'Create Channel'}
+                </button>
+            </form>
+        </div>
+    );
+};
+
+// New Message Panel
+interface NewMessagePanelProps {
+    orgSlug: string;
+    currentUser: any;
+    onClose: () => void;
+    onSuccess?: () => void;
+}
+
+const NewMessagePanel: React.FC<NewMessagePanelProps> = ({ orgSlug, currentUser, onClose, onSuccess }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [selectedUsers, setSelectedUsers] = useState<any[]>([]);
+    const [error, setError] = useState<string | null>(null);
+    const navigate = useNavigate();
+
+    // Fetch organization members for user search
+    const { data: membersData, loading: membersLoading } = useGetOrganizationMembersQuery({
+        variables: { orgName: orgSlug },
+        skip: !orgSlug,
+    });
+
+    const [createDirectChannel, { loading: isLoading }] = useAddDirectChannelMutation({
+        onCompleted: (data: any) => {
+            if (data?.createDirectChannel) {
+                const channel = data.createDirectChannel;
+                // Navigate to the direct message
+                navigate(slackUiRoutePaths.message(orgSlug, channel.title || channel.name || channel.id));
+                onSuccess?.();
+            }
+        },
+        onError: (err: any) => {
+            console.error('Error creating direct channel:', err);
+            setError(err.message || 'Failed to start conversation. Please try again.');
+        },
+    });
+
+    // Filter members based on search query
+    const filteredMembers = useMemo(() => {
+        if (!membersData?.getOrganizationMembers?.data) return [];
+        const members = membersData.getOrganizationMembers.data;
+        
+        // Filter out current user and already selected users
+        const availableMembers = members.filter((member: any) => 
+            member.id !== currentUser?.id && 
+            !selectedUsers.some(u => u.id === member.id)
+        );
+
+        if (!searchQuery.trim()) return availableMembers;
+        
+        const query = searchQuery.toLowerCase();
+        return availableMembers.filter((member: any) => 
+            member.username?.toLowerCase().includes(query) ||
+            member.email?.toLowerCase().includes(query) ||
+            member.name?.toLowerCase().includes(query)
+        );
+    }, [membersData, searchQuery, selectedUsers, currentUser]);
+
+    const handleSelectUser = (user: any) => {
+        setSelectedUsers([...selectedUsers, user]);
+        setSearchQuery('');
+    };
+
+    const handleStartConversation = () => {
+        if (selectedUsers.length === 0) return;
+        
+        setError(null);
+        
+        // Get receiver IDs
+        const receiverIds = selectedUsers.map(u => u.id);
+        
+        // Create display name from usernames
+        const displayName = selectedUsers.length === 1 
+            ? selectedUsers[0].username 
+            : selectedUsers.map(u => u.username).join(', ');
+
+        createDirectChannel({
+            variables: {
+                receiver: receiverIds,
+                displayName: displayName,
+                channelOptions: { schemeAdmin: false },
+            },
+        });
+    };
+
+    return (
+        <div className="flex-1 flex flex-col h-full">
+            {/* Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+                <h2 className="text-lg font-semibold text-gray-900">New Message</h2>
+                <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full">
+                    <FiX className="w-5 h-5 text-gray-500" />
+                </button>
+            </div>
+
+            {/* To Field */}
+            <div className="px-6 py-4 border-b border-gray-200">
+                <div className="flex items-center gap-2">
+                    <span className="text-gray-500">To:</span>
+                    <div className="flex-1 flex flex-wrap gap-2">
+                        {selectedUsers.map((user, idx) => (
+                            <span key={idx} className="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">
+                                {user.username || user.email}
+                                <button onClick={() => setSelectedUsers(selectedUsers.filter((_, i) => i !== idx))}>
+                                    <FiX className="w-3 h-3" />
+                                </button>
+                            </span>
+                        ))}
+                        <input
+                            type="text"
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            placeholder="Search for people..."
+                            className="flex-1 min-w-[200px] outline-none"
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {/* User Search Results */}
+            <div className="flex-1 overflow-y-auto p-6">
+                {membersLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
+                    </div>
+                ) : filteredMembers.length > 0 ? (
+                    <div className="space-y-2">
+                        {filteredMembers.map((member: any) => (
+                            <button
+                                key={member.id}
+                                onClick={() => handleSelectUser(member)}
+                                className="w-full flex items-center gap-3 p-3 rounded-lg hover:bg-gray-100 transition-colors text-left"
+                            >
+                                <div className="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
+                                    <FiUser className="w-5 h-5 text-gray-600" />
+                                </div>
+                                <div>
+                                    <div className="font-medium text-gray-900">{member.username || member.name}</div>
+                                    {member.email && (
+                                        <div className="text-sm text-gray-500">{member.email}</div>
+                                    )}
+                                </div>
+                            </button>
+                        ))}
+                    </div>
+                ) : searchQuery ? (
+                    <div className="text-center text-gray-500 py-8">
+                        <FiUser className="w-12 h-12 mx-auto mb-3 text-gray-300" />
+                        <p>No members found matching "{searchQuery}"</p>
+                    </div>
+                ) : (
+                    <div className="text-center text-gray-500 py-8">
+                        <FiUser className="w-12 h-12 mx-auto mb-3 text-gray-300" />
+                        <p>Search for people to start a conversation</p>
+                    </div>
+                )}
+                
+                {/* Error Message */}
+                {error && (
+                    <div className="mt-4 flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700">
+                        <FiAlertCircle className="w-5 h-5 flex-shrink-0" />
+                        <span className="text-sm">{error}</span>
+                    </div>
+                )}
+            </div>
+
+            {/* Start Button */}
+            {selectedUsers.length > 0 && (
+                <div className="p-4 border-t border-gray-200">
+                    <button
+                        onClick={handleStartConversation}
+                        disabled={isLoading}
+                        className={`w-full py-3 rounded-lg font-medium transition-colors ${
+                            isLoading 
+                                ? 'bg-gray-400 text-gray-200 cursor-not-allowed' 
+                                : 'bg-blue-600 text-white hover:bg-blue-700'
+                        }`}
+                    >
+                        {isLoading ? 'Creating...' : 'Start Conversation'}
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// Generic Panel Component - reusable panel with header
+interface GenericPanelProps {
+    title: string;
+    icon: React.ReactNode;
+    description: string;
+    orgSlug: string;
+    onClose?: () => void;
+    children?: React.ReactNode;
+}
+
+const GenericPanel: React.FC<GenericPanelProps> = ({ title, icon, description, orgSlug, onClose, children }) => {
+    return (
+        <div className="flex-1 flex flex-col h-full">
+            {/* Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+                <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+                {onClose && (
+                    <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full">
+                        <FiX className="w-5 h-5 text-gray-500" />
+                    </button>
+                )}
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-y-auto p-6">
+                {children ? (
+                    children
+                ) : (
+                    <div className="flex flex-col items-center justify-center h-full text-center">
+                        <div className="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6">
+                            {icon}
+                        </div>
+                        <h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
+                        <p className="text-gray-600 max-w-md">{description}</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+// Invite Panel Component
+interface InvitePanelProps {
+    orgSlug: string;
+    routeState: ReturnType<typeof useRouteState>;
+}
+
+const InvitePanel: React.FC<InvitePanelProps> = ({ orgSlug, routeState }) => {
+    return (
+        <div className="flex-1 flex flex-col h-full">
+            {/* Header */}
+            <div className="flex items-center px-6 py-4 border-b border-gray-200">
+                <h2 className="text-lg font-semibold text-gray-900">Invite People</h2>
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-y-auto p-6">
+                <div className="max-w-md mx-auto space-y-4">
+                    <p className="text-gray-600 text-center mb-6">
+                        Choose how you'd like to invite people to {orgSlug}
+                    </p>
+                    
+                    <button
+                        onClick={() => routeState.navigateToInviteContacts()}
+                        className="w-full flex items-center gap-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+                    >
+                        <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
+                            <FiUserPlus className="w-5 h-5 text-blue-600" />
+                        </div>
+                        <div className="text-left">
+                            <div className="font-medium text-gray-900">From Contacts</div>
+                            <div className="text-sm text-gray-500">Invite from your contact list</div>
+                        </div>
+                    </button>
+                    
+                    <button
+                        onClick={() => routeState.navigateToInviteEmail()}
+                        className="w-full flex items-center gap-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+                    >
+                        <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                            <FiMail className="w-5 h-5 text-green-600" />
+                        </div>
+                        <div className="text-left">
+                            <div className="font-medium text-gray-900">By Email</div>
+                            <div className="text-sm text-gray-500">Send email invitations</div>
+                        </div>
+                    </button>
+                    
+                    <button
+                        onClick={() => routeState.navigateToInviteLink()}
+                        className="w-full flex items-center gap-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+                    >
+                        <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
+                            <FiShare2 className="w-5 h-5 text-purple-600" />
+                        </div>
+                        <div className="text-left">
+                            <div className="font-medium text-gray-900">Share Link</div>
+                            <div className="text-sm text-gray-500">Copy and share an invite link</div>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// New Team Form Component
+interface NewTeamFormProps {
+    orgSlug: string;
+    onClose: () => void;
+}
+
+const NewTeamForm: React.FC<NewTeamFormProps> = ({ orgSlug, onClose }) => {
+    const [teamName, setTeamName] = useState('');
+    const [description, setDescription] = useState('');
+    const [formError, setFormError] = useState<string | null>(null);
+    const navigate = useNavigate();
+
+    const [createTeam, { loading, error }] = useCreateTeamMutation({
+        context: {
+            headers: {
+                orgname: orgSlug,
+            },
+        },
+        onCompleted: (data) => {
+            if (data?.createTeam) {
+                const teamSlug = data.createTeam.name || teamName.toLowerCase().replace(/\s+/g, '-');
+                navigate(slackUiRoutePaths.team(orgSlug, teamSlug));
+            }
+        },
+        onError: (err) => {
+            console.error('Error creating team:', err);
+            setFormError(err.message || 'Failed to create team. Please try again.');
+        },
+    });
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!teamName.trim()) return;
+
+        setFormError(null);
+        createTeam({
+            variables: {
+                orgName: orgSlug,
+                request: {
+                    name: teamName.trim().toLowerCase().replace(/\s+/g, '-'),
+                    title: teamName.trim(),
+                    description: description.trim() || undefined,
+                },
+            },
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-700">Team Name</label>
+                <input
+                    type="text"
+                    value={teamName}
+                    onChange={(e) => setTeamName(e.target.value)}
+                    placeholder="e.g. Engineering"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                />
+            </div>
+            
+            <div className="space-y-2">
+                <label className="block text-sm font-medium text-gray-700">
+                    Description <span className="text-gray-400">(optional)</span>
+                </label>
+                <textarea
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder="What's this team about?"
+                    rows={3}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
+                />
+            </div>
+            
+            {/* Error Message */}
+            {(formError || error) && (
+                <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700">
+                    <FiAlertCircle className="w-5 h-5 flex-shrink-0" />
+                    <span className="text-sm">{formError || error?.message || 'An error occurred'}</span>
+                </div>
+            )}
+            
+            <button
+                type="submit"
+                disabled={!teamName.trim() || loading}
+                className={`w-full py-3 rounded-lg font-medium transition-colors ${
+                    loading 
+                        ? 'bg-gray-400 text-gray-200 cursor-not-allowed' 
+                        : 'bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed'
+                }`}
+            >
+                {loading ? 'Creating...' : 'Create Team'}
+            </button>
+        </form>
+    );
+};
+
+// Invite Contacts Form Component
+interface InviteContactsFormProps {
+    orgSlug: string;
+}
+
+const InviteContactsForm: React.FC<InviteContactsFormProps> = ({ orgSlug }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    
+    return (
+        <div className="space-y-4">
+            <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search contacts..."
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+            <div className="text-center text-gray-500 py-8">
+                <FiUsers className="w-12 h-12 mx-auto mb-3 text-gray-300" />
+                <p>Search for contacts to invite</p>
+            </div>
+        </div>
+    );
+};
+
+// Invite Email Form Component
+interface InviteEmailFormProps {
+    orgSlug: string;
+}
+
+const InviteEmailForm: React.FC<InviteEmailFormProps> = ({ orgSlug }) => {
+    const [email, setEmail] = useState('');
+    const [emails, setEmails] = useState<string[]>([]);
+    const [formError, setFormError] = useState<string | null>(null);
+    const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+    // Fetch org details to get the org ID
+    const { data: orgData } = useGetOrganizationDetailQuery({
+        variables: { where: { name: orgSlug } },
+        skip: !orgSlug,
+    });
+    const orgId = orgData?.getOrganizationDetail?.id;
+
+    const [sendInvitation, { loading, error }] = useSendOrganizationInvitationMutation({
+        onCompleted: (data) => {
+            if (data?.sendOrganizationInvitation) {
+                setSuccessMessage(`Invitation${emails.length > 1 ? 's' : ''} sent successfully!`);
+                setEmails([]);
+                setEmail('');
+                // Clear success message after 3 seconds
+                setTimeout(() => setSuccessMessage(null), 3000);
+            }
+        },
+        onError: (err) => {
+            console.error('Error sending invitation:', err);
+            setFormError(err.message || 'Failed to send invitation. Please try again.');
+        },
+    });
+
+    const handleAddEmail = () => {
+        const trimmedEmail = email.trim().toLowerCase();
+        if (trimmedEmail && !emails.includes(trimmedEmail) && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail)) {
+            setEmails([...emails, trimmedEmail]);
+            setEmail('');
+            setFormError(null);
+        } else if (trimmedEmail && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail)) {
+            setFormError('Please enter a valid email address');
+        }
+    };
+
+    const handleSendInvitations = async () => {
+        if (emails.length === 0) return;
+        
+        if (!orgId) {
+            setFormError('Organization not found. Please try again.');
+            return;
+        }
+
+        setFormError(null);
+        setSuccessMessage(null);
+
+        // Send invitations for each email
+        for (const emailAddr of emails) {
+            await sendInvitation({
+                variables: {
+                    request: {
+                        email: emailAddr,
+                        orgId: orgId,
+                        orgName: orgSlug,
+                        role: ApplicationRoles.Member,
+                    },
+                },
+            });
+        }
+    };
+    
+    return (
+        <div className="space-y-4">
+            <div className="flex gap-2">
+                <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="Enter email address"
+                    className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddEmail())}
+                />
+                <button
+                    type="button"
+                    onClick={handleAddEmail}
+                    className="px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                    Add
+                </button>
+            </div>
+            
+            {emails.length > 0 && (
+                <div className="flex flex-wrap gap-2">
+                    {emails.map((e, idx) => (
+                        <span key={idx} className="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">
+                            {e}
+                            <button onClick={() => setEmails(emails.filter((_, i) => i !== idx))}>
+                                <FiX className="w-3 h-3" />
+                            </button>
+                        </span>
+                    ))}
+                </div>
+            )}
+
+            {/* Error Message */}
+            {(formError || error) && (
+                <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700">
+                    <FiAlertCircle className="w-5 h-5 flex-shrink-0" />
+                    <span className="text-sm">{formError || error?.message || 'An error occurred'}</span>
+                </div>
+            )}
+
+            {/* Success Message */}
+            {successMessage && (
+                <div className="flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700">
+                    <FiCheck className="w-5 h-5 flex-shrink-0" />
+                    <span className="text-sm">{successMessage}</span>
+                </div>
+            )}
+            
+            <button
+                type="button"
+                onClick={handleSendInvitations}
+                disabled={emails.length === 0 || loading}
+                className={`w-full py-3 rounded-lg font-medium transition-colors ${
+                    loading 
+                        ? 'bg-gray-400 text-gray-200 cursor-not-allowed' 
+                        : 'bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed'
+                }`}
+            >
+                {loading ? 'Sending...' : 'Send Invitations'}
+            </button>
+        </div>
+    );
+};
+
+// Invite Link Form Component
+interface InviteLinkFormProps {
+    orgSlug: string;
+}
+
+const InviteLinkForm: React.FC<InviteLinkFormProps> = ({ orgSlug }) => {
+    const inviteLink = `${window.location.origin}/o/${orgSlug}/join`;
+    const [copied, setCopied] = useState(false);
+    
+    const handleCopy = () => {
+        navigator.clipboard.writeText(inviteLink);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+    
+    return (
+        <div className="space-y-4">
+            <p className="text-gray-600 text-sm">
+                Share this link with anyone you'd like to invite to {orgSlug}
+            </p>
+            
+            <div className="flex gap-2">
+                <input
+                    type="text"
+                    value={inviteLink}
+                    readOnly
+                    className="flex-1 px-4 py-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-600"
+                />
+                <button
+                    type="button"
+                    onClick={handleCopy}
+                    className="px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                    {copied ? 'Copied!' : 'Copy'}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+// Search Form Component
+interface SearchFormProps {
+    orgSlug: string;
+}
+
+const SearchForm: React.FC<SearchFormProps> = ({ orgSlug }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    
+    return (
+        <div className="space-y-4">
+            <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search messages, files, and channels..."
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+            <div className="text-center text-gray-500 py-8">
+                <FiSearch className="w-12 h-12 mx-auto mb-3 text-gray-300" />
+                <p>Enter a search term to find messages, files, and channels</p>
+            </div>
+        </div>
+    );
+};
+
+// Channel Messaging View
+interface ChannelMessagingViewProps {
+    channel: any;
+    currentUser: any;
+    isDirectMessage: boolean;
+}
+
+const ChannelMessagingView: React.FC<ChannelMessagingViewProps> = ({ channel, currentUser, isDirectMessage }) => {
+    const [message, setMessage] = useState('');
+
+    const handleSendMessage = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!message.trim()) return;
+        // TODO: Call sendMessage mutation
+        console.log('Sending message:', message);
+        setMessage('');
+    };
+
+    const channelTitle = channel?.title || channel?.name || channel?.displayName || 'Channel';
+
+    return (
+        <div className="flex-1 flex flex-col h-full">
+            {/* Channel Header */}
+            <div className="flex items-center px-6 py-4 border-b border-gray-200">
+                <div className="flex items-center gap-3">
+                    {isDirectMessage ? (
+                        <div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center">
+                            <FiUser className="w-4 h-4 text-gray-600" />
+                        </div>
+                    ) : (
+                        <span className="text-gray-400">
+                            {channel?.type === 'PRIVATE' ? <FiLock className="w-5 h-5" /> : <FiHash className="w-5 h-5" />}
+                        </span>
+                    )}
+                    <div>
+                        <h2 className="font-semibold text-gray-900">{channelTitle}</h2>
+                        {channel?.description && (
+                            <p className="text-sm text-gray-500 truncate">{channel.description}</p>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Messages Area */}
+            <div className="flex-1 overflow-y-auto p-6">
+                <div className="text-center text-gray-500 py-8">
+                    <p className="text-sm">This is the start of your conversation in <strong>{channelTitle}</strong></p>
+                </div>
+                {/* Messages will be rendered here */}
+            </div>
+
+            {/* Message Input */}
+            <form onSubmit={handleSendMessage} className="p-4 border-t border-gray-200">
+                <div className="flex items-center gap-3">
+                    <input
+                        type="text"
+                        value={message}
+                        onChange={(e) => setMessage(e.target.value)}
+                        placeholder={`Message ${isDirectMessage ? '' : '#'}${channelTitle}`}
+                        className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    />
+                    <button
+                        type="submit"
+                        disabled={!message.trim()}
+                        className="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    >
+                        Send
+                    </button>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default React.memo(HomeScreen);