Optimization search in folder

Author: 罗冉

src/renderer/assets/themes/one-dark.theme.css

@@ -60,7 +60,7 @@
   /*marktext*/
   --sideBarColor: #9da5b4;
   --sideBarIconColor: var(--iconColor);
-  --sideBarTitleColor: #9da5b4;
+  --sideBarTitleColor: rgb(255, 255, 255);
   --sideBarTextColor: #9da5b4;
   --sideBarBgColor: #21252b;
   --sideBarItemHoverBgColor: #3a3f4b;

src/renderer/components/sideBar/index.vue

@@ -212,7 +212,7 @@ export default {
     width: 3px;
     cursor: col-resize;
     &:hover {
-      border-right: 2px solid var(--highlightThemeColor);
+      border-right: 2px solid var(--iconColor);
     }
   }
 </style>

src/renderer/components/sideBar/search.vue

@@ -321,10 +321,10 @@ export default {
   }
   .search-wrapper {
     display: flex;
-    margin: 35px 15px 10px 15px;
+    margin: 37px 15px 10px 15px;
     padding: 0 6px;
-    border-radius: 15px;
-    height: 30px;
+    border-radius: 14px;
+    height: 28px;
     border: 1px solid var(--floatBorderColor);
     background: var(--inputBgColor);
     box-sizing: border-box;

src/renderer/components/sideBar/searchResultItem.vue

@@ -17,7 +17,9 @@
           @click.stop="toggleSearchMatches()"
         >
           <div class="title">
-            <span class="filename">{{ filename + extension }}</span>
+            <span class="filename">
+              <span class="name">{{ filename }}</span><span class="extension">{{extension}}</span>
+            </span>
             <span class="match-count">{{ matchCount }}</span>
           </div>
           <!-- <div class="folder-path">
@@ -31,15 +33,16 @@
       >
         <ul>
           <li
+            class="text-overflow"
             v-for="(searchMatch, index) of getMatches"
             :key="index"
             :searchMatch="searchMatch"
             :title="searchMatch.lineText"
             @click="handleSearchResultClick(searchMatch)"
           >
             <!-- <span class="line-number">{{ searchMatch.range[0][0] }}</span> -->
-            <span>{{ searchMatch.lineText.substring(0, searchMatch.range[0][1]) }}</span>
-            <span class="ag-highlight">{{ searchMatch.lineText.substring(searchMatch.range[0][1], searchMatch.range[1][1]) }}</span>
+            <span>{{ ellipsisText(searchMatch.lineText.substring(0, searchMatch.range[0][1])) }}</span>
+            <span class="highlight">{{ searchMatch.lineText.substring(searchMatch.range[0][1], searchMatch.range[1][1]) }}</span>
             <span>{{ searchMatch.lineText.substring(searchMatch.range[1][1]) }}</span>
           </li>
         </ul>
@@ -83,8 +86,7 @@ export default {
     }),
 
     getMatches () {
-      if (this.searchResult.matches.length === 0 ||
-          this.allMatchesShown) {
+      if (this.searchResult.matches.length === 0 || this.allMatchesShown) {
         return this.searchResult.matches
       }
       return this.searchResult.matches.slice(0, this.shownMatches)
@@ -113,12 +115,19 @@ export default {
     toggleSearchMatches () {
       this.showSearchMatches = !this.showSearchMatches
     },
+
     handleShowMoreMatches (event) {
       this.shownMatches += 15
       if (event.ctrlKey || event.metaKey ||
           this.shownMatches >= this.searchResult.matches.length) {
         this.allMatchesShown = true
       }
+    },
+
+    ellipsisText (text) {
+      const len = text.length
+      const MAX_PRETEXT_LEN = 6
+      return len > MAX_PRETEXT_LEN ? `...${text.substring(len - MAX_PRETEXT_LEN)}` : text
     }
   }
 }
@@ -157,16 +166,19 @@ export default {
           display: block;
           padding: 2px 16px;
           padding-right: 0;
-          text-overflow: ellipsis;
-          overflow: hidden;
           cursor: pointer;
           /* Hide space between inline spans */
           font-size: 0;
+          & .highlight {
+            background: var(--highlightColor);
+            line-height: 16px;
+            height: 16px;
+            display: inline-block;
+            color: var(--sideBarTitleColor);
+            border-radius: 1px;
+          }
           &:hover {
             background: var(--sideBarItemHoverBgColor);
-          },
-          & span:first-child {
-            margin-right: 3px;
           }
           & span {
             font-size: 13px;
@@ -195,6 +207,10 @@ export default {
     color: var(--sideBarTitleColor);
     & .filename {
       flex: 1;
+      & .extension {
+        color: var(--sideBarTextColor);
+        font-size: 12px;
+      }
     }
     & .match-count {
       display: inline-block;
@@ -206,12 +222,14 @@ export default {
       border-radius: 9px;
       flex-shrink: 0;
       background: var(--itemBgColor);
-      color: var(--sideBarTextColor);
+      color: var(--sideBarTitleColor);
     }
   }
+
   .folder-path {
     font-size: 12px;
   }
+
   .folder-path > span,
   .matches {
     width: 100%;

src/renderer/node/ripgrepSearcher.js

@@ -59,7 +59,7 @@ function processUnicodeMatch (match) {
   function convertPosition (position) {
     const currentBuffer = remainingBuffer.slice(0, position - previousPosition)
     currentLength = currentBuffer.toString().length + currentLength
-    remainingBuffer = remainingBuffer.slice(position)
+    remainingBuffer = remainingBuffer.slice(position - previousPosition)
 
     previousPosition = position
 
@@ -270,7 +270,6 @@ class RipgrepDirectorySearcher {
         buffer = lines.pop()
         for (const line of lines) {
           const message = JSON.parse(line)
-
           if (message.type === 'begin') {
             pendingEvent = {
               filePath: getText(message.data.path),
@@ -281,9 +280,7 @@ class RipgrepDirectorySearcher {
           } else if (message.type === 'match') {
             const trailingContextLines = []
             pendingTrailingContexts.add(trailingContextLines)
-
             processUnicodeMatch(message.data)
-
             for (const submatch of message.data.submatches) {
               const { lineText, range } = processSubmatch(
                 submatch,