(SP: 2) [Frontend] Refactor Q&A Tabs: Extract Logic & Align Layout

[ViktorSvertoka]

Goal

Improve maintainability and consistency of the Q&A tabs implementation by refactoring the existing tabs solution and aligning its UI and structure with the Quizzes tabs.

The goal is to reduce component complexity, improve reuse, and ensure a consistent user experience across Quizzes and Q&A pages.

Scope

Refactor & Architecture

• Replace the overloaded TabsSection.tsx with a cleaner QaSection.tsx
• Extract tabs-related state, fetching, and debounce logic into a dedicated hook
• Centralize Q&A-related TypeScript types for reuse across components

UI & Layout

• Align Q&A tabs UI with the Quizzes tabs implementation
• Ensure consistent container width with the global header layout
• Preserve existing UX and behavior (no functional regressions)

Implementation Details

Logic Extraction

• Move tab state, pagination, search, debounce, and data-fetching logic into:
  • useQaTabs.ts
• Keep the main section component focused on rendering only

Types

• Introduce shared Q&A types in types.ts
• Reuse shared types in AccordionList and related components

Component Changes

• Remove TabsSection.tsx
• Introduce QaSection.tsx as the new entry component for the Q&A page
• Update page.tsx to use the new section component