inputs: Implement redesigned input component.

This commit serves as the base for the ongoing effort to standardize
redesigned input elements throughout the Zulip Web UI. It introduces a
new Handlebars partial block for inputs, located at
web/templates/components/input.hbs.

The partial can be used with the partial block syntax: {{#> input}},
allowing contributors to pass in the input element as a template. This
approach wraps the input with a consistent structure that includes
support for an icon and an action button. It also applies the necessary
styling to ensure visual and functional consistency across the web UI.

This commit also implements the filter input component at
/devtools/inputs/ showroom page for design discussions and prototyping.

web/src/templates.ts

@@ -1,5 +1,7 @@
 import Handlebars from "handlebars/runtime.js";
 
+import render_input from "../templates/components/input.hbs";
+
 import * as common from "./common.ts";
 import {default_html_elements, intl} from "./i18n.ts";
 import {postprocess_content} from "./postprocess_content.ts";
@@ -173,3 +175,13 @@ Handlebars.registerHelper("popover_hotkey_hints", (...args) => {
         `<span class="popover-menu-hotkey-hints">${hotkey_hints}</span>`,
     );
 });
+
+// The below section is for registering global Handlebar partials.
+
+// The "input" partial block located at web/templates/components/input.hbs
+// is used to wrap any input element that needs to be styled as a Zulip input.
+// Usage example:
+//    {{#> input . input_type="filter-input" custom_classes="inbox-search-wrapper" icon="search" input_button_icon="close"}}
+//        <input type="text" id="{{INBOX_SEARCH_ID}}" class="input-element" value="{{search_val}}" autocomplete="off" placeholder="{{t 'Filter' }}" />
+//    {{/input}}
+Handlebars.registerPartial("input", render_input);