Navigator work

package-lock.json

@@ -11276,6 +11276,11 @@
           "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
           "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
         },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+        },
         "chalk": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
@@ -11321,6 +11326,16 @@
             }
           }
         },
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
         "color-convert": {
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -11334,11 +11349,53 @@
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
           "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
         },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        },
         "concat-map": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
         },
+        "create-ts-index": {
+          "version": "1.13.6",
+          "resolved": "https://registry.npmjs.org/create-ts-index/-/create-ts-index-1.13.6.tgz",
+          "integrity": "sha512-vBcuficF62laj/wZv01D4YBz1TXTtEM8hsUq7J1k1uyPUHYq3YTWTVQlmlp+Y311KdM6HhPQeC2aHktvQR8u3w==",
+          "requires": {
+            "chalk": "^2.4.1",
+            "commander": "^2.19.0",
+            "dayjs": "^1.8.14",
+            "debug": "^4.1.1",
+            "deepmerge": "^4.2.2",
+            "fast-glob": "^3.2.2",
+            "glob": "^7.1.3",
+            "json5": "^2.1.3",
+            "merge": "^1.2.1",
+            "minimatch": "^3.0.4",
+            "my-easy-fp": "^0.5.1",
+            "tslib": "^1.10.0",
+            "yargs": "^15.3.1"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+              }
+            },
+            "tslib": {
+              "version": "1.14.1",
+              "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+              "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+            }
+          }
+        },
         "cross-spawn": {
           "version": "7.0.3",
           "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -11349,6 +11406,11 @@
             "which": "^2.0.1"
           }
         },
+        "dayjs": {
+          "version": "1.10.4",
+          "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.4.tgz",
+          "integrity": "sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw=="
+        },
         "debug": {
           "version": "4.3.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@@ -11357,11 +11419,21 @@
             "ms": "2.1.2"
           }
         },
+        "decamelize": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+          "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+        },
         "deep-is": {
           "version": "0.1.3",
           "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
           "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
         },
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+        },
         "dir-glob": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -11610,6 +11682,15 @@
             "to-regex-range": "^5.0.1"
           }
         },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
         "flat-cache": {
           "version": "3.0.4",
           "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -11634,6 +11715,11 @@
           "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
           "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
         },
+        "get-caller-file": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+          "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+        },
         "glob": {
           "version": "7.1.6",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -11778,6 +11864,14 @@
           "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
           "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
         },
+        "json5": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+          "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
         "levn": {
           "version": "0.4.1",
           "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -11787,6 +11881,14 @@
             "type-check": "~0.4.0"
           }
         },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
         "lodash": {
           "version": "4.17.21",
           "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -11800,6 +11902,11 @@
             "yallist": "^4.0.0"
           }
         },
+        "merge": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz",
+          "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ=="
+        },
         "merge2": {
           "version": "1.4.1",
           "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -11827,11 +11934,32 @@
             "brace-expansion": "^1.1.7"
           }
         },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         },
+        "my-easy-fp": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/my-easy-fp/-/my-easy-fp-0.5.1.tgz",
+          "integrity": "sha512-musRCJYBnEDDzod5ugUykOqHoZYudhtC90J536tFrMqXfjpBzb0PRzLkadM2chgNFsCebzm9GtC+qjQ7xKgpGg==",
+          "requires": {
+            "debug": "^4.1.1",
+            "tslib": "1.11.1"
+          },
+          "dependencies": {
+            "tslib": {
+              "version": "1.11.1",
+              "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.1.tgz",
+              "integrity": "sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA=="
+            }
+          }
+        },
         "natural-compare": {
           "version": "1.4.0",
           "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -11863,6 +11991,27 @@
             "word-wrap": "^1.2.3"
           }
         },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+        },
         "pako": {
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/pako/-/pako-2.0.3.tgz",
@@ -11881,6 +12030,11 @@
           "resolved": "https://registry.npmjs.org/parse-uri/-/parse-uri-1.0.3.tgz",
           "integrity": "sha512-upMnGxNcm+45So85HoguwZTVZI9u11i36DdxJfGF2HYWS2eh3TIx7+/tTi7qrEq15qzGkVhsKjesau+kCk48pA=="
         },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+        },
         "path-is-absolute": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -11972,11 +12126,21 @@
           "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
           "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q=="
         },
+        "require-directory": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+          "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+        },
         "require-from-string": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
           "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
         },
+        "require-main-filename": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+          "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+        },
         "resolve-from": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -12025,6 +12189,11 @@
             "lru-cache": "^6.0.0"
           }
         },
+        "set-blocking": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+        },
         "shebang-command": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -12229,11 +12398,49 @@
             "isexe": "^2.0.0"
           }
         },
+        "which-module": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+          "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+        },
         "word-wrap": {
           "version": "1.2.3",
           "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
           "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
         },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "4.3.0",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+              "requires": {
+                "color-convert": "^2.0.1"
+              }
+            },
+            "color-convert": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+              "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+              "requires": {
+                "color-name": "~1.1.4"
+              }
+            },
+            "color-name": {
+              "version": "1.1.4",
+              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+              "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+            }
+          }
+        },
         "wrappy": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -12253,10 +12460,42 @@
           "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
           "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
         },
+        "y18n": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+        },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        },
+        "yargs": {
+          "version": "15.4.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+          "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
         }
       }
     },

src/views/navigator/NavigatorView.scss

@@ -1,6 +1,6 @@
 .nitro-navigator {
     width: 400px;
-    height: 400px;
 }
 
+@import './result-lists/NavigatorResultListsView';
 @import './tabs/NavigatorTabsView';

src/views/navigator/NavigatorView.tsx

@@ -8,6 +8,7 @@ import { SendMessageHook } from '../../hooks/messages/message-event';
 import { LocalizeText } from '../../utils/LocalizeText';
 import { NavigatorMessageHandler } from './NavigatorMessageHandler';
 import { NavigatorViewProps } from './NavigatorView.types';
+import { NavigatorResultListsView } from './result-lists/NavigatorResultListsView';
 import { NavigatorTabsView } from './tabs/NavigatorTabsView';
 
 export function NavigatorView(props: NavigatorViewProps): JSX.Element
@@ -95,7 +96,7 @@ export function NavigatorView(props: NavigatorViewProps): JSX.Element
         <>
             <NavigatorMessageHandler setTopLevelContext={ setTopLevelContext } setTopLevelContexts={ setTopLevelContexts } setSearchResults={ setSearchResults } />
             { isVisible && <DraggableWindow handle=".drag-handler">
-                <div className="nitro-navigator d-flex flex-column bg-primary border border-black shadow rounded">
+                <div className="nitro-navigator d-flex flex-column bg-primary border border-black shadow rounded position-absolute">
                     <div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
                         <div className="h6 m-0">{ LocalizeText((isLoading || isSearching) ? 'navigator.title.is.busy' : 'navigator.title') }</div>
                         <button type="button" className="close" onClick={ hideNavigator }>
@@ -103,6 +104,7 @@ export function NavigatorView(props: NavigatorViewProps): JSX.Element
                         </button>
                     </div>
                     <NavigatorTabsView topLevelContext={ topLevelContext } topLevelContexts={ topLevelContexts } setTopLevelContext={ setTopLevelContext } />
+                    <NavigatorResultListsView resultLists={ searchResults } />
                 </div>
             </DraggableWindow> }
         </>

src/views/navigator/result-lists/NavigatorResultListsView.scss

@@ -0,0 +1,7 @@
+.nitro-navigator-result-lists {
+    height: 400px;
+    max-height: 400px;
+    overflow-y: scroll;
+}
+
+@import './result-list/NavigatorResultListView';

src/views/navigator/result-lists/NavigatorResultListsView.tsx

@@ -0,0 +1,17 @@
+import { NavigatorResultListsViewProps } from './NavigatorResultListsView.types';
+import { NavigatorResultListView } from './result-list/NavigatorResultListView';
+
+export function NavigatorResultListsView(props: NavigatorResultListsViewProps): JSX.Element
+{
+    const { resultLists = null } = props;
+
+    return (
+        <div className="nitro-navigator-result-lists px-3 pb-3">
+            { resultLists && resultLists.length &&  resultLists.map((resultList, index) =>
+                {
+                    return <NavigatorResultListView key={ index } resultList={ resultList }  />
+                })
+            }
+        </div>
+    );
+}

src/views/navigator/result-lists/NavigatorResultListsView.types.ts

@@ -0,0 +1,6 @@
+import { NavigatorSearchResultList } from 'nitro-renderer';
+
+export interface NavigatorResultListsViewProps
+{
+    resultLists: NavigatorSearchResultList[];
+}

src/views/navigator/result-lists/result-list/NavigatorResultListView.scss

@@ -0,0 +1 @@
+@import './result/NavigatorResultView';

src/views/navigator/result-lists/result-list/NavigatorResultListView.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames';
+import { useState } from 'react';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { NavigatorResultListViewProps } from './NavigatorResultListView.types';
+import { NavigatorResultView } from './result/NavigatorResultView';
+
+export function NavigatorResultListView(props: NavigatorResultListViewProps): JSX.Element
+{
+    const { resultList = null }         = props;
+
+    const [ isExtended, setIsExtended ] = useState(true);
+
+    function toggleList(): void
+    {
+        setIsExtended(!isExtended);
+    }
+
+    function getListCode(): string
+    {
+        let name = resultList.code;
+
+        if((!name || name.length == 0) && (resultList.data && resultList.data.length > 0))
+        {
+            return resultList.data;
+        }
+
+        if(resultList.code.startsWith('${'))
+        {
+            name = name.substr(2, (name.length - 3));
+        }
+        else
+        {
+            name = ('navigator.searchcode.title.' + name);
+        }
+
+        return name;
+    }
+
+    return (
+        <div className="mb-2">
+            <div className="d-flex">
+                <div className=" mr-2" onClick={ toggleList }><i className={classNames({ 'fas': true, 'fa-plus': !isExtended, 'fa-minus': isExtended })}></i></div>
+                <div className="align-self-center w-100">{ LocalizeText(getListCode()) }</div>
+            </div>
+            { isExtended && resultList && resultList.rooms.map((room, index) =>
+                {
+                    return <NavigatorResultView key={ index } result={ room }  />
+                })
+            }
+            <hr />
+        </div>
+    );
+}

src/views/navigator/result-lists/result-list/NavigatorResultListView.types.ts

@@ -0,0 +1,6 @@
+import { NavigatorSearchResultList } from 'nitro-renderer';
+
+export interface NavigatorResultListViewProps
+{
+    resultList: NavigatorSearchResultList;
+}

src/views/navigator/result-lists/result-list/result/NavigatorResultView.scss

@@ -0,0 +1,3 @@
+.nitro-navigator-result:nth-child(even) {
+    background: $secondary;
+}

src/views/navigator/result-lists/result-list/result/NavigatorResultView.tsx

@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import { RoomDataParser, RoomInfoComposer } from 'nitro-renderer';
+import React from 'react';
+import { SendMessageHook } from '../../../../../hooks/messages/message-event';
+import { NavigatorResultViewProps } from './NavigatorResultView.types';
+
+export function NavigatorResultView(props: NavigatorResultViewProps): JSX.Element
+{
+    const { result = null } = props;
+
+    function getUserCounterColor(): string
+    {
+        const num: number = (100 * (result.userCount / result.maxUserCount));
+
+        let bg = 'badge-primary';
+
+        if(num >= 92)
+        {
+            bg = 'badge-danger';
+        }
+        else if(num >= 50)
+        {
+            bg = 'badge-warning text-white';
+        }
+        else if(num > 0)
+        {
+            bg = 'badge-success';
+        }
+
+        return bg;
+    }
+
+    function openInfo(event: React.MouseEvent): void
+    {
+        event.stopPropagation();
+        console.log('info');
+    }
+
+    function enterRoom(): void
+    {
+        SendMessageHook(new RoomInfoComposer(result.roomId, false, true));
+    }
+
+    return (
+        <div className="nitro-navigator-result rounded mt-1 py-1 px-2" onClick={ enterRoom }>
+            <div className="d-flex">
+                <div className="mr-2 align-self-center">
+                    <div className={'badge badge-sm ' + getUserCounterColor() }><i className="fas fa-user"></i> { result.userCount }</div>
+                </div>
+                <div className="w-100 align-self-center">{ result.roomName }</div>
+                { result.doorMode !== RoomDataParser.OPEN_STATE && 
+                    <div className="ml-2 small align-self-center">
+                        <i className={classNames({'fas': true, 'fa-lock': result.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': result.doorMode === RoomDataParser.PASSWORD_STATE})}></i>
+                    </div>
+                }
+                { result.habboGroupId > 0 && 
+                    <div className="ml-2 small align-self-center">
+                        <i className="fas fa-users"></i>
+                    </div>
+                }
+                <div className="ml-2 small align-self-center" onClick={ openInfo }>
+                    <i className="fas fa-info-circle"></i>
+                </div>
+            </div>
+        </div>
+    );
+}

src/views/navigator/result-lists/result-list/result/NavigatorResultView.types.ts

@@ -0,0 +1,6 @@
+import { RoomDataParser } from 'nitro-renderer';
+
+export interface NavigatorResultViewProps
+{
+    result: RoomDataParser;
+}