From 24113b5dd5eb0f079fb59bb03f3b23e2ffd44b91 Mon Sep 17 00:00:00 2001
From: Tim Abbott <tabbott@zulip.com>
Date: Tue, 15 Jul 2025 16:32:30 -0700
Subject: [PATCH] topic_list: Rewrite typeahead using an item type.

This makes it a lot easier to control the matching and display
separately.
---
 web/src/topic_list.ts | 52 +++++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/web/src/topic_list.ts b/web/src/topic_list.ts
index 8e5ee2db44..7ce52ce884 100644
--- a/web/src/topic_list.ts
+++ b/web/src/topic_list.ts
@@ -26,17 +26,28 @@ import type {TopicInfo} from "./topic_list_data.ts";
 import * as typeahead_helper from "./typeahead_helper.ts";
 import * as vdom from "./vdom.ts";
 
-/*
-    Track all active widgets with a Map by stream_id.
+type TopicFilterPill = {
+    label: string;
+    syntax: string;
+};
 
-    (We have at max one for now, but we may
-    eventually allow multiple streams to be
-    expanded.)
-*/
+const filter_options: TopicFilterPill[] = [
+    {
+        label: $t({defaultMessage: "Unresolved topics"}),
+        syntax: "-is:resolved",
+    },
+    {
+        label: $t({defaultMessage: "Resolved topics"}),
+        syntax: "is:resolved",
+    },
+];
 
+/* Track all active widgets with a Map by stream_id. We have at max
+   one for now, but we may eventually allow multiple streams to be
+   expanded. */
 const active_widgets = new Map<number, LeftSidebarTopicListWidget>();
 export let search_pill_widget: SearchPillWidget | null = null;
-export let topic_state_typeahead: Typeahead<string> | undefined;
+export let topic_state_typeahead: Typeahead<TopicFilterPill> | undefined;
 
 // We know whether we're zoomed or not.
 let zoomed = false;
@@ -500,12 +511,6 @@ function set_search_bar_text(text: string): void {
     $input.trigger("input");
 }
 
-const filter_options = new Map<string, string>([
-    [$t({defaultMessage: "Unresolved topics"}), "-is:resolved"],
-    [$t({defaultMessage: "Resolved topics"}), "is:resolved"],
-    [$t({defaultMessage: "All topics"}), ""],
-]);
-
 export function setup_topic_search_typeahead(): void {
     const $input = $("#topic_filter_query");
     const $pill_container = $("#left-sidebar-filter-topic-input");
@@ -522,7 +527,6 @@ export function setup_topic_search_typeahead(): void {
     };
 
     const options = {
-        items: filter_options.size,
         source() {
             const stream_id = active_stream_id();
             assert(stream_id !== undefined);
@@ -534,27 +538,27 @@ export function setup_topic_search_typeahead(): void {
             if ($pills.length > 0) {
                 return [];
             }
-            return [...filter_options.keys()];
+            return [...filter_options];
         },
-        item_html(item: string) {
-            return typeahead_helper.render_topic_state(item);
+        item_html(item: TopicFilterPill) {
+            return typeahead_helper.render_topic_state(item.label);
         },
-        matcher(item: string, query: string) {
-            return item.toLowerCase().startsWith(query.toLowerCase());
+        matcher(item: TopicFilterPill, query: string) {
+            return item.syntax.toLowerCase().startsWith(query.toLowerCase());
         },
-        sorter(items: string[]) {
+        sorter(items: TopicFilterPill[]) {
             return items;
         },
-        updater(item: string) {
-            const value = filter_options.get(item)!;
+        updater(item: TopicFilterPill) {
             assert(search_pill_widget !== null);
             search_pill_widget.clear(true);
-            search_pill_widget.appendValue(value);
+            search_pill_widget.appendValue(item.syntax);
             set_search_bar_text("");
             $input.trigger("focus");
             return get_left_sidebar_topic_search_term();
         },
-        // Prevents key events from propagating to other handlers or triggering default browser actions.
+        // Prevents key events from propagating to other handlers or
+        // triggering default browser actions.
         stopAdvance: true,
         // Use dropup, to match compose typeahead.
         dropup: true,