indexing docs, add docs to projects

client/src/CommandBar/Footer/HintButton.tsx

@@ -18,7 +18,7 @@ const HintButton = forwardRef(
         {shortcutKeys?.map((k) => (
           <div
             key={k}
-            className="w-5 h-5 px-1 flex items-center justify-center rounded bg-bg-base-hover"
+            className="min-w-[1.25rem] h-5 px-1 flex items-center justify-center rounded bg-bg-base-hover"
           >
             {k}
           </div>

client/src/CommandBar/steps/Documentation/ActionsDropdown.tsx

@@ -0,0 +1,104 @@
+import {
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import SectionItem from '../../../components/Dropdown/Section/SectionItem';
+import DropdownSection from '../../../components/Dropdown/Section';
+import { CommandBarContext } from '../../../context/commandBarContext';
+import useKeyboardNavigation from '../../../hooks/useKeyboardNavigation';
+
+type Props = {
+  handleClose: () => void;
+};
+
+const ActionsDropDown = ({ handleClose }: Props) => {
+  const { focusedItem } = useContext(CommandBarContext.FooterValues);
+  const [focusedIndex, setFocusedIndex] = useState(0);
+
+  const focusedDropdownItems = useMemo(() => {
+    return (
+      (focusedItem &&
+        'focusedItemProps' in focusedItem &&
+        focusedItem.focusedItemProps?.dropdownItems) ||
+      []
+    );
+  }, [focusedItem]);
+
+  const focusedDropdownItemsLength = useMemo(() => {
+    return focusedDropdownItems.reduce(
+      (prev: number, curr: { items: Record<string, any>[]; key: string }) =>
+        prev + curr.items.length,
+      0,
+    );
+  }, [focusedDropdownItems]);
+
+  useEffect(() => {
+    if (!focusedDropdownItemsLength) {
+      handleClose();
+    }
+  }, [focusedDropdownItemsLength]);
+
+  const handleKeyEvent = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocusedIndex((prev) =>
+          prev < focusedDropdownItemsLength - 1 ? prev + 1 : 0,
+        );
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        setFocusedIndex((prev) =>
+          prev > 0 ? prev - 1 : focusedDropdownItemsLength - 1,
+        );
+      } else if (e.key === 'Enter') {
+        let currentIndex = 0;
+
+        for (let i = 0; i < focusedDropdownItems.length; i++) {
+          for (let j = 0; j < focusedDropdownItems[i].items.length; j++) {
+            if (currentIndex === focusedIndex) {
+              return focusedDropdownItems[i].items[j].onClick();
+            }
+            currentIndex++;
+          }
+        }
+      }
+    },
+    [focusedIndex, focusedDropdownItems, focusedDropdownItemsLength],
+  );
+  useKeyboardNavigation(handleKeyEvent);
+
+  return (
+    <div>
+      {!!focusedDropdownItems.length &&
+        focusedDropdownItems.map(
+          (section: {
+            items: Record<string, any>[];
+            key: string;
+            itemsOffset: number;
+          }) => (
+            <DropdownSection key={section.key}>
+              {section.items.map((item: Record<string, any>, i: number) => (
+                <SectionItem
+                  color="base"
+                  shortcut={item.shortcut}
+                  key={item.key}
+                  isFocused={focusedIndex === i + section.itemsOffset}
+                  onClick={item.onClick}
+                  label={item.label}
+                  icon={item.icon}
+                />
+              ))}
+            </DropdownSection>
+          ),
+        )}
+    </div>
+  );
+};
+
+export default memo(ActionsDropDown);

client/src/CommandBar/steps/Documentation.tsx → client/src/CommandBar/steps/Documentation/index.tsx

@@ -8,15 +8,23 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CommandBarSectionType, CommandBarStepEnum } from '../../types/general';
-import { CommandBarContext } from '../../context/commandBarContext';
-import { getIndexedDocs, verifyDocsUrl } from '../../services/api';
-import { PlusSignIcon } from '../../icons';
-import { DocShortType } from '../../types/api';
-import Header from '../Header';
-import Body from '../Body';
-import Footer from '../Footer';
-import DocItem from './items/DocItem';
+import {
+  CommandBarSectionType,
+  CommandBarStepEnum,
+} from '../../../types/general';
+import { CommandBarContext } from '../../../context/commandBarContext';
+import {
+  getIndexedDocs,
+  indexDocsUrl,
+  verifyDocsUrl,
+} from '../../../services/api';
+import { PlusSignIcon } from '../../../icons';
+import { DocShortType } from '../../../types/api';
+import Header from '../../Header';
+import Body from '../../Body';
+import Footer from '../../Footer';
+import DocItem from '../items/DocItem';
+import ActionsDropdown from './ActionsDropdown';
 
 type Props = {};
 
@@ -25,7 +33,10 @@ const Documentation = ({}: Props) => {
   const [isAddMode, setIsAddMode] = useState(false);
   const [hasFetched, setHasFetched] = useState(false);
   const [indexedDocs, setIndexedDocs] = useState<DocShortType[]>([]);
-  const [addedDoc, setAddedDoc] = useState('');
+  const [addedDoc, setAddedDoc] = useState<null | { id: string; url: string }>(
+    null,
+  );
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const { setChosenStep, setFocusedItem } = useContext(
     CommandBarContext.Handlers,
   );
@@ -76,47 +87,47 @@ const Documentation = ({}: Props) => {
   }, [t, isAddMode]);
 
   const handleBack = useCallback(() => {
-    if (isAddMode && (addedDoc || indexedDocs.length)) {
+    if (isAddMode) {
       setIsAddMode(false);
     } else {
       setChosenStep({ id: CommandBarStepEnum.INITIAL });
     }
-  }, [isAddMode, addedDoc, indexedDocs]);
+  }, [isAddMode]);
 
   const refetchDocs = useCallback(() => {
     getIndexedDocs().then((data) => {
       setIndexedDocs(data);
       setHasFetched(true);
+      if (addedDoc && data.find((d) => d.id === addedDoc.id)) {
+        setAddedDoc(null);
+      }
     });
-  }, []);
+  }, [addedDoc]);
 
   useEffect(() => {
     const mapped = indexedDocs.map((d) => ({
       Component: DocItem,
       componentProps: { doc: d, isIndexed: !!d.id, refetchDocs },
       key: d.id,
     }));
-    if (!mapped.length && hasFetched && !addedDoc) {
-      enterAddMode();
-    }
     if (addedDoc) {
       mapped.unshift({
         Component: DocItem,
         componentProps: {
           doc: {
-            url: addedDoc,
-            id: '',
+            url: addedDoc.url,
+            id: addedDoc.id,
             name: '',
             favicon: '',
             index_status: 'indexing',
           },
           isIndexed: false,
           refetchDocs: () => {
             refetchDocs();
-            setAddedDoc('');
+            setAddedDoc(null);
           },
         },
-        key: addedDoc,
+        key: `doc-${addedDoc.id}`,
       });
     }
     setSections([
@@ -128,33 +139,33 @@ const Documentation = ({}: Props) => {
         items: mapped,
       },
     ]);
-  }, [indexedDocs, addedDoc, hasFetched]);
+  }, [indexedDocs, addedDoc, hasFetched, refetchDocs]);
 
   useEffect(() => {
     if (!isAddMode || !hasFetched) {
       refetchDocs();
     }
   }, [isAddMode]);
 
