vzcode 1.14.0 → 1.15.0

package/src/client/VZSidebar/Search.tsx

@@ -3,13 +3,15 @@ import {
   useEffect,
   useContext,
   useState,
+  useCallback,
 } from 'react';
 import { Form } from '../bootstrap';
 import { VZCodeContext } from '../VZCodeContext';
-import { SearchFile } from '../../types';
+import { FileId, SearchFile } from '../../types';
 import { EditorView } from 'codemirror';
-import { getExtensionIcon } from './FileListing';
 import { CloseSVG, DirectoryArrowSVG } from '../Icons';
+import { FileTypeIcon } from './FileTypeIcon';
+import { editorCacheKey } from '../useEditorCache';
 
 function jumpToPattern(
   editor: EditorView,
@@ -32,21 +34,47 @@ function jumpToPattern(
   });
 }
 
+function isResultElementWithinView(container, element) {
+  const containerTop = container.scrollTop;
+  const containerBottom =
+    containerTop + container.clientHeight;
+
+  const elementTop =
+    element.offsetTop - container.offsetTop;
+  const elementBottom = elementTop + element.clientHeight;
+
+  return (
+    elementTop >= containerTop + 100 &&
+    elementBottom <= containerBottom - 100
+  );
+}
+
 export const Search = () => {
-  const inputRef = useRef(null);
   const [isMounted, setIsMounted] = useState(false);
   const [isSearching, setIsSearching] = useState(false);
   const {
     search,
     setSearch,
+    activePaneId,
     setActiveFileId,
-    openTab,
     setSearchResults,
     setSearchFileVisibility,
+    setSearchLineVisibility,
+    setSearchFocusedIndex,
     shareDBDoc,
     editorCache,
   } = useContext(VZCodeContext);
-  const { pattern, results, focused } = search;
+  const {
+    pattern,
+    results,
+    focusedIndex,
+    focusedChildIndex,
+    focused,
+  } = search;
+  const inputRef = useRef(null);
+  const files: [string, SearchFile][] = Object.entries(
+    results,
+  ).filter(([_, file]) => file.visibility !== 'closed');
 
   useEffect(() => {
     if (isMounted) {
@@ -70,7 +98,199 @@ export const Search = () => {
     }
   }, [pattern]);
 
+  const flattenResult = useCallback(
+    (fileId: string, file: SearchFile) => {
+      setSearchFileVisibility(
+        shareDBDoc,
+        fileId,
+        file.visibility === 'open' &&
+          focusedChildIndex === null
+          ? 'flattened'
+          : 'open',
+      );
+    },
+    [focusedIndex, focusedChildIndex],
+  );
+
+  const closeResult = useCallback((fileId: FileId) => {
+    setSearchFileVisibility(shareDBDoc, fileId, 'closed');
+  }, []);
+
+  const focusFileElement = useCallback(
+    (fileId: FileId, index: number) => {
+      setActiveFileId(fileId);
+      setSearchFocusedIndex(index, null);
+    },
+    [],
+  );
+
+  const handleKeyDown = (event) => {
+    event.preventDefault();
+
+    if (files.length === 0) {
+      return;
+    }
+
+    const matchingLines: number =
+      files[focusedIndex][1].matches.length;
+
+    switch (event.key) {
+      case 'Tab':
+        // Focus the file heading
+        setSearchFocusedIndex(focusedIndex, null);
+        break;
+      case 'ArrowUp':
+        if (
+          focusedIndex == 0 &&
+          focusedChildIndex == null
+        ) {
+          // No effect on first search listing
+          break;
+        } else if (
+          focusedChildIndex === null ||
+          matchingLines == 0
+        ) {
+          // Toggle the previous file last child, if any
+          const previousMatchingLines: number =
+            files[focusedIndex - 1][1].matches.length;
+          setSearchFocusedIndex(
+            focusedIndex - 1,
+            previousMatchingLines > 0
+              ? previousMatchingLines - 1
+              : null,
+          );
+        } else if (focusedChildIndex === 0) {
+          // Toggle the file
+          setSearchFocusedIndex(focusedIndex, null);
+        } else {
+          // Toggle the previous matching line
+          setSearchFocusedIndex(
+            focusedIndex,
+            focusedChildIndex - 1,
+          );
+        }
+
+        break;
+      case 'ArrowDown':
+        if (
+          focusedIndex == files.length - 1 &&
+          focusedChildIndex == matchingLines - 1
+        ) {
+          // Last matching line should have no effect
+          break;
+        } else if (
+          focusedChildIndex === null &&
+          matchingLines > 0
+        ) {
+          // Toggle the first matching line
+          setSearchFocusedIndex(focusedIndex, 0);
+        } else if (
+          focusedChildIndex == matchingLines - 1 ||
+          matchingLines == 0
+        ) {
+          // Toggle the next file
+          setSearchFocusedIndex(focusedIndex + 1, null);
+        } else {
+          // Toggle the next matching line
+          setSearchFocusedIndex(
+            focusedIndex,
+            focusedChildIndex + 1,
+          );
+        }
+
+        break;
+      case 'ArrowLeft':
+        if (focusedChildIndex !== null) {
+          setSearchFocusedIndex(focusedIndex, null);
+        } else {
+          flattenResult(
+            files[focusedIndex][0],
+            files[focusedIndex][1],
+          );
+        }
+        break;
+      case 'ArrowRight':
+        if (files[focusedIndex][1].visibility !== 'open') {
+          flattenResult(
+            files[focusedIndex][0],
+            files[focusedIndex][1],
+          );
+        } else if (
+          focusedChildIndex === null &&
+          matchingLines !== 0
+        ) {
+          setSearchFocusedIndex(focusedIndex, 0);
+        }
+
+        break;
+      case 'Enter':
+      case ' ':
+        const fileId: string = files[focusedIndex][0];
+        setActiveFileId(fileId);
+
+        if (focusedChildIndex !== null) {
+          // Jump to matching line
+          const line: number =
+            files[focusedIndex][1].matches[
+              focusedChildIndex
+            ].line;
+          const index: number =
+            files[focusedIndex][1].matches[
+              focusedChildIndex
+            ].index;
+
+          const cacheKey = editorCacheKey(
+            fileId,
+            activePaneId,
+          );
+          if (editorCache.has(cacheKey)) {
+            jumpToPattern(
+              editorCache.get(cacheKey).editor,
+              pattern,
+              line,
+              index,
+            );
+          }
+        }
+        break;
+      default:
+        break;
+    }
+
+    // Ensure keyboard navigation keeps results within the current view
+    const file: string = files[focusedIndex][0];
+    const container = document.getElementById(
+      'sidebar-view-container',
+    );
+
+    if (container) {
+      if (focusedChildIndex === null) {
+        const fileElement = document.getElementById(file);
+
+        if (
+          !isResultElementWithinView(container, fileElement)
+        ) {
+          fileElement.scrollIntoView({ block: 'center' });
+        }
+      } else {
+        const line =
+          files[focusedIndex][1].matches[focusedChildIndex]
+            .line;
+        const lineElement = document.getElementById(
+          file + '-' + line,
+        );
+
+        if (
+          !isResultElementWithinView(container, lineElement)
+        ) {
+          lineElement.scrollIntoView({ block: 'center' });
+        }
+      }
+    }
+  };
+
   useEffect(() => {
+    // Focus the search input on mount and keyboard shortcut invocation
     if (inputRef.current) {
       inputRef.current.focus();
     }
@@ -85,122 +305,206 @@ export const Search = () => {
         <Form.Control
           type="text"
           value={pattern}
-          onChange={(e) => setSearch(e.target.value)}
+          onChange={(event) =>
+            setSearch(event.target.value)
+          }
           ref={inputRef}
           spellCheck="false"
         />
       </Form.Group>
       {Object.keys(results).length >= 1 &&
       pattern.trim().length >= 1 ? (
-        <div className="search-results">
-          {Object.entries(results)
-            .filter(
-              ([_, file]) => file.visibility !== 'closed',
-            )
-            .map(([fileId, file]: [string, SearchFile]) => (
-              <div
-                className="search-result"
-                key={file.name}
-              >
-                <div className="search-file-heading">
-                  <div className="search-file-title">
-                    <div
-                      className="arrow-wrapper"
-                      style={{
-                        transform: `rotate(${file.visibility === 'open' ? 90 : 0}deg)`,
-                      }}
-                      onClick={() => {
-                        setSearchFileVisibility(
-                          shareDBDoc,
-                          fileId,
-                          file.visibility === 'open'
-                            ? 'flattened'
-                            : 'open',
-                        );
-                      }}
-                    >
-                      <DirectoryArrowSVG />
+        <div
+          onKeyDown={handleKeyDown}
+          tabIndex={0}
+          className="search-results"
+        >
+          {files.map(
+            (
+              [fileId, file]: [string, SearchFile],
+              index,
+            ) => {
+              const matches = file.matches;
+              return (
+                <div
+                  className="search-result"
+                  key={file.name}
+                >
+                  <div
+                    onClick={() =>
+                      focusFileElement(fileId, index)
+                    }
+                    id={fileId}
+                    className={`search-file-heading 
+                      ${
+                        focusedIndex == index &&
+                        focusedChildIndex == null
+                          ? 'active'
+                          : ''
+                      }`}
+                  >
+                    <div className="search-file-title">
+                      <div
+                        className="arrow-wrapper"
+                        onClick={() =>
+                          flattenResult(fileId, file)
+                        }
+                        style={{
+                          transform: `rotate(${file.visibility === 'open' ? 90 : 0}deg)`,
+                        }}
+                      >
+                        <DirectoryArrowSVG />
+                      </div>
+                      <div className="search-file-name">
+                        <FileTypeIcon name={file.name} />
+                        <h5>{file.name}</h5>
+                      </div>
                     </div>
-                    <div className="search-file-name">
-                      {getExtensionIcon(file.name)}
-                      <h5>{file.name}</h5>
+                    <div className="search-file-info">
+                      {index == focusedIndex &&
+                      focusedChildIndex == null ? (
+                        <span
+                          className="search-file-close"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            closeResult(fileId);
+                            // Focus the previous search file, if possible
+                            setSearchFocusedIndex(
+                              Math.max(0, index - 1),
+                              null,
+                            );
+                          }}
+                        >
+                          <CloseSVG />
+                        </span>
+                      ) : (
+                        <h6 className="search-file-count">
+                          {matches.length}
+                        </h6>
+                      )}
                     </div>
                   </div>
-                  <div className="search-file-info">
-                    <h6 className="search-file-count">
-                      {file.matches.length}
-                    </h6>
-                    <div
-                      className="search-file-close"
-                      onClick={() => {
-                        setSearchFileVisibility(
-                          shareDBDoc,
-                          fileId,
-                          'closed',
-                        );
-                      }}
-                    >
-                      <CloseSVG />
-                    </div>
+                  <div className="search-file-lines">
+                    {(file.visibility === 'open' ||
+                      (file.visibility === 'flattened' &&
+                        index == focusedIndex &&
+                        focusedChildIndex !== null)) &&
+                      file.matches.map(
+                        (match, childIndex) => {
+                          const before =
+                            match.text.substring(
+                              0,
+                              match.index,
+                            );
+                          const hit = match.text.substring(
+                            match.index,
+                            match.index + pattern.length,
+                          );
+                          const after =
+                            match.text.substring(
+                              match.index + pattern.length,
+                            );
+
+                          const identifier =
+                            file.name + '-' + match.line;
+
+                          return (
+                            <div
+                              key={identifier}
+                              tabIndex={
+                                index == focusedIndex
+                                  ? 0
+                                  : -1
+                              }
+                              id={fileId + '-' + match.line}
+                              className={`search-line 
+                              ${
+                                focusedIndex == index &&
+                                focusedChildIndex ==
+                                  childIndex
+                                  ? 'active'
+                                  : ''
+                              }`}
+                            >
+                              <p
+                                key={
+                                  file.name +
+                                  ' - ' +
+                                  match.line +
+                                  ' - ' +
+                                  match.index
+                                }
+                                onClick={() => {
+                                  setSearchFocusedIndex(
+                                    index,
+                                    childIndex,
+                                  );
+
+                                  const cacheKey =
+                                    editorCacheKey(
+                                      fileId,
+                                      activePaneId,
+                                    );
+
+                                  if (
+                                    editorCache.has(
+                                      cacheKey,
+                                    )
+                                  ) {
+                                    jumpToPattern(
+                                      editorCache.get(
+                                        cacheKey,
+                                      ).editor,
+                                      pattern,
+                                      match.line,
+                                      match.index,
+                                    );
+                                  }
+                                }}
+                              >
+                                {before}
+                                <span className="search-pattern">
+                                  {hit}
+                                </span>
+                                {after}
+                              </p>
+                              {focusedIndex == index &&
+                                focusedChildIndex ===
+                                  childIndex && (
+                                  <span
+                                    className="search-file-close"
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      setSearchLineVisibility(
+                                        shareDBDoc,
+                                        fileId,
+                                        match.line,
+                                      );
+
+                                      if (childIndex == 0) {
+                                        // Removing remaining single line
+                                        setSearchFocusedIndex(
+                                          index,
+                                          null,
+                                        );
+                                      }
+                                    }}
+                                  >
+                                    <CloseSVG />
+                                  </span>
+                                )}
+                            </div>
+                          );
+                        },
+                      )}
                   </div>
                 </div>
-                <div className="search-file-lines">
-                  {file.visibility != 'flattened' &&
-                    file.matches.map((match) => {
-                      const before = match.text.substring(
-                        0,
-                        match.index,
-                      );
-                      const hit = match.text.substring(
-                        match.index,
-                        match.index + pattern.length,
-                      );
-                      const after = match.text.substring(
-                        match.index + pattern.length,
-                      );
-
-                      return (
-                        <p
-                          className="search-line"
-                          key={
-                            file.name +
-                            ' - ' +
-                            match.line +
-                            ' - ' +
-                            match.index
-                          }
-                          onClick={() => {
-                            setActiveFileId(fileId);
-                            openTab({
-                              fileId: fileId,
-                              isTransient: false,
-                            });
-
-                            if (editorCache.get(fileId)) {
-                              jumpToPattern(
-                                editorCache.get(fileId)
-                                  .editor,
-                                pattern,
-                                match.line,
-                                match.index,
-                              );
-                            }
-                          }}
-                        >
-                          {before}
-                          <span className="search-pattern">
-                            {hit}
-                          </span>
-                          {after}
-                        </p>
-                      );
-                    })}
-                </div>
-              </div>
-            ))}
+              );
+            },
+          )}
         </div>
       ) : (
-        <div className="search-results">
+        <div className="search-state">
           <h6>
             {isSearching ? 'Searching...' : 'No Results'}
           </h6>

package/src/client/VZSidebar/index.tsx

@@ -372,7 +372,7 @@ export const VZSidebar = ({
           </OverlayTrigger>
         </div>
 
-        <div className="files">
+        <div className="files" id="sidebar-view-container">
           {!isSearchOpen ? (
             <div className="sidebar-files">
               {isDragOver ? (

package/src/client/VZSidebar/styles.scss

@@ -71,22 +71,25 @@
   }
 
   .sidebar-search {
-    padding: 10px;
-
     * {
       color: inherit;
     }
   }
 
-  .search-result-lines {
-    margin-top: 10px;
-    margin-left: 20px;
+  .sidebar-search .arrow-wrapper {
+    cursor: pointer;
+  }
+
+  .sidebar-search-form {
+    padding: 10px;
   }
 
   .search-file-heading {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 10px;
+    cursor: pointer;
 
     * {
       margin: 0px;
@@ -121,22 +124,32 @@
     border-radius: 100%;
   }
 
-  .search-results {
-    padding: 10px;
+  .search-state {
+    margin: 10px;
   }
 
-  .search-file-lines {
-    font-size: inherit;
-    margin: 15px 0px 0px 30px;
+  .search-results .active {
+    border: 1px solid var(--vh-color-neutral-04);
+    background-color: var(--vh-color-neutral-02);
+    cursor: pointer;
   }
 
-  .search-line,
-  .arrow-wrapper,
-  .search-file-close {
-    &:hover {
-      opacity: 0.7;
-      cursor: pointer;
-    }
+  .search-line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 10px;
+    cursor: pointer;
+  }
+
+  .search-line p {
+    padding-left: 30px;
+    margin: 10px 0px;
+  }
+
+  .search-file-lines {
+    font-size: inherit;
+    margin-top: 10px;
   }
 
   .search-file-lines .search-pattern {
@@ -259,22 +272,24 @@
     white-space: nowrap;
     overflow: hidden;
     gap: 6px;
+    position: relative;
   }
 
   .presence-indicators {
+    position: absolute;
+    top: 0;
     display: flex;
     gap: 4px;
-    margin-right: 6px; /* Space between the indicators and the file name */
   }
 
   .presence-indicator {
-    width: 16px;
-    height: 16px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 10px;
+    font-size: 8px;
     background-color: #ff5733;
     color: #ffffff;
   }