(feat:pickers) ux, code refactor

frontend/src/components/FilePicker.tsx

@@ -286,13 +286,12 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
     }
   };
 
-  // Render authentication UI
-  if (!isConnected) {
   return (
-      <div className="border border-[#EEE6FF78] rounded-lg dark:border-[#6A6A6A] p-6">
+    <div className=''>
       {authError && (
         <div className="text-red-500 text-sm mb-4 text-center">{authError}</div>
       )}
+      
       <ConnectorAuth
         provider={provider}
         onSuccess={(data) => {
@@ -309,25 +308,9 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
           setAuthError(error);
           setIsConnected(false);
         }}
-        />
-      </div>
-    );
-  }
-
-  // Render file browser UI
-  return (
-    <div className=''>
-      {/* Connected state indicator */}
-      <div className="p-3">
-        <div className="w-full flex items-center justify-between rounded-[10px] bg-[#8FDD51] px-4 py-2 text-[#212121] font-medium text-sm">
-          <div className="flex items-center gap-2">
-            <svg className="h-4 w-4" viewBox="0 0 24 24">
-              <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
-            </svg>
-            <span>Connected as {userEmail}</span>
-          </div>
-          <button
-            onClick={() => {
+        isConnected={isConnected}
+        userEmail={userEmail}
+        onDisconnect={() => {
           const sessionToken = getSessionToken(provider);
           if (sessionToken) {
             const apiHost = import.meta.env.VITE_API_HOST;
@@ -351,13 +334,9 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
             onDisconnect();
           }
         }}
-            className="text-[#212121] hover:text-gray-700 font-medium text-xs underline"
-          >
-            Disconnect
-          </button>
-        </div>
-      </div>
+      />
 
+      {isConnected && (
         <div className="border border-[#D7D7D7] rounded-lg dark:border-[#6A6A6A] mt-3">
           <div className="border-[#EEE6FF78] dark:border-[#6A6A6A] rounded-t-lg">
             {/* Breadcrumb navigation */}
@@ -484,6 +463,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
             </div>
           </div>
         </div>
+      )}
     </div>
   );
 };

frontend/src/components/GoogleDrivePicker.tsx

@@ -17,15 +17,11 @@ interface PickerFile {
 interface GoogleDrivePickerProps {
   token: string | null;
   onSelectionChange: (fileIds: string[], folderIds?: string[]) => void;
-  initialSelectedFiles?: string[];
-  initialSelectedFolders?: string[];
 }
 
 const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
   token,
   onSelectionChange,
-  initialSelectedFiles = [],
-  initialSelectedFolders = [],
 }) => {
   const [selectedFiles, setSelectedFiles] = useState<PickerFile[]>([]);
   const [selectedFolders, setSelectedFolders] = useState<PickerFile[]>([]);
@@ -34,12 +30,15 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
   const [isConnected, setIsConnected] = useState(false);
   const [authError, setAuthError] = useState<string>('');
   const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [isValidating, setIsValidating] = useState(false);
   
   const [openPicker] = useDrivePicker();
   
   useEffect(() => {
     const sessionToken = getSessionToken('google_drive');
     if (sessionToken) {
+      setIsValidating(true);
+      setIsConnected(true); // Optimistically set as connected for skeleton
       validateSession(sessionToken);
     }
   }, [token]);
@@ -59,6 +58,7 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
       if (!validateResponse.ok) {
         setIsConnected(false);
         setAuthError('Session expired. Please reconnect to Google Drive.');
+        setIsValidating(false);
         return false;
       }
 
@@ -68,16 +68,19 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
         setIsConnected(true);
         setAuthError('');
         setAccessToken(validateData.access_token || null);
+        setIsValidating(false);
         return true;
       } else {
         setIsConnected(false);
         setAuthError(validateData.error || 'Session expired. Please reconnect your account.');
+        setIsValidating(false);
         return false;
       }
     } catch (error) {
       console.error('Error validating session:', error);
       setAuthError('Failed to validate session. Please reconnect.');
       setIsConnected(false);
+      setIsValidating(false);
       return false;
     }
   };
@@ -100,17 +103,15 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
     }
     
     try {
-      const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
-      const developerKey = import.meta.env.VITE_GOOGLE_API_KEY;
-      const appId = import.meta.env.VITE_GOOGLE_DRIVE_APP_ID;
+      const clientId: string = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+      const developerKey : string = import.meta.env.VITE_GOOGLE_API_KEY;
+
+      // Derive appId from clientId (extract numeric part before first dash)
+      const appId = clientId ? clientId.split('-')[0] : null;
 
       if (!clientId || !developerKey || !appId) {
-        console.error('Missing Google Drive configuration:', {
-          clientId: !!clientId,
-          developerKey: !!developerKey,
-          appId: !!appId
-        });
-        setAuthError('Google Drive configuration is incomplete. Please check your environment variables.');
+        console.error('Missing Google Drive configuration');
+
         setIsLoading(false);
         return;
       }
@@ -199,11 +200,45 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
     setIsConnected(false);
     setSelectedFiles([]);
     setSelectedFolders([]);
+    setAccessToken(null);
+    setUserEmail('');
+    setAuthError('');
     onSelectionChange([], []);
   };
 
+  const ConnectedStateSkeleton = () => (
+    <div className="mb-4">
+      <div className="w-full flex items-center justify-between rounded-[10px] bg-gray-200 dark:bg-gray-700 px-4 py-2 animate-pulse">
+        <div className="flex items-center gap-2">
+          <div className="h-4 w-4 bg-gray-300 dark:bg-gray-600 rounded"></div>
+          <div className="h-4 w-32 bg-gray-300 dark:bg-gray-600 rounded"></div>
+        </div>
+        <div className="h-4 w-16 bg-gray-300 dark:bg-gray-600 rounded"></div>
+      </div>
+    </div>
+  );
+
+  const FilesSectionSkeleton = () => (
+    <div className="border border-[#EEE6FF78] rounded-lg dark:border-[#6A6A6A]">
+      <div className="p-4">
+        <div className="flex justify-between items-center mb-4">
+          <div className="h-5 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+          <div className="h-8 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+        </div>
+        <div className="h-4 w-40 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+      </div>
+    </div>
+  );
+
   return (
     <div>
+      {isValidating ? (
+        <>
+          <ConnectedStateSkeleton />
+          <FilesSectionSkeleton />
+        </>
+      ) : (
+        <>
           <ConnectorAuth
             provider="google_drive"
             label="Connect to Google Drive"
@@ -299,6 +334,8 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
               </div>
             </div>
           )}
+        </>
+      )}
     </div>
   );
 };

frontend/src/upload/Upload.tsx

@@ -241,8 +241,6 @@ function Upload({
               setSelectedFolders(selectedFolderIds);
             }}
             token={token}
-            initialSelectedFiles={selectedFiles}
-            initialSelectedFolders={selectedFolders}
           />
         );
       default: