@lvce-editor/static-server 0.43.4 → 0.44.0

package/static/{b6629a7 → ee6de50}/packages/text-search-worker/dist/textSearchWorkerMain.js

@@ -1652,14 +1652,15 @@ const focusSearchValueNext = state => {
   return focusMatchCase$1(state);
 };
 
+const Alert = 'alert';
+const Button$2 = 'button';
 const CheckBox = 'checkbox';
-const None = 'none';
+const None$1 = 'none';
+const ScrollBar$1 = 'scrollbar';
 const Status = 'status';
-const Tree = 'tree';
-const TreeItem$1 = 'treeitem';
 const ToolBar = 'toolbar';
-const Button$2 = 'button';
-const Alert = 'alert';
+const Tree$1 = 'tree';
+const TreeItem$1 = 'treeitem';
 
 const Actions = 'Actions';
 const Badge = 'Badge';
@@ -1687,10 +1688,14 @@ const MaskIconRegex = 'MaskIconRegex';
 const MaskIconReplaceAll = 'MaskIconReplaceAll';
 const MaskIconWholeWord = 'MaskIconWholeWord';
 const MultilineInputBox = 'MultilineInputBox';
+const ScrollBar = 'ScrollBar';
+const ScrollBarThumb = 'ScrollBarThumb';
+const ScrollBarVertical = 'ScrollBarVertical';
 const Search$1 = 'Search';
 const SearchField = 'SearchField';
 const SearchFieldButton = 'SearchFieldButton';
 const SearchFieldButtonChecked = 'SearchFieldButtonChecked';
+const SearchFieldButtonDisabled = 'SearchFieldButtonDisabled';
 const SearchFieldButtons = 'SearchFieldButtons';
 const SearchFieldContainer = 'SearchFieldContainer';
 const SearchFieldError = 'SearchFieldError';
@@ -1707,8 +1712,10 @@ const SearchToggleButton = 'SearchToggleButton';
 const SearchToggleButtonExpanded = 'SearchToggleButtonExpanded';
 const SourceControlBadge = 'SourceControlBadge';
 const ToggleDetails = 'ToggleDetails';
+const Tree = 'Tree';
 const TreeItem = 'TreeItem';
 const TreeItemActive = 'TreeItemActive';
+const TreeItems$1 = 'TreeItems';
 const Viewlet = 'Viewlet';
 const ViewletSearchMessage = 'ViewletSearchMessage';
 
@@ -1732,7 +1739,7 @@ const getIconVirtualDom = (icon, type = Div) => {
   return {
     type,
     className: mergeClassNames(MaskIcon, `MaskIcon${icon}`),
-    role: None,
+    role: None$1,
     childCount: 0
   };
 };
@@ -1880,100 +1887,128 @@ const getActions = () => {
   }];
 };
 
+const None = 0;
+const Collapsed = 1;
+const Expanded = 2;
+
+const getMatchCount = (results, startIndex) => {
+  for (let i = startIndex + 1; i < results.length; i++) {
+    const result = results[i];
+    if (result.type === File) {
+      return i - startIndex - 1;
+    }
+  }
+  return results.length - startIndex - 1;
+};
+
+const getChildCount = (expanded, matchCount) => {
+  let childCount = 1;
+  if (expanded === Expanded || expanded === Collapsed) {
+    childCount += 2;
+  }
+  if (matchCount) {
+    childCount++;
+  }
+  childCount++;
+  return childCount;
+};
+
 // TODO this should be in FileSystem module
 const pathBaseName = path => {
   return path.slice(path.lastIndexOf('/') + 1);
 };
