Documentation

react/
├── public/
│   ├── apple-icon.png
│   └── favicon.png
├── src/
│   ├── assets/img/          # logo.svg, logo.png, favicon.png, profiles/
│   ├── components/          # ai, calls, chat, layout, settings, skeleton, ui
│   ├── contexts/            # Theme, Settings, Toast, Notifications, AiPreferences
│   ├── core/data/           # interface.ts, imagedata.ts - shared TS types & assets
│   ├── hooks/               # useModal, useDropdown, useDisclosure, useCallTimer, ...
│   ├── layout/              # AppShellLayout, AuthLayout, SettingsLayout
│   ├── routes/              # all_routes, router, router.link, lazyRoute, dynamicTitle
│   ├── utils/               # shared helpers
│   ├── views/               # page modules (chat, ai, account, auth, misc)
│   ├── App.tsx              # provider tree + router mount
│   ├── environment.tsx
│   ├── index.css            # theme tokens + Tailwind entry
│   └── main.tsx             # React root
├── eslint.config.js
├── index.html
├── package.json
├── postcss.config.js
├── tsconfig.json
└── vite.config.ts

Shared Components (src/components/)

ui: Accordion, Button, ContextMenu, Dropdown, EmojiPicker, GifPicker, Input, Lightbox, Modal, RadioCard, Select, Tabs, Toggle, Tooltip — layout: WorkspaceRail, ChannelSidebar, LegalDocLayout, AuthDivider, AuthMobileLogo, SocialAuthButtons, DemoBar — plus ai, calls, chat, settings, skeleton and image-with-base-path.

Page Modules (src/views/)

chat: Home, Threads, Dm, Calls, Files, Bookmarks, ActivityFeed, Notifications, TeamDirectory, Status — ai: AiAssistant, AiRewrite, AiSettings, AiSuggestions, AiSummary, AiTranslate — account: Profile, Settings, Billing, Invite, MediaGallery — auth: Login, Register, ForgotPassword, ResetPassword, VerifyEmail — misc: Welcome, Shortcuts, LockScreen, Maintenance, Error404, PrivacyPolicy, TermsOfService

The React root in src/main.tsx mounts App.tsx, which composes the provider tree and the router.

Below is the React app entry:

import { BrowserRouter } from "react-router-dom";
import { PrimeReactProvider } from "@primereact/core/config";
import { ThemeProvider } from "./contexts/ThemeContext";
import { SettingsProvider } from "./contexts/SettingsContext";
import { ToastProvider } from "./contexts/ToastContext";
import { NotificationsProvider } from "./contexts/NotificationsContext";
import { AiPreferencesProvider } from "./contexts/AiPreferencesContext";
import ALLRoutes from "./routes/router";
import DynamicTitle from "./routes/dynamicTitle";

function App() {
  return (
    <PrimeReactProvider>
      <ThemeProvider>
        <SettingsProvider>
          <ToastProvider>
            <AiPreferencesProvider>
              <BrowserRouter basename={import.meta.env.BASE_URL}>
                <NotificationsProvider>
                  <DynamicTitle />
                  <ALLRoutes />
                </NotificationsProvider>
              </BrowserRouter>
            </AiPreferencesProvider>
          </ToastProvider>
        </SettingsProvider>
      </ThemeProvider>
    </PrimeReactProvider>
  );
}

export default App;

State Management

State is handled with React Context providers in src/contexts/ – no external store library is required:

• ThemeContext – dark/light mode, layout direction and accent color, persisted to localStorage.
• SettingsContext – workspace and user preference settings.
• ToastContext – global toast notifications.
• NotificationsContext – in-app notification state.
• AiPreferencesContext – preferences for the AI suite pages.

Routing

Routing is handled by react-router-dom v7. The basename comes from Vite's import.meta.env.BASE_URL, which resolves to /react/.

• src/routes/all_routes.tsx – central map of path constants used across the app.
• src/routes/router.link.tsx – exports appRoutes, settingsRoutes, authRoutes and standaloneRoutes, each entry shaped { path, element, meta_title }.
• src/routes/router.tsx – nests appRoutes under AppShellLayout, settingsRoutes under SettingsLayout and authRoutes under AuthLayout. standaloneRoutes render bare, because they bring their own shell.
• src/routes/lazyRoute.tsx – React.lazy + Suspense with a shape-matched PageSkeleton fallback, keyed on the pathname so the skeleton renders on every navigation.
• src/routes/dynamicTitle.tsx – sets document.title from each route's meta_title.

The default workspace layout (AppShellLayout.tsx) with an icon workspace rail, a channel sidebar, and a center conversation area.

• Workspace Rail: Icon-only left rail for switching workspaces and top-level sections (WorkspaceRail.tsx).
• Channel Sidebar: Channels, direct messages, threads and collapsible groups (ChannelSidebar.tsx).
• Responsive: Collapses into an overlay sidebar on tablets and mobile screens automatically.

Two secondary shells complement the main workspace layout, each wrapping its own route group.

• Settings Layout: SettingsLayout.tsx renders a dedicated section navigation beside the settings content – used for profile, workspace, and AI preference pages.
• Auth Layout: AuthLayout.tsx is a centered, sidebar-free shell for login, register, password reset, and email verification.
• Standalone Pages: Welcome, shortcuts, lock screen, maintenance, and error pages render outside every layout with their own full-page markup.