theirongolddev/mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add React application shell with dark mode UI

Browse Source 
Create the minimal React application structure for Mission Control:

Entry Points:
- index.html: Dark mode root (class="dark", bg-surface body)
- src/main.tsx: React 19 createRoot with StrictMode

Application Shell:
- src/App.tsx: Initial landing with "THE ONE THING" placeholder
  - Uses Framer Motion for subtle fade-in animation
  - Centered layout with Mission Control branding
  - Surfaces the core UX principle: "What should you be doing right now?"

Styling:
- src/styles.css: Tailwind directives + custom scrollbar styling
  - Dark scrollbars (zinc-700 thumb, transparent track)
  - .no-select utility for draggable elements

The shell is deliberately minimal - it will evolve as beads integration
(bd-28q) and dashboard components (bd-30f) are implemented.
This commit is contained in:
teernisse
2026-02-25 17:01:05 -05:00
parent 9cfd471d24
commit 7877ff9218
4 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mission Control</title>
</head>
<body class="bg-surface text-zinc-100 antialiased">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>