Skip to content

refactor(ui): extract modular components from HomePage - #53

Merged
Youchenjiang merged 5 commits into
mainfrom
refactor/modularize-large-pages
Oct 8, 2026
Merged

Youchenjiang merged 5 commits into
mainfrom
refactor/modularize-large-pages

Conversation

@Youchenjiang

@Youchenjiang Youchenjiang commented Oct 8, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Modularize HomePage by decomposing large inline subcomponents and styles into dedicated component files under src/components/home.

Key Changes

  1. Extract HeroHeader, HomeModuleList, AnnouncementBar, HomeHeader, and HomeBody into src/components/home.
  2. Create types.ts and index.ts barrel export for home components.
  3. Reduce HomePage.tsx from 776 lines to 208 lines.
  4. Decouple CTF challenge config and helpers into src/services/ctf-challenge.ts.

Verification

  • npx tsc --noEmit passes
  • npx vitest run — all tests pass
  • No sensitive data committed

Notes

Part of Scheme A refactoring roadmap (Phase 3: modularize large pages).

Summary by Sourcery

Modularize the home page and harden pull-request body validation against malformed formatting.

Bug Fixes:

  • Strengthen pull-request body validation for malformed checklist backslashes, corrupted escaped inline-code artifacts, and unmatched backticks.

Enhancements:

  • Extract HomePage presentation components, shared types, and module definitions into a dedicated home components package.
  • Move CTF challenge configuration and expiration logic into a reusable service module.
  • Reduce HomePage complexity while preserving its existing home-screen composition and interactions.

Tests:

  • Add self-tests covering malformed verification checklist entries and invalid inline-code formatting.

1. Extract HeroHeader, HomeModuleList, AnnouncementBar, HomeHeader, and HomeBody into src/components/home.
2. Reduce HomePage.tsx from 776 lines to 210 lines for better maintainability.
3. Preserve all Easter Egg, CTF challenge, and announcement interactions.
@sourcery-ai

sourcery-ai Bot commented Oct 8, 2026 •

Copy link
Copy Markdown

Reviewer's Guide

This refactor preserves HomePage behavior while moving its hero, announcements, module cards, header, and body composition into typed, reusable components under src/components/home; HomePage now primarily coordinates state, effects, callbacks, and modal flows.

File-Level Changes

Change Details Files
Decompose HomePage’s inline presentation and interaction UI into dedicated home components while preserving existing behavior.
  • Extract the hero/logo animation and CTF display logic.
  • Extract announcement rendering with priority-based styling.
  • Extract module card rendering, icon mapping, hover states, and hidden/disabled handling.
  • Extract Ionic header/body composition and wire callbacks through explicit props.
src/components/home/HeroHeader.tsx
src/components/home/AnnouncementBar.tsx
src/components/home/HomeModuleList.tsx
src/components/home/HomeHeader.tsx
src/components/home/HomeBody.tsx
Introduce shared home-component types and a public barrel export for the refactored module.
  • Define ParticleData and ModuleCard interfaces.
  • Export components, types, and reusable CTF/hero helpers from one index.
src/components/home/types.ts
src/components/home/index.ts
Simplify HomePage into a container that owns state, effects, callbacks, and modal/navigation behavior.
  • Replace large inline component and style definitions with imports from the home barrel.
  • Keep announcement, quiz, particle, unlock, and navigation state management in the page container.
  • Reduce the page implementation from 776 lines to approximately 210 lines.
src/pages/HomePage.tsx

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 1 issue

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="src/components/home/HeroHeader.tsx" line_range="4-16" />
<code_context>
+import React from "react";
+import type { ParticleData } from "./types";
+
+export const CTF_CONFIG = {
+  activeUrl: "https://im2026ctf.duckdns.org/",
+  scoreboardUrl: "https://im2026ctf.duckdns.org/scoreboard",
+  endTime: "2026-09-10T10:00:00+08:00",
+} as const;
+
+export const isCtfEnded = (): boolean => {
+  try {
+    return Date.now() > new Date(CTF_CONFIG.endTime).getTime();
+  } catch {
+    return false;
+  }
+};
+
+export const getStageIcon = (stage: number): string => {
</code_context>
<issue_to_address>
**CTF rules live in hero UI**

When CTF configuration or challenge logic needs to change independently of the hero, `HomePage` imports `CTF_CONFIG` and `isCtfEnded` from `HeroHeader`, coupling challenge orchestration and configuration to a presentational component. Updating or reusing the hero therefore also pulls CTF policy through the UI module.

Move the CTF configuration and challenge helpers into a domain/config module and import them from both the page and UI as needed.

Also at `src/pages/HomePage.tsx:14-16`.
</issue_to_address>

Sourcery assessment

Approved.


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

Comment thread src/components/home/HeroHeader.tsx Outdated
1. Move CTF_CONFIG and isCtfEnded from HeroHeader to src/services/ctf-challenge.ts.
2. Decouple challenge orchestration and date checks from UI components.
3. Resolve Sourcery review recommendation on PR #53.
1. Check for unescaped leading or trailing backslashes in checklist items.
2. Add regression tests covering escaped newline artifacts in verification section.
3. Prevent malformed Markdown from passing commit policy gates.
1. Intercept corrupted escaped inline code artifacts in PR descriptions.
2. Validate balanced backtick count across PR body.
3. Add self-test cases verifying backtick and artifact detection.
1. Replace test and match calls on escapedArtifactPattern with single exec call.
2. Resolve SonarCloud maintainability rule S6594 on commit-policy.mjs.
3. Keep test policy behavior and parity checks identical.
@sonarqubecloud

sonarqubecloud Bot commented Oct 8, 2026

Copy link
Copy Markdown

@Youchenjiang
Youchenjiang merged commit 6c3fb70 into main Oct 8, 2026
9 of 10 checks passed
@Youchenjiang
Youchenjiang deleted the refactor/modularize-large-pages branch October 8, 2026 03:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant