An x in a search box clears it (#291)

Once something is typed: at the box's right end, inside it. One click
handler for every box, which clears it and fires its input event, so each
box's own handler brings its list back whole. The browser's own x, drawn
by some browsers and not others, gives way to it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/index.html

@@ -28,7 +28,7 @@
     <button id="tbFlag" title="Pin the selected item, so it is never deleted" aria-label="Pin" data-icon="pin" disabled></button>
   </div>
   <span class="grow"></span>
-  <input type="search" id="epSearch" placeholder="Search items…">
+  <span class="clearable" id="epBox"><input type="search" id="epSearch" placeholder="Search items…"><button type="button" class="clearx" title="Clear" aria-label="Clear" data-icon="close"></button></span>
   <div class="tgroup" id="admintools">
     <button id="prefs" title="Settings" aria-label="Settings" data-icon="settings"></button>
     <a id="admin" href="/admin" title="Admin: the server's settings, accounts and the log" aria-label="Admin" data-icon="admin"></a>
@@ -36,7 +36,7 @@
 </header>
 <div id="shell">
   <aside id="sidebar">
-    <div class="searchwrap"><input type="search" id="feedFilter" placeholder="Filter feeds…"></div>
+    <div class="searchwrap"><span class="clearable"><input type="search" id="feedFilter" placeholder="Filter feeds…"><button type="button" class="clearx" title="Clear" aria-label="Clear" data-icon="close"></button></span></div>
     <div id="feedlist"></div>
     <div class="sidefoot">
       <div class="who"><span id="who"></span><button id="signout" title="Sign out" aria-label="Sign out" data-icon="signout"></button></div>