Filter by whole file path instead of file name

src/js/components/folder/index.jsx

@@ -7,12 +7,28 @@ class Folder extends React.Component {
     this.state = {}
   }
 
+  getHighlight ({ nodeLabel, filter, index }) {
+    const prefix = nodeLabel.substring(0, index)
+    const middle = nodeLabel.substring(index, index + filter.length)
+    const suffix = nodeLabel.substring(index + filter.length)
+    return (
+      <>
+        {prefix}
+        {middle ? <span className='github-pr-file-highlight-filter'>{middle}</span> : null}
+        {suffix}
+      </>
+    )
+  }
+
   render () {
-    const { children, nodeLabel, isViewed } = this.props
+    const { children, nodeLabel, isViewed, filter } = this.props
+
+    const index = filter ? (nodeLabel.toLowerCase() || '').indexOf(filter.toLowerCase()) : -1
+    const displayName = (index === -1) ? nodeLabel : this.getHighlight({ nodeLabel, filter, index })
 
     const display = (
       <div>
-        {nodeLabel}
+        {displayName}
         {isViewed
           ? (
             <svg className='github-pr-file-checkmark octicon octicon-check' viewBox='0 0 12 16' version='1.1' width='12' height='16' aria-hidden='true'>

src/js/components/tree/index.jsx

@@ -12,7 +12,7 @@ const fullScreenStorageKey = '__better_github_pr_full_screen'
 class Tree extends React.Component {
   constructor (props) {
     super(props)
-    this.onReloadTree = this.props.reloadTree
+    this.handleReloadTree = this.props.reloadTree
 
     this.handleClose = this.handleClose.bind(this)
     this.onScroll = this.onScroll.bind(this)
@@ -174,12 +174,14 @@ class Tree extends React.Component {
   }
 
   render () {
-    const { root, filter, show, visibleElement } = this.state
+    const { filter, show, visibleElement } = this.state
 
     if (!show) {
       return null
     }
 
+    const filtered = createFileTree(filter).tree
+
     return (
       <div>
         <div className='_better_github_pr_resizer' ref={node => { this.resizer = node }} />
@@ -189,11 +191,11 @@ class Tree extends React.Component {
           onFullWidth={this.handleFullWidth}
           onOptions={this.handleOptions}
           onClose={this.handleClose}
-          onReloadTree={this.onReloadTree}
+          onReloadTree={this.handleReloadTree}
         />
         <div className='file-container'>
           <div>
-            {root.list.map(node => (
+            {filtered.list.map(node => (
               <span key={node.nodeLabel}>
                 {createTree({ ...node, visibleElement, filter })}
               </span>

src/js/createTree.js

@@ -26,7 +26,12 @@ export const createTree = ({ nodeLabel, list, href, hasComments, isDeleted, diff
   const rawChildren = list.map(node => createTree({ ...node, visibleElement, filter }))
 
   return (
-    <Folder key={nodeLabel} nodeLabel={nodeLabel} isViewed={rawChildren.every(child => child.props.isViewed)}>
+    <Folder
+      key={nodeLabel}
+      nodeLabel={nodeLabel}
+      isViewed={rawChildren.every(child => child.props.isViewed)}
+      filter={filter}
+    >
       {rawChildren.map(node => (
         <span key={node.key}>
           {node}

src/js/lib.js

@@ -126,9 +126,9 @@ export const createFileTree = (filter = EMPTY_FILTER) => {
     diffElements: []
   }
 
-  files.forEach(({ parts, href }) => {
+  files.forEach(({ title, parts, href }) => {
     let location = tree
-    if (filterItem(parts[parts.length - 1], filter)) {
+    if (filterItem(title, filter)) {
       parts.forEach((part, index) => {
         let node = location.list.find(node => node.nodeLabel === part)
         if (!node) {