-  const handleAddSubmit = useCallback((inputValue: string) => {
+  const handleAddSubmit = useCallback(async (inputValue: string) => {
     setFocusedItem({
       footerHint: t('Verifying access...'),
       footerBtns: [],
     });
     setInputValue('');
-    verifyDocsUrl(inputValue.trim())
-      .then(() => {
-        setIsAddMode(false);
-        setAddedDoc(inputValue);
-      })
-      .catch(() => {
-        setFocusedItem({
-          footerHint: t(
-            "We couldn't find any docs at that link. Try again or make sure the link is correct!",
-          ),
-          footerBtns: [],
-        });
+    try {
+      await verifyDocsUrl(inputValue.trim());
+      setIsAddMode(false);
+      const newId = await indexDocsUrl(inputValue);
+      setAddedDoc({ id: newId, url: inputValue });
+    } catch (err) {
+      setFocusedItem({
+        footerHint: t(
+          "We couldn't find any docs at that link. Try again or make sure the link is correct!",
+        ),
+        footerBtns: [],
       });
+    }
   }, []);
 
   const sectionsToShow = useMemo(() => {
@@ -186,13 +197,20 @@ const Documentation = ({}: Props) => {
         }
         onChange={handleInputChange}
         value={inputValue}
+        disableKeyNav={!isAddMode && isDropdownVisible}
       />
       {isAddMode ? (
         <div className="flex-1" />
       ) : (
-        <Body sections={sectionsToShow} />
+        <Body
+          sections={sectionsToShow}
+          disableKeyNav={!isAddMode && isDropdownVisible}
+        />
       )}
-      <Footer />
+      <Footer
+        onDropdownVisibilityChange={setIsDropdownVisible}
+        ActionsDropdown={isAddMode ? undefined : ActionsDropdown}
+      />
     </div>
   );
 };

client/src/CommandBar/steps/Initial.tsx

@@ -90,6 +90,15 @@ const InitialCommandBar = ({}: Props) => {
           },
         ],
       },
+      {
+        label: t('Manage docs'),
+        Icon: MagazineIcon,
+        id: CommandBarStepEnum.DOCS,
+        key: CommandBarStepEnum.DOCS,
+        shortcut: globalShortcuts.openAddDocs.shortcut,
+        footerHint: '',
+        footerBtns: [{ label: t('Manage'), shortcut: ['entr'] }],
+      },
     ];
     const projectItems: CommandBarItemGeneralType[] = projects
       .map(

client/src/CommandBar/steps/PrivateRepos/index.tsx

@@ -14,7 +14,6 @@ import {
   CommandBarSectionType,
   CommandBarStepEnum,
   RepoProvider,
-  SyncStatus,
 } from '../../../types/general';
 import { getRepos } from '../../../services/api';
 import { mapReposBySections } from '../../../utils/mappers';