From 6265983cfd980651b4f4479020c9bfc94e1c1169 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 20 Sep 2024 15:13:30 -0400
Subject: [PATCH 1/5] Clean up

---
 app/src/lib/editor/engine/canvas/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/src/lib/editor/engine/canvas/index.ts b/app/src/lib/editor/engine/canvas/index.ts
index da9a948f9..89078086a 100644
--- a/app/src/lib/editor/engine/canvas/index.ts
+++ b/app/src/lib/editor/engine/canvas/index.ts
@@ -18,7 +18,10 @@ export class CanvasManager {
 
     constructor(private projects: ProjectsManager) {
         makeAutoObservable(this);
+        this.listenToProjectChange();
+    }
 
+    listenToProjectChange() {
         reaction(
             () => this.projects.project,
             (project) => {

From 4c1f5fd70c53aa54c9214d39f952d3fdd6edc52f Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 20 Sep 2024 16:07:10 -0400
Subject: [PATCH 2/5] Add wheel to carousel

---
 .../projects/ProjectsTab/Select/Carousel.tsx   | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx b/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
index 68dc7099e..83bd494b5 100644
--- a/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
+++ b/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
@@ -61,6 +61,22 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
         };
     }, [scrollPrev, scrollNext]);
 
+    const handleWheel = useCallback(
+        (e: React.WheelEvent) => {
+            e.preventDefault();
+            const threshold = 50; // Adjust this value to change the sensitivity
+
+            if (Math.abs(e.deltaY) > threshold) {
+                if (e.deltaY > 0) {
+                    scrollNext();
+                } else {
+                    scrollPrev();
+                }
+            }
+        },
+        [scrollNext, scrollPrev],
+    );
+
     return (
         <div
             className="embla relative h-[calc(100vh-5.5rem)] overflow-hidden"
@@ -74,7 +90,7 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
                     zIndex: -1,
                 }}
             >
-                <div className="embla__container h-full">
+                <div className="embla__container h-full" onWheel={handleWheel}>
                     {slides.map((slide, index) => (
                         <div
                             key={slide.id}

From 7e55c25729a05249ea5f428ff2e4029b5486e018 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 20 Sep 2024 16:12:31 -0400
Subject: [PATCH 3/5] Button transition

---
 app/src/routes/projects/ProjectsTab/Select/Carousel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx b/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
index 83bd494b5..de6f33aea 100644
--- a/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
+++ b/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
@@ -121,7 +121,7 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
                     disabled={!prevBtnEnabled}
                 >
                     <ChevronUpIcon
-                        className={`w-7 h-7 ${prevBtnEnabled ? 'text-white' : 'text-gray-400'}`}
+                        className={`w-7 h-7 transition duration-300 ease-in-out ${prevBtnEnabled ? 'text-white' : 'text-gray-400'}`}
                     />
                 </button>
                 <div className="flex flex-row space-x-1 text-white items-center">
@@ -135,7 +135,7 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
                     disabled={!nextBtnEnabled}
                 >
                     <ChevronDownIcon
-                        className={`w-7 h-7 ${nextBtnEnabled ? 'text-white' : 'text-gray-400'}`}
+                        className={`w-7 h-7 transition duration-300 ease-in-out ${nextBtnEnabled ? 'text-white' : 'text-gray-400'}`}
                     />
                 </button>
             </div>

From 15720517d9baa55b80127a69374165e7527d2e74 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 20 Sep 2024 16:21:37 -0400
Subject: [PATCH 4/5] Create folder from project name

---
 .../ProjectsTab/Create/New/SelectFolder.tsx   | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx b/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx
index a26cf0768..c1ee0e569 100644
--- a/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx
+++ b/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx
@@ -24,17 +24,35 @@ export const NewSelectFolder = ({
         if (path == null) {
             return;
         }
+
+        const pathWithProject = `${path}/${nameToFolderName(projectData.name || 'new-project')}`;
+        setProjectData({
+            ...projectData,
+            folderPath: pathWithProject,
+        });
+    }
+
+    function nameToFolderName(name: string): string {
+        return name
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric characters with hyphens
+            .replace(/^-+|-+$/g, '') // Remove leading and trailing hyphens
+            .replace(/^(\d)/, '_$1'); // Prepend underscore if the name starts with a digit
+    }
+
+    function goBack() {
         setProjectData({
             ...projectData,
-            folderPath: path,
+            folderPath: undefined,
         });
+        prevStep();
     }
 
     return (
         <Card className="w-[30rem]">
             <CardHeader>
                 <CardTitle>{'Select your project folder'}</CardTitle>
-                <CardDescription>{'This is where we’ll reference your App'}</CardDescription>
+                <CardDescription>{"We'll a folder with your new app here"}</CardDescription>
             </CardHeader>
             <CardContent className="h-24 flex items-center w-full">
                 {projectData.folderPath ? (
@@ -70,7 +88,7 @@ export const NewSelectFolder = ({
             <CardFooter className="text-sm">
                 <p>{`${currentStep + 1} of ${totalSteps}`}</p>
                 <div className="flex ml-auto gap-2">
-                    <Button type="button" onClick={prevStep} variant="ghost">
+                    <Button type="button" onClick={goBack} variant="ghost">
                         Rename folder
                     </Button>
                     <Button

From eab0837ce18fe6e3ed279e24ccc9e8c53e0e169f Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 20 Sep 2024 16:23:25 -0400
Subject: [PATCH 5/5] Clean up

---
 app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx b/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx
index c1ee0e569..626cc621a 100644
--- a/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx
+++ b/app/src/routes/projects/ProjectsTab/Create/New/SelectFolder.tsx
@@ -52,7 +52,7 @@ export const NewSelectFolder = ({
         <Card className="w-[30rem]">
             <CardHeader>
                 <CardTitle>{'Select your project folder'}</CardTitle>
-                <CardDescription>{"We'll a folder with your new app here"}</CardDescription>
+                <CardDescription>{"We'll create a folder with your new app here"}</CardDescription>
             </CardHeader>
             <CardContent className="h-24 flex items-center w-full">
                 {projectData.folderPath ? (