chore: moving to API routes

Author: jherr

packages/cta-engine/src/index.ts

@@ -47,6 +47,7 @@ export type {
   FrameworkDefinition,
   Mode,
   Options,
+  SerializedOptions,
   StarterCompiled,
 } from './types.js'
 export type { PersistedOptions } from './config-file.js'

packages/cta-engine/src/types.ts

@@ -130,6 +130,15 @@ export interface Options {
   starter?: Starter | undefined
 }
 
+export type SerializedOptions = Omit<
+  Options,
+  'chosenAddOns' | 'starter' | 'framework'
+> & {
+  chosenAddOns: Array<string>
+  starter?: string | undefined
+  framework?: string | undefined
+}
+
 type ProjectEnvironment = {
   startRun: () => void
   finishRun: () => void

packages/cta-ui/package.json

@@ -16,6 +16,9 @@
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.10",
+    "@radix-ui/react-dropdown-menu": "^2.1.11",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-popover": "^1.1.10",
     "@radix-ui/react-separator": "^1.1.4",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.3",

packages/cta-ui/src/components/applied-add-on.tsx

@@ -1,11 +1,49 @@
 import { useState } from 'react'
 import { useStore } from '@tanstack/react-store'
+import { FilterIcon } from 'lucide-react'
 
 import FileViewer from './file-viewer'
 import FileTree from './file-tree'
 
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+
 import { projectFiles, projectLocalFiles } from '@/store/project'
 
+export function DropdownMenuDemo() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">
+          <FilterIcon />
+          Filter
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 backdrop-blur-lg bg-opacity-50">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">File Filters</h4>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="flex flex-row items-center gap-2">
+              <Checkbox id="width" checked={true} className="w-6 h-6" />
+              <Label htmlFor="width" className="text-lg">
+                All Files
+              </Label>
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
 export default function FileNavigator() {
   const [selectedFile, setSelectedFile] = useState<string | null>(null)
   const [originalFileContents, setOriginalFileContents] = useState<string>()
@@ -16,27 +54,30 @@ export default function FileNavigator() {
 
   return (
     <div className="flex flex-row w-[calc(100vw-450px)]">
-      <FileTree
-        prefix="./"
-        tree={output.files}
-        originalTree={originalOutput.files}
-        localTree={localFiles}
-        onFileSelected={(file) => {
-          setSelectedFile(file)
-          if (localFiles[file]) {
-            if (!output.files[file]) {
-              setOriginalFileContents(undefined)
-              setModifiedFileContents(localFiles[file])
+      <div className="w-1/4 max-w-1/4 pr-2">
+        <DropdownMenuDemo />
+        <FileTree
+          prefix="./"
+          tree={output.files}
+          originalTree={originalOutput.files}
+          localTree={localFiles}
+          onFileSelected={(file) => {
+            setSelectedFile(file)
+            if (localFiles[file]) {
+              if (!output.files[file]) {
+                setOriginalFileContents(undefined)
+                setModifiedFileContents(localFiles[file])
+              } else {
+                setOriginalFileContents(localFiles[file])
+                setModifiedFileContents(output.files[file])
+              }
             } else {
-              setOriginalFileContents(localFiles[file])
+              setOriginalFileContents(originalOutput.files[file])
               setModifiedFileContents(output.files[file])
             }
-          } else {
-            setOriginalFileContents(originalOutput.files[file])
-            setModifiedFileContents(output.files[file])
-          }
-        }}
-      />
+          }}
+        />
+      </div>
       <div className="max-w-3/4 w-3/4 pl-2">
         {selectedFile && modifiedFileContents ? (
           <FileViewer

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

@@ -108,7 +108,6 @@ export default function FileTree({
       data={computedTree}
       defaultNodeIcon={() => <Folder className="w-4 h-4 mr-2" />}
       defaultLeafIcon={() => <FileText className="w-4 h-4 mr-2" />}
-      className="max-w-1/4 w-1/4 pr-2"
     />
   )
 }

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

@@ -1,14 +1,17 @@
+import { useStore } from '@tanstack/react-store'
+
 import { Button } from '@/components/ui/button'
-import { closeApp } from '@/lib/add-to-app-server-fn'
 import { selectedAddOns } from '@/store/project'
 
 export default function RunAddOns() {
+  const currentlySelectedAddOns = useStore(selectedAddOns)
+
   return (
     <div>
       <Button
-        variant="outline"
+        variant="default"
         onClick={async () => {
-          await fetch('/api/add-add-ons', {
+          await fetch('/api/add-to-app', {
             method: 'POST',
             body: JSON.stringify({
               addOns: selectedAddOns.state.map((addOn) => addOn.id),
@@ -20,6 +23,8 @@ export default function RunAddOns() {
           // await closeApp()
           // window.close()
         }}
+        disabled={currentlySelectedAddOns.length === 0}
+        className="w-full"
       >
         Run Add-Ons
       </Button>