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

package/src/components/Home/InviteMembers.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useCallback } from 'react';
+import { useLocation, useNavigate } from '@remix-run/react';
+import { FiShare2, FiUserPlus, FiMail, FiX } from '../../icons';
+import { useTranslation } from 'react-i18next';
+
+interface InviteMembersProps {
+    organizationName?: string;
+    sharableLink?: string;
+}
+
+export const InviteMembers: React.FC<InviteMembersProps> = ({ 
+    organizationName,
+    sharableLink 
+}) => {
+    const { t } = useTranslation();
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const orgSlug = location.pathname.split('/')[2];
+
+    const handleShareLink = useCallback(async () => {
+        if (sharableLink) {
+            try {
+                if (navigator.share) {
+                    await navigator.share({
+                        title: `Join ${organizationName || 'our team'}`,
+                        text: `Join us on the messenger platform`,
+                        url: sharableLink,
+                    });
+                } else {
+                    // Fallback to copying to clipboard
+                    await navigator.clipboard.writeText(sharableLink);
+                    alert('Link copied to clipboard!');
+                }
+            } catch (error) {
+                console.error('Error sharing:', error);
+            }
+        }
+        setIsModalOpen(false);
+    }, [sharableLink, organizationName]);
+
+    const handleAddFromContacts = useCallback(() => {
+        navigate(`/o/${orgSlug}/home/invite/contacts`);
+        setIsModalOpen(false);
+    }, [navigate, orgSlug]);
+
+    const handleAddByEmail = useCallback(() => {
+        navigate(`/o/${orgSlug}/home/invite/email`);
+        setIsModalOpen(false);
+    }, [navigate, orgSlug]);
+
+    return (
+        <div className="py-2 px-4">
+            <button
+                onClick={() => setIsModalOpen(true)}
+                className="w-full flex items-center gap-3 py-3 px-3 hover:bg-gray-50 rounded-lg transition-colors"
+            >
+                <div className="p-2 bg-gray-100 rounded-full">
+                    <FiUserPlus className="w-5 h-5 text-gray-600" />
+                </div>
+                <span className="text-gray-800 font-medium text-sm">Add teammates</span>
+            </button>
+
+            {/* Modal */}
+            {isModalOpen && (
+                <div className="fixed inset-0 z-50 flex items-center justify-center">
+                    {/* Backdrop */}
+                    <div 
+                        className="absolute inset-0 bg-black/50"
+                        onClick={() => setIsModalOpen(false)}
+                    />
+                    
+                    {/* Modal Content */}
+                    <div className="relative bg-white rounded-xl shadow-xl w-full max-w-md mx-4 overflow-hidden">
+                        {/* Header */}
+                        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+                            <h3 className="text-lg font-semibold text-gray-900">
+                                Invite people to join your team
+                            </h3>
+                            <button
+                                onClick={() => setIsModalOpen(false)}
+                                className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+                            >
+                                <FiX className="w-5 h-5 text-gray-500" />
+                            </button>
+                        </div>
+
+                        {/* Actions */}
+                        <div className="p-4 space-y-3">
+                            {/* Share Link */}
+                            <button
+                                onClick={handleShareLink}
+                                className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium"
+                            >
+                                <FiShare2 className="w-5 h-5" />
+                                Share a Link
+                            </button>
+
+                            {/* Add from Contacts */}
+                            <button
+                                onClick={handleAddFromContacts}
+                                className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-gray-100 hover:bg-gray-200 text-gray-900 rounded-lg transition-colors font-medium"
+                            >
+                                <FiUserPlus className="w-5 h-5" />
+                                Add from Contacts
+                            </button>
+
+                            {/* Add by Email */}
+                            <button
+                                onClick={handleAddByEmail}
+                                className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-gray-100 hover:bg-gray-200 text-gray-900 rounded-lg transition-colors font-medium"
+                            >
+                                <FiMail className="w-5 h-5" />
+                                Add by Email
+                            </button>
+                        </div>
+
+                        {/* Footer */}
+                        <div className="px-6 py-4 border-t border-gray-200">
+                            <button
+                                onClick={() => setIsModalOpen(false)}
+                                className="w-full py-2 text-gray-500 hover:text-gray-700 font-medium transition-colors"
+                            >
+                                Cancel
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default React.memo(InviteMembers);

package/src/components/Home/Teams.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useCallback, useContext } from 'react';
+import { useLocation, useNavigate } from '@remix-run/react';
+import { FiChevronDown, FiChevronRight, FiPlus, FiSearch, FiLock, FiRefreshCw } from '../../icons';
+import { useTranslation } from 'react-i18next';
+
+interface TeamsProps {
+    teams?: any[];
+    loading?: boolean;
+    error?: any;
+    onRefetch?: () => void;
+}
+
+export const Teams: React.FC<TeamsProps> = ({ 
+    teams = [], 
+    loading = false, 
+    error = null,
+    onRefetch 
+}) => {
+    const { t } = useTranslation();
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [isExpanded, setIsExpanded] = useState(true);
+    const orgSlug = location.pathname.split('/')[2];
+
+    const handleTeamClick = useCallback((team: any) => {
+        navigate(`/o/${orgSlug}/home/team/${team.id}`, {
+            state: { team }
+        });
+    }, [navigate, orgSlug]);
+
+    const handleRefetch = useCallback(() => {
+        onRefetch?.();
+    }, [onRefetch]);
+
+    const ListEmptyComponent = () => {
+        if (error) {
+            return (
+                <div className="p-3">
+                    <div className="p-2 bg-red-50 rounded">
+                        <p className="text-red-600 text-sm mb-2 font-medium">
+                            Team service is temporarily unavailable.
+                        </p>
+                        <button 
+                            onClick={handleRefetch}
+                            className="flex items-center gap-1 text-blue-600 text-sm font-medium hover:underline"
+                        >
+                            <FiRefreshCw className="w-4 h-4" />
+                            Retry
+                        </button>
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div className="flex flex-col items-center py-4 px-3">
+                <div className="p-3 mb-2 rounded-full bg-gray-100">
+                    <FiLock className="w-5 h-5 text-gray-500" />
+                </div>
+                <p className="text-gray-500 text-sm text-center">No teams available</p>
+            </div>
+        );
+    };
+
+    return (
+        <div className="py-2">
+            {/* Section Header */}
+            <button
+                onClick={() => setIsExpanded(!isExpanded)}
+                className="w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50"
+            >
+                <span className="font-semibold text-gray-900">Teams</span>
+                {isExpanded ? (
+                    <FiChevronDown className="w-4 h-4 text-gray-600" />
+                ) : (
+                    <FiChevronRight className="w-4 h-4 text-gray-600" />
+                )}
+            </button>
+
+            {/* Teams List */}
+            {isExpanded && (
+                <div className="mt-1">
+                    {loading ? (
+                        <div className="flex items-center justify-center py-4">
+                            <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-blue-500"></div>
+                        </div>
+                    ) : teams.length > 0 ? (
+                        <>
+                            {teams.map((team) => (
+                                <button
+                                    key={team.id}
+                                    onClick={() => handleTeamClick(team)}
+                                    className="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 transition-colors"
+                                >
+                                    <FiLock className="w-4 h-4 text-gray-500 flex-shrink-0" />
+                                    <span className="text-gray-900 text-sm truncate">{team.title}</span>
+                                </button>
+                            ))}
+                            
+                            {/* Browse all teams */}
+                            {teams.length >= 10 && (
+                                <button
+                                    onClick={() => navigate(`/o/${orgSlug}/home/teams`)}
+                                    className="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-gray-500"
+                                >
+                                    <FiSearch className="w-4 h-4" />
+                                    <span className="text-sm">Browse all Teams</span>
+                                </button>
+                            )}
+                        </>
+                    ) : (
+                        <ListEmptyComponent />
+                    )}
+
+                    {/* Add Team */}
+                    <button
+                        onClick={() => navigate(`/o/${orgSlug}/home/teams/new`)}
+                        className="w-full flex items-center gap-3 px-4 py-2 hover:bg-gray-50 text-gray-500"
+                    >
+                        <FiPlus className="w-4 h-4" />
+                        <span className="text-sm">Add Team</span>
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default React.memo(Teams);

package/src/components/Home/TopCommonSlider.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useNavigate, useLocation } from '@remix-run/react';
+import { FiMessageSquare, FiBookmark, FiSend } from '../../icons';
+
+type SliderItem = {
+    id: number;
+    icon: React.ComponentType<{ className?: string }>;
+    title: string;
+    subTitle: string;
+    route: string | null;
+};
+
+const SLIDER_ITEMS: SliderItem[] = [
+    {
+        id: 1,
+        icon: FiMessageSquare,
+        title: 'Threads',
+        subTitle: '0 New',
+        route: 'threads',
+    },
+    {
+        id: 2,
+        icon: FiBookmark,
+        title: 'Later',
+        subTitle: '0 items',
+        route: null,
+    },
+    {
+        id: 3,
+        icon: FiSend,
+        title: 'Draft & Sent',
+        subTitle: '0 drafts',
+        route: null,
+    },
+];
+
+export const TopCommonSlider: React.FC = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const orgSlug = location.pathname.split('/')[2];
+
+    const handleClick = (route: string | null) => {
+        if (route) {
+            navigate(`/o/${orgSlug}/home/${route}`);
+        }
+    };
+
+    return (
+        <div className="flex gap-3 px-4 py-3">
+            {SLIDER_ITEMS.map((item) => (
+                <button
+                    key={item.id}
+                    onClick={() => handleClick(item.route)}
+                    disabled={!item.route}
+                    className={`flex-1 flex flex-col items-center justify-center p-4 border border-gray-200 rounded-lg transition-all ${
+                        item.route 
+                            ? 'hover:border-blue-400 hover:bg-blue-50 cursor-pointer' 
+                            : 'opacity-60 cursor-not-allowed'
+                    }`}
+                >
+                    <item.icon className="w-8 h-8 text-gray-700 mb-2" />
+                    <span className="text-sm font-medium text-gray-800">{item.title}</span>
+                    <span className="text-xs text-gray-500">{item.subTitle}</span>
+                </button>
+            ))}
+        </div>
+    );
+};
+
+export default React.memo(TopCommonSlider);

package/src/components/Home/index.ts

@@ -0,0 +1,5 @@
+export { TopCommonSlider } from './TopCommonSlider';
+export { Teams } from './Teams';
+export { Channels } from './Channels';
+export { DirectChannels } from './DirectChannels';
+export { InviteMembers } from './InviteMembers';

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Home';

package/src/compute.ts

@@ -0,0 +1,156 @@
+import { getFilteredRoutes } from '@common-stack/client-react/lib/utils/filteredRoutes.js';
+import type { IRouteModule } from '@common-stack/core';
+import { IMenuPosition } from '@common-stack/client-react';
+import { SLACK_UI_ROUTES, SLACK_UI_ROUTE_KEYS } from './constants/routes';
+
+export const slackUiPageStore: IRouteModule[] = [
+    {
+        key: SLACK_UI_ROUTE_KEYS.HOME,
+        path: SLACK_UI_ROUTES.HOME,
+        name: 'Home',
+        exact: false,
+        position: IMenuPosition.Middle,
+        auth: true,
+        component: () => import('./screens/Home'),
+        icon: 'AiOutlineHome',
+        tab: 'Home',
+    },
+    // Channel routes
+    {
+        key: SLACK_UI_ROUTE_KEYS.CHANNELS,
+        path: SLACK_UI_ROUTES.CHANNELS,
+        name: 'Channel',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    {
+        key: SLACK_UI_ROUTE_KEYS.CHANNELS_NEW,
+        path: SLACK_UI_ROUTES.CHANNELS_NEW,
+        name: 'New Channel',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    // Message routes
+    {
+        key: SLACK_UI_ROUTE_KEYS.MESSAGES,
+        path: SLACK_UI_ROUTES.MESSAGES,
+        name: 'Direct Message',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    {
+        key: SLACK_UI_ROUTE_KEYS.MESSAGES_NEW,
+        path: SLACK_UI_ROUTES.MESSAGES_NEW,
+        name: 'New Message',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    // Team routes
+    {
+        key: SLACK_UI_ROUTE_KEYS.TEAMS,
+        path: SLACK_UI_ROUTES.TEAMS,
+        name: 'Team',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    {
+        key: SLACK_UI_ROUTE_KEYS.TEAMS_NEW,
+        path: SLACK_UI_ROUTES.TEAMS_NEW,
+        name: 'New Team',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    // Invite routes
+    {
+        key: SLACK_UI_ROUTE_KEYS.INVITE,
+        path: SLACK_UI_ROUTES.INVITE,
+        name: 'Invite Members',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    {
+        key: SLACK_UI_ROUTE_KEYS.INVITE_CONTACTS,
+        path: SLACK_UI_ROUTES.INVITE_CONTACTS,
+        name: 'Invite from Contacts',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    {
+        key: SLACK_UI_ROUTE_KEYS.INVITE_EMAIL,
+        path: SLACK_UI_ROUTES.INVITE_EMAIL,
+        name: 'Invite by Email',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    {
+        key: SLACK_UI_ROUTE_KEYS.INVITE_LINK,
+        path: SLACK_UI_ROUTES.INVITE_LINK,
+        name: 'Invite Link',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    // Other routes
+    {
+        key: SLACK_UI_ROUTE_KEYS.THREADS,
+        path: SLACK_UI_ROUTES.THREADS,
+        name: 'Threads',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    {
+        key: SLACK_UI_ROUTE_KEYS.ACTIVITY,
+        path: SLACK_UI_ROUTES.ACTIVITY,
+        name: 'Activity',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    {
+        key: SLACK_UI_ROUTE_KEYS.DRAFTS,
+        path: SLACK_UI_ROUTES.DRAFTS,
+        name: 'Drafts',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    {
+        key: SLACK_UI_ROUTE_KEYS.SAVED,
+        path: SLACK_UI_ROUTES.SAVED,
+        name: 'Saved Items',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    {
+        key: SLACK_UI_ROUTE_KEYS.FILES,
+        path: SLACK_UI_ROUTES.FILES,
+        name: 'Files',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+    {
+        key: SLACK_UI_ROUTE_KEYS.SEARCH,
+        path: SLACK_UI_ROUTES.SEARCH,
+        name: 'Search',
+        exact: true,
+        auth: true,
+        component: () => import('./screens/Home'),
+    },
+];
+
+// Get filtered routes
+const filteredRoutes = getFilteredRoutes(slackUiPageStore);
+
+export { filteredRoutes };

package/src/constants/index.ts

@@ -0,0 +1 @@
+export * from './routes';

package/src/constants/routes.ts

@@ -0,0 +1,92 @@
+import { ORG_STD_ROUTES } from '@adminide-stack/core/lib/constants/urls.js';
+
+/**
+ * Slack UI Routes Enum
+ * Centralized route definitions for the slack-ui browser package
+ */
+export enum SLACK_UI_ROUTES {
+    // Base paths
+    HOME = '/o/:orgName/home',
+    
+    // Channel routes
+    CHANNELS = '/o/:orgName/home/channels/:channelName',
+    CHANNELS_NEW = '/o/:orgName/home/channels/new',
+    
+    // Direct message routes
+    MESSAGES = '/o/:orgName/home/messages/:channelName',
+    MESSAGES_NEW = '/o/:orgName/home/messages/new',
+    
+    // Team routes
+    TEAMS = '/o/:orgName/home/teams/:teamName',
+    TEAMS_NEW = '/o/:orgName/home/teams/new',
+    
+    // Invite routes
+    INVITE = '/o/:orgName/home/invite',
+    INVITE_CONTACTS = '/o/:orgName/home/invite/contacts',
+    INVITE_EMAIL = '/o/:orgName/home/invite/email',
+    INVITE_LINK = '/o/:orgName/home/invite/link',
+    
+    // Other routes
+    THREADS = '/o/:orgName/home/threads',
+    ACTIVITY = '/o/:orgName/home/activity',
+    DRAFTS = '/o/:orgName/home/drafts',
+    SAVED = '/o/:orgName/home/saved',
+    FILES = '/o/:orgName/home/files',
+    SEARCH = '/o/:orgName/home/search',
+}
+
+/**
+ * Route path builders with type safety
+ */
+export const slackUiRoutePaths = {
+    home: (orgName: string) => `/o/${orgName}/home`,
+    
+    // Channels
+    channel: (orgName: string, channelName: string) => `/o/${orgName}/home/channels/${channelName}`,
+    channelNew: (orgName: string) => `/o/${orgName}/home/channels/new`,
+    
+    // Direct Messages
+    message: (orgName: string, channelName: string) => `/o/${orgName}/home/messages/${channelName}`,
+    messageNew: (orgName: string) => `/o/${orgName}/home/messages/new`,
+    
+    // Teams
+    team: (orgName: string, teamName: string) => `/o/${orgName}/home/teams/${teamName}`,
+    teamNew: (orgName: string) => `/o/${orgName}/home/teams/new`,
+    
+    // Invite
+    invite: (orgName: string) => `/o/${orgName}/home/invite`,
+    inviteContacts: (orgName: string) => `/o/${orgName}/home/invite/contacts`,
+    inviteEmail: (orgName: string) => `/o/${orgName}/home/invite/email`,
+    inviteLink: (orgName: string) => `/o/${orgName}/home/invite/link`,
+    
+    // Other
+    threads: (orgName: string) => `/o/${orgName}/home/threads`,
+    activity: (orgName: string) => `/o/${orgName}/home/activity`,
+    drafts: (orgName: string) => `/o/${orgName}/home/drafts`,
+    saved: (orgName: string) => `/o/${orgName}/home/saved`,
+    files: (orgName: string) => `/o/${orgName}/home/files`,
+    search: (orgName: string) => `/o/${orgName}/home/search`,
+};
+
+/**
+ * Route keys for route matching
+ */
+export const SLACK_UI_ROUTE_KEYS = {
+    HOME: 'home',
+    CHANNELS: 'home-channels',
+    CHANNELS_NEW: 'home-channels-new',
+    MESSAGES: 'home-messages',
+    MESSAGES_NEW: 'home-messages-new',
+    TEAMS: 'home-teams',
+    TEAMS_NEW: 'home-teams-new',
+    INVITE: 'home-invite',
+    INVITE_CONTACTS: 'home-invite-contacts',
+    INVITE_EMAIL: 'home-invite-email',
+    INVITE_LINK: 'home-invite-link',
+    THREADS: 'home-threads',
+    ACTIVITY: 'home-activity',
+    DRAFTS: 'home-drafts',
+    SAVED: 'home-saved',
+    FILES: 'home-files',
+    SEARCH: 'home-search',
+} as const;

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useOptimizedChannelsQueries, useChannelTypeQuery } from './useOptimizedChannelsQueries';
+export { useRouteState } from './useRouteState';
+export type { UseRouteStateReturn } from './useRouteState';