[WIP] Create Habit Tracker page for RPG-style website

[Copilot]

Habit Tracker Page Implementation Plan

• Create main Habits page component with RPG-styled layout
• Create HabitCard component for heatmap grid display
  • Habit name with icon
  • Vertical day labels (S M T W T F S)
  • 7×5 monthly calendar grid with completion dots
  • Done status indicator
• Create QuestCard component for bottom section
  • Quest title
  • Days remaining
  • Win/Lose XP display
  • Status indicator
• Create right sidebar navigation
  • Month, Agenda, Settings, Return Home
  • Awakening (active state)
  • Habits, Habit Goals, Completed, Gates
• Add "+ Create Habit" button next to "Quest Preparations" on Index page
• Create "+ New Habit" button on Habits page
• Create habit creation form/modal
  • Habit Name
  • Icon selection
  • Color selection
  • Win XP
  • Lose XP
  • Duration (days)
• Add route for Habits page in App.tsx
• Implement click-to-toggle completion on heatmap squares
• Test and verify UI matches RPG dark theme styling

Original prompt

Create a Habit Tracker page for an RPG-style productivity website that matches the attached reference screenshot exactly in layout, density, spacing, and visual hierarchy.
This is not inspiration — treat the image as the ground truth UI.
Do not redesign, modernize, simplify, or rearrange anything unless explicitly instructed.

1. GLOBAL UI RULES (CRITICAL)

• Theme: Dark RPG / quest dashboard
• Background: Near-black (#0f0f12–#141418) with soft vignette
• Card background: Dark gray (#1a1a1f)
• Corners: 14–16px rounded
• Shadows: Subtle inner shadow, no hard drop shadows
• Typography: Neutral sans-serif (Inter / Geist-like)
• Animations: NONE (hover glow only)

2. PAGE STRUCTURE (MATCH IMAGE EXACTLY)
   A. TOP SECTION — HABIT HEATMAP GRID

• Layout: 2 × 2 grid
• Card size, spacing, and alignment must match the screenshot
• Each card represents one habit
  Habits shown:

1. Read 1 Page (Purple)
2. Touch Grass (Green)
3. Productivity Learning (Gold)
4. Workout (Brown / Orange)
   Each Habit Card MUST contain:

• Habit name at top with a small icon
• Vertical day labels on the right (S M T W T F S)
• A 7 × 5 monthlycalendar heatmap grid
• Small rounded squares:
  • Filled with dot = completed
  • Empty = not completed
  • Filled squares use habit color with subtle glow
• Bottom-left:
  • “Done” label
  • Green check icon
    No charts. No percentages. No tooltips.

B. RIGHT SIDEBAR (MATCH POSITION & STYLE)
Vertical sidebar on the right side, exactly like reference:

• Month
• Agenda
• Settings
• Return Home
• Awakening (active state)
• Habits
• Habit Goals
• Completed
• Gates
  Active item has a subtle highlight/border.

3. QUEST / GOALS SECTION (BOTTOM)

• Layout: 2 × 2 grid
• Each card corresponds to one habit above
  Each Quest Card includes:
• Quest title (habit name)
• “X Days Remaining”
• XP details:
  • Win XP (purple)
  • Lose XP (red)
• Status text (e.g. “Lost ❌”)
• Compact, dense layout identical to reference

4. NEW FEATURE — CREATE HABIT ENTRY POINTS
   A. BUTTON NEXT TO “QUEST PREPARATION”

• Add a button next to “Quest Preparation”
• Text: “+ Create Habit”
• Style:
  • Same visual weight as Quest Preparation
  • Dark background
  • Subtle glowing border
• On click:
  • Navigate to Habit Page

B. HABIT PAGE — CREATE HABIT OPTION
On the Habit Page itself:

• Add a primary “+ New Habit” button
• Placement:
  • Top-right OR above the habit grid
• Clicking opens a Create Habit panel/modal
  Create Habit Form Fields:
• Habit Name
• Icon (emoji or icon)
• Color (purple / green / gold / orange)
• Win XP
• Lose XP
• Duration (days)
  Actions:
• Create Habit
• Cancel
  After creation:
• Habit appears immediately in:
  • Heatmap grid
  • Quest cards
  • Sidebar if applicable

5. INTERACTION RULES

• Clicking a heatmap square toggles completion
• One completion per habit per day
• UI updates instantly (optimistic update)
• No animations, no page reloads

6. TECH CONSTRAINTS

• Component-based architecture
• Tailwind or scoped CSS
• Reusable HabitCard and QuestCard components
• Desktop-first (responsive later)

7. HARD CONSTRAINTS (DO NOT BREAK)

• Do not change layout
• Do not invent UI elements
• Do not use charts, progress bars, or modern widgets
• Density, spacing, and proportions must match the reference screenshot
• This must feel like Notion × RPG Quest Log

EXPECTED OUTPUT

• Habit Tracker page visually identical to the reference
• “Create Habit” button next to Quest Preparation
• Habit Page with its own “New Habit” creation option
• Fully RPG-styled, dark, dense UI

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
solo-leveling	Ready	Preview, Comment	Jan 25, 2026 7:19pm