Wegent Frontend Architecture Analysis

interface TaskContextType {
  // Task Lists
  tasks: Task[]
  groupTasks: Task[]
  personalTasks: Task[]
  
  // Selection State
  selectedTask: Task | null
  selectedTaskDetail: TaskDetail | null
  setSelectedTask: (task: Task | null) => void
  
  // Data Operations
  refreshTasks: () => void
  refreshSelectedTaskDetail: (isAutoRefresh?: boolean) => void
  
  // Pagination
  loadMore: () => void
  hasMore: boolean
  loadingMore: boolean
  
  // Search
  searchTerm: string
  setSearchTerm: (term: string) => void
  searchTasks: (term: string) => Promise<void>
  
  // View Status
  markTaskAsViewed: (taskId: number, status: TaskStatus) => void
  getUnreadCount: (tasks: Task[]) => number
  viewStatusVersion: number
}

// src/features/layout/hooks/useMediaQuery.ts
export function useIsMobile(): boolean {
  return useMediaQuery('(max-width: 767px)')
}

export function useIsTablet(): boolean {
  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)')
}

export function useIsDesktop(): boolean {
  return useMediaQuery('(min-width: 1024px)')
}

// src/app/(tasks)/chat/page.tsx
const ChatPageDesktop = dynamic(
  () => import('./ChatPageDesktop').then(mod => ({ default: mod.ChatPageDesktop })),
  { ssr: false }
)

const ChatPageMobile = dynamic(
  () => import('./ChatPageMobile').then(mod => ({ default: mod.ChatPageMobile })),
  { ssr: false }
)

export default function ChatPage() {
  const isMobile = useIsMobile()
  return isMobile ? <ChatPageMobile /> : <ChatPageDesktop />
}

// src/apis/client.ts
class APIClient {
  async request<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
    const url = `${this.getBaseURL()}${endpoint}`
    const token = getToken()

    const config: RequestInit = {
      ...options,
      headers: {
        'Content-Type': 'application/json',
        ...(token && { Authorization: `Bearer ${token}` }),
        ...options.headers,
      },
    }

    const response = await fetch(url, config)
    
    // Handle 401 - Redirect to login
    if (response.status === 401) {
      removeToken()
      redirectToLogin()
    }

    if (!response.ok) {
      throw new ApiError(errorMsg, response.status)
    }

    return response.json()
  }
}

export const apiClient = new APIClient()

// src/apis/tasks.ts
export const taskApis = {
  getTasksLite: (params: PaginationParams): Promise<TaskListResponse> =>
    apiClient.get(`/tasks/lite?page=${params.page}&limit=${params.limit}`),

  getGroupTasksLite: (params: PaginationParams): Promise<TaskListResponse> =>
    apiClient.get(`/tasks/group/lite?page=${params.page}&limit=${params.limit}`),

  getPersonalTasksLite: (params: PaginationParams): Promise<TaskListResponse> =>
    apiClient.get(`/tasks/personal/lite?page=${params.page}&limit=${params.limit}`),

  createTask: (data: CreateTaskRequest): Promise<Task> =>
    apiClient.post('/tasks', data),

  updateTask: (id: number, data: UpdateTaskRequest): Promise<Task> =>
    apiClient.patch(`/tasks/${id}`, data),

  deleteTask: (id: number): Promise<void> =>
    apiClient.delete(`/tasks/${id}`),
}

// src/i18n/setup.ts
export const supportedLanguages = ['en', 'zh-CN']

export async function initI18n() {
  const resources = await loadTranslations()
  
  await i18next.use(initReactI18next).init({
    lng: process.env.I18N_LNG || 'en',
    fallbackLng: 'en',
    resources,
    defaultNS: 'common',
    ns: [
      'common',
      'chat',
      'settings',
      'tasks',
      'admin',
      'wizard',
      'groups',
      'knowledge',
      // ... 13 namespaces
    ],
  })
}

// ✅ CORRECT - Single namespace import
const { t } = useTranslation('groups')
t('title')                    // Current namespace

t('common:actions.save')      // Access other namespace
t('chat:export.no_messages')  // Cross-namespace access

// ❌ WRONG - Array with common first
const { t } = useTranslation(['common', 'groups']) // Breaks feature keys

// src/features/tasks/hooks/useUnifiedMessages.ts
export function useUnifiedMessages({ 
  team, 
  isGroupChat 
}: UseUnifiedMessagesOptions): {
  messages: DisplayMessage[]
  isLoading: boolean
  error: Error | null
} {
  const { selectedTaskDetail } = useTaskContext()
  const { getTaskState } = useChatStreamContext()
  
  // Get real-time state from TaskStateManager
  const taskState = getTaskState(selectedTaskDetail?.id)
  
  // Merge backend data with real-time updates
  const messages = useMemo(() => {
    // 1. Start with backend subtasks
    const backendMessages = convertSubtasksToMessages(
      selectedTaskDetail?.subtasks
    )
    
    // 2. Merge with streamState.messages (WebSocket updates)
    const merged = mergeMessages(backendMessages, taskState?.messages)
    
    // 3. Sort and format for display
    return formatForDisplay(merged)
  }, [selectedTaskDetail?.subtasks, taskState?.messages])
  
  return { messages, isLoading, error }
}

class TaskStateMachine {
  private state: TaskStateData
  private subscribers: Set<Listener>
  
  // Actions
  addUserMessage(content: string): void
  addAIMessage(): string  // Returns messageId
  appendContent(messageId: string, chunk: string): void
  markComplete(messageId: string): void
  markError(messageId: string, error: string): void
  
  // Recovery
  recover(): Promise<void>  // Resume interrupted streams
}

// src/features/tasks/service/teamService.ts
export const teamService = {
  useTeams: () => {
    // React Query or custom hook logic
    const [teams, setTeams] = useState<Team[]>([])
    const refreshTeams = async () => { /* ... */ }
    return { teams, refreshTeams }
  },
  
  useTeam: (id: number) => {
    // Single team operations
  }
}

// Router component with dynamic imports
export default function ChatPage() {
  const isMobile = useIsMobile()
  
  // Dynamic imports for code splitting
  const ChatPageDesktop = dynamic(() => import('./ChatPageDesktop'))
  const ChatPageMobile = dynamic(() => import('./ChatPageMobile'))
  
  return isMobile ? <ChatPageMobile /> : <ChatPageDesktop />
}

// Desktop implementation
export function ChatPageDesktop() {
  // Desktop-specific logic and layout
  return (
    <ResizableSidebar>
      <TaskList />
    </ResizableSidebar>
    <ChatArea />
  )
}

// Mobile implementation  
export function ChatPageMobile() {
  // Mobile-specific logic and layout
  return (
    <DrawerSidebar>
      <TaskList />
    </DrawerSidebar>
    <MobileChatArea />
  )
}

// Feature-specific hook
export function useTaskOperations() {
  const { selectedTask, refreshTasks } = useTaskContext()
  const { sendMessage } = useChatStreamContext()
  
  const handleSend = async (content: string) => {
    await sendMessage({
      message: content,
      team_id: selectedTask?.team_id,
      task_id: selectedTask?.id,
    })
  }
  
  return { handleSend }
}