Branch indexing status reporting in branch selector

client/src/components/PageTemplate/BranchItem.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import TextField from '../TextField';
 import { CheckIcon } from '../../icons';
 import { indexRepoBranch } from '../../services/api';
@@ -12,7 +11,9 @@ type Props = {
   repoRef: string;
   isIndexed: boolean;
   isIndexing: boolean;
+  isWaitingSync: boolean;
   percentage: number;
+  onSyncClicked: (b: string) => void;
 };
 
 const BranchItem = ({
@@ -24,14 +25,15 @@ const BranchItem = ({
   isIndexed,
   isIndexing,
   percentage,
+  onSyncClicked,
+  isWaitingSync,
 }: Props) => {
-  const [syncClicked, setSyncClicked] = useState(false);
   return (
     <button
       className={`p-2.5 group w-full text-left hover:bg-bg-base-hover active:bg-transparent 
       text-label-base hover:text-label-title focus:text-label-title active:text-label-title cursor-pointer 
       flex items-center justify-between rounded body-s duration-100 relative`}
-      disabled={syncClicked && !isIndexed}
+      disabled={isWaitingSync && !isIndexed}
       onClick={() => {
         if (isIndexed) {
           setSelectedBranch(name);
@@ -48,7 +50,7 @@ const BranchItem = ({
       {selectedBranch !== name && (
         <button
           className={`caption-strong ${
-            syncClicked && !isIndexed
+            isWaitingSync && !isIndexed
               ? 'text-label-base'
               : 'text-bg-main hover:text-bg-main-hover'
           } py-1 px-1.5 ${
@@ -59,7 +61,7 @@ const BranchItem = ({
           onClick={() => {
             if (!isIndexed) {
               indexRepoBranch(repoRef, name);
-              setSyncClicked(true);
+              onSyncClicked(name);
             }
           }}
         >
@@ -69,14 +71,14 @@ const BranchItem = ({
             </span>
           ) : isIndexing ? (
             'Indexing...'
-          ) : syncClicked ? (
+          ) : isWaitingSync ? (
             'Queued...'
           ) : (
             'Sync'
           )}
         </button>
       )}
-      {syncClicked && !isIndexed && isIndexing && (
+      {isWaitingSync && !isIndexed && isIndexing && (
         <div className="absolute bottom-1.5 left-0 w-full px-2">
           <ProgressBar progress={percentage} />
         </div>

client/src/components/PageTemplate/BranchSelector.tsx

@@ -20,9 +20,8 @@ const BranchSelector = () => {
   const [search, setSearch] = useState('');
   const [isOpen, setOpen] = useState(false);
   const [isPopupOpen, setPopupOpen] = useState(false);
-  const [isIndexing, setIndexing] = useState(false);
-  const [indexingBranch, setIndexingBranch] = useState('');
-  const [percentage, setPercentage] = useState(0);
+  const [indexing, setIndexing] = useState({ branch: '', percentage: 0 });
+  const [branchesToSync, setBranchesToSync] = useState<string[]>([]);
   const contextMenuRef = useRef<HTMLDivElement>(null);
   useOnClickOutside(contextMenuRef, () => setOpen(false));
 
@@ -57,21 +56,26 @@ const BranchSelector = () => {
   }, [indexedBranches, selectedBranch]);
 
   useEffect(() => {
-    setIndexing(currentRepo?.sync_status !== SyncStatus.Done);
     eventSource?.close();
     eventSource = new EventSource(
       `${apiUrl.replace('https:', '')}/repos/status`,
     );
     eventSource.onmessage = (ev) => {
       try {
+        console.log(ev.data);
         const data = JSON.parse(ev.data);
         if (data.ref !== tab.key) {
           return;
         }
         if (data.ev?.status_change) {
-          if (data.ev.status_change.branch_filter) {
-            setIndexingBranch(data.ev.status_change.branch_filter.select[0]);
-            setPercentage(1);
+          if (
+            data.ev.status_change.branch_filter &&
+            data.ev.status_change.status === 'indexing'
+          ) {
+            setIndexing({
+              branch: data.ev.status_change.branch_filter.select[0],
+              percentage: 1,
+            });
           }
           setRepositories((prev: RepoType[] | undefined) => {
             if (!prev) {
@@ -103,7 +107,10 @@ const BranchSelector = () => {
           });
         }
         if (data.ev?.index_percent) {
-          setPercentage(data.ev?.index_percent || 1);
+          setIndexing((prev) => ({
+            ...prev,
+            percentage: data.ev?.index_percent || 1,
+          }));
         }
       } catch {}
     };
@@ -115,12 +122,6 @@ const BranchSelector = () => {
     };
   }, [currentRepo?.sync_status, tab.key]);
 
-  useEffect(() => {
-    if (!isIndexing) {
-      setPercentage(0);
-    }
-  }, [isIndexing]);
-
   const items = useMemo(() => {
     return branchesToShow
       .map((b) => b.name)
@@ -133,17 +134,13 @@ const BranchSelector = () => {
           setOpen={setOpen}
           repoRef={tab.key}
           isIndexed={indexedBranches.includes(itemName)}
-          isIndexing={indexingBranch === itemName}
-          percentage={percentage}
+          isIndexing={indexing.branch === itemName}
+          percentage={indexing.percentage}
+          isWaitingSync={branchesToSync.includes(itemName)}
+          onSyncClicked={(b) => setBranchesToSync((prev) => [...prev, b])}
         />
       ));
-  }, [
-    branchesToShow,
-    indexedBranches,
-    selectedBranch,
-    indexingBranch,
-    percentage,
-  ]);
+  }, [branchesToShow, indexedBranches, selectedBranch, indexing]);
 
   return allBranches.length > 1 ? (
     <div ref={contextMenuRef} className="max-w-full">