polishing studios

BloopAI · Jan 22, 2024 · 1abb48e · 1abb48e
1 parent bdd39b5
commit 1abb48e
Show file tree

Hide file tree

Showing 33 changed files with 379 additions and 74 deletions.
diff --git a/client/src/CommandBar/Header/index.tsx b/client/src/CommandBar/Header/index.tsx
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import Tooltip from '../../components/Tooltip';
 import useKeyboardNavigation from '../../hooks/useKeyboardNavigation';
 import { CommandBarContext } from '../../context/commandBarContext';
+import { CommandBarStepEnum } from '../../types/general';
 import ChipItem from './ChipItem';
 
 type PropsWithoutInput = {
@@ -50,7 +51,9 @@ const CommandBarHeader = ({
 }: Props) => {
   const { t } = useTranslation();
   const { isVisible } = useContext(CommandBarContext.General);
-  const { setIsVisible } = useContext(CommandBarContext.Handlers);
+  const { setIsVisible, setChosenStep } = useContext(
+    CommandBarContext.Handlers,
+  );
   const [isComposing, setIsComposing] = useState(false);
 
   const onCompositionStart = useCallback(() => {
@@ -73,6 +76,7 @@ const CommandBarHeader = ({
         if (handleBack) {
           handleBack();
         } else {
+          setChosenStep({ id: CommandBarStepEnum.INITIAL });
           setIsVisible(false);
         }
       } else if (e.key === 'Enter' && customSubmitHandler && !isComposing) {

diff --git a/client/src/CommandBar/index.tsx b/client/src/CommandBar/index.tsx
@@ -78,7 +78,7 @@ const CommandBar = ({}: Props) => {
       ) : chosenStep.id === CommandBarStepEnum.TOGGLE_THEME ? (
         <ToggleTheme />
       ) : chosenStep.id === CommandBarStepEnum.SEARCH_FILES ? (
-        <SearchFiles />
+        <SearchFiles {...(chosenStep.data || {})} />
       ) : chosenStep.id === CommandBarStepEnum.ADD_TO_STUDIO ? (
         <AddFileToStudio {...chosenStep.data} />
       ) : null}

diff --git a/client/src/CommandBar/steps/SeachFiles.tsx b/client/src/CommandBar/steps/SeachFiles.tsx
@@ -18,17 +18,24 @@ import Body from '../Body';
 import FileIcon from '../../components/FileIcon';
 import { TabsContext } from '../../context/tabsContext';
 import { ProjectContext } from '../../context/projectContext';
+import Footer from '../Footer';
+import { splitPath } from '../../utils';
+import { getJsonFromStorage, RECENT_FILES_KEY } from '../../services/storage';
+import { UIContext } from '../../context/uiContext';
 
-type Props = {};
+type Props = {
+  studioId?: string;
+};
 
-const SearchFiles = ({}: Props) => {
+const SearchFiles = ({ studioId }: Props) => {
   const { t } = useTranslation();
   const [inputValue, setInputValue] = useState('');
   const { setChosenStep, setIsVisible } = useContext(
     CommandBarContext.Handlers,
   );
   const { project } = useContext(ProjectContext.Current);
   const { openNewTab } = useContext(TabsContext.Handlers);
+  const { setIsLeftSidebarFocused } = useContext(UIContext.Focus);
   const [files, setFiles] = useState<{ path: string; repo: string }[]>([]);
   const searchValue = useDeferredValue(inputValue);
 
@@ -37,6 +44,20 @@ const SearchFiles = ({}: Props) => {
   }, []);
 
   useEffect(() => {
+    if (!searchValue) {
+      const recentFiles = getJsonFromStorage<string[]>(RECENT_FILES_KEY);
+      const newFiles: { path: string; repo: string }[] = [];
+      recentFiles?.forEach((f) => {
+        const [repo, path] = f.split(':');
+        if (project?.repos.find((r) => r.repo.ref === repo)) {
+          newFiles.push({ repo, path });
+        }
+      });
+      if (newFiles.length > 1) {
+        setFiles(newFiles.reverse());
+        return;
+      }
+    }
     if (project?.id) {
       getAutocomplete(project.id, `path:${searchValue}&content=false`).then(
         (respPath) => {
@@ -56,8 +77,8 @@ const SearchFiles = ({}: Props) => {
   }, [searchValue, project?.id]);
 
   const breadcrumbs = useMemo(() => {
-    return [t('Search files')];
-  }, [t]);
+    return studioId ? [t('Add file to studio')] : [t('Search files')];
+  }, [t, studioId]);
 
   const handleBack = useCallback(() => {
     setChosenStep({ id: CommandBarStepEnum.INITIAL });
@@ -71,27 +92,37 @@ const SearchFiles = ({}: Props) => {
           key: `${path}-${repo}`,
           id: `${path}-${repo}`,
           onClick: () => {
-            openNewTab({ type: TabTypesEnum.FILE, path, repoRef: repo });
+            openNewTab({
+              type: TabTypesEnum.FILE,
+              path,
+              repoRef: repo,
+              studioId,
+            });
+            setIsLeftSidebarFocused(false);
             setIsVisible(false);
             setChosenStep({ id: CommandBarStepEnum.INITIAL });
           },
           label: path,
-          footerHint: t('Open'),
-          footerBtns: [{ label: t('Open'), shortcut: ['entr'] }],
+          footerHint: `${splitPath(repo)
+            .slice(repo.startsWith('local//') ? -1 : -2)
+            .join('/')} / ${path}`,
+          footerBtns: [
+            { label: studioId ? t('Add file') : t('Open'), shortcut: ['entr'] },
+          ],
           Icon: (props: { sizeClassName?: string }) => (
             <FileIcon filename={path} noMargin />
           ),
         })),
         itemsOffset: 0,
       },
     ];
-  }, [files]);
+  }, [files, studioId]);
 
   return (
     <div className="w-full flex flex-col h-[28.875rem] max-w-[40rem] overflow-auto">
       <Header
         breadcrumbs={breadcrumbs}
-        handleBack={handleBack}
+        handleBack={studioId ? undefined : handleBack}
         placeholder={t('Search files...')}
         value={inputValue}
         onChange={handleInputChange}
@@ -103,6 +134,7 @@ const SearchFiles = ({}: Props) => {
           <Trans>No files found...</Trans>
         </div>
       )}
+      <Footer />
     </div>
   );
 };

