recent_topics: Add persistence for filters via localstorage.

Previously the filter would be reset every time the page was
refreshed. This commit adds persistence via localstorage, the tests
follow the pattern used in tests for drafts.

Fixes: #15676.

frontend_tests/node_tests/hashchange.js

@@ -14,17 +14,19 @@ set_global("location", {
 set_global("to_$", () => window_stub);
 
 const people = zrequire("people");
+zrequire("localstorage");
 const hash_util = zrequire("hash_util");
 const hashchange = zrequire("hashchange");
 const stream_data = zrequire("stream_data");
 zrequire("navigate");
-zrequire("recent_topics");
+
+const recent_topics = zrequire("recent_topics");
 recent_topics.show = () => {};
+recent_topics.is_visible = () => false;
 
 set_global("search", {
     update_button_visibility: () => {},
 });
-set_global((recent_topics.is_visible = () => false));
 set_global("document", "document-stub");
 const history = set_global("history", {});
 

frontend_tests/node_tests/recent_topics.js

@@ -9,6 +9,7 @@ const $ = require("../zjsunit/zjquery");
 
 zrequire("message_util");
 zrequire("narrow_state");
+zrequire("localstorage");
 
 const noop = () => {};
 set_global("top_left_corner", {
@@ -87,6 +88,22 @@ set_global("drafts", {
     update_draft: noop,
 });
 
+const ls_container = new Map();
+set_global("localStorage", {
+    getItem(key) {
+        return ls_container.get(key);
+    },
+    setItem(key, val) {
+        ls_container.set(key, val);
+    },
+    removeItem(key) {
+        ls_container.delete(key);
+    },
+    clear() {
+        ls_container.clear();
+    },
+});
+
 // Custom Data
 
 // New stream

frontend_tests/node_tests/tutorial.js

@@ -113,9 +113,10 @@ const messages = {
 // This is an example of a deep unit test, where our dependencies
 // are easy to test.  Start by requiring the dependencies:
 zrequire("recent_senders");
+zrequire("localstorage");
 const unread = zrequire("unread");
 const stream_topic_history = zrequire("stream_topic_history");
-zrequire("recent_topics");
+const recent_topics = zrequire("recent_topics");
 
 // And finally require the module that we will test directly:
 const message_store = zrequire("message_store");

frontend_tests/node_tests/ui_init.js

@@ -105,6 +105,8 @@ rewiremock.proxy(() => zrequire("notifications"), {
     "../../static/js/favicon": {},
 });
 zrequire("pm_list");
+zrequire("list_cursor");
+zrequire("localstorage");
 zrequire("keydown_util");
 zrequire("stream_list");
 zrequire("topic_list");

static/js/recent_topics.js

@@ -4,6 +4,7 @@ const render_recent_topic_row = require("../templates/recent_topic_row.hbs");
 const render_recent_topics_filters = require("../templates/recent_topics_filters.hbs");
 const render_recent_topics_body = require("../templates/recent_topics_table.hbs");
 
+const {localstorage} = require("./localstorage");
 const people = require("./people");
 
 const topics = new Map(); // Key is stream-id:topic.
@@ -11,7 +12,6 @@ let topics_widget;
 // Sets the number of avatars to display.
 // Rest of the avatars, if present, are displayed as {+x}
 const MAX_AVATAR = 4;
-let filters = new Set();
 
 // Use this to set the focused element.
 //
@@ -35,6 +35,19 @@ let col_focus = 1;
 // actions that only appear in some rows.
 const MAX_SELECTABLE_COLS = 4;
 
+// we use localstorage to persist the recent topic filters
+const ls_key = "recent_topic_filters";
+const ls = localstorage();
+
+let filters = new Set();
+exports.save_filters = function () {
+    ls.set(ls_key, Array.from(filters));
+};
+
+exports.load_filters = function () {
+    filters = new Set(ls.get(ls_key));
+};
+
 function set_default_focus() {
     // If at any point we are confused about the currently
     // focused element, we switch focus to search.
@@ -338,11 +351,14 @@ exports.set_filter = function (filter) {
     } else {
         filters.add(filter);
     }
+
+    exports.save_filters();
 };
 
 function show_selected_filters() {
     // Add `btn-selected-filter` to the buttons to show
     // which filters are applied.
+    exports.load_filters();
     if (filters.size === 0) {
         $("#recent_topics_filter_buttons")
             .find('[data-filter="all"]')