Add a count view of the number of suggestions and an actual filter view

src/ui/AnotherQuickSwitcherModal.ts

@@ -21,7 +21,7 @@ import { sort } from "../sorters";
 import { UnsafeModalInterface } from "./UnsafeModalInterface";
 import { excludeFormat } from "../utils/strings";
 import { MOD, quickResultSelectionModifier } from "src/keys";
-import { HEADER, LINK, SEARCH, TAG } from "./icons";
+import { FILTER, HEADER, LINK, SEARCH, TAG } from "./icons";
 
 function buildLogMessage(message: string, msec: number) {
   return `${message}: ${Math.round(msec)}[ms]`;
@@ -50,6 +50,7 @@ export class AnotherQuickSwitcherModal
 
   searchCommandEl?: HTMLDivElement;
   defaultInputEl?: HTMLDivElement;
+  countInputEl?: HTMLDivElement;
 
   constructor(app: App, settings: Settings, command: SearchCommand) {
     super(app);
@@ -211,6 +212,7 @@ export class AnotherQuickSwitcherModal
 
     this.searchCommandEl?.remove();
     this.defaultInputEl?.remove();
+    this.countInputEl?.remove();
 
     this.searchCommandEl = createDiv({
       cls: "another-quick-switcher__status__search-command",
@@ -226,13 +228,16 @@ export class AnotherQuickSwitcherModal
     if (this.command.searchBy.link) {
       this.searchCommandEl.insertAdjacentHTML("beforeend", LINK);
     }
-
-    this.defaultInputEl = createDiv({
-      text: this.command.defaultInput,
-      cls: "another-quick-switcher__status__default-input",
-    });
     this.inputEl.before(this.searchCommandEl);
-    this.inputEl.before(this.defaultInputEl);
+
+    if (this.command.defaultInput) {
+      this.defaultInputEl = createDiv({
+        text: this.searchQuery,
+        cls: "another-quick-switcher__status__default-input",
+      });
+      this.defaultInputEl.insertAdjacentHTML("afterbegin", FILTER);
+      this.resultContainerEl.before(this.defaultInputEl);
+    }
 
     const qs = this.searchQuery.split(" ").filter((x) => x);
 
@@ -310,6 +315,15 @@ export class AnotherQuickSwitcherModal
       )
     );
 
+    this.countInputEl = createDiv({
+      text: `${Math.min(
+        items.length,
+        this.settings.maxNumberOfSuggestions
+      )} / ${items.length}`,
+      cls: "another-quick-switcher__status__count-input",
+    });
+    this.inputEl.before(this.countInputEl);
+
     return items
       .slice(0, this.settings.maxNumberOfSuggestions)
       .map((x, order) => ({ ...x, order }));

src/ui/icons.ts

@@ -9,3 +9,6 @@ export const SEARCH = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height
   <path d="M5 17a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
   <path d="m9 18-1.5-1.5"></path>
 </svg>`;
+export const FILTER = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+</svg>`;

styles.css

@@ -95,6 +95,14 @@
     margin: 0 5px;
 }
 .another-quick-switcher__status__default-input {
+    display: flex;
+    align-items: center;
+    font-size: 80%;
+    margin: 5px 0 0 20px;
+    /*noinspection CssUnresolvedCustomProperty*/
+    color: var(--text-muted);
+}
+.another-quick-switcher__status__count-input {
     font-size: 85%;
     position: absolute;
     /*noinspection CssUnresolvedCustomProperty*/