style filter field and grid button

src/ui/web/css/form.css

@@ -20,3 +20,13 @@ limitations under the License.
   width: 100%;
   box-sizing: border-box;
 }
+
+.FilterField {
+    display: flex;
+}
+
+.FilterField input {
+    display: block;
+    flex: 1;
+    min-width: 0;
+}

src/ui/web/css/left-panel.css

@@ -19,15 +19,12 @@ limitations under the License.
     flex-direction: column;
 }
 
-.LeftPanel .filter {
+.LeftPanel .utilities {
     display: flex;
 }
 
-.LeftPanel .filter input {
+.LeftPanel .utilities .FilterField {
-    display: block;
     flex: 1;
-    box-sizing: border-box;
-    min-width: 0;
 }
 
 .LeftPanel ul {

src/ui/web/css/themes/element/icons/clear.svg

@@ -0,0 +1,4 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.33313 1.33313L6.66646 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6.66699 1.33313L1.33366 6.66646" stroke="#8D99A5" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/ui/web/css/themes/element/icons/disable-grid.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0.75H12C13.7949 0.75 15.25 2.20507 15.25 4V12C15.25 13.7949 13.7949 15.25 12 15.25H4C2.20507 15.25 0.75 13.7949 0.75 12V4C0.75 2.20507 2.20507 0.75 4 0.75Z" stroke="#8D99A5" stroke-width="1.5"/>
+<path d="M0 12H16V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V12Z" fill="#8D99A5"/>
+<path d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V5H0V4Z" fill="#8D99A5"/>
+</svg>

src/ui/web/css/themes/element/icons/enable-grid.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
+<rect x="9.59998" y="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
+<rect y="9.59998" width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
+<rect width="6.4" height="6.4" rx="1.6" fill="#8D99A5"/>
+</svg>

src/ui/web/css/themes/element/theme.css

@@ -117,6 +117,50 @@ button.styled {
     font-weight: 500;
 }
 
+.FilterField {
+    background-color: #e1e3e6;
+    border-radius: 16px;
+    height: 32px;
+    align-items: center;
+    padding: 0 8px;
+    box-sizing: border-box;
+}
+
+.FilterField :not(:first-child) {
+    margin-left: 8px;
+}
+
+.FilterField:focus-within {
+    border: 1px #e1e3e6 solid;
+    background-color: white;
+}
+
+/*.FilterField:not(:focus-within) button {
+    display: none;
+}*/
+
+.FilterField input {
+    font-family: "Inter";
+    font-size: 1.3rem;
+    font-weight: 500;
+    line-height: 1.573rem;
+    outline: none;
+    border: none;
+    background-color: transparent;
+    height: 100%;
+}
+
+.FilterField button {
+    width: 16px;
+    height: 16px;
+    background-position: center;
+    background-color: #e1e3e6;
+    background-repeat: no-repeat;
+    background-image: url('icons/clear.svg');
+    border: none;
+    border-radius: 100%;
+}
+
 .PreSessionScreen {
     padding: 30px;
 }

src/ui/web/session/leftpanel/LeftPanelView.js

@@ -18,34 +18,67 @@ import {ListView} from "../../general/ListView.js";
 import {TemplateView} from "../../general/TemplateView.js";
 import {RoomTileView} from "./RoomTileView.js";
 
-export class LeftPanelView extends TemplateView {
+class FilterField extends TemplateView {
-    render(t, vm) {
+    render(t, options) {
+        const clear = () => {
+            filterInput.value = "";
+            filterInput.blur();
+            clearButton.blur();
+            options.clear();
+        };
         const filterInput = t.input({
             type: "text",
-            placeholder: vm.i18n`Filter rooms…`,
+            placeholder: options?.label,
-            "aria-label": vm.i18n`Filter rooms by name`,
+            "aria-label": options?.label,
-            autocomplete: true,
+            autocomplete: options?.autocomplete,
-            name: "room-filter",
+            name: options?.name,
-            onInput: event => vm.setFilter(event.target.value),
+            onInput: event => options.set(event.target.value),
             onKeydown: event => {
                 if (event.key === "Escape" || event.key === "Esc") {
-                    filterInput.value = "";
+                    clear();
-                    vm.clearFilter();
-                }
                 }
+            },
+            onFocus: () => filterInput.select()
         });
-        return t.div({className: "LeftPanel"}, [
+        const clearButton = t.button({
-            t.div({className: "filter"}, [
+            onClick: clear,
-                filterInput,
+            title: options.i18n`Clear`,
-                t.button({onClick: () => {
+            "aria-label": options.i18n`Clear`
-                    filterInput.value = "";
+        });
-                    vm.clearFilter();
+        return t.div({className: "FilterField"}, [filterInput, clearButton]);
-                }}, vm.i18n`Clear`),
+    }
+}
+
+export class LeftPanelView extends TemplateView {
+    render(t, vm) {
+        const gridButtonLabel = vm => {
+            return vm.gridEnabled ?
+                vm.i18n`Show single room` :
+                vm.i18n`Enable grid layout`;
+        };
+        const utilitiesRow = t.div({className: "utilities"}, [
+            t.view(new FilterField({
+                i18n: vm.i18n,
+                label: vm.i18n`Filter rooms…`,
+                name: "room-filter",
+                autocomplete: true,
+                set: query => vm.setFilter(query),
+                clear: () => vm.clearFilter()
+            })),
             t.button({
                 onClick: () => vm.toggleGrid(),
-                    className: "grid"
+                className: {
-                }, vm => vm.gridEnabled ? "Single" : "Grid")
+                    utility: true,
-            ]),
+                    grid: true,
+                    on: vm => vm.gridEnabled
+                },
+                title: gridButtonLabel,
+                "aria-label": gridButtonLabel
+            })
+        ]);
+
+        return t.div({className: "LeftPanel"}, [
+            utilitiesRow,
             t.view(new ListView(
                 {
                     className: "RoomList",