refactor(frontend): execute The Great Purge and formalize shared UI monorepo workspace

Deleted Tailwind v3 proxy configs, scrubbed Color Story variables, purged old React views, built @quanux/shared-ui package.json, and documented the Monorepo Horizon transition for future UI ingestion.

Author: quantDIY

client/react/desktop/tauri-app/src/App.tsx

@@ -1,104 +1,11 @@
-import React, { useState } from 'react';
-import { LaunchAnimation } from './components/LaunchAnimation';
-import { ConnectServer } from './components/ConnectServer';
-import { Sidebar } from './components/Sidebar';
-import { StrategyBuilder } from './pages/StrategyBuilder';
-import { Integrations } from './pages/Integrations';
-import { Backtests } from './pages/Backtests';
-import { Settings } from './pages/Settings';
+import React from 'react';
 
 export const App = () => {
-    const [stage, setStage] = useState<'launch' | 'connect' | 'dashboard'>('launch');
-    const [currentView, setCurrentView] = useState(() => {
-        const path = window.location.pathname;
-        if (path.includes('strategy')) return 'strategy';
-        if (path.includes('integrations')) return 'integrations';
-        if (path.includes('backtests')) return 'backtests';
-        return 'dashboard';
-    });
-
-    const handleAnimationComplete = () => {
-        setStage('connect');
-    };
-
-    const handleConnect = () => {
-        setStage('dashboard');
-    };
-
-    if (stage === 'launch') {
-        return <LaunchAnimation onComplete={handleAnimationComplete} />;
-    }
-
-    if (stage === 'connect') {
-        return <ConnectServer onConnect={handleConnect} />;
-    }
-
-    const renderContent = () => {
-        switch (currentView) {
-            case 'strategy':
-                return <StrategyBuilder />;
-            case 'integrations':
-                return <Integrations />;
-            case 'backtests':
-                return <Backtests />;
-            case 'settings':
-                return <Settings />;
-            case 'dashboard':
-            default:
-                return (
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        {/* Placeholder cards */}
-                        <div className="p-6 rounded-xl bg-card border border-border/50 hover:border-primary/50 transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,0,255,0.1)] group cursor-pointer">
-                            <h3 className="text-xl font-bold mb-2 group-hover:text-primary transition-colors">Market Data</h3>
-                            <p className="text-muted-foreground tezt-sm">Live stream active. Latency: 12ms.</p>
-                            <div className="mt-4 h-32 bg-background/50 rounded-lg flex items-center justify-center border border-dashed border-muted">
-                                <span className="text-xs text-muted-foreground">CHART PLACEHOLDER</span>
-                            </div>
-                        </div>
-
-                        <div className="p-6 rounded-xl bg-card border border-border/50 hover:border-secondary/50 transition-all duration-300 hover:shadow-[0_0_30px_rgba(0,255,255,0.1)] group cursor-pointer">
-                            <h3 className="text-xl font-bold mb-2 group-hover:text-secondary transition-colors">Strategies</h3>
-                            <p className="text-muted-foreground text-sm">3 Active strategies. PnL +2.4%</p>
-                            <div className="mt-4 flex gap-2">
-                                <div className="px-3 py-1 rounded-full bg-secondary/10 text-secondary text-xs border border-secondary/20">Alpha</div>
-                                <div className="px-3 py-1 rounded-full bg-primary/10 text-primary text-xs border border-primary/20">Gamma</div>
-                            </div>
-                        </div>
-
-                        <div className="p-6 rounded-xl bg-card border border-border/50 hover:border-accent/50 transition-all duration-300 hover:shadow-[0_0_30px_rgba(57,255,20,0.1)] group cursor-pointer">
-                            <h3 className="text-xl font-bold mb-2 group-hover:text-accent transition-colors">System Health</h3>
-                            <p className="text-muted-foreground text-sm">All services operational.</p>
-                            <div className="mt-4 space-y-2">
-                                <div className="flex justify-between text-xs"><span>CPU</span><span className="text-accent">12%</span></div>
-                                <div className="w-full h-1 bg-muted rounded-full overflow-hidden"><div className="w-[12%] h-full bg-accent"></div></div>
-                                <div className="flex justify-between text-xs"><span>MEM</span><span className="text-accent">45%</span></div>
-                                <div className="w-full h-1 bg-muted rounded-full overflow-hidden"><div className="w-[45%] h-full bg-accent"></div></div>
-                            </div>
-                        </div>
-                    </div>
-                );
-        }
-    };
-
-    // Dashboard / Logged In State
     return (
-        <div className="flex h-screen bg-background text-foreground overflow-hidden fade-in">
-            <Sidebar currentView={currentView} onNavigate={setCurrentView} />
-
-            <div className="flex-1 flex flex-col min-w-0 overflow-auto">
-                <header className="flex justify-between items-center p-8 pb-4">
-                    <h1 className="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary drop-shadow-[0_0_15px_rgba(255,0,255,0.3)]">
-                        QuanuX
-                    </h1>
-                    <div className="flex items-center gap-4">
-                        <div className="w-3 h-3 rounded-full bg-green-500 shadow-[0_0_10px_#00ff00] animate-pulse"></div>
-                        <span className="text-sm font-mono text-muted-foreground">SYSTEM ONLINE</span>
-                    </div>
-                </header>
-
-                <main className="flex-1 p-8 pt-0 h-full overflow-hidden">
-                    {renderContent()}
-                </main>
+        <div className="flex h-screen w-screen items-center justify-center bg-background text-foreground font-mono">
+            <div className="text-center space-y-4">
+                <h1 className="text-3xl font-bold tracking-widest uppercase">QuanuX</h1>
+                <p className="text-sm text-muted-foreground">Tauri Desktop Shell initialized. Awaiting UI configuration.</p>
             </div>
         </div>
     );

client/react/desktop/tauri-app/src/styles/tailwind.css

@@ -23,78 +23,10 @@
   --color-ring: hsl(var(--ring));
 }
 
