diff --git a/src/ui/ab.tis b/src/ui/ab.tis
index 5a725afa0..c2edf8e0b 100644
--- a/src/ui/ab.tis
+++ b/src/ui/ab.tis
@@ -1,5 +1,7 @@
var svg_tile = ;
var svg_list = ;
+var search_icon = ;
+var clear_icon = ;
function getSessionsStyleOption(type) {
return (type || "recent") + "-sessions-style";
@@ -21,6 +23,35 @@ function stupidUpdate(me) {
});
}
+class SearchBar: Reactor.Component {
+ this var parent;
+ this var value = "";
+
+ function this(params) {
+ this.parent = params.parent;
+ }
+
+ function render() {
+ return
+ {this.value && {clear_icon}}
+
;
+ }
+
+ event click $(span.clear-input svg) {
+ this.search_id.value = '';
+ this.onChange();
+ }
+
+ event change $(input) (_, el) {
+ this.value = el.value;
+ this.onChange();
+ }
+
+ function onChange() {
+ this.parent.onChange();
+ }
+}
+
class SessionStyle: Reactor.Component {
this var type = "";
diff --git a/src/ui/index.css b/src/ui/index.css
index c47da6d2f..5ab163f83 100644
--- a/src/ui/index.css
+++ b/src/ui/index.css
@@ -39,6 +39,28 @@ body {
padding: 20px;
}
+div#search-id {
+ padding: 0;
+ position: relative;
+}
+
+span.clear-input svg {
+ display: none;
+ position: absolute;
+ right: 6px;
+ top: 10px;
+ size: 1.4em;
+ color: color(border);
+}
+
+div#search-id:hover span.clear-input svg {
+ display: inline-block;
+}
+
+span.clear-input svg:hover {
+ color: black;
+}
+
.your-desktop {
border-spacing: 0.5em;
border-left: color(accent) solid 2px;