From 7877ff9218afde378d1e93a24632789ad721024b Mon Sep 17 00:00:00 2001 From: teernisse Date: Wed, 25 Feb 2026 17:01:05 -0500 Subject: [PATCH] feat: add React application shell with dark mode UI 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. --- index.html | 13 +++++++++++++ src/App.tsx | 28 ++++++++++++++++++++++++++++ src/main.tsx | 10 ++++++++++ src/styles.css | 27 +++++++++++++++++++++++++++ 4 files changed, 78 insertions(+) create mode 100644 index.html create mode 100644 src/App.tsx create mode 100644 src/main.tsx create mode 100644 src/styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..546ea13 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Mission Control + + +
+ + + diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..6b0fe5f --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,28 @@ +import { motion } from "framer-motion"; + +function App() { + return ( +
+ +

+ Mission Control +

+

+ What should you be doing right now? +

+
+

+ THE ONE THING will appear here +

+
+ +
+ ); +} + +export default App; diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..16958a2 --- /dev/null +++ b/src/main.tsx @@ -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( + + + +); diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..0755eae --- /dev/null +++ b/src/styles.css @@ -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; +}