diff --git a/client/src/Onboarding/Desktop/UserForm/Step1.tsx b/client/src/Onboarding/Desktop/UserForm/Step1.tsx
@@ -129,7 +129,7 @@ const UserFormStep1 = ({ form, setForm, onContinue }: Props) => {
       <Button onClick={handleSubmit}>
         <Trans>Continue</Trans>
       </Button>
-      <p className="caption text-label-base text-center">
+      <p className="body-mini text-label-base text-center">
         <Trans>By continuing you accept our</Trans>
         <br />
         <button

diff --git a/client/src/Onboarding/Desktop/UserForm/Step2.tsx b/client/src/Onboarding/Desktop/UserForm/Step2.tsx
@@ -121,7 +121,7 @@ const UserFormStep2 = ({ onContinue }: Props) => {
       >
         <div className="flex gap-3 items-center">
           <GitHubLogo raw sizeClassName="w-8 h-8" />
-          <p className="callout text-label-title">
+          <p className="body-s-b text-label-title">
             {isGithubConnected ? envConfig.user_login : 'GitHub'}
           </p>
         </div>
@@ -141,7 +141,7 @@ const UserFormStep2 = ({ onContinue }: Props) => {
         </Button>
       </div>
       {!isGithubConnected && (
-        <div className="text-center caption text-label-base">
+        <div className="text-center body-mini text-label-base">
           {isLinkShown ? (
             <Tooltip
               text={isLinkCopied ? t('Copied') : t('Click to copy')}

diff --git a/client/src/Project/CurrentTabContent/ChatTab/Input/InputCore.tsx b/client/src/Project/CurrentTabContent/ChatTab/Input/InputCore.tsx
@@ -82,7 +82,7 @@ const InputCore = ({
                 (i) =>
                   `<div>${
                     i.isFirst
-                      ? `<div class="flex items-center gap-2 px-2 py-1 text-label-muted caption-strong cursor-default">
+                      ? `<div class="flex items-center gap-2 px-2 py-1 text-label-muted body-mini-b cursor-default">
                         ${t(
                           i.type === 'repo'
                             ? 'Repositories'

diff --git a/client/src/Project/CurrentTabContent/DocTab/index.tsx b/client/src/Project/CurrentTabContent/DocTab/index.tsx
@@ -24,8 +24,11 @@ import { UIContext } from '../../../context/uiContext';
 import { CommandBarContext } from '../../../context/commandBarContext';
 import {
   addToStudioShortcut,
+  escapeShortcut,
   openInSplitViewShortcut,
   removeFromStudioShortcut,
+  saveShortcut,
+  selectLinesShortcut,
 } from '../../../consts/shortcuts';
 import {
   getCodeStudio,
@@ -352,9 +355,33 @@ const DocTab = ({
         e.preventDefault();
         e.stopPropagation();
         handleRemoveFromStudio();
+      } else if (checkEventKeys(e, escapeShortcut) && studioId) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleCancelStudio();
+      } else if (checkEventKeys(e, saveShortcut) && studioId) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSubmitToStudio();
+      } else if (
+        checkEventKeys(e, selectLinesShortcut) &&
+        studioId &&
+        !isEditingSelection
+      ) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleEditRanges();
       }
     },
-    [handleMoveToAnotherSide, handleAddToStudio],
+    [
+      handleMoveToAnotherSide,
+      handleAddToStudio,
+      handleRemoveFromStudio,
+      handleCancelStudio,
+      studioId,
+      handleSubmitToStudio,
+      handleEditRanges,
+    ],
   );
   useKeyboardNavigation(
     handleKeyEvent,
@@ -378,12 +405,22 @@ const DocTab = ({
           {!!studio && studioId && (
             <>
               <div className="w-px h-4 bg-bg-border flex-shrink-0" />
-              <Badge text={t('Whole page')} type="blue-subtle" size="small" />
+              <Badge
+                text={
+                  selectedSections.length
+                    ? t('# selected section', {
+                        count: selectedSections.length,
+                      })
+                    : t('Whole page')
+                }
+                type="blue-subtle"
+                size="small"
+              />
               <p
                 className={`select-none ${
                   tokenCount < 18000 && tokenCount > 1500
                     ? 'text-yellow'
-                    : tokenCount < 500
+                    : tokenCount <= 1500
                     ? 'text-green'
                     : 'text-red'
                 } code-mini`}
@@ -403,6 +440,8 @@ const DocTab = ({
                     variant="secondary"
                     size="mini"
                     onClick={handleEditRanges}
+                    shortcut={selectLinesShortcut}
+                    title={t('Select sections')}
                   >
                     <Trans>Select sections</Trans>
                   </Button>
@@ -413,13 +452,17 @@ const DocTab = ({
                 variant="tertiary"
                 size="mini"
                 onClick={handleCancelStudio}
+                title={t('Cancel')}
+                shortcut={escapeShortcut}
               >
                 <Trans>Cancel</Trans>
               </Button>
               <Button
                 variant={isDocInContext ? 'secondary' : 'studio'}
                 size="mini"
                 onClick={handleSubmitToStudio}
+                title={t(isDocInContext ? 'Save changes' : 'Submit')}
+                shortcut={saveShortcut}
               >
                 <Trans>{isDocInContext ? 'Save changes' : 'Submit'}</Trans>
               </Button>
@@ -431,6 +474,8 @@ const DocTab = ({
                   variant="secondary"
                   size="mini"
                   onClick={handleEditRanges}
+                  shortcut={selectLinesShortcut}
+                  title={t('Edit selected sections')}
                 >
                   <Trans>Edit sections</Trans>
                 </Button>