From c0c5ac680cfbf16789d7d65dd2c6a5ab37165ff1 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 9 May 2025 18:49:34 +0530
Subject: [PATCH] Enhance FileMenu component: load project name from
 localStorage and allow renaming, update sidebar styles with border-radius and
 background color adjustments.

---
 app/src/components/ui/FileMenu.tsx | 18 +++++++++++++++++-
 app/src/styles/layout/sidebar.scss |  4 +++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/src/components/ui/FileMenu.tsx b/app/src/components/ui/FileMenu.tsx
index da85e54..9997ee4 100644
--- a/app/src/components/ui/FileMenu.tsx
+++ b/app/src/components/ui/FileMenu.tsx
@@ -31,6 +31,22 @@ const FileMenu: React.FC = () => {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
+  // project
+  const [projectName, setProjectName] = useState("project 1");
+
+  // Load project name from localStorage on mount
+  useEffect(() => {
+    const savedName = localStorage.getItem("projectName");
+    if (savedName) {
+      setProjectName(savedName);
+    }
+  }, []);
+
+  const handleProjectRename = (newName: string) => {
+    setProjectName(newName);
+    localStorage.setItem("projectName", newName);
+  };
+
   return (
     <button
       className="project-dropdowm-container"
@@ -41,7 +57,7 @@ const FileMenu: React.FC = () => {
         <div className="icon">
           <ProjectIcon />
         </div>
-        <RenameInput value="untitled" />
+        <RenameInput value={projectName} onRename={handleProjectRename} />
       </div>
       <div className="more-options-button">
         <ArrowIcon />
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index c9ec2d9..344f2cd 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -460,6 +460,8 @@
         color: #666;
         padding: 16px;
         grid-column: 1 / -1;
+        border-radius: #{$border-radius-large};
+        background: var(--background-color);
 
         .products-list {
           padding-top: 1rem;
@@ -779,7 +781,7 @@
   .event-proprties-wrapper {
     position: relative;
     max-height: calc(60vh - (47px - 35px));
-    width: calc(100% - 4px);
+    width: 304px;
     overflow-x: hidden;
 
     .header {