Feature: Add "New Hackathon" Option to Hackathon Switcher

[Benjtalkshow]

Add "New Hackathon" Option to Hackathon Switcher

Description

The hackathon switcher dropdown — used to navigate between different hackathons within an organization — should include a "New Hackathon" option with a + icon at the bottom of the list. This provides organizers with a quick shortcut to start a new event without having to navigate back to the main hackathon list, reducing friction in the creation workflow.

Impact: Low/Medium (UX Improvement) — a small but meaningful quality-of-life addition for active organizers managing multiple hackathons.

---

Requirements

1. Add a "New Hackathon" item at the end of the dropdown list, separated from the existing hackathon entries by a DropdownMenuSeparator
2. Include a + icon (from lucide-react) next to the label
3. This option must only appear if the organization already has at least one hackathon (draft or published) — the component already returns null when the list is empty, so this is a natural extension of the existing guard
4. Clicking the option must navigate the user to the "Create Hackathon" page: /organizations/[id]/hackathons/new

---

Technical Details

Component to Modify

• HackathonSelector.tsx

Proposed Changes

1. Update DropdownMenuContent

After mapping through the existing hackathons list, conditionally render a new DropdownMenuItem preceded by a separator. The item should only render when hackathons.length > 0:

{hackathons.length > 0 && (
  <>
    
    <DropdownMenuItem
      onClick={() => router.push(`/organizations/${organizationId}/hackathons/new`)}
      className="flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 hover:bg-[#252525] focus:bg-[#252525] text-primary"
    >
      
      New Hackathon
    
  </>
)}

2. Handle organizationId

HackathonSelector currently receives hackathons and currentHackathon as props but does not have direct access to organizationId. Resolve this using one of the following approaches — choose whichever is most consistent with the existing patterns in the component:

• Option A (Preferred): Pass organizationId as an explicit prop from HackathonSidebar.tsx, keeping the component's data dependencies transparent and easy to trace
• Option B: Extract organizationId from currentHackathon.href if the href reliably follows the /organizations/[id]/... pattern
• Option C: Use useParams() to read the id segment directly from the URL

3. Add Plus Icon Import

Import Plus from lucide-react — it is not currently imported in HackathonSelector.tsx.

---

Proposed Resolution Plan

1. Pass organizationId to HackathonSelector from HackathonSidebar.tsx as an explicit prop (or use useParams() if that is the cleaner fit)
2. Import Plus from lucide-react
3. Implement the conditional "New Hackathon" menu item with the DropdownMenuSeparator as described above
4. Verify navigation routes correctly to /organizations/[id]/hackathons/new on click
5. Verify the item is hidden when the hackathon list is empty — the component already returns null in this case, but confirm the conditional guard aligns with that behavior

---

⚠️ Caution

This is a production environment — not a sandbox.

• Code must be performant, accessible, and clean
• AI-generated code will be scrutinized; poorly structured or "hallucinated" code will result in immediate issue closure
• Follow the existing design system: shadcn/ui, Tailwind, Framer Motion
• Match the exact className conventions already used in HackathonSelector.tsx — do not introduce inconsistent styling

---

Testing & Verification

Automated Tests

npm run lint    # Ensure code quality
npm run build   # Verify no breaking changes in routing or types

Manual Verification

• Open the hackathon switcher dropdown when the organization has one or more hackathons — confirm the "New Hackathon" option with + icon appears at the bottom, separated by a divider
• Confirm the "New Hackathon" option is hidden when the hackathon list is empty — the switcher should not render the item in that state
• Click "New Hackathon" — confirm navigation routes correctly to /organizations/[id]/hackathons/new with the correct organization ID in the URL
• Verify the organizationId used in the navigation URL is accurate — confirm it matches the current organization, not a stale or incorrect value
• Confirm the DropdownMenuSeparator renders correctly and uses the bg-[#2B2B2B] class consistent with the existing design
• Verify the new DropdownMenuItem styling matches the existing item conventions in HackathonSelector.tsx — no visual inconsistencies
• Confirm there is no regression in the existing hackathon switching behavior — selecting an existing hackathon from the dropdown should still navigate correctly
• Provide video evidence

[linear]

BOU-123

[coderabbitai]

🔗 Related PRs

#372 - Fix hackathon [merged]
#376 - Fix hackathon [merged]
#380 - Feat/minor ux fixes [merged]
#381 - Hackathon analytics [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[Emmzyemms]

Hello Maintainers,
I’m a full-stack and smart contract developer with experience building responsive frontend interfaces, scalable backend systems, and secure blockchain applications. I’m interested in contributing to this issue and believe I can deliver a clean, well-tested solution that aligns with the project’s standards.
I’m eager to learn, improve, and collaborate with the community while contributing meaningful value. I would appreciate the opportunity to work on this task.

[Christopherdominic]

Can I work on this issue?

[ryzen-xp]

Hi maintainers 👋
I’m a blockchain developer with strong expertise in Stellar, Rust,TS and Stellar SDK integrations. I’ve worked on multiple Stellar-based smart contract and backend systems.

I understand the scope of this issue and can deliver a reliable, production-quality solution with proper tests and documentation.
Plz assign me !!

ETA: 14 hours

[SecureTechie]

Hi 👋
I’ve reviewed the issue and the HackathonSelector.tsx component. I can implement the conditional "New Hackathon" item with the DropdownMenuSeparator, integrate the Plus icon from lucide-react, and ensure proper routing using the correct organizationId.

I’ll match the existing className conventions and verify lint/build passes before submission.

Estimated delivery: 1 day.

Happy to take this on.

[System625]

Hi there! I'd love to take on issue: Feature: Add "New Hackathon" Option to Hackathon Switcher.

I'm a frontend developer experienced with React, Next.js, TypeScript, Tailwind CSS, shadcn/ui components (including DropdownMenu), lucide-react icons, and Framer Motion animations. I've implemented similar UX improvements in dashboard switchers, sidebar navigators, and multi-entity selectors with conditional separators, icons, and clean navigation flows.

My approach:

• Modify HackathonSelector.tsx to import Plus from 'lucide-react'.
• Choose Option A (preferred): Update parent HackathonSidebar.tsx to pass organizationId as a prop to HackathonSelector for explicit, traceable data flow (avoids URL parsing edge cases).
• In DropdownMenuContent, after mapping existing hackathons, conditionally render when hackathons.length > 0:
  • <DropdownMenuSeparator /> (match existing bg-[#2B2B2B] or default if styled globally).
  • <DropdownMenuItem> with onClick={() => router.push(/organizations/${organizationId}/hackathons/new)}, className matching existing items (e.g., "flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 hover:bg-[#252525] focus:bg-[#252525] text-primary").
  • Inside item: <Plus className="h-4 w-4" /> New Hackathon.
• Ensure item only appears with ≥1 hackathon; component already nulls on empty list.
• Maintain full accessibility (aria roles via shadcn), no performance impact, consistent styling.

This adds a frictionless creation shortcut while preserving existing behavior, fully meeting all requirements.

PR will include prop updates in parent/child, icon import, conditional separator + item, styled code, and screenshots/video (dropdown open with/without item, separator visible, click navigation to /new with correct org ID, empty state hidden).

ETA: within 24 hours.

Looking forward to your feedback!

Best,
Olamiposi (System625)