-/* Cyberpunk Theme */
-:root {
-  /* Deep Dark Blue/Black Background */
-  --background: 240 52% 4%;
-  /* Neon White Foreground */
-  --foreground: 240 100% 94%;
-
-  /* Glassmorphism Card */
-  --card: 240 52% 6%;
-  --card-foreground: 240 100% 94%;
-
-  --popover: 240 52% 4%;
-  --popover-foreground: 240 100% 94%;
-
-  /* Neon Pink */
-  --primary: 300 100% 50%;
-  --primary-foreground: 0 0% 100%;
-
-  /* Cyan */
-  --secondary: 180 100% 50%;
-  --secondary-foreground: 240 52% 4%;
-
-  /* Dark Muted */
-  --muted: 240 30% 15%;
-  --muted-foreground: 240 20% 60%;
-
-  /* Neon Green Accent */
-  --accent: 110 100% 54%;
-  --accent-foreground: 240 52% 4%;
-
-  --destructive: 0 100% 50%;
-  --destructive-foreground: 0 0% 100%;
-
-  --border: 240 30% 20%;
-  --input: 240 30% 20%;
-  --ring: 300 100% 50%; /* Pink Ring */
-
-  --radius: 0.5rem;
-}
-
-/* Force dark mode styles if class is present, or just use root */
-.dark {
-  --background: 240 52% 4%;
-  --foreground: 240 100% 94%;
-  --card: 240 52% 6%;
-  --card-foreground: 240 100% 94%;
-  --popover: 240 52% 4%;
-  --popover-foreground: 240 100% 94%;
-  --primary: 300 100% 50%;
-  --primary-foreground: 0 0% 100%;
-  --secondary: 180 100% 50%;
-  --secondary-foreground: 240 52% 4%;
-  --muted: 240 30% 15%;
-  --muted-foreground: 240 20% 60%;
-  --accent: 110 100% 54%;
-  --accent-foreground: 240 52% 4%;
-  --destructive: 0 100% 50%;
-  --destructive-foreground: 0 0% 100%;
-  --border: 240 30% 20%;
-  --input: 240 30% 20%;
-  --ring: 300 100% 50%;
-}
-
 * {
   @apply border-border;
 }
 
 body {
   @apply bg-background text-foreground;
-  /* Cyberpunk Gradient Mesh Background hint */
-  background-image: 
-    radial-gradient(circle at 15% 50%, rgba(255, 0, 255, 0.08), transparent 25%), 
-    radial-gradient(circle at 85% 30%, rgba(0, 255, 255, 0.08), transparent 25%);
-  background-attachment: fixed;
-}
+}

client/react/desktop/tauri-app/vite.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),
       "@/shared": fileURLToPath(new URL("../shared", import.meta.url)),
-      "@quanux/shared": fileURLToPath(new URL("../../shared", import.meta.url)),
+      "@quanux/shared-ui": fileURLToPath(new URL("../../shared", import.meta.url)),
     },
   },
   server: {

client/react/shared/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "@quanux/shared-ui",
+    "version": "0.0.1",
+    "private": true,
+    "description": "QuanuX Shared UI Library - Shadcn Components & Utils",
+    "main": "index.ts",
+    "exports": {
+        "./components/*": "./components/*",
+        "./lib/*": "./lib/*",
+        "./hooks/*": "./hooks/*"
+    },
+    "peerDependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "tailwindcss": "^4.1.18"
+    },
+    "dependencies": {
+        "@radix-ui/react-avatar": "^1.1.11",
+        "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-label": "^2.1.8",
+        "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-progress": "^1.1.8",
+        "@radix-ui/react-radio-group": "^1.3.8",
+        "@radix-ui/react-scroll-area": "^1.2.10",
+        "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-separator": "^1.1.8",
+        "@radix-ui/react-slider": "^1.3.6",
+        "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-switch": "^1.2.6",
+        "@radix-ui/react-tabs": "^1.1.13",
+        "@radix-ui/react-toast": "^1.2.15",
+        "@radix-ui/react-toggle": "^1.1.10",
+        "@radix-ui/react-tooltip": "^1.2.8",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.575.0",
+        "tailwind-merge": "^2.6.1"
+    }
+}

client/react/skills/react-frontend-standards/SKILL.md

@@ -63,3 +63,10 @@ Adhere to these Vercel-derived standards for optimal performance.
 - **Styling**: Tailwind CSS (strict). Do not write custom CSS files unless absolutely necessary for animations not covered by Tailwind config.
 - **Components**: Shadcn UI (Radix based). Reuse existing components from `client/shared` where possible.
 - **Icons**: Lucide React.
+
+## 5. Monorepo Transition & Shared UI
+
+To ensure `Tailwind v4` can properly scan CSS classes across project boundaries, the `client/react/shared` directory has been formalized into an internal `pnpm` workspace package named `@quanux/shared-ui`.
+
+- **Do not** use legacy TS path-aliasing (e.g., `@/shared/components`) to reach into the shared folder.
+- **Always** import shared components via the package name: `import { Button } from "@quanux/shared-ui/components/ui/button"`.