Improve git services & project-langing page

src/main/frontend/app/components/directory-picker/directory-picker.tsx

@@ -9,15 +9,13 @@ import Button from '../inputs/button'
 import CloseButton from '../inputs/close-button'
 
 interface DirectoryPickerProperties {
-  isOpen: boolean
   onSelect: (absolutePath: string) => void
   onCancel: () => void
   rootLabel?: string
   initialPath?: string
 }
 
 export default function DirectoryPicker({
-  isOpen,
   onSelect,
   onCancel,
   rootLabel = 'Computer',
@@ -52,16 +50,12 @@ export default function DirectoryPicker({
     }
   }, [])
 
-  useDirectoryWatcher(isOpen ? currentPath : null, () => void loadEntries(currentPath))
+  useDirectoryWatcher(currentPath, () => void loadEntries(currentPath))
 
   useEffect(() => {
-    if (isOpen) {
-      setSelectedEntry(null)
-      loadEntries(initialPath ?? '')
-    }
-  }, [isOpen, loadEntries, initialPath])
-
-  if (!isOpen) return null
+    setSelectedEntry(null)
+    loadEntries(initialPath ?? '')
+  }, [loadEntries, initialPath])
 
   const handleClick = (entry: FilesystemEntry) => {
     setSelectedEntry(entry.path)
@@ -89,8 +83,8 @@ export default function DirectoryPicker({
   const activePath = selectedEntry ?? currentPath
 
   return (
-    <div className="bg-background/50 absolute inset-0 z-[60] flex items-center justify-center">
-      <div className="bg-background border-border flex h-[450px] w-1/3 min-w-[500px] flex-col rounded-lg border shadow-lg">
+    <div className="bg-background/50 absolute inset-0 z-60 flex items-center justify-center">
+      <div className="bg-background border-border flex h-112.5 w-1/3 min-w-125 flex-col rounded-lg border shadow-lg">
         <div className="border-border flex items-center justify-between border-b px-4 py-3">
           <h3 className="text-sm font-semibold">Select Directory</h3>
           <CloseButton onClick={onCancel} />
@@ -135,7 +129,7 @@ export default function DirectoryPicker({
                   selectedEntry === entry.path ? 'bg-backdrop font-medium' : 'hover:bg-backdrop/50'
                 }`}
               >
-                <span className="relative flex-shrink-0 text-xs">
+                <span className="relative shrink-0 text-xs">
                   <FolderIcon className="fill-foreground w-4" />
                   {entry.projectRoot && (
                     <span className="absolute bottom-0.5 h-1.5 w-1.5 rounded-full bg-black" style={{ left: '65%' }} />

src/main/frontend/app/routes/configurations/add-configuration-modal.tsx

@@ -141,13 +141,14 @@ export default function AddConfigurationModal({
 
         {error && <p className="mt-4 text-sm text-red-500">{error}</p>}
       </div>
-      <DirectoryPicker
-        isOpen={isOpenPickerOpen}
-        onSelect={handleDirectorySelect}
-        onCancel={() => setIsOpenPickerOpen(false)}
-        rootLabel={currentConfiguration.rootPath}
-        initialPath={rootLocationName === '' ? configurationsDirPath : rootLocationName}
-      />
+      {isOpenPickerOpen && (
+        <DirectoryPicker
+          onSelect={handleDirectorySelect}
+          onCancel={() => setIsOpenPickerOpen(false)}
+          rootLabel={currentConfiguration.rootPath}
+          initialPath={rootLocationName === '' ? configurationsDirPath : rootLocationName}
+        />
+      )}
     </div>
   )
 }

src/main/frontend/app/routes/projectlanding/clone-configuration-modal.tsx

@@ -6,15 +6,13 @@ import Input from '~/components/inputs/input'
 import { filesystemService } from '~/services/filesystem-service'
 
 interface CloneProjectModalProperties {
-  isOpen: boolean
   isLocal: boolean
   onClose: () => void
   onClone: (repoUrl: string, localPath: string, token?: string) => void
   initialPath?: string
 }
 
 export default function CloneConfigurationModal({
-  isOpen,
   isLocal,
   onClose,
   onClone,
@@ -26,23 +24,17 @@ export default function CloneConfigurationModal({
   const [showPicker, setShowPicker] = useState(false)
 
   useEffect(() => {
-    if (!isOpen || !isLocal) {
-      if (isOpen) setLocation(initialPath ?? '')
+    if (isLocal) {
+      filesystemService
+        .resolveNearestAccessiblePath(initialPath ?? '')
+        .then(setLocation)
+        .catch(() => setLocation(''))
       return
     }
+    setLocation(initialPath ?? '')
+  }, [isLocal, initialPath])
 
-    filesystemService
-      .resolveNearestAccessiblePath(initialPath ?? '')
-      .then(setLocation)
-      .catch(() => setLocation(''))
-  }, [isOpen, isLocal, initialPath])
-
-  if (!isOpen) return null
-
-  const repoName = repoUrl
-    .split('/')
-    .pop()
-    ?.replace(/\.git$/, '')
+  const repoName = repoUrl.split('/').pop()?.replace('.git', '')
 
   const handleClone = () => {
     if (!repoUrl.trim()) return
@@ -58,7 +50,7 @@ export default function CloneConfigurationModal({
       finalPath = location ? `${location}/${name}` : name
     }
 
-    onClone(repoUrl.trim(), finalPath, token || undefined)
+    onClone(repoUrl.trim(), finalPath, token)
     handleClose()
   }
 
@@ -73,7 +65,7 @@ export default function CloneConfigurationModal({
   return (
     <>
       <div className="bg-background/50 absolute inset-0 z-50 flex items-center justify-center">
-        <div className="bg-background border-border relative w-[600px] rounded-lg border p-6 shadow-lg">
+        <div className="bg-background border-border relative w-150 rounded-lg border p-6 shadow-lg">
           <h2 className="mb-4 text-lg font-semibold">Clone Repository</h2>
           <p className="text-foreground-muted mb-4 text-sm">
             {isLocal ? 'Clone a Git repository to a local folder' : 'Clone a Git repository into the workspace'}
@@ -141,15 +133,16 @@ export default function CloneConfigurationModal({
         </div>
       </div>
 
-      <DirectoryPicker
-        isOpen={showPicker}
-        onSelect={(path) => {
-          setLocation(path)
-          setShowPicker(false)
-        }}
-        onCancel={() => setShowPicker(false)}
-        initialPath={location}
-      />
+      {showPicker && (
+        <DirectoryPicker
+          onSelect={(path) => {
+            setLocation(path)
+            setShowPicker(false)
+          }}
+          onCancel={() => setShowPicker(false)}
+          initialPath={location}
+        />
+      )}
     </>
   )
 }

src/main/frontend/app/routes/projectlanding/new-configuration-modal.tsx

@@ -6,7 +6,6 @@ import Input from '~/components/inputs/input'
 import { filesystemService } from '~/services/filesystem-service'
 
 interface NewProjectModalProperties {
-  isOpen: boolean
   isLocal: boolean
   onClose: () => void
   onCreate: (name: string, rootPath: string) => void
@@ -16,7 +15,6 @@ interface NewProjectModalProperties {
 const CONFIG_DIR = 'src/main/configurations'
 
 export default function NewConfigurationModal({
-  isOpen,
   isLocal,
   onClose,
   onCreate,
@@ -27,18 +25,16 @@ export default function NewConfigurationModal({
   const [showPicker, setShowPicker] = useState(false)
 
   useEffect(() => {
-    if (!isOpen || !isLocal) {
-      if (isOpen) setLocation(initialPath)
+    if (!isLocal) {
+      setLocation(initialPath)
       return
     }
 
     filesystemService
       .resolveNearestAccessiblePath(initialPath)
       .then(setLocation)
       .catch(() => setLocation(''))
-  }, [isOpen, isLocal, initialPath])
-
-  if (!isOpen) return null
+  }, [isLocal, initialPath])
 
   const handleCreate = () => {
     if (!name.trim() || (isLocal && !location)) return
@@ -109,15 +105,16 @@ export default function NewConfigurationModal({
         </div>
       </div>
 
-      <DirectoryPicker
-        isOpen={showPicker}
-        onSelect={(path) => {
-          setLocation(path)
-          setShowPicker(false)
-        }}
-        onCancel={() => setShowPicker(false)}
-        initialPath={location}
-      />
+      {showPicker && (
+        <DirectoryPicker
+          onSelect={(path) => {
+            setLocation(path)
+            setShowPicker(false)
+          }}
+          onCancel={() => setShowPicker(false)}
+          initialPath={location}
+        />
+      )}
     </>
   )
 }