Improve Frontend Codebase Readability and Structure

[kyasbal]

Background

The KHI frontend codebase has grown organically, resulting in mixed responsibilities within components (e.g., TimelineComponent, LogViewComponent) and a scattered folder structure. This unclear separation of concerns hinders:

• Readability: It is difficult to grasp the data flow and business logic.
• Testability: UI logic is tightly coupled with global services.
• Reusability: Components are often too specific to their container.

Objective

Enhance the readability and maintainability of the frontend application by:

1. Adopting the Container/Presenter (Smart/Dumb) pattern.
2. Reorganizing the folder structure to reflect these responsibilities.
3. Defining clear boundaries for Shared (generic UI) and Core (singleton services).

Architectural Guidelines

Component Classification

• Smart Components (containers/):
  • Manage state and dependencies (Services/Stores).
  • Pass data to Presentational Components.
  • Handle business logic.
• Presentational Components (components/):
  • Focus purely on UI rendering.
  • Communicate via @Input() and @Output().
  • Should be decoupled from application-specific business logic where possible.
  • MUST have associated Storybook stories to document states and enable isolated development.

Directory Structure

src/app/
├── <feature>/          # Feature-specific modules (e.g., timeline, log)
│   ├── containers/     # Smart Components
│   └── components/     # Feature-specific Presentational Components
├── shared/             # Reusable UI components & pipes (Presenter only)
└── core/               # Singleton services & Global configuration