Components Refactor

[DVidal1205]

Codebase is a mess, and it's time for spring cleaning

Each app has components scattered all over the place (view Blade if you don't believe me)

Goal: all Next.js apps have a single components folder in [app]/src/app. this folder can have sub folders for organization, achieving the same purpose as the multi-component folder setup we got going on right now.

[coderabbitai]

Coding Plan

Summary

• Focus consolidation efforts on club (4 folders → 1) and blade (23 folders + src/components → 1), as the other three apps already follow the target pattern
• Use a hybrid subfolder organization with shared/ for cross-cutting components and feature-based folders (admin/, dashboard/, judge/) for domain-specific components, following the gemiknights model identified as best practice
• Migrate blade in logical phases: shared components first, then admin section (largest), then user-facing sections, ensuring imports are updated systematically after each batch
• Preserve existing component relationships and import patterns within subfolder boundaries to minimize refactoring scope

Design Choices

Design Choice 1: Target folder naming convention

Options Considered:

1. Use components/ (matches ticket wording literally)
2. Use _components/ (matches existing Next.js convention, ensures folders aren't treated as routes)

Chosen Option: 2

Rationale: Using _components/ maintains consistency with existing codebase patterns and follows Next.js best practices for private folders.

Design Choice 2: Subfolder organization strategy for blade

Options Considered:

1. By component type (charts/, tables/, modals/, forms/)
2. By feature domain (admin/, dashboard/, judge/, settings/)
3. Hybrid approach with shared utilities separate from feature-specific components

Chosen Option: 3

Rationale: Hybrid approach with shared/ folder for cross-cutting components (navigation, utilities, charts) and feature-based folders (admin/, dashboard/, judge/) for domain-specific components. This mirrors the gemiknights pattern identified as best practice.

Design Choice 3: Handling blade's `src/components/` folder

Options Considered:

1. Keep src/components/ separate, only consolidate route-level _components
2. Merge everything into src/app/_components/ for true single-folder structure

Chosen Option: 2

Rationale: Merge all components into src/app/_components/ to achieve the ticket's goal of a single components folder per app.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Define Target Structure and Prepare Migration

Establish the folder structure conventions for each app and identify all source locations that need migration. This ensures consistency and provides a clear roadmap before moving any files.

Task 1: Document Current State and Target Structure

Catalog all component locations and define the target subfolder organization for each app.

• Identify all _components folders and src/components/ folders in each Next.js app
• For guild, gemiknights, and 2025: confirm they already meet the single-folder requirement (minimal/no changes needed)
• For club: map 4 existing _components locations to target subfolders
• For blade: map 23 _components folders plus src/components/ to target subfolder structure

Task 2: Define Blade Target Subfolder Structure

Create the organizational hierarchy for blade's 192 components based on the component analysis.

• Define structure at apps/blade/src/app/_components/ with these subfolders:
  • shared/ - Cross-cutting components (navigation, utilities, landing)
  • charts/ - All data visualization components (demographics, analytics)
  • admin/ - Admin section components (club management, hackathon management, roles)
  • dashboard/ - Role-specific dashboard components (member, hacker, hackathon)
  • forms/ - Form system and form response components
  • judge/ - Judge interface components
  • settings/ - User settings components
  • check-in/ - Check-in system components (scanner, manual entry)

🤖 Prompt for AI agents

This phase establishes the migration roadmap by documenting the current
component locations and defining the target folder structure for consolidation.

**Goal:** Create a comprehensive mapping of where all components currently live
and where they should be moved.

**Tasks:**
- Scan and catalog all `_components` folders across all 5 Next.js apps (blade,
club, 2025, gemiknights, guild)
- Identify the `src/components/` folder in blade app
- For guild, gemiknights, and 2025: verify they already have a single
centralized `_components` folder and require minimal/no changes
- For club: document the 4 existing `_components` locations and map them to
target subfolders
- For blade: document all 23 `_components` folders plus the `src/components/`
folder and map them to the target subfolder structure

**Define blade target structure at `apps/blade/src/app/_components/`:**
- `shared/` - Cross-cutting components (navigation, utilities, landing)
- `charts/` - All data visualization components (demographics, analytics)
- `admin/` - Admin section components (club management, hackathon management,
roles)
- `dashboard/` - Role-specific dashboard components (member, hacker, hackathon)
- `forms/` - Form system and form response components
- `judge/` - Judge interface components
- `settings/` - User settings components
- `check-in/` - Check-in system components (scanner, manual entry)

Create documentation or mapping file that shows the migration path for each
component location.

Phase 2: Consolidate Club App Components

Migrate club's 4 scattered _components folders into a single centralized location with appropriate subfolders.

Task 1: Create Target Structure for Club

Set up the consolidated folder structure in apps/club/src/app/_components/.

• Create subfolders: shared/, contact/, links/, officers/
• Move app/_components/ contents (landing, navigation) to shared/
• Move app/contact/_components/ contents to contact/
• Move app/links/_components/ contents to links/
• Move app/officers/_components/ contents to officers/

Task 2: Update Club Import Statements

Update all import paths throughout the club app to reference the new consolidated locations.

• Update relative imports in page files (app/contact/page.tsx, app/links/page.tsx, app/officers/page.tsx)
• Change imports from "./_components/..." to "../_components/[subfolder]/..."
• Update any alias imports (~/) if they reference moved components
• Verify approximately 4 relative imports and 6 alias imports need updating

Task 3: Remove Empty Directories in Club

Clean up orphaned folders after migration.

• Delete empty _components folders from app/contact/, app/links/, app/officers/
• Ensure assets/ folders within _components are preserved and moved with their parent components

🤖 Prompt for AI agents

This phase consolidates club's 4 scattered `_components` folders into a single
centralized location at `apps/club/src/app/_components/`.

**Goal:** Migrate all club components into one folder with appropriate
subfolders and update all import paths.

**Create target folder structure:**
- Create `apps/club/src/app/_components/` with subfolders: `shared/`,
`contact/`, `links/`, `officers/`

**Move components:**
- Move `app/_components/` contents (landing, navigation) to
`_components/shared/`
- Move `app/contact/_components/` contents to `_components/contact/`
- Move `app/links/_components/` contents to `_components/links/`
- Move `app/officers/_components/` contents to `_components/officers/`
- Preserve any `assets/` folders within `_components` and move them with their
parent components

**Update imports:**
- Update relative imports in page files: `app/contact/page.tsx`,
`app/links/page.tsx`, `app/officers/page.tsx`
- Change imports from `"./_components/..."` to
`"../_components/[subfolder]/..."`
- Update any alias imports (`~/`) that reference moved components
- Approximately 4 relative imports and 6 alias imports need updating

**Cleanup:**
- Delete empty `_components` folders from `app/contact/`, `app/links/`,
`app/officers/` after verifying all files have been moved

Phase 3: Consolidate Blade App Components - Shared and Charts

Begin blade migration with the most reusable components that are imported across multiple routes.

Task 1: Migrate Shared/Utility Components

Move cross-cutting components used throughout the blade app.

• Move app/_components/navigation/ contents to _components/shared/navigation/
• Move app/_components/ root-level components (auth-showcase, bad-perms, hero, option-cards, user-interface, discord-modal, csv-importer) to _components/shared/
• Move src/components/ contents to _components/shared/forms/ (form-related shared components)
• Move utility components (SortButton, ToggleEditInput) from admin/_components/ to _components/shared/utilities/

Task 2: Migrate Chart Components

Consolidate all 19 data visualization components into a single charts folder.

• Move demographic charts from admin/_components/ (AgeBarChart, GenderPie, MajorBarChart, etc.) to _components/charts/demographics/
• Move club-specific charts from admin/club/data/_components/ to _components/charts/club/
• Move hackathon-specific charts from admin/hackathon/data/_components/ to _components/charts/hackathon/
• Move form response charts from admin/forms/[slug]/responses/_components/ to _components/charts/forms/

🤖 Prompt for AI agents

This phase migrates blade's most reusable components - shared utilities and
chart components that are imported across multiple routes.

**Goal:** Consolidate cross-cutting components into
`apps/blade/src/app/_components/shared/` and all chart components into
`_components/charts/`.

**Migrate shared/utility components:**
- Move `app/_components/navigation/` contents to
`_components/shared/navigation/`
- Move `app/_components/` root-level components to `_components/shared/`:
- auth-showcase, bad-perms, hero, option-cards, user-interface, discord-modal,
csv-importer
- Move `src/components/` contents to `_components/shared/forms/` (form-related
shared components)
- Move utility components from `admin/_components/` to
`_components/shared/utilities/`:
  - SortButton, ToggleEditInput

**Migrate chart components (19 total):**
- Move demographic charts from `admin/_components/` to
`_components/charts/demographics/`:
  - AgeBarChart, GenderPie, MajorBarChart, etc.
- Move club-specific charts from `admin/club/data/_components/` to
`_components/charts/club/`
- Move hackathon-specific charts from `admin/hackathon/data/_components/` to
`_components/charts/hackathon/`
- Move form response charts from `admin/forms/[slug]/responses/_components/` to
`_components/charts/forms/`

Update import statements in files that use these shared and chart components to
reference the new locations.

Phase 4: Consolidate Blade App Components - Admin Section

Migrate the large admin section which contains the majority of blade's scattered components (76+ components across 13 folders).

Task 1: Migrate Admin Club Components

Consolidate club management components.

• Move admin/club/check-in/_components/ to _components/check-in/club/
• Move admin/club/events/_components/ to _components/admin/club/events/
• Move admin/club/members/_components/ to _components/admin/club/members/
• Move remaining admin/club/data/_components/ (non-chart components) to _components/admin/club/data/

Task 2: Migrate Admin Hackathon Components

Consolidate hackathon management components.

• Move admin/hackathon/check-in/_components/ to _components/check-in/hackathon/
• Move admin/hackathon/events/_components/ to _components/admin/hackathon/events/
• Move admin/hackathon/hackers/_components/ to _components/admin/hackathon/hackers/
• Move admin/hackathon/control-room/_components/ to _components/admin/hackathon/control-room/
• Move admin/hackathon/judge-assignment/_components/ to _components/admin/hackathon/judge-assignment/
• Move admin/hackathon/roomAssignment/_components/ to _components/admin/hackathon/room-assignment/
• Move remaining admin/hackathon/data/_components/ (non-chart) to _components/admin/hackathon/data/

Task 3: Migrate Admin Utilities and Roles

Consolidate remaining admin components.

• Move admin/roles/configure/_components/ to _components/admin/roles/
• Move standalone files like admin/roles/manage/roleassign.tsx to _components/admin/roles/
• Move admin/banquet-raffle/components/ (note: non-standard folder name) to _components/admin/banquet-raffle/

🤖 Prompt for AI agents

This phase migrates blade's largest section - the admin area containing 76+
components across 13 folders.

**Goal:** Consolidate all admin section components into
`apps/blade/src/app/_components/admin/` and `_components/check-in/`.

**Migrate admin club components:**
- Move `admin/club/check-in/_components/` to `_components/check-in/club/`
- Move `admin/club/events/_components/` to `_components/admin/club/events/`
- Move `admin/club/members/_components/` to `_components/admin/club/members/`
- Move remaining `admin/club/data/_components/` (non-chart components) to
`_components/admin/club/data/`

**Migrate admin hackathon components:**
- Move `admin/hackathon/check-in/_components/` to
`_components/check-in/hackathon/`
- Move `admin/hackathon/events/_components/` to
`_components/admin/hackathon/events/`
- Move `admin/hackathon/hackers/_components/` to
`_components/admin/hackathon/hackers/`
- Move `admin/hackathon/control-room/_components/` to
`_components/admin/hackathon/control-room/`
- Move `admin/hackathon/judge-assignment/_components/` to
`_components/admin/hackathon/judge-assignment/`
- Move `admin/hackathon/roomAssignment/_components/` to
`_components/admin/hackathon/room-assignment/`
- Move remaining `admin/hackathon/data/_components/` (non-chart) to
`_components/admin/hackathon/data/`

**Migrate admin utilities and roles:**
- Move `admin/roles/configure/_components/` to `_components/admin/roles/`
- Move standalone files like `admin/roles/manage/roleassign.tsx` to
`_components/admin/roles/`
- Move `admin/banquet-raffle/components/` (non-standard folder name) to
`_components/admin/banquet-raffle/`

Update import statements in admin route files and components to reference the
new locations.

Phase 5: Consolidate Blade App Components - User-Facing Sections

Migrate dashboard, judge, forms, settings, and application components.

Task 1: Migrate Dashboard Components

Consolidate role-specific dashboard components (24 total).

• Move dashboard/_components/member-dashboard/ to _components/dashboard/member/
• Move dashboard/_components/hacker-dashboard/ to _components/dashboard/hacker/
• Move dashboard/_components/hackathon-dashboard/ to _components/dashboard/hackathon/

Task 2: Migrate Judge Components

Consolidate judge interface components.

• Move judge/_components/ to _components/judge/
• Move judge/results/_components/ to _components/judge/results/

Task 3: Migrate Forms and Settings Components

Consolidate form and settings components.

• Move forms/[formName]/_components/ to _components/forms/responder/
• Move settings/_components/ to _components/settings/
• Move standalone files like settings/hacker-profile/hacker-profile-form.tsx and settings/member-profile-form.tsx to _components/settings/

Task 4: Migrate Application Components

Consolidate member and hacker application components.

• Move hacker/application/_components/ to _components/applications/hacker/
• Move member/application/_components/ to _components/applications/member/
• Move member/success/_components/ to _components/applications/member/success/

🤖 Prompt for AI agents

This phase migrates blade's user-facing sections including dashboard, judge,
forms, settings, and application components.

**Goal:** Consolidate all user-facing components into appropriate subfolders
under `apps/blade/src/app/_components/`.

**Migrate dashboard components (24 total):**
- Move `dashboard/_components/member-dashboard/` to
`_components/dashboard/member/`
- Move `dashboard/_components/hacker-dashboard/` to
`_components/dashboard/hacker/`
- Move `dashboard/_components/hackathon-dashboard/` to
`_components/dashboard/hackathon/`

**Migrate judge components:**
- Move `judge/_components/` to `_components/judge/`
- Move `judge/results/_components/` to `_components/judge/results/`

**Migrate forms and settings components:**
- Move `forms/[formName]/_components/` to `_components/forms/responder/`
- Move `settings/_components/` to `_components/settings/`
- Move standalone files to `_components/settings/`:
  - `settings/hacker-profile/hacker-profile-form.tsx`
  - `settings/member-profile-form.tsx`

**Migrate application components:**
- Move `hacker/application/_components/` to `_components/applications/hacker/`
- Move `member/application/_components/` to `_components/applications/member/`
- Move `member/success/_components/` to
`_components/applications/member/success/`

Update import statements in dashboard, judge, forms, settings, and application
route files to reference the new locations.

Phase 6: Update Blade Import Statements

Systematically update all import paths throughout the blade app to reference new locations.

Task 1: Update Relative Imports in Route Files

Update imports in page.tsx and layout.tsx files throughout the app directory.

• Search for all from "./_components and from "../_components patterns in route files
• Update paths to reference ../../_components/[appropriate-subfolder]/ or deeper relative paths as needed
• Approximately 31 relative imports identified in exploration need updating
• Pay special attention to dynamic routes like [slug] and [formName]

Task 2: Update Alias Imports

Update imports using the ~/ alias pattern.

• Search for from "~/components patterns (215 occurrences)
• Update to from "~/app/_components/shared/forms/ or appropriate new path
• Consider updating tsconfig.json to add a ~/_components alias for cleaner imports if desired

Task 3: Update Cross-Component Imports

Update imports within components that reference other components.

• Identify components that import other local components (e.g., tables importing SortButton)
• Update relative paths between components within the new structure
• Ensure shared utilities like SortButton are imported from shared/utilities/

🤖 Prompt for AI agents

This phase systematically updates all import paths throughout the blade app to
reference the new consolidated component locations.

**Goal:** Update all imports (relative, alias, and cross-component) to point to
the new folder structure.

**Update relative imports in route files:**
- Search for patterns: `from "./_components` and `from "../_components` in all
page.tsx and layout.tsx files
- Update paths to reference `../../_components/[appropriate-subfolder]/` or
deeper relative paths based on the route depth
- Approximately 31 relative imports need updating
- Pay special attention to dynamic routes like `[slug]` and `[formName]` that
may have different nesting levels

**Update alias imports:**
- Search for `from "~/components` patterns (215 occurrences identified)
- Update to appropriate new paths like:
  - `from "~/app/_components/shared/forms/`
  - `from "~/app/_components/admin/`
  - `from "~/app/_components/dashboard/`
  - etc., based on component location
- Optionally update tsconfig.json to add a `~/_components` alias pointing to
`apps/blade/src/app/_components` for cleaner imports

**Update cross-component imports:**
- Identify components that import other components (e.g., tables importing
SortButton, forms importing utilities)
- Update relative paths between components within the new structure
- Ensure shared utilities like SortButton are imported from `shared/utilities/`
- Update chart imports to reference `_components/charts/[category]/`

Phase 7: Cleanup and Validation

Remove orphaned directories and verify all apps build successfully.

Task 1: Remove Empty Directories in Blade

Clean up all orphaned _components folders after migration.

• Delete all empty _components folders from route directories throughout apps/blade/src/app/
• Delete the now-empty apps/blade/src/components/ folder
• Verify no components remain in old locations

Task 2: Build Verification

Ensure all apps compile without errors after consolidation.

• Run build command for club app and fix any import errors
• Run build command for blade app and fix any import errors
• Run TypeScript type checking across the monorepo
• Test that apps run correctly in development mode

Task 3: Final Consistency Check

Verify the consolidation meets the ticket requirements.

• Confirm each Next.js app has exactly one _components folder at src/app/_components/
• Verify no scattered _components folders remain in route subdirectories
• Confirm guild, gemiknights, and 2025 apps maintain their existing compliant structure
• Document the new structure in any existing project documentation

🤖 Prompt for AI agents

This phase cleans up orphaned directories and validates that the consolidation
is complete and successful.

**Goal:** Remove all empty folders, verify builds work, and confirm the ticket
requirements are met.

**Remove empty directories in blade:**
- Delete all empty `_components` folders from route directories throughout
`apps/blade/src/app/`
- Delete the now-empty `apps/blade/src/components/` folder
- Scan the entire blade app to verify no components remain in old locations

**Build verification:**
- Run build command for club app: `npm run build` or equivalent
- Fix any import errors that surface during club build
- Run build command for blade app: `npm run build` or equivalent
- Fix any import errors that surface during blade build
- Run TypeScript type checking across the monorepo to catch any type errors
- Test that apps run correctly in development mode

**Final consistency check:**
- Confirm each Next.js app (blade, club, 2025, gemiknights, guild) has exactly
one `_components` folder at `src/app/_components/`
- Verify no scattered `_components` folders remain in route subdirectories
across any app
- Confirm guild, gemiknights, and 2025 apps maintain their existing compliant
structure (no changes needed)
- Update any existing project documentation to reflect the new consolidated
structure
- Document the subfolder organization pattern for future reference

Research

The monorepo contains 5 Next.js apps (blade, club, 2025, gemiknights, guild) all using Next.js 14 with App Router and TypeScript. The primary issue is in blade, which has 23 separate _components folders containing 192 component files scattered throughout the route hierarchy, plus a separate src/components/ folder. Club has 4 _components folders. The other three apps (2025, gemiknights, guild) already follow the target pattern with a single centralized _components folder. All apps use the ~/ path alias for internal imports and @forge/ui for shared UI components.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase establishes the migration roadmap by documenting the current
component locations and defining the target folder structure for consolidation.

**Goal:** Create a comprehensive mapping of where all components currently live
and where they should be moved.

**Tasks:**
- Scan and catalog all `_components` folders across all 5 Next.js apps (blade,
club, 2025, gemiknights, guild)
- Identify the `src/components/` folder in blade app
- For guild, gemiknights, and 2025: verify they already have a single
centralized `_components` folder and require minimal/no changes
- For club: document the 4 existing `_components` locations and map them to
target subfolders
- For blade: document all 23 `_components` folders plus the `src/components/`
folder and map them to the target subfolder structure

**Define blade target structure at `apps/blade/src/app/_components/`:**
- `shared/` - Cross-cutting components (navigation, utilities, landing)
- `charts/` - All data visualization components (demographics, analytics)
- `admin/` - Admin section components (club management, hackathon management,
roles)
- `dashboard/` - Role-specific dashboard components (member, hacker, hackathon)
- `forms/` - Form system and form response components
- `judge/` - Judge interface components
- `settings/` - User settings components
- `check-in/` - Check-in system components (scanner, manual entry)

Create documentation or mapping file that shows the migration path for each
component location.
===============================================================================

Task: 2

This phase consolidates club's 4 scattered `_components` folders into a single
centralized location at `apps/club/src/app/_components/`.

**Goal:** Migrate all club components into one folder with appropriate
subfolders and update all import paths.

**Create target folder structure:**
- Create `apps/club/src/app/_components/` with subfolders: `shared/`,
`contact/`, `links/`, `officers/`

**Move components:**
- Move `app/_components/` contents (landing, navigation) to
`_components/shared/`
- Move `app/contact/_components/` contents to `_components/contact/`
- Move `app/links/_components/` contents to `_components/links/`
- Move `app/officers/_components/` contents to `_components/officers/`
- Preserve any `assets/` folders within `_components` and move them with their
parent components

**Update imports:**
- Update relative imports in page files: `app/contact/page.tsx`,
`app/links/page.tsx`, `app/officers/page.tsx`
- Change imports from `"./_components/..."` to
`"../_components/[subfolder]/..."`
- Update any alias imports (`~/`) that reference moved components
- Approximately 4 relative imports and 6 alias imports need updating

**Cleanup:**
- Delete empty `_components` folders from `app/contact/`, `app/links/`,
`app/officers/` after verifying all files have been moved
===============================================================================

Task: 3

This phase migrates blade's most reusable components - shared utilities and
chart components that are imported across multiple routes.

**Goal:** Consolidate cross-cutting components into
`apps/blade/src/app/_components/shared/` and all chart components into
`_components/charts/`.

**Migrate shared/utility components:**
- Move `app/_components/navigation/` contents to
`_components/shared/navigation/`
- Move `app/_components/` root-level components to `_components/shared/`:
- auth-showcase, bad-perms, hero, option-cards, user-interface, discord-modal,
csv-importer
- Move `src/components/` contents to `_components/shared/forms/` (form-related
shared components)
- Move utility components from `admin/_components/` to
`_components/shared/utilities/`:
  - SortButton, ToggleEditInput

**Migrate chart components (19 total):**
- Move demographic charts from `admin/_components/` to
`_components/charts/demographics/`:
  - AgeBarChart, GenderPie, MajorBarChart, etc.
- Move club-specific charts from `admin/club/data/_components/` to
`_components/charts/club/`
- Move hackathon-specific charts from `admin/hackathon/data/_components/` to
`_components/charts/hackathon/`
- Move form response charts from `admin/forms/[slug]/responses/_components/` to
`_components/charts/forms/`

Update import statements in files that use these shared and chart components to
reference the new locations.
===============================================================================

Task: 4

This phase migrates blade's largest section - the admin area containing 76+
components across 13 folders.

**Goal:** Consolidate all admin section components into
`apps/blade/src/app/_components/admin/` and `_components/check-in/`.

**Migrate admin club components:**
- Move `admin/club/check-in/_components/` to `_components/check-in/club/`
- Move `admin/club/events/_components/` to `_components/admin/club/events/`
- Move `admin/club/members/_components/` to `_components/admin/club/members/`
- Move remaining `admin/club/data/_components/` (non-chart components) to
`_components/admin/club/data/`

**Migrate admin hackathon components:**
- Move `admin/hackathon/check-in/_components/` to
`_components/check-in/hackathon/`
- Move `admin/hackathon/events/_components/` to
`_components/admin/hackathon/events/`
- Move `admin/hackathon/hackers/_components/` to
`_components/admin/hackathon/hackers/`
- Move `admin/hackathon/control-room/_components/` to
`_components/admin/hackathon/control-room/`
- Move `admin/hackathon/judge-assignment/_components/` to
`_components/admin/hackathon/judge-assignment/`
- Move `admin/hackathon/roomAssignment/_components/` to
`_components/admin/hackathon/room-assignment/`
- Move remaining `admin/hackathon/data/_components/` (non-chart) to
`_components/admin/hackathon/data/`

**Migrate admin utilities and roles:**
- Move `admin/roles/configure/_components/` to `_components/admin/roles/`
- Move standalone files like `admin/roles/manage/roleassign.tsx` to
`_components/admin/roles/`
- Move `admin/banquet-raffle/components/` (non-standard folder name) to
`_components/admin/banquet-raffle/`

Update import statements in admin route files and components to reference the
new locations.
===============================================================================

Task: 5

This phase migrates blade's user-facing sections including dashboard, judge,
forms, settings, and application components.

**Goal:** Consolidate all user-facing components into appropriate subfolders
under `apps/blade/src/app/_components/`.

**Migrate dashboard components (24 total):**
- Move `dashboard/_components/member-dashboard/` to
`_components/dashboard/member/`
- Move `dashboard/_components/hacker-dashboard/` to
`_components/dashboard/hacker/`
- Move `dashboard/_components/hackathon-dashboard/` to
`_components/dashboard/hackathon/`

**Migrate judge components:**
- Move `judge/_components/` to `_components/judge/`
- Move `judge/results/_components/` to `_components/judge/results/`

**Migrate forms and settings components:**
- Move `forms/[formName]/_components/` to `_components/forms/responder/`
- Move `settings/_components/` to `_components/settings/`
- Move standalone files to `_components/settings/`:
  - `settings/hacker-profile/hacker-profile-form.tsx`
  - `settings/member-profile-form.tsx`

**Migrate application components:**
- Move `hacker/application/_components/` to `_components/applications/hacker/`
- Move `member/application/_components/` to `_components/applications/member/`
- Move `member/success/_components/` to
`_components/applications/member/success/`

Update import statements in dashboard, judge, forms, settings, and application
route files to reference the new locations.
===============================================================================

Task: 6

This phase systematically updates all import paths throughout the blade app to
reference the new consolidated component locations.

**Goal:** Update all imports (relative, alias, and cross-component) to point to
the new folder structure.

**Update relative imports in route files:**
- Search for patterns: `from "./_components` and `from "../_components` in all
page.tsx and layout.tsx files
- Update paths to reference `../../_components/[appropriate-subfolder]/` or
deeper relative paths based on the route depth
- Approximately 31 relative imports need updating
- Pay special attention to dynamic routes like `[slug]` and `[formName]` that
may have different nesting levels

**Update alias imports:**
- Search for `from "~/components` patterns (215 occurrences identified)
- Update to appropriate new paths like:
  - `from "~/app/_components/shared/forms/`
  - `from "~/app/_components/admin/`
  - `from "~/app/_components/dashboard/`
  - etc., based on component location
- Optionally update tsconfig.json to add a `~/_components` alias pointing to
`apps/blade/src/app/_components` for cleaner imports

**Update cross-component imports:**
- Identify components that import other components (e.g., tables importing
SortButton, forms importing utilities)
- Update relative paths between components within the new structure
- Ensure shared utilities like SortButton are imported from `shared/utilities/`
- Update chart imports to reference `_components/charts/[category]/`
===============================================================================

Task: 7

This phase cleans up orphaned directories and validates that the consolidation
is complete and successful.

**Goal:** Remove all empty folders, verify builds work, and confirm the ticket
requirements are met.

**Remove empty directories in blade:**
- Delete all empty `_components` folders from route directories throughout
`apps/blade/src/app/`
- Delete the now-empty `apps/blade/src/components/` folder
- Scan the entire blade app to verify no components remain in old locations

**Build verification:**
- Run build command for club app: `npm run build` or equivalent
- Fix any import errors that surface during club build
- Run build command for blade app: `npm run build` or equivalent
- Fix any import errors that surface during blade build
- Run TypeScript type checking across the monorepo to catch any type errors
- Test that apps run correctly in development mode

**Final consistency check:**
- Confirm each Next.js app (blade, club, 2025, gemiknights, guild) has exactly
one `_components` folder at `src/app/_components/`
- Verify no scattered `_components` folders remain in route subdirectories
across any app
- Confirm guild, gemiknights, and 2025 apps maintain their existing compliant
structure (no changes needed)
- Update any existing project documentation to reflect the new consolidated
structure
- Document the subfolder organization pattern for future reference

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[coderabbitai]

Coding Plan

Summary

• Consolidate all components into a single _components/ directory per app at src/app/_components/
• Preserve logical organization through subdirectories that mirror the existing route structure
• Standardize imports to use the ~/app/_components/ path alias pattern
• Handle Blade first as the primary complexity, then address smaller apps with focused cleanup tasks

Design Choices

Design Choice 1: Target folder location interpretation

Options Considered:

1. src/app/_components/ - Next.js private folder convention with underscore prefix
2. src/app/components/ - Standard folder name without underscore

Chosen Option: 1

Rationale: Using _components/ aligns with Next.js App Router conventions and matches 29 existing instances in the codebase, ensuring consistency and explicitly marking the folder as non-routable.

Design Choice 2: Handling components in `src/components/` (outside app directory)

Options Considered:

1. Move them into src/app/_components/ for full consolidation
2. Leave them in src/components/ as a separate shared location

Chosen Option: 1

Rationale: Move them into src/app/_components/ to achieve the ticket goal of a single components folder per app.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Blade App Component Consolidation

This phase addresses the most complex app with 153 components scattered across 23 _components directories and 8 loose component files. The goal is to consolidate everything into src/app/_components/ while maintaining logical organization through subdirectories that mirror the existing route structure.

Task 1: Design Target Directory Structure for Blade

Define the consolidated folder structure that preserves existing logical groupings while flattening route-based nesting into a single _components root.

• Create target structure in apps/blade/src/app/_components/ with subdirectories:
  • navigation/ - Session navbar, user dropdown, logo, QR code components
  • admin/charts/ - All 8 demographic chart components currently in admin/_components/
  • admin/club/ - Club management: check-in, data, events, members subdirectories
  • admin/hackathon/ - Hackathon management: check-in, data, events, hackers, rooms, judge subdirectories
  • admin/forms/ - Form editor and response viewer components
  • admin/roles/ - Role configuration components
  • dashboard/ - Dashboard components with hacker, hackathon, member subdirectories
  • forms/ - Public form components
  • judge/ - Judge interface components
  • settings/ - Profile form and settings components
  • shared/ - Cross-cutting utilities like scanner, csv-importer, SortButton

Task 2: Move Root-Level and Admin Shared Components

Relocate components from src/app/_components/ (13 files) and src/app/admin/_components/ (11 files) into the new consolidated structure.

• Move navigation components (session-navbar, user-dropdown, club-logo, user-qr-code) to _components/navigation/
• Move demographic chart components (AgeBarChart, GenderPie, etc.) to _components/admin/charts/
• Move shared admin utilities (SortButton, AddPoints, ToggleEditInput) to _components/shared/
• Move remaining root components (auth-showcase, hero, discord-modal, etc.) to appropriate subdirectories based on their usage patterns

Task 3: Move Route-Specific Admin Components

Consolidate the 14 admin route-specific _components directories (~80 files) into the unified structure.

• Move admin/club/check-in/_components/ contents to _components/admin/club/check-in/
• Move admin/club/data/_components/ contents (including nested event-data, member-data) to _components/admin/club/data/
• Move admin/club/events/_components/ contents to _components/admin/club/events/
• Move admin/club/members/_components/ contents to _components/admin/club/members/
• Move admin/hackathon/*/_components/ contents following the same pattern
• Move admin/forms/[slug]/responses/_components/ to _components/admin/forms/responses/
• Move admin/roles/configure/_components/ to _components/admin/roles/

Task 4: Move Dashboard and User-Facing Components

Consolidate dashboard (26 files) and user-facing route components (~15 files).

• Move dashboard/_components/ contents preserving nested structure (hackathon-dashboard, hacker-dashboard, member-dashboard subdirectories) to _components/dashboard/
• Move forms/[formName]/_components/ to _components/forms/
• Move judge/_components/ and judge/results/_components/ to _components/judge/
• Move settings/_components/ to _components/settings/
• Move hacker/application/_components/ and member/*/_components/ to appropriate locations

Task 5: Handle Loose Component Files and Legacy Locations

Address the 8 loose component files and the 9 files in src/components/.

• Move admin/forms/[slug]/client.tsx, con-viewer.tsx, linker.tsx to _components/admin/forms/editor/
• Move admin/hackathon/hackers/hacker-client.tsx to _components/admin/hackathon/hackers/
• Move admin/roles/manage/roleassign.tsx to _components/admin/roles/
• Move admin/banquet-raffle/components/raffle-draw.tsx to _components/admin/banquet-raffle/
• Move settings/hacker-profile/hacker-profile-form.tsx and settings/member-profile-form.tsx to _components/settings/
• Move all 9 files from src/components/ (forms-related) to _components/forms/shared/
• Delete empty src/components/ directory after migration

Task 6: Update All Import Paths in Blade

Update the 78 import statements across 49 files to reference the new consolidated locations.

• Update relative imports (../, ../../, etc.) to use path alias ~/app/_components/
• Standardize all component imports to use the ~/app/_components/ pattern for consistency
• Update cross-directory imports that previously reached across routes
• Verify TypeScript compilation succeeds with no unresolved imports
• Remove any now-empty _components directories from route folders

🤖 Prompt for AI agents

Consolidate 153 Blade components from 23 scattered `_components` directories and
8 loose component files into a single `apps/blade/src/app/_components/`
directory, organizing them into subdirectories that mirror the existing route
structure.

**Directory Structure:**
Create the consolidated `apps/blade/src/app/_components/` directory with these
subdirectories:
- `navigation/` - Session navbar, user dropdown, logo, QR code components
- `admin/charts/` - All 8 demographic chart components
- `admin/club/` with subdirectories: `check-in/`, `data/`, `events/`, `members/`
- `admin/hackathon/` with subdirectories: `check-in/`, `data/`, `events/`,
`hackers/`, `rooms/`, `judge/`
- `admin/forms/` - Form editor, response viewer, and subdirectory `responses/`,
`editor/`
- `admin/roles/` - Role configuration components
- `admin/banquet-raffle/` - Raffle components
- `dashboard/` with subdirectories: `hacker/`, `hackathon/`, `member/`
- `forms/` with subdirectory `shared/`
- `judge/` - Judge interface components
- `settings/` - Profile and settings components
- `shared/` - Cross-cutting utilities (scanner, csv-importer, SortButton)

**Component Migration:**
- Move 13 files from `src/app/_components/`: navigation components to
`navigation/`, remaining root components to appropriate subdirectories
- Move 11 files from `src/app/admin/_components/`: demographic charts to
`admin/charts/`, shared utilities to `shared/`
- Move ~80 files from 14 admin route-specific `_components/` directories:
  - `admin/club/check-in/_components/` → `_components/admin/club/check-in/`
- `admin/club/data/_components/` (including nested folders) →
`_components/admin/club/data/`
  - `admin/club/events/_components/` → `_components/admin/club/events/`
  - `admin/club/members/_components/` → `_components/admin/club/members/`
  - `admin/hackathon/*/_components/` → `_components/admin/hackathon/*/`
- `admin/forms/[slug]/responses/_components/` →
`_components/admin/forms/responses/`
  - `admin/roles/configure/_components/` → `_components/admin/roles/`
- Move 26 files from `dashboard/_components/` preserving nested structure →
`_components/dashboard/`
- Move ~15 user-facing route components:
  - `forms/[formName]/_components/` → `_components/forms/`
  - `judge/_components/` and `judge/results/_components/` → `_components/judge/`
  - `settings/_components/` → `_components/settings/`
- `hacker/application/_components/` and `member/*/_components/` to appropriate
locations
- Move 8 loose component files:
- `admin/forms/[slug]/client.tsx`, `con-viewer.tsx`, `linker.tsx` →
`_components/admin/forms/editor/`
- `admin/hackathon/hackers/hacker-client.tsx` →
`_components/admin/hackathon/hackers/`
  - `admin/roles/manage/roleassign.tsx` → `_components/admin/roles/`
- `admin/banquet-raffle/components/raffle-draw.tsx` →
`_components/admin/banquet-raffle/`
- `settings/hacker-profile/hacker-profile-form.tsx` and
`settings/member-profile-form.tsx` → `_components/settings/`
- Move all 9 files from `src/components/` (forms-related) →
`_components/forms/shared/`
- Delete empty `src/components/` directory

**Import Path Updates:**
- Update 78 import statements across 49 files
- Convert all relative imports (`../`, `../../`, etc.) to use path alias
`~/app/_components/`
- Standardize all component imports to the `~/app/_components/` pattern
- Update cross-directory imports that previously reached across routes
- Verify TypeScript compilation succeeds with no unresolved imports
- Remove all now-empty `_components` directories from route folders

Phase 2: Club App Component Consolidation

Club has components fragmented across 4 _components directories (root plus 3 route-specific). This phase consolidates them into a single location.

Consolidate Club Route-Specific Components

Move route-specific _components folders into the root _components directory.

• Keep existing src/app/_components/ as the target location (25 files already organized)
• Move contact/_components/ (4 files) to _components/contact/
• Move links/_components/ (2 files) to _components/links/
• Move officers/_components/ (2 files) to _components/officers/
• Update import paths in contact/page.tsx, links/page.tsx, and officers/page.tsx
• Remove empty route-specific _components directories

🤖 Prompt for AI agents

Consolidate Club app components from 3 route-specific `_components` directories
into the root `apps/club/src/app/_components/` directory.

**Component Migration:**
- Keep existing `src/app/_components/` as the target location (25 files already
properly organized)
- Move `contact/_components/` (4 files) → `_components/contact/`
- Move `links/_components/` (2 files) → `_components/links/`
- Move `officers/_components/` (2 files) → `_components/officers/`

**Import Path Updates:**
- Update imports in `contact/page.tsx` to reference `~/app/_components/contact/`
- Update imports in `links/page.tsx` to reference `~/app/_components/links/`
- Update imports in `officers/page.tsx` to reference
`~/app/_components/officers/`
- Use the `~/*` path alias pattern for consistency

**Cleanup:**
- Remove empty `contact/_components/` directory
- Remove empty `links/_components/` directory
- Remove empty `officers/_components/` directory

Phase 3: Minor App Cleanup

Address minor organizational issues in 2025 and gemiknights apps. Guild requires no changes as it already has a clean single _components structure.

Task 1: Fix 2025 App Hooks Location

Move misplaced hooks out of the components directory.

• Create apps/2025/src/hooks/ directory
• Move src/app/_components/hooks/useScrollAnimation.tsx to src/hooks/
• Move src/app/_components/hooks/useStaggeredAnimation.tsx to src/hooks/
• Update imports in components that use these hooks to reference ~/hooks/
• Remove empty _components/hooks/ directory

Task 2: Address Gemiknights UI Components

Evaluate and organize the UI primitives currently in _components/ui/.

• Review the 4 UI components (accordion, card, separator, background-gradient-animation) in src/app/_components/ui/
• If these are generic primitives, consider moving them to @forge/ui package for reuse
• If app-specific, keep them in _components/ui/ but document as intentional local copies
• Update any imports if components are moved to shared package

🤖 Prompt for AI agents

Address minor organizational issues in the 2025 and gemiknights apps. Guild
requires no changes.

**2025 App - Hooks Location Fix:**
- Create `apps/2025/src/hooks/` directory
- Move `src/app/_components/hooks/useScrollAnimation.tsx` →
`src/hooks/useScrollAnimation.tsx`
- Move `src/app/_components/hooks/useStaggeredAnimation.tsx` →
`src/hooks/useStaggeredAnimation.tsx`
- Update imports in all components that use these hooks to reference `~/hooks/`
instead of `~/app/_components/hooks/`
- Remove the empty `_components/hooks/` directory

**Gemiknights App - UI Components Evaluation:**
- Review the 4 UI components in `apps/gemiknights/src/app/_components/ui/`:
accordion, card, separator, background-gradient-animation
- Evaluate whether these are generic primitives that should be moved to the
`@forge/ui` package for reuse across apps
- If they are app-specific customizations, keep them in `_components/ui/` but
add a comment documenting them as intentional local copies
- If moving to `@forge/ui`:
  - Move the components to the appropriate location in the shared package
  - Update imports in gemiknights app to reference `@forge/ui`
  - Remove the components from `_components/ui/`
  - Remove the directory if empty

Research

The monorepo contains 5 Next.js apps (blade, club, 2025, gemiknights, guild) all using App Router with src/app/ structure. Apps share a common ~/* path alias mapping to ./src/*. The shared @forge/ui package provides reusable UI primitives, while app-specific components are scattered across multiple _components directories at various route levels. Blade is the worst offender with 153 components in 41 directories, club has route-specific fragmentation, while 2025, gemiknights, and guild have mostly clean structures with minor issues.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Consolidate 153 Blade components from 23 scattered `_components` directories and
8 loose component files into a single `apps/blade/src/app/_components/`
directory, organizing them into subdirectories that mirror the existing route
structure.

**Directory Structure:**
Create the consolidated `apps/blade/src/app/_components/` directory with these
subdirectories:
- `navigation/` - Session navbar, user dropdown, logo, QR code components
- `admin/charts/` - All 8 demographic chart components
- `admin/club/` with subdirectories: `check-in/`, `data/`, `events/`, `members/`
- `admin/hackathon/` with subdirectories: `check-in/`, `data/`, `events/`,
`hackers/`, `rooms/`, `judge/`
- `admin/forms/` - Form editor, response viewer, and subdirectory `responses/`,
`editor/`
- `admin/roles/` - Role configuration components
- `admin/banquet-raffle/` - Raffle components
- `dashboard/` with subdirectories: `hacker/`, `hackathon/`, `member/`
- `forms/` with subdirectory `shared/`
- `judge/` - Judge interface components
- `settings/` - Profile and settings components
- `shared/` - Cross-cutting utilities (scanner, csv-importer, SortButton)

**Component Migration:**
- Move 13 files from `src/app/_components/`: navigation components to
`navigation/`, remaining root components to appropriate subdirectories
- Move 11 files from `src/app/admin/_components/`: demographic charts to
`admin/charts/`, shared utilities to `shared/`
- Move ~80 files from 14 admin route-specific `_components/` directories:
  - `admin/club/check-in/_components/` → `_components/admin/club/check-in/`
- `admin/club/data/_components/` (including nested folders) →
`_components/admin/club/data/`
  - `admin/club/events/_components/` → `_components/admin/club/events/`
  - `admin/club/members/_components/` → `_components/admin/club/members/`
  - `admin/hackathon/*/_components/` → `_components/admin/hackathon/*/`
- `admin/forms/[slug]/responses/_components/` →
`_components/admin/forms/responses/`
  - `admin/roles/configure/_components/` → `_components/admin/roles/`
- Move 26 files from `dashboard/_components/` preserving nested structure →
`_components/dashboard/`
- Move ~15 user-facing route components:
  - `forms/[formName]/_components/` → `_components/forms/`
  - `judge/_components/` and `judge/results/_components/` → `_components/judge/`
  - `settings/_components/` → `_components/settings/`
- `hacker/application/_components/` and `member/*/_components/` to appropriate
locations
- Move 8 loose component files:
- `admin/forms/[slug]/client.tsx`, `con-viewer.tsx`, `linker.tsx` →
`_components/admin/forms/editor/`
- `admin/hackathon/hackers/hacker-client.tsx` →
`_components/admin/hackathon/hackers/`
  - `admin/roles/manage/roleassign.tsx` → `_components/admin/roles/`
- `admin/banquet-raffle/components/raffle-draw.tsx` →
`_components/admin/banquet-raffle/`
- `settings/hacker-profile/hacker-profile-form.tsx` and
`settings/member-profile-form.tsx` → `_components/settings/`
- Move all 9 files from `src/components/` (forms-related) →
`_components/forms/shared/`
- Delete empty `src/components/` directory

**Import Path Updates:**
- Update 78 import statements across 49 files
- Convert all relative imports (`../`, `../../`, etc.) to use path alias
`~/app/_components/`
- Standardize all component imports to the `~/app/_components/` pattern
- Update cross-directory imports that previously reached across routes
- Verify TypeScript compilation succeeds with no unresolved imports
- Remove all now-empty `_components` directories from route folders
===============================================================================

Task: 2

Consolidate Club app components from 3 route-specific `_components` directories
into the root `apps/club/src/app/_components/` directory.

**Component Migration:**
- Keep existing `src/app/_components/` as the target location (25 files already
properly organized)
- Move `contact/_components/` (4 files) → `_components/contact/`
- Move `links/_components/` (2 files) → `_components/links/`
- Move `officers/_components/` (2 files) → `_components/officers/`

**Import Path Updates:**
- Update imports in `contact/page.tsx` to reference `~/app/_components/contact/`
- Update imports in `links/page.tsx` to reference `~/app/_components/links/`
- Update imports in `officers/page.tsx` to reference
`~/app/_components/officers/`
- Use the `~/*` path alias pattern for consistency

**Cleanup:**
- Remove empty `contact/_components/` directory
- Remove empty `links/_components/` directory
- Remove empty `officers/_components/` directory
===============================================================================

Task: 3

Address minor organizational issues in the 2025 and gemiknights apps. Guild
requires no changes.

**2025 App - Hooks Location Fix:**
- Create `apps/2025/src/hooks/` directory
- Move `src/app/_components/hooks/useScrollAnimation.tsx` →
`src/hooks/useScrollAnimation.tsx`
- Move `src/app/_components/hooks/useStaggeredAnimation.tsx` →
`src/hooks/useStaggeredAnimation.tsx`
- Update imports in all components that use these hooks to reference `~/hooks/`
instead of `~/app/_components/hooks/`
- Remove the empty `_components/hooks/` directory

**Gemiknights App - UI Components Evaluation:**
- Review the 4 UI components in `apps/gemiknights/src/app/_components/ui/`:
accordion, card, separator, background-gradient-animation
- Evaluate whether these are generic primitives that should be moved to the
`@forge/ui` package for reuse across apps
- If they are app-specific customizations, keep them in `_components/ui/` but
add a comment documenting them as intentional local copies
- If moving to `@forge/ui`:
  - Move the components to the appropriate location in the shared package
  - Update imports in gemiknights app to reference `@forge/ui`
  - Remove the components from `_components/ui/`
  - Remove the directory if empty

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!