UX change, shifted to left section

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, ChangeEvent } from "react";
 import ImageUpload from "./components/ImageUpload";
 import CodePreview from "./components/CodePreview";
 import Preview from "./components/Preview";
@@ -14,7 +14,9 @@ import {
 } from "react-icons/fa";
 
 import { Switch } from "./components/ui/switch";
+// import { Label } from "./components/ui/label";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 import SettingsDialog from "./components/SettingsDialog";
@@ -49,6 +51,8 @@ function App() {
   const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
   const [generatedCode, setGeneratedCode] = useState<string>("");
 
+  const [enableCustomTailwindConfig, setEnableCustomTailwindConfig] = useState<boolean>(false);
+
   const [inputMode, setInputMode] = useState<"image" | "video">("image");
 
   const [referenceImages, setReferenceImages] = useState<string[]>([]);
@@ -394,6 +398,44 @@ function App() {
     setAppState(AppState.CODE_READY);
   }
 
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const file: File = (target.files as FileList)[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const content = e!.target!.result;
+        if (typeof content === 'string') {
+          setSettings((s: Settings) => ({
+            ...s,
+            tailwindConfig: content,
+          }));
+        } else {
+          toast.error('Please select a valid Tailwind config file');
+        }
+      };
+      reader.readAsText(file);
+    }
+  };
+
+  const handleRemoveFile = () => {
+    try {
+      const input = document.getElementById('config-file') as HTMLInputElement;
+      const dt = new DataTransfer();
+      if(input == null) {
+        return;
+      }
+      input.files = dt.files
+      setSettings((s: Settings) => ({
+        ...s,
+        tailwindConfig: null,
+      }));
+    } catch (err) {
+      toast.error('Please select a valid Tailwind config file');
+    }
+  };
+
+
   return (
     <div className="mt-2 dark:bg-black dark:text-white">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
@@ -426,6 +468,29 @@ function App() {
             }
           />
 
+          <div className="flex flex-row items-center justify-between w-full gap-4 my-2 text-sm m-y-2">
+            <span>Enable custom Tailwind configuration:</span>
+            <Switch
+              id="image-generation"
+              checked={enableCustomTailwindConfig}
+              onCheckedChange={() =>
+                setEnableCustomTailwindConfig(!enableCustomTailwindConfig)
+              }
+            />
+          </div>
+
+          {enableCustomTailwindConfig && (<div className="flex flex-row gap-2">
+            <Input
+              id="config-file"
+              type="file"
+              accept=".js,.ts"
+              onChange={handleFileChange}
+            />
+            <Button onClick={handleRemoveFile}>
+              Remove
+            </Button>
+          </div>)}
+
           {showReactWarning && (
             <div className="p-2 text-sm bg-yellow-200 rounded">
               Sorry - React is not currently working with GPT-4 Turbo. Please

frontend/src/components/SettingsDialog.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from "react";
+import React from "react";
 import {
   Dialog,
   DialogClose,
@@ -36,24 +36,6 @@ function SettingsDialog({ settings, setSettings }: Props) {
     }));
   };
 
-  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const target= event.target as HTMLInputElement;
-    const file: File = (target.files as FileList)[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const content = e!.target!.result;
-        // Here you can set the file content to the settings
-        console.log(content);
-        setSettings((s: any) => ({
-          ...s,
-          tailwindConfig: content,
-        }));
-      };
-      reader.readAsText(file);
-    }
-  };
-
   return (
     <Dialog>
       <DialogTrigger>
@@ -236,27 +218,6 @@ function SettingsDialog({ settings, setSettings }: Props) {
               </AccordionContent>
             </AccordionItem>
           </Accordion>
-
-          <Accordion type="single" collapsible className="w-full">
-            <AccordionItem value="item-1">
-              <AccordionTrigger>Tailwind Configuration</AccordionTrigger>
-              <AccordionContent className="flex flex-col space-y-4">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="app-theme">
-                    <div>Upload config file</div>
-                  </Label>
-                  <div>
-                    <Input
-                      id="config-file"
-                      type="file"
-                      accept=".js,.ts"
-                      onChange={handleFileChange}
-                    />
-                  </div>
-                </div>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
         </div>
 
         <DialogFooter>