🤖 refactor: Convert App.tsx to Tailwind CSS

- Remove @emotion/styled dependency from App.tsx
- Replace 4 styled components with Tailwind utility classes
- AppContainer → flex h-screen overflow-hidden bg-[#1e1e1e]
- MainContent → flex-1 flex flex-col overflow-hidden min-w-0
- ContentArea → flex-1 flex overflow-hidden
- WelcomeView → text-center max-w-[800px] mx-auto with clamp() in style
- Use [@media(max-width:768px)]: arbitrary variants for responsive design
- Preserve all clamp() dynamic values in inline styles (font-size, padding)
- Maintain all layout behavior and responsiveness
- Code reduction: 810 → 750 lines (7% reduction)

All type checks passing, maintains feature parity

Author: kylecarbs

src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import styled from "@emotion/styled";
+import { cn } from "@/lib/utils";
 import "./styles/globals.css";
 import type { ProjectConfig } from "./config";
 import type { WorkspaceSelection } from "./components/ProjectSidebar";
@@ -34,66 +34,6 @@ import { useTelemetry } from "./hooks/useTelemetry";
 
 const THINKING_LEVELS: ThinkingLevel[] = ["off", "low", "medium", "high"];
 
-
-// Styled Components
-const AppContainer = styled.div`
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-  background: #1e1e1e;
-
-  /* Mobile: Ensure content takes full width */
-  @media (max-width: 768px) {
-    flex-direction: column;
-  }
-`;
-
-const MainContent = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-width: 0; /* Allow content to shrink below its minimum content size */
-
-  /* Mobile: Take full width */
-  @media (max-width: 768px) {
-    width: 100%;
-  }
-`;
-
-const ContentArea = styled.div`
-  flex: 1;
-  display: flex;
-  overflow: hidden;
-
-  /* Mobile: Stack content vertically if needed */
-  @media (max-width: 768px) {
-    flex-direction: column;
-  }
-`;
-
-const WelcomeView = styled.div`
-  text-align: center;
-  padding: clamp(40px, 10vh, 100px) 20px;
-  max-width: 800px;
-  margin: 0 auto;
-  width: 100%;
-
-  h2 {
-    color: #fff;
-    font-size: clamp(24px, 5vw, 36px);
-    margin-bottom: 16px;
-    font-weight: 700;
-    letter-spacing: -1px;
-  }
-
-  p {
-    color: #888;
-    font-size: clamp(14px, 2vw, 16px);
-    line-height: 1.6;
-  }
-`;
-
 function AppInner() {
   const [selectedWorkspace, setSelectedWorkspace] = usePersistedState<WorkspaceSelection | null>(
     "selectedWorkspace",
@@ -723,7 +663,7 @@ function AppInner() {
 
   return (
     <>
-      <AppContainer>
+      <div className="flex h-screen overflow-hidden bg-[#1e1e1e] [@media(max-width:768px)]:flex-col">
         <LeftSidebar
           projects={projects}
           workspaceMetadata={workspaceMetadata}
@@ -743,8 +683,8 @@ function AppInner() {
           sortedWorkspacesByProject={sortedWorkspacesByProject}
           workspaceRecency={workspaceRecency}
         />
-        <MainContent>
-          <ContentArea>
+        <div className="flex-1 flex flex-col overflow-hidden min-w-0 [@media(max-width:768px)]:w-full">
+          <div className="flex-1 flex overflow-hidden [@media(max-width:768px)]:flex-col">
             {selectedWorkspace ? (
               <ErrorBoundary
                 workspaceInfo={`${selectedWorkspace.projectName}/${selectedWorkspace.namedWorkspacePath?.split("/").pop() ?? selectedWorkspace.workspaceId}`}
@@ -761,13 +701,13 @@ function AppInner() {
                 />
               </ErrorBoundary>
             ) : (
-              <WelcomeView>
-                <h2>Welcome to Cmux</h2>
+              <div className="text-center max-w-[800px] mx-auto w-full [&_h2]:text-white [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:text-[#888] [&_p]:leading-[1.6]" style={{ padding: "clamp(40px, 10vh, 100px) 20px", fontSize: "clamp(14px, 2vw, 16px)" }}>
+                <h2 style={{ fontSize: "clamp(24px, 5vw, 36px)", letterSpacing: "-1px" }}>Welcome to Cmux</h2>
                 <p>Select a workspace from the sidebar or add a new one to get started.</p>
-              </WelcomeView>
+              </div>
             )}
-          </ContentArea>
-        </MainContent>
+          </div>
+        </div>
         <CommandPalette
           getSlashContext={() => ({
             providerNames: [],
@@ -794,7 +734,7 @@ function AppInner() {
           />
         )}
         <DirectorySelectModal />
-      </AppContainer>
+      </div>
     </>
   );
 }