Small add-to-app fixes

Author: jherr

packages/cta-engine/src/add-to-app.ts

@@ -138,10 +138,7 @@ export async function writeFiles(
       )
     } else if (fName !== CONFIG_FILE) {
       if (isBase64(contents)) {
-        await environment.writeFile(
-          resolve(cwd, file),
-          getBinaryFile(contents)!,
-        )
+        await environment.writeFileBase64(resolve(cwd, file), contents)
       } else {
         await environment.writeFile(resolve(cwd, file), contents)
       }

packages/cta-ui/package.json

@@ -39,7 +39,7 @@
     "@tanstack/react-store": "^0.7.0",
     "@tanstack/router-plugin": "^1.114.3",
     "@tanstack/store": "^0.7.0",
-    "@uiw/codemirror-theme-okaidia": "^4.23.10",
+    "@uiw/codemirror-theme-github": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

packages/cta-ui/src/components/cta-sidebar.tsx

@@ -47,7 +47,7 @@ export function AppSidebar() {
           </>
         )}
       </SidebarContent>
-      <SidebarFooter>
+      <SidebarFooter className="mb-5">
         <RunAddOns />
         <RunCreateApp />
       </SidebarFooter>

packages/cta-ui/src/components/file-navigator.tsx

@@ -10,12 +10,14 @@ import type { FileTreeItem } from '@/types'
 import { Label } from '@/components/ui/label'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Separator } from '@/components/ui/separator'
+import { useSidebar } from '@/components/ui/sidebar'
+
 import {
   applicationMode,
   includeFiles,
+  isInitialized,
   projectFiles,
   projectLocalFiles,
-  isInitialized,
 } from '@/store/project'
 
 import { getFileClass, twClasses } from '@/file-classes'
@@ -35,8 +37,8 @@ export function Filters() {
   }
 
   return (
-    <>
-      <div className="text-center text-sm border-b-1 mb-4">File Filters</div>
+    <div className="p-2 rounded-md bg-gray-900 file-filters">
+      <div className="text-center text-sm mb-2">File Filters</div>
       <div className="flex flex-row flex-wrap gap-y-2">
         <div className="flex flex-row items-center gap-2 w-1/3">
           <Checkbox
@@ -94,8 +96,7 @@ export function Filters() {
           </Label>
         </div>
       </div>
-      <Separator className="my-4" />
-    </>
+    </div>
   )
 }
 
@@ -192,7 +193,9 @@ export default function FileNavigator() {
   }
 
   return (
-    <div className="flex flex-row w-[calc(100vw-450px)]">
+    <div
+      className={`flex flex-row border-1 rounded-md mr-10 p-2 inset-shadow-gray-600 inset-shadow-sm`}
+    >
       <div className="w-1/4 max-w-1/4 pr-2">
         {mode === 'add' && <Filters />}
         <FileTree selectedFile={selectedFile} tree={fileTree} />

packages/cta-ui/src/components/file-viewer.tsx

@@ -6,7 +6,15 @@ import { json } from '@codemirror/lang-json'
 import { css } from '@codemirror/lang-css'
 import { html } from '@codemirror/lang-html'
 
-import { okaidia } from '@uiw/codemirror-theme-okaidia'
+import { githubDarkInit } from '@uiw/codemirror-theme-github'
+
+const theme = githubDarkInit({
+  settings: {
+    background: 'oklch(0.07 0.005 285.823)',
+    foreground: '#c9d1d9',
+    gutterBackground: 'oklch(0.22 0.005 285.823)',
+  },
+})
 
 export default function FileViewer({
   originalFile,
@@ -41,7 +49,7 @@ export default function FileViewer({
     return (
       <CodeMirror
         value={modifiedFile}
-        theme={okaidia}
+        theme={theme}
         height="100vh"
         width="100%"
         readOnly
@@ -51,7 +59,7 @@ export default function FileViewer({
     )
   }
   return (
-    <CodeMirrorMerge orientation="a-b" theme={okaidia} className="text-lg">
+    <CodeMirrorMerge orientation="a-b" theme={theme} className="text-lg">
       <CodeMirrorMerge.Original value={originalFile} extensions={[language]} />
       <CodeMirrorMerge.Modified value={modifiedFile} extensions={[language]} />
     </CodeMirrorMerge>

packages/cta-ui/src/routes/__root.tsx

@@ -9,7 +9,11 @@ import appCss from '../styles.css?url'
 
 import type { QueryClient } from '@tanstack/react-query'
 
-import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+import {
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from '@/components/ui/sidebar'
 import { Toaster } from '@/components/toaster'
 
 import { AppSidebar } from '@/components/cta-sidebar'
@@ -18,6 +22,20 @@ interface MyRouterContext {
   queryClient: QueryClient
 }
 
+function Content() {
+  const { open } = useSidebar()
+
+  return (
+    <main
+      className={
+        open ? 'w-full max-w-[calc(100%-370px)]' : 'w-full max-w-[100%]'
+      }
+    >
+      <SidebarTrigger className="m-2" />
+      <Outlet />
+    </main>
+  )
+}
 export const Route = createRootRouteWithContext<MyRouterContext>()({
   head: () => ({
     meta: [
@@ -40,18 +58,17 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
     ],
   }),
 
-  component: () => (
-    <RootDocument>
-      <SidebarProvider>
-        <AppSidebar />
-        <main className="w-[calc(100vw-200px)]">
-          <SidebarTrigger />
-          <Outlet />
+  component: () => {
+    return (
+      <RootDocument>
+        <SidebarProvider>
+          <AppSidebar />
+          <Content />
           <Toaster />
-        </main>
-      </SidebarProvider>
-    </RootDocument>
-  ),
+        </SidebarProvider>
+      </RootDocument>
+    )
+  },
 })
 
 function RootDocument({ children }: { children: React.ReactNode }) {

packages/cta-ui/src/routes/api/dry-run-add-to-app.ts

@@ -5,14 +5,15 @@ import { createAPIFileRoute } from '@tanstack/react-start/api'
 
 import {
   addToApp,
-  cleanUpFiles,
   createMemoryEnvironment,
   recursivelyGatherFiles,
 } from '@tanstack/cta-engine'
 
 import { register as registerReactCra } from '@tanstack/cta-framework-react-cra'
 import { register as registerSolid } from '@tanstack/cta-framework-solid'
 
+import { cleanUpFileArray, cleanUpFiles } from '@/lib/file-helpers'
+
 registerReactCra()
 registerSolid()
 
@@ -37,7 +38,6 @@ export const APIRoute = createAPIFileRoute('/api/dry-run-add-to-app')({
       await recursivelyGatherFiles(projectPath, false),
     )
     for (const file of Object.keys(localFiles)) {
-      console.log('writing local file', file)
       environment.writeFile(resolve(projectPath, file), localFiles[file])
     }
 
@@ -57,6 +57,9 @@ export const APIRoute = createAPIFileRoute('/api/dry-run-add-to-app')({
 
     environment.finishRun()
 
+    output.files = cleanUpFiles(output.files, projectPath)
+    output.deletedFiles = cleanUpFileArray(output.deletedFiles, projectPath)
+
     return json(output)
   },
 })

packages/cta-ui/src/styles.css

@@ -175,3 +175,11 @@ code {
 [data-sidebar='header'] {
   @apply shadow-gray-700 shadow-md z-50;
 }
+
+.cm-changedLine {
+  background-color: oklch(0.27 0.005 285.823) !important;
+}
+
+.file-filters {
+  background-color: oklch(0.2 0.005 285.823);
+}