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>

28
src/App.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { motion } from "framer-motion";
function App() {
return (
<div className="flex min-h-screen flex-col items-center justify-center p-8">
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.3 }}
className="text-center"
>
<h1 className="mb-4 text-4xl font-bold tracking-tight">
Mission Control
</h1>
<p className="mb-8 text-xl text-zinc-400">
What should you be doing right now?
</p>
<div className="rounded-xl border border-zinc-700 bg-surface-raised p-8">
<p className="text-lg text-zinc-300">
THE ONE THING will appear here
</p>
</div>
</motion.div>
</div>
);
}
export default App;

10
src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);

27
src/styles.css Normal file
View File

@@ -0,0 +1,27 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom scrollbar for dark mode */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #3f3f46;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #52525b;
}
/* Prevent text selection on draggable items */
.no-select {
user-select: none;
}