-const getAbsolutePath = relativePath => {
+const getRelativePath = relativePath => {
   if (relativePath.startsWith('./')) {
     return `/${relativePath.slice(2)}`; // TODO support windows paths
   }
   return `/${relativePath}`; // TODO support windows paths
 };
 
-const getDisplayResult = (result, fileIcons, fileIconIndex, itemHeight, i, setSize, searchTermLength, replacement, focusedIndex) => {
+const getSearchDisplayResultFile = (results, fileIcons, i, setSize, collapsedPaths, text, posInSet, relativeIndex, focused, originalResults) => {
+  const path = text;
+  const absolutePath = getRelativePath(path);
+  const baseName = pathBaseName(path);
+  const index = originalResults.indexOf(results[i]);
+  const matchCount = getMatchCount(results, index);
+  const expanded = collapsedPaths.includes(path) ? Collapsed : Expanded;
+  const childCount = getChildCount(expanded, matchCount);
+  const badgeText = `${matchCount}`;
+  return {
+    badgeText,
+    childCount,
+    depth: 0,
+    expanded,
+    focused,
+    icon: fileIcons[relativeIndex],
+    matchLength: 0,
+    matchStart: 0,
+    posInSet,
+    replacement: '',
+    setSize,
+    text: baseName,
+    title: absolutePath
+  };
+};
+
+const getDisplayResultMatch = (setSize, searchTermLength, replacement, text, posInSet, start, focused) => {
+  return {
+    badgeText: '',
+    childCount: getChildCount(None, 0),
+    depth: 1,
+    expanded: None,
+    focused,
+    icon: '',
+    matchLength: searchTermLength,
+    matchStart: start,
+    posInSet,
+    replacement,
+    setSize,
+    text: text,
+    title: text
+  };
+};
+
+const getDisplayResult = (results, fileIcons, i, setSize, searchTermLength, replacement, focusedIndex, collapsedPaths, minLineY, originalResults) => {
+  const result = results[i];
   const {
     type,
     text,
-    lineNumber,
     start
   } = result;
   const posInSet = i + 1;
-  const top = i * itemHeight;
   const focused = i === focusedIndex;
+  const relativeIndex = i - minLineY;
   switch (type) {
     case File:
-      const path = text;
-      const absolutePath = getAbsolutePath(path);
-      const baseName = pathBaseName(path);
-      return {
-        title: absolutePath,
-        type: File,
-        text: baseName,
-        icon: fileIcons[fileIconIndex],
-        posInSet,
-        setSize,
-        top,
-        lineNumber,
-        matchStart: 0,
-        matchLength: 0,
-        replacement: '',
-        depth: 0,
-        matchCount: 0,
-        focused
-      };
+      return getSearchDisplayResultFile(results, fileIcons, i, setSize, collapsedPaths, text, posInSet, relativeIndex, focused, originalResults);
     case Match:
-      return {
-        title: text,
-        type: Match,
-        text: text,
-        icon: '',
-        posInSet,
-        setSize,
-        top,
-        lineNumber,
-        matchStart: start,
-        matchLength: searchTermLength,
-        replacement,
-        depth: 1,
-        matchCount: 0,
-        focused
-      };
+      return getDisplayResultMatch(setSize, searchTermLength, replacement, text, posInSet, start, focused);
     default:
       throw new Error('unexpected search result type');
   }
 };
 
-const getDisplayResults = (results, itemHeight, resultCount, searchTerm, minLineY, maxLineY, replacement, fileIcons, focusedIndex) => {
+const getDisplayResults = (results, itemHeight, resultCount, searchTerm, minLineY, maxLineY, replacement, fileIcons, focusedIndex, collapsedPaths, originalResults) => {
   const displayResults = [];
   const setSize = resultCount;
   const searchTermLength = searchTerm.length;
-  let fileResult = {
-    matchCount: 0
-  };
-  let fileIconIndex = 0;
   for (let i = minLineY; i < maxLineY; i++) {
-    const result = results[i];
-    const displayResult = getDisplayResult(result, fileIcons, fileIconIndex, itemHeight, i, setSize, searchTermLength, replacement, focusedIndex);
+    const displayResult = getDisplayResult(results, fileIcons, i, setSize, searchTermLength, replacement, focusedIndex, collapsedPaths, minLineY, originalResults);
     displayResults.push(displayResult);
-    if (result.type === File) {
-      fileResult = displayResult;
-      fileIconIndex++;
-    } else {
-      fileResult.matchCount++;
-    }
   }
   return displayResults;
 };
 
 const HandleClick = 'handleClick';
-const HandleHeaderClick = 'handleHeaderClick';
+const HandleExcludeInput = 'handleExcludeInput';
+const HandleHeaderClick2 = 'handleHeaderClick2';
 const HandleHeaderFocusIn = 'handleHeaderFocusIn';
-const HandleListBlur = 'handleListBlur';
+const HandleIncludeInput = 'handleIncludeInput';
 const HandleInput = 'handleInput';
+const HandleListBlur = 'handleListBlur';
 const HandleReplaceInput = 'handleReplaceInput';
-const HandleIncludeInput = 'handleIncludeInput';
-const HandleExcludeInput = 'handleExcludeInput';
+const HandleScrollBarPointerDown = 'handleScrollBarPointerDown';
+const HandleWheel = 'handleWheel';
 
 const FilesToExclude = 'FilesToExclude';
 const FilesToInclude = 'FilesToInclude';
@@ -2062,16 +2097,20 @@ const getInputActionsInclude = flags => {
   };
 };
 
+const getClassName = (checked, disabled) => {
+  return mergeClassNames(SearchFieldButton, checked ? SearchFieldButtonChecked : '', disabled ? SearchFieldButtonDisabled : '');
+};
 const getSearchFieldButtonVirtualDom = button => {
   const {
     icon,
     checked,
     title,
-    name
+    name,
+    disabled
   } = button;
   return [{
-    type: Div,
-    className: mergeClassNames(SearchFieldButton, checked ? SearchFieldButtonChecked : ''),
+    type: Button,
+    className: getClassName(checked, disabled),
     name,
     title,
     role: CheckBox,
@@ -2079,7 +2118,7 @@ const getSearchFieldButtonVirtualDom = button => {
     tabIndex: 0,
     childCount: 1
   }, {
-    type: Div,
+    type: Span,
     className: mergeClassNames(MaskIcon, icon),
     childCount: 0
   }];
@@ -2096,7 +2135,7 @@ const getOutSideButtonsDom = outsideButtons => {
     preNodes: [{
       type: Div,
       className: SearchFieldContainer,
-      role: None,
+      role: None$1,
       childCount: 1 + outsideButtons.length
     }],
     postNodes: outsideButtons.flatMap(getSearchFieldButtonVirtualDom)
@@ -2112,7 +2151,7 @@ const getSearchFieldVirtualDom = (name, placeholder, onInput, insideButtons, out
   const dom = [...preNodes, {
     type: Div,
     className: searchFieldClassName,
-    role: None,
+    role: None$1,
     childCount: 2
   }, {
     type: TextArea,
@@ -2186,7 +2225,7 @@ const getInputActionsInput = flags => {
   };
 };
 
-const getInputActionsReplace = flags => {
+const getInputActionsReplace = (flags, matchCount) => {
   const inside = [{
     icon: MaskIconPreserveCase,
     checked: Boolean(flags & PreserveCase$1),
@@ -2197,7 +2236,8 @@ const getInputActionsReplace = flags => {
     icon: MaskIconReplaceAll,
     checked: false,
     title: replaceAll$1(),
-    name: ReplaceAll
+    name: ReplaceAll,
+    disabled: matchCount === 0
   }];
   return {
     inside,
@@ -2222,18 +2262,18 @@ const getSearchToggleVirtualDom = flags => {
   }];
 };
 
-const getSearchHeaderTopVirtualDom = (flags, searchInputErrorMessage = '') => {
+const getSearchHeaderTopVirtualDom = (flags, searchInputErrorMessage, matchCount) => {
   const inputActions = getInputActionsInput(flags);
-  const replaceActions = getInputActionsReplace(flags);
+  const replaceActions = getInputActionsReplace(flags, matchCount);
   const dom = [{
     type: Div,
     className: SearchHeaderTop,
-    role: None,
+    role: None$1,
     childCount: 2
   }, ...getSearchToggleVirtualDom(flags), {
     type: Div,
     className: SearchHeaderTopRight,
-    role: None,
+    role: None$1,
     childCount: flags & ReplaceExpanded ? 2 : 1
   }, ...getSearchFieldVirtualDom(SearchValue, 'Search', HandleInput, inputActions.inside, inputActions.outside, '', Boolean(searchInputErrorMessage))];
   if (flags & ReplaceExpanded) {
@@ -2242,15 +2282,15 @@ const getSearchHeaderTopVirtualDom = (flags, searchInputErrorMessage = '') => {
   return dom;
 };
 
-const getSearchHeaderVirtualDom = (flags, message, searchInputErrorMessage) => {
+const getSearchHeaderVirtualDom = (flags, message, searchInputErrorMessage, matchCount) => {
   const dom = [{
     type: Div,
     className: SearchHeader,
-    role: None,
+    role: None$1,
     childCount: 2,
-    onClick: HandleHeaderClick,
+    onClick: HandleHeaderClick2,
     onFocusIn: HandleHeaderFocusIn
-  }, ...getSearchHeaderTopVirtualDom(flags, searchInputErrorMessage), ...getSearchHeaderDetailsVirtualDom(flags, message)];
+  }, ...getSearchHeaderTopVirtualDom(flags, searchInputErrorMessage, matchCount), ...getSearchHeaderDetailsVirtualDom(flags, message)];
   return dom;
 };
 
@@ -2266,12 +2306,51 @@ const getSearchInputErrorVirtualDom = errorMessage => {
   }, text(errorMessage)];
 };
 
-const getBadgeVirtualDom = (className, count) => {
+const TreeItems = 'TreeItems';
+
+const getScrollBarVirtualDom = (scrollBarHeight, scrollBarY, scrollBarValue) => {
+  if (scrollBarHeight === 0) {
+    return [];
+  }
+  return [{
+    type: Div,
+    className: mergeClassNames(ScrollBar, ScrollBarVertical),
+    childCount: 1,
+    onPointerDown: HandleScrollBarPointerDown,
+    role: ScrollBar$1,
+    ariaControls: TreeItems,
+    ariaValueNow: scrollBarValue
+  }, {
+    type: Div,
+    className: ScrollBarThumb,
+    height: scrollBarHeight,
+    translate: `0 ${scrollBarY}px`,
+    childCount: 0
+  }];
+};
+
+// TODO instead of setting string, support enum in virtual dom and send enum to renderer process
+// which converts it to a boolean
+const getAriaExpanded = expanded => {
+  switch (expanded) {
+    case Collapsed:
+      return 'false';
+    case Expanded:
+      return 'true';
+    default:
+      return undefined;
+  }
+};
+
+const getBadgeVirtualDom = (className, badgeText) => {
+  if (!badgeText) {
+    return [];
+  }
   return [{
     type: Div,
     className: mergeClassNames(Badge, className),
     childCount: 1
-  }, text(`${count}`)];
+  }, text(badgeText)];
 };
 
 const chevronDownVirtualDom = {
@@ -2279,18 +2358,18 @@ const chevronDownVirtualDom = {
   className: mergeClassNames(Chevron, MaskIconChevronDown),
   childCount: 0
 };
-({
+const chevronRightVirtualDom = {
   type: Div,
   className: mergeClassNames(Chevron, MaskIconChevronRight),
   childCount: 0
-});
+};
 
 const getFileIconVirtualDom = icon => {
   return {
     type: Img,
     className: FileIcon,
     src: icon,
-    role: None,
+    role: None$1,
     childCount: 0
   };
 };
@@ -2336,11 +2415,31 @@ const getLabelVirtualDom = (displayText, matchLength, matchStart, replacement) =
   return [label1, text(displayText)];
 };
 
+const getPaddingLeft = depth => {
+  return `${Number(depth) + 1}rem`; // TODO use classname and dynamic css
+};
+
+const getSearchResultClassName = focused => {
+  if (focused) {
+    return TreeItem + ' ' + TreeItemActive;
+  }
+  return TreeItem;
+};
+
 const PaddingRight = '12px';
 
+const getIconsVirtualDom = (expanded, icon) => {
+  switch (expanded) {
+    case Expanded:
+      return [chevronDownVirtualDom, getFileIconVirtualDom(icon)];
+    case Collapsed:
+      return [chevronRightVirtualDom, getFileIconVirtualDom(icon)];
+    default:
+      return [];
+  }
+};
 const getSearchResultVirtualDom = rowInfo => {
   const {
-    type,
     matchStart,
     matchLength,
     text: displayText,
@@ -2350,45 +2449,26 @@ const getSearchResultVirtualDom = rowInfo => {
     posInSet,
     depth,
     replacement,
-    matchCount,
-    focused
+    focused,
+    expanded,
+    childCount,
+    badgeText
   } = rowInfo;
-  const treeItem = {
+  const dom = [{
     type: Div,
     role: TreeItem$1,
-    className: TreeItem,
+    className: getSearchResultClassName(focused),
     title,
     ariaSetSize: setSize,
     ariaLevel: depth,
     ariaPosInSet: posInSet,
     ariaLabel: title,
     ariaDescription: '',
-    childCount: 1,
-    paddingLeft: `${Number(depth) + 1}rem`,
-    // TODO use classname and dynamic css
-    paddingRight: PaddingRight
-  };
-  if (focused) {
-    treeItem.className += ' ' + TreeItemActive;
-  }
-  switch (type) {
-    case File:
-      treeItem.ariaExpanded = 'true';
-      break;
-  }
-  const dom = [];
-  dom.push(treeItem);
-  if (type === File) {
-    treeItem.childCount += 2;
-    dom.push(chevronDownVirtualDom, getFileIconVirtualDom(icon));
-  }
-  dom.push(...getLabelVirtualDom(displayText, matchLength, matchStart, replacement));
-  if (matchCount) {
-    treeItem.childCount++;
-    dom.push(...getBadgeVirtualDom(SourceControlBadge, matchCount));
-  }
-  treeItem.childCount++;
-  dom.push({
+    childCount,
+    paddingLeft: getPaddingLeft(depth),
+    paddingRight: PaddingRight,
+    ariaExpanded: getAriaExpanded(expanded)
+  }, ...getIconsVirtualDom(expanded, icon), ...getLabelVirtualDom(displayText, matchLength, matchStart, replacement), ...getBadgeVirtualDom(SourceControlBadge, badgeText), {
     type: Div,
     className: SearchRemove,
     childCount: 1
@@ -2396,52 +2476,60 @@ const getSearchResultVirtualDom = rowInfo => {
     type: Div,
     className: CloseMaskIcon,
     childCount: 0
-  });
+  }];
   return dom;
 };
 
-const getSearchResultsVirtualDom = (visibleItems, focusOutline) => {
+const getTreeItemsVirtualDom = (visibleItems, deltaY, itemHeight) => {
+  const pixelOffset = deltaY % itemHeight;
   return [{
     type: Div,
-    className: mergeClassNames(Viewlet, List, focusOutline ? FocusOutline : Empty),
-    role: Tree,
-    tabIndex: 0,
+    className: TreeItems$1,
     childCount: visibleItems.length,
     onClick: HandleClick,
-    onBlur: HandleListBlur
+    onBlur: HandleListBlur,
+    onWheel: HandleWheel,
+    id: TreeItems,
+    top: `${-pixelOffset}px`
   }, ...visibleItems.flatMap(getSearchResultVirtualDom)];
 };
 
-const getSearchVirtualDom = (visibleItems, flags, message, focusOutline, searchInputErrorMessage) => {
+const getSearchResultsVirtualDom = (visibleItems, focusOutline, scrollbarHeight, scrollBarY, scrollBarValue, deltaY, itemHeight) => {
+  const scrollBarDomNodes = scrollbarHeight === 0 ? 0 : 1;
+  return [{
+    type: Div,
+    className: mergeClassNames(Viewlet, List, Tree, focusOutline ? FocusOutline : Empty),
+    role: Tree$1,
+    tabIndex: 0,
+    childCount: 1 + scrollBarDomNodes
+  }, ...getTreeItemsVirtualDom(visibleItems, deltaY, itemHeight), ...getScrollBarVirtualDom(scrollbarHeight, scrollBarY, scrollBarValue)];
+};
+
+const getSearchVirtualDom = (visibleItems, flags, message, focusOutline, searchInputErrorMessage, scrollBarHeight, scrollBarY, scrollBarValue, deltaY, itemHeight, matchCount) => {
   const errorDom = getSearchInputErrorVirtualDom(searchInputErrorMessage);
   const childCount = 2 + (errorDom.length > 0 ? 1 : 0);
   return [{
     type: Div,
     className: mergeClassNames(Viewlet, Search$1),
     childCount
-  }, ...getSearchHeaderVirtualDom(flags, message, searchInputErrorMessage), ...errorDom, ...getSearchResultsVirtualDom(visibleItems, focusOutline)];
+  }, ...getSearchHeaderVirtualDom(flags, message, searchInputErrorMessage, matchCount), ...errorDom, ...getSearchResultsVirtualDom(visibleItems, focusOutline, scrollBarHeight, scrollBarY, scrollBarValue, deltaY, itemHeight)];
 };
 
 const handleError = error => {
   console.error(`[text-search-worker] ${error}`);
 };
 
-const isFile = match => {
-  return match.type === File;
-};
-const getFiles = matches => {
-  return matches.filter(isFile);
-};
-
-const getFileIcon = file => {
-  return invoke$2('IconTheme.getFileIcon', {
-    name: file.text
-  });
+const getFileIcon = async result => {
+  if (result.type === File) {
+    return invoke$2('IconTheme.getFileIcon', {
+      name: result.text
+    });
+  }
+  return '';
 };
 const getFileIcons = async matches => {
   // TODO cache file icons
-  const files = getFiles(matches);
-  const promises = files.map(getFileIcon);
+  const promises = matches.map(getFileIcon);
   const icons = await Promise.all(promises);
   return icons;
 };
@@ -2993,31 +3081,22 @@ const toggleUseRegularExpression = state => {
 const getClickHandler = name => {
   switch (name) {
     case MatchCase:
-      // @ts-ignore
       return toggleMatchCase;
     case ToggleReplace:
-      // @ts-ignore
       return toggleReplace;
     case UseRegularExpression:
-      // @ts-ignore
       return toggleUseRegularExpression;
     case ReplaceAll:
-      // @ts-ignore
       return replaceAll;
     case MatchWholeWord:
-      // @ts-ignore
       return toggleMatchWholeWord;
     case PreserveCase:
-      // @ts-ignore
       return togglePreserveCase;
     case ToggleSearchDetails:
-      // @ts-ignore
       return toggleDetailsExpanded;
     case SearchOnlyOpenEditors:
-      // @ts-ignore
       return toggleOpenEditors;
     case UseExcludeSettings:
-      // @ts-ignore
       return toggleUseIgnoreFiles;
     case SearchValue:
     case ReplaceValue:
@@ -3091,11 +3170,11 @@ const handleSharedInput = (state, name, value, inputSource = Script) => {
   return fn(state, value, inputSource);
 };
 
-const focusIndexScrollUp = (state, index, listHeight, itemHeight, itemsLength) => {
-  const newMinLineY = index;
+const focusIndexScrollDown = (state, index, listHeight, itemHeight, itemsLength) => {
+  const newMaxLineY = Math.min(index + 1, itemsLength);
   const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
-  const newMaxLineY = Math.min(newMinLineY + fittingItems, itemsLength);
-  const newDeltaY = newMinLineY * itemHeight;
+  const newMinLineY = Math.max(newMaxLineY - fittingItems, 0);
+  const newDeltaY = itemsLength < fittingItems ? 0 : newMinLineY * itemHeight - listHeight % itemHeight + itemHeight;
   return {
     ...state,
     focusedIndex: index,
@@ -3105,11 +3184,12 @@ const focusIndexScrollUp = (state, index, listHeight, itemHeight, itemsLength) =
     deltaY: newDeltaY
   };
 };
-const focusIndexScrollDown = (state, index, listHeight, itemHeight, itemsLength) => {
-  const newMaxLineY = Math.min(index + 1, itemsLength);
+
+const focusIndexScrollUp = (state, index, listHeight, itemHeight, itemsLength) => {
+  const newMinLineY = index;
   const fittingItems = getNumberOfVisibleItems(listHeight, itemHeight);
-  const newMinLineY = Math.max(newMaxLineY - fittingItems, 0);
-  const newDeltaY = itemsLength < fittingItems ? 0 : newMinLineY * itemHeight - listHeight % itemHeight + itemHeight;
+  const newMaxLineY = Math.min(newMinLineY + fittingItems, itemsLength);
+  const newDeltaY = newMinLineY * itemHeight;
   return {
     ...state,
     focusedIndex: index,
@@ -3119,6 +3199,7 @@ const focusIndexScrollDown = (state, index, listHeight, itemHeight, itemsLength)
     deltaY: newDeltaY
   };
 };
+
 const focusIndex = (state, index) => {
   const {
     itemHeight,
@@ -3228,9 +3309,12 @@ const focusPreviousPage = state => {
   return focusIndex(state, indexPreviousPage);
 };
 
-const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight, topHeight) => {
+const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight, topHeight, itemCount) => {
   const relativeY = eventY - y - topHeight + deltaY;
   const index = Math.floor(relativeY / itemHeight);
+  if (index >= itemCount) {
+    return -1;
+  }
   return index;
 };
 
@@ -3247,12 +3331,6 @@ const getTopHeight = flags => {
   return 61;
 };
 
-const addCollapsedPath = (collapsedPaths, path) => {
-  const pathWithDot = `.${path}`;
-  const newCollapsedPaths = [...collapsedPaths, path, pathWithDot];
-  return newCollapsedPaths;
-};
-
 const getFilteredResults = (results, collapsedPaths) => {
   if (collapsedPaths.length === 0) {
     return results;
@@ -3261,43 +3339,55 @@ const getFilteredResults = (results, collapsedPaths) => {
   let isExcluded = false;
   for (const result of results) {
     if (result.type === File) {
+      filteredResults.push(result);
       if (collapsedPaths.includes(result.text)) {
         isExcluded = true;
       } else {
         isExcluded = false;
       }
     }
-    if (!isExcluded) {
+    if (result.type === Match && !isExcluded) {
       filteredResults.push(result);
     }
   }
   return filteredResults;
 };
 
-const selectIndexFile = (state, searchResult, index) => {
+const toggleCollapsedPath = (collapsedPaths, path) => {
+  if (collapsedPaths.includes(path)) {
+    const index = collapsedPaths.indexOf(path);
+    return collapsedPaths.toSpliced(index, 1);
+  }
+  return [...collapsedPaths, path];
+};
+
+const selectIndexFile = async (state, searchResult, index) => {
   const {
     collapsedPaths,
     items,
-    maxLineY
+    itemHeight,
+    headerHeight,
+    height
   } = state;
-  const path = getAbsolutePath(searchResult.text);
-  const newCollapsedPaths = addCollapsedPath(collapsedPaths, path);
-  const filteredResults = getFilteredResults(items, collapsedPaths);
-  const newMaxLineY = Math.min(maxLineY, filteredResults.length);
+  const path = searchResult.text;
+  const newCollapsedPaths = toggleCollapsedPath(collapsedPaths, path);
+  const filteredResults = getFilteredResults(items, newCollapsedPaths);
+  const icons = await getFileIcons(filteredResults);
+  const total = filteredResults.length;
+  const listHeight = height - headerHeight;
+  const numberOfVisible = getNumberOfVisibleItems(listHeight, itemHeight);
+  const maxLineY = Math.min(numberOfVisible, total);
   return {
     ...state,
     collapsedPaths: newCollapsedPaths,
     listFocusedIndex: index,
     listFocused: true,
     listItems: filteredResults,
-    maxLineY: newMaxLineY
+    maxLineY,
+    icons
   };
 };
 
-const openUri = async (path, focus = true, props = {}) => {
-  await invoke$2(/* Main.openUri */'Main.openUri', /* uri */path, /* focus */focus, props);
-};
-
 const getFileIndex = (items, index) => {
   for (let i = index; i >= 0; i--) {
     const item = items[i];
@@ -3307,9 +3397,15 @@ const getFileIndex = (items, index) => {
   }
   return -1;
 };
+
+const openUri = async (path, focus = true, props = {}) => {
+  await invoke$2(/* Main.openUri */'Main.openUri', /* uri */path, /* focus */focus, props);
+};
+
 const selectIndexPreview = async (state, searchResult, index) => {
   const {
-    items
+    items,
+    workspacePath
   } = state;
   const fileIndex = getFileIndex(items, index);
   if (fileIndex === -1) {
@@ -3319,9 +3415,9 @@ const selectIndexPreview = async (state, searchResult, index) => {
     lineNumber
   } = searchResult;
   const fileResult = items[fileIndex];
-  const path = getAbsolutePath(fileResult.text);
-  string(path);
-  await openUri(path, true, {
+  const relativePath = getRelativePath(fileResult.text);
+  const absolutePath = `${workspacePath}${relativePath}`;
+  await openUri(absolutePath, true, {
     selections: new Uint32Array([lineNumber, 0, lineNumber, 0])
   });
   return {
@@ -3331,6 +3427,17 @@ const selectIndexPreview = async (state, searchResult, index) => {
   };
 };
 
+const getSelectHandler = type => {
+  switch (type) {
+    case File:
+      return selectIndexFile;
+    case Match:
+      return selectIndexPreview;
+    default:
+      throw new Error(`unexpected search result type ${type}`);
+  }
+};
+
 const selectIndex = async (state, index) => {
   if (index === -1) {
     return {
@@ -3340,17 +3447,11 @@ const selectIndex = async (state, index) => {
     };
   }
   const {
-    items
+    listItems
   } = state;
-  const searchResult = items[index];
-  switch (searchResult.type) {
-    case File:
-      return selectIndexFile(state, searchResult, index);
-    case Match:
-      return selectIndexPreview(state, searchResult, index);
-    default:
-      throw new Error(`unexpected search result type ${searchResult.type}`);
-  }
+  const searchResult = listItems[index];
+  const fn = getSelectHandler(searchResult.type);
+  return fn(state, searchResult, index);
 };
 
 const handleClickAt = (state, eventX, eventY) => {
@@ -3359,10 +3460,11 @@ const handleClickAt = (state, eventX, eventY) => {
     y,
     itemHeight,
     deltaY,
-    flags
+    flags,
+    listItems
   } = state;
   const topHeight = getTopHeight(flags);
-  const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight, topHeight);
+  const index = getListIndex(eventX, eventY, x, y, deltaY, itemHeight, topHeight, listItems.length);
   return selectIndex(state, index);
 };
 
@@ -3385,7 +3487,8 @@ const setDeltaY = (state, value) => {
     finalDeltaY,
     deltaY,
     height,
-    headerHeight
+    headerHeight,
+    listItems
   } = state;
   const listHeight = height - headerHeight;
   const newDeltaY = clamp(value, 0, finalDeltaY);
@@ -3394,7 +3497,9 @@ const setDeltaY = (state, value) => {
   }
   // TODO when it only moves by one px, extensions don't need to be rerendered, only negative margin
   const minLineY = Math.floor(newDeltaY / itemHeight);
-  const maxLineY = minLineY + getNumberOfVisibleItems(listHeight, itemHeight);
+  const maxLineY = Math.min(minLineY + getNumberOfVisibleItems(listHeight, itemHeight), listItems.length);
+
+  // TODO update icons
   return {
     ...state,
     deltaY: newDeltaY,
@@ -3576,12 +3681,14 @@ const getFocusSelector = focusKey => {
 
 const renderItems = {
   isEqual(oldState, newState) {
-    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.replacement === newState.replacement && oldState.flags === newState.flags && oldState.message === newState.message && oldState.loaded === newState.loaded && oldState.collapsedPaths === newState.collapsedPaths && oldState.listFocusedIndex === newState.listFocusedIndex && oldState.listFocused === newState.listFocused && oldState.icons === newState.icons && oldState.searchInputErrorMessage === newState.searchInputErrorMessage;
+    return oldState.items === newState.items && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.replacement === newState.replacement && oldState.flags === newState.flags && oldState.message === newState.message && oldState.loaded === newState.loaded && oldState.collapsedPaths === newState.collapsedPaths && oldState.listFocusedIndex === newState.listFocusedIndex && oldState.listFocused === newState.listFocused && oldState.icons === newState.icons && oldState.searchInputErrorMessage === newState.searchInputErrorMessage && oldState.deltaY === newState.deltaY;
   },
   apply(oldState, newState) {
-    const displayResults = getDisplayResults(newState.listItems, newState.itemHeight, newState.fileCount, newState.value, newState.minLineY, newState.maxLineY, newState.replacement, newState.icons, newState.listFocusedIndex);
+    const displayResults = getDisplayResults(newState.listItems, newState.itemHeight, newState.fileCount, newState.value, newState.minLineY, newState.maxLineY, newState.replacement, newState.icons, newState.listFocusedIndex, newState.collapsedPaths, newState.items);
     const focusOutline = newState.listFocused && newState.listFocusedIndex === -1;
-    const dom = getSearchVirtualDom(displayResults, newState.flags, newState.message, focusOutline, newState.searchInputErrorMessage);
+    const scrollBarValue = newState.deltaY / newState.finalDeltaY * 100;
+    const scrollBarY = getScrollBarY(newState.deltaY, newState.finalDeltaY, newState.height - newState.headerHeight, newState.scrollBarHeight);
+    const dom = getSearchVirtualDom(displayResults, newState.flags, newState.message, focusOutline, newState.searchInputErrorMessage, newState.scrollBarHeight, scrollBarY, scrollBarValue, newState.deltaY, newState.itemHeight, newState.matchCount);
     return ['Viewlet.setDom2', newState.uid, dom];
   }
 };
@@ -3591,7 +3698,7 @@ const renderFocus = {
   },
   apply(oldState, newState) {
     const name = newState.focusSource === User ? '' : getFocusSelector(newState.focus);
-    return ['Viewlet.focusElementByName', name];
+    return ['Viewlet.focusElementByName', newState.uid, name];
   }
 };
 const renderValue = {
@@ -3701,10 +3808,6 @@ const saveState = uid => {
   };
 };
 
-const setFocus = async focusKey => {
-  await invoke$2('Focus.setFocus', focusKey);
-};
-
 const focusElement = (state, focusKey) => {
   return {
     ...state,
@@ -3713,6 +3816,10 @@ const focusElement = (state, focusKey) => {
   };
 };
 
+const setFocus = async focusKey => {
+  await invoke$2('Focus.setFocus', focusKey);
+};
+
 const getSearchFocusKey = key => {
   switch (key) {
     case SearchValue:
@@ -3739,11 +3846,26 @@ const getSearchFocusKey = key => {
       return FocusSearchOpenEditors;
     case UseExcludeSettings:
       return FocusIgnoreFiles;
+    case ToggleReplace:
+      return FocusToggleReplace;
     default:
       return Empty$1;
   }
 };
 
+const handleFocusIn = (state, key) => {
+  const focusKey = getSearchFocusKey(key);
+  if (state.focus === focusKey) {
+    return state;
+  }
+  void setFocus(FocusSearch);
+  return {
+    ...state,
+    focus: focusKey,
+    focusSource: User
+  };
+};
+
 const focusSearchValue = state => {
   return focusElement(state, FocusSearchInput);
 };
@@ -3783,18 +3905,6 @@ const focusRegex = state => {
 const focusReplaceAll = state => {
   return focusElement(state, FocusSearchReplaceAll);
 };
-const handleFocusIn = (state, key) => {
-  const focusKey = getSearchFocusKey(key);
-  if (state.focus === focusKey) {
-    return state;
-  }
-  void setFocus(FocusSearch);
-  return {
-    ...state,
-    focus: focusKey,
-    focusSource: User
-  };
-};
 
 const submit = state => {
   return handleUpdate(state, {