Merge branch 'master' into bwindels/url-routing

.gitignore

@@ -6,3 +6,4 @@ sessionexports
 bundle.js
 target
 lib
+*.tar.gz

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydrogen-web",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB",
   "main": "index.js",
   "directories": {
@@ -29,13 +29,14 @@
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-multi-entry": "^4.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
+    "autoprefixer": "^10.0.1",
     "cheerio": "^1.0.0-rc.3",
     "commander": "^6.0.0",
     "core-js": "^3.6.5",
     "finalhandler": "^1.1.1",
     "impunity": "^1.0.0",
     "mdn-polyfills": "^5.20.0",
-    "postcss": "^7.0.32",
+    "postcss": "^8.1.1",
     "postcss-css-variables": "^0.17.0",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-import": "^12.0.1",
@@ -47,11 +48,11 @@
     "xxhashjs": "^0.2.2"
   },
   "dependencies": {
-    "es6-promise": "https://github.com/bwindels/es6-promise.git#bwindels/expose-flush",
     "aes-js": "^3.1.2",
     "another-json": "^0.2.0",
     "base64-arraybuffer": "^0.2.0",
     "bs58": "^4.0.1",
+    "es6-promise": "https://github.com/bwindels/es6-promise.git#bwindels/expose-flush",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.1.4.tgz",
     "text-encoding": "^0.7.0"
   }

scripts/build.mjs

@@ -39,6 +39,7 @@ import removeJsComments from 'rollup-plugin-cleanup';
 import postcssUrl from "postcss-url";
 
 import cssvariables from "postcss-css-variables";
+import autoprefixer from "autoprefixer";
 import flexbugsFixes from "postcss-flexbugs-fixes";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -303,6 +304,7 @@ async function buildCssLegacy(entryPath, urlMapper = null) {
     const options = [
         postcssImport,
         cssvariables(),
+        autoprefixer({overrideBrowserslist: ["IE 11"], grid: "no-autoplace"}),
         flexbugsFixes()
     ];
     if (urlMapper) {

src/domain/ViewModel.js

@@ -41,6 +41,12 @@ export class ViewModel extends EventEmitter {
         return this.disposables.track(disposable);
     }
 
+    untrack(disposable) {
+        if (this.disposables) {
+            return this.disposables.untrack(disposable);
+        }
+    }
+
     dispose() {
         if (this.disposables) {
             this.disposables.dispose();

src/domain/session/RoomGridViewModel.js

@@ -0,0 +1,97 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {ViewModel} from "../ViewModel.js";
+
+export class RoomGridViewModel extends ViewModel {
+    constructor(options) {
+        super(options);
+        this._width = options.width;
+        this._height = options.height;
+        this._selectedIndex = 0;
+        this._viewModels = [];
+    }
+
+    roomViewModelAt(i) {
+        return this._viewModels[i]?.vm;
+    }
+
+    get focusIndex() {
+        return this._selectedIndex;
+    }
+
+    setFocusIndex(idx) {
+        if (idx === this._selectedIndex) {
+            return;
+        }
+        const oldItem = this._viewModels[this._selectedIndex];
+        oldItem?.tileVM?.close();
+        this._selectedIndex = idx;
+        const newItem = this._viewModels[this._selectedIndex];
+        if (newItem) {
+            newItem.vm.focus();
+            newItem.tileVM.open();
+        }
+        this.emitChange("focusedIndex");
+    }
+    get width() {
+        return this._width;
+    }
+
+    get height() {
+        return this._height;
+    }
+
+    /**
+     * Sets a pair of room and room tile view models at the current index
+     * @param {RoomViewModel} vm
+     * @param {RoomTileViewModel} tileVM
+     * @package
+     */
+    setRoomViewModel(vm, tileVM) {
+        const old = this._viewModels[this._selectedIndex];
+        this.disposeTracked(old?.vm);
+        old?.tileVM?.close();
+        this._viewModels[this._selectedIndex] = {vm: this.track(vm), tileVM};
+        this.emitChange(`${this._selectedIndex}`);
+    }
+
+    /**
+     * @package
+     */
+    tryFocusRoom(roomId) {
+        const index = this._viewModels.findIndex(vms => vms?.vm.id === roomId);
+        if (index >= 0) {
+            this.setFocusIndex(index);
+            return true;
+        }
+        return false;
+    }
+    
+    /**
+     * Returns the first set of room and room tile vm,
+     * and untracking them so they are not owned by this view model anymore.
+     * @package
+     */
+    getAndUntrackFirst() {
+        for (const item of this._viewModels) {
+            if (item) {
+                this.untrack(item.vm);
+                return item;
+            }
+        }
+    }
+}

src/domain/session/SessionViewModel.js

@@ -18,6 +18,7 @@ limitations under the License.
 import {LeftPanelViewModel} from "./leftpanel/LeftPanelViewModel.js";
 import {RoomViewModel} from "./room/RoomViewModel.js";
 import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
+import {RoomGridViewModel} from "./RoomGridViewModel.js";
 import {ViewModel} from "../ViewModel.js";
 
 export class SessionViewModel extends ViewModel {
@@ -32,16 +33,34 @@ export class SessionViewModel extends ViewModel {
         })));
         this._leftPanelViewModel = new LeftPanelViewModel(this.childOptions({
             rooms: this._session.rooms,
-            openRoom: this._openRoom.bind(this)
+            openRoom: this._openRoom.bind(this),
+            gridEnabled: {
+                get: () => !!this._gridViewModel,
+                set: value => this._enabledGrid(value)
+            }
         }));
         this._currentRoomTileViewModel = null;
         this._currentRoomViewModel = null;
+        this._gridViewModel = null;
     }
 
     start() {
         this._sessionStatusViewModel.start();
     }
 
+    get selectionId() {
+        if (this._currentRoomViewModel) {
+            return this._currentRoomViewModel.id;
+        } else if (this._gridViewModel) {
+            return "roomgrid";
+        }
+        return "placeholder";
+    }
+
+    get roomGridViewModel() {
+        return this._gridViewModel;
+    }
+
     get leftPanelViewModel() {
         return this._leftPanelViewModel;
     }
@@ -58,24 +77,60 @@ export class SessionViewModel extends ViewModel {
         return this._currentRoomViewModel;
     }
 
+    _enabledGrid(enabled) {
+        if (enabled) {
+            this._gridViewModel = this.track(new RoomGridViewModel(this.childOptions({width: 3, height: 2})));
+            // transfer current room
+            if (this._currentRoomViewModel) {
+                this.untrack(this._currentRoomViewModel);
+                this._gridViewModel.setRoomViewModel(this._currentRoomViewModel, this._currentRoomTileViewModel);
+                this._currentRoomViewModel = null;
+                this._currentRoomTileViewModel = null;
+            }
+        } else {
+            const VMs = this._gridViewModel.getAndUntrackFirst();
+            if (VMs) {
+                this._currentRoomViewModel = this.track(VMs.vm);
+                this._currentRoomTileViewModel = VMs.tileVM;
+                this._currentRoomTileViewModel.open();
+            }
+            this._gridViewModel = this.disposeTracked(this._gridViewModel);
+        }
+        this.emitChange("middlePanelViewType");
+    }
+
     _closeCurrentRoom() {
+        // no closing in grid for now as it is disabled on narrow viewports
+        if (!this._gridViewModel) {
             this._currentRoomTileViewModel?.close();
             this._currentRoomViewModel = this.disposeTracked(this._currentRoomViewModel);
+            return true;
+        }
     }
 
     _openRoom(room, roomTileVM) {
-        this._closeCurrentRoom();
+        if (this._gridViewModel?.tryFocusRoom(room.id)) {
-        this._currentRoomTileViewModel = roomTileVM;
+            return;
-        this._currentRoomViewModel = this.track(new RoomViewModel(this.childOptions({
+        } else if (this._currentRoomViewModel?.id === room.id) {
+            return;
+        }
+        const roomVM = new RoomViewModel(this.childOptions({
             room,
             ownUserId: this._session.user.id,
             closeCallback: () => {
-                this._closeCurrentRoom();
+                if (this._closeCurrentRoom()) {
-                this.emitChange("currentRoom");
-            },
-        })));
-        this._currentRoomViewModel.load();
                     this.emitChange("currentRoom");
                 }
+            },
+        }));
+        roomVM.load();
+        if (this._gridViewModel) {
+            this._gridViewModel.setRoomViewModel(roomVM, roomTileVM);
+        } else {
+            this._closeCurrentRoom();
+            this._currentRoomTileViewModel = roomTileVM;
+            this._currentRoomViewModel = this.track(roomVM);
+            this.emitChange("currentRoom");
+        }
+    }
 }
-

src/domain/session/leftpanel/LeftPanelViewModel.js

@@ -23,7 +23,8 @@ import {ApplyMap} from "../../../observable/map/ApplyMap.js";
 export class LeftPanelViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {rooms, openRoom} = options;
+        const {rooms, openRoom, gridEnabled} = options;
+        this._gridEnabled = gridEnabled;
         const roomTileVMs = rooms.mapValues((room, emitChange) => {
             return new RoomTileViewModel(this.childOptions({
                 room,
@@ -35,6 +36,15 @@ export class LeftPanelViewModel extends ViewModel {
         this._roomList = this._roomListFilterMap.sortValues((a, b) => a.compare(b));
     }
 
+    get gridEnabled() {
+        return this._gridEnabled.get();
+    }
+
+    toggleGrid() {
+        this._gridEnabled.set(!this._gridEnabled.get());
+        this.emitChange("gridEnabled");
+    }
+
     get roomList() {
         return this._roomList;
     }

src/domain/session/room/RoomViewModel.js

@@ -51,10 +51,18 @@ export class RoomViewModel extends ViewModel {
             this._timelineError = err;
             this.emitChange("error");
         }
+        this._clearUnreadAfterDelay();
+    }
+
+    async _clearUnreadAfterDelay() {
+        if (this._clearUnreadTimout) {
+            return;
+        }
         this._clearUnreadTimout = this.clock.createTimeout(2000);
         try {
             await this._clearUnreadTimout.elapsed();
             await this._room.clearUnread();
+            this._clearUnreadTimout = null;
         } catch (err) {
             if (err.name !== "AbortError") {
                 throw err;
@@ -62,6 +70,10 @@ export class RoomViewModel extends ViewModel {
         }
     }
 
+    focus() {
+        this._clearUnreadAfterDelay();
+    }
+
     dispose() {
         super.dispose();
         if (this._clearUnreadTimout) {
@@ -86,6 +98,10 @@ export class RoomViewModel extends ViewModel {
         return this._room.name || this.i18n`Empty Room`;
     }
 
+    get id() {
+        return this._room.id;
+    }
+
     get timelineViewModel() {
         return this._timelineVM;
     }

src/ui/web/css/avatar.css

@@ -21,9 +21,6 @@ limitations under the License.
     height: var(--avatar-size);
     overflow: hidden;
     flex-shrink: 0;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     line-height: var(--avatar-size);
     font-size: calc(var(--avatar-size) * 0.6);

src/ui/web/css/form.css

@@ -18,5 +18,16 @@ limitations under the License.
 .form input {
   display: block;
   width: 100%;
+  min-width: 0;
   box-sizing: border-box;
 }
+
+.FilterField {
+    display: flex;
+}
+
+.FilterField input {
+    display: block;
+    flex: 1;
+    min-width: 0;
+}

src/ui/web/css/layout.css

@@ -28,6 +28,11 @@ html {
     }
 }
 
+.room-placeholder {
+    display: flex;
+    flex-direction: row;
+}
+
 .SessionView {
     display: flex;
     flex-direction: column;
@@ -48,8 +53,11 @@ html {
 
 /* mobile layout */
 @media screen and (max-width: 800px) {
+    /* show back button */
     .RoomHeader button.back { display: block; }
-    div.RoomView, div.RoomPlaceholderView { display: none; }
+    /* hide grid button */
+    .LeftPanel button.grid { display: none; }
+    div.RoomView, div.RoomPlaceholderView, div.RoomGridView { display: none; }
     div.LeftPanel {flex-grow: 1;}
     div.room-shown div.RoomView { display: flex; }
     div.room-shown div.LeftPanel { display: none; }
@@ -61,7 +69,7 @@ html {
     min-width: 0;
 }
 
-.RoomPlaceholderView, .RoomView {
+.room-placeholder, .RoomView, .RoomGridView {
     flex: 1 0 0;
     min-width: 0;
 }
@@ -88,3 +96,32 @@ html {
 .RoomHeader {
     display: flex;
 }
+
+.RoomGridView {
+    display: grid;
+}
+
+.RoomGridView.layout3x2 {
+    grid-template:
+        "t0  t1  t2" 1fr
+        "t3  t4  t5" 1fr /
+         1fr 1fr 1fr;
+}
+
+.RoomGridView > .tile0 {grid-area: t0;}
+.RoomGridView > .tile1 {grid-area: t1;}
+.RoomGridView > .tile2 {grid-area: t2;}
+.RoomGridView > .tile3 {grid-area: t3;}
+.RoomGridView > .tile4 {grid-area: t4;}
+.RoomGridView > .tile5 {grid-area: t5;}
+
+.RoomGridView > div {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+}
+
+.RoomGridView > div.focus-ring {
+    z-index: 1;
+    pointer-events: none;
+}

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

@@ -19,14 +19,13 @@ 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/login.css

@@ -34,7 +34,10 @@ limitations under the License.
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 10px;
+}
+
+.SessionPickerView .session-info > :not(:first-child) {
+    margin-left: 8px;
 }
 
 .SessionPickerView li .user-id {
@@ -53,9 +56,13 @@ limitations under the License.
     display: flex;
 }
 
+.SessionLoadView > :not(:first-child) {
+    margin-left: 12px;
+}
+
 .SessionLoadView p {
     flex: 1;
-    margin: 0 0 0 10px;
+    margin: 0;
 }
 
 .SessionLoadView .spinner {

src/ui/web/css/room.css

@@ -15,22 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.RoomPlaceholderView {
-    display: flex;
-    flex-direction: row;
-}
-
 .RoomHeader {
     align-items: center;
 }
 
-.RoomHeader > *:last-child {
+.RoomHeader h2 {
-    margin-right: 0;
+    flex: 1;
-}
-
-.RoomHeader > * {
-    margin-right: 10px;
-    flex: 0 0 auto;
 }
 
 .RoomHeader button {
@@ -66,11 +56,13 @@ limitations under the License.
 
 .MessageComposer {
     display: flex;
+    align-items: center;
 }
 
 .MessageComposer > input {
     display: block;
     flex: 1;
+    min-width: 0;
     box-sizing: border-box;
 }
 
@@ -80,6 +72,6 @@ limitations under the License.
     justify-content: center;
 }
 
-.TimelineLoadingView div {
+.TimelineLoadingView > :not(:first-child) {
-    margin-right: 10px;
+    margin-left: 12px;
 }

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

@@ -70,7 +70,7 @@ a {
     background-color: #555;
 }
 
-.RoomPlaceholderView {
+.room-placeholder {
     align-items: center;
     justify-content: center;
 }

src/ui/web/css/themes/element/icons/chevron-left.svg

@@ -0,0 +1,10 @@
+<svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#8D99A5"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="8" height="17" fill="white" transform="translate(8.5 17) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>

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,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4ZM1.5 4.75C1.5 4.19772 1.94772 3.75 2.5 3.75H3.5C4.05228 3.75 4.5 4.19772 4.5 4.75V11.25C4.5 11.8023 4.05228 12.25 3.5 12.25H2.5C1.94772 12.25 1.5 11.8023 1.5 11.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V11.25C6 11.8023 6.44772 12.25 7 12.25H13.5C14.0523 12.25 14.5 11.8023 14.5 11.25V4.75C14.5 4.19772 14.0523 3.75 13.5 3.75H7Z" fill="#8D99A5"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C1.79086 0 0 1.79086 0 4V12C0 14.2091 1.79086 16 4 16H12C14.2091 16 16 14.2091 16 12V4C16 1.79086 14.2091 0 12 0H4ZM2.5 3.75C1.94772 3.75 1.5 4.19772 1.5 4.75V11.25C1.5 11.8023 1.94772 12.25 2.5 12.25H3.5C4.05228 12.25 4.5 11.8023 4.5 11.25V4.75C4.5 4.19772 4.05228 3.75 3.5 3.75H2.5ZM11 9.75C11 9.19771 11.4477 8.75 12 8.75H13.5C14.0523 8.75 14.5 9.19772 14.5 9.75V11.25C14.5 11.8023 14.0523 12.25 13.5 12.25H12C11.4477 12.25 11 11.8023 11 11.25V9.75ZM7 8.75C6.44772 8.75 6 9.19771 6 9.75V11.25C6 11.8023 6.44772 12.25 7 12.25H8.5C9.05228 12.25 9.5 11.8023 9.5 11.25V9.75C9.5 9.19772 9.05229 8.75 8.5 8.75H7ZM11 4.75C11 4.19772 11.4477 3.75 12 3.75H13.5C14.0523 3.75 14.5 4.19772 14.5 4.75V6.25C14.5 6.80228 14.0523 7.25 13.5 7.25H12C11.4477 7.25 11 6.80228 11 6.25V4.75ZM7 3.75C6.44772 3.75 6 4.19772 6 4.75V6.25C6 6.80228 6.44772 7.25 7 7.25H8.5C9.05228 7.25 9.5 6.80228 9.5 6.25V4.75C9.5 4.19772 9.05229 3.75 8.5 3.75H7Z" fill="#8D99A5"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1333 6.06667C10.1333 8.31262 8.31262 10.1333 6.06667 10.1333C3.82071 10.1333 2 8.31262 2 6.06667C2 3.82071 3.82071 2 6.06667 2C8.31262 2 10.1333 3.82071 10.1333 6.06667ZM10.9992 9.59936C11.7131 8.60443 12.1333 7.38463 12.1333 6.06667C12.1333 2.71614 9.41719 0 6.06667 0C2.71614 0 0 2.71614 0 6.06667C0 9.41719 2.71614 12.1333 6.06667 12.1333C7.38457 12.1333 8.60431 11.7131 9.59922 10.9993C9.62742 11.0369 9.65861 11.0729 9.6928 11.1071L12.2928 13.7071C12.6833 14.0977 13.3165 14.0977 13.707 13.7071C14.0975 13.3166 14.0975 12.6834 13.707 12.2929L11.107 9.69292C11.0728 9.65874 11.0368 9.62756 10.9992 9.59936Z" fill="#8D99A5"/>
+</svg>

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

@@ -117,6 +117,73 @@ button.styled {
     font-weight: 500;
 }
 
+button.utility {
+    width: 32px;
+    height: 32px;
+    background-position: center;
+    background-color: #e1e3e6;
+    background-repeat: no-repeat;
+    border: none;
+    border-radius: 100%;
+}
+
+button.utility.grid {
+    background-image: url('icons/enable-grid.svg');
+}
+
+button.utility.grid.on {
+    background-image: url('icons/disable-grid.svg');
+}
+
+.FilterField {
+    background-image: url('icons/search.svg');
+    background-repeat: no-repeat;
+    background-position: 8px center;
+    background-color: #e1e3e6;
+    /* to prevent jumps when adding a border on focus */
+    border: 1px solid transparent;
+    border-radius: 16px;
+    height: 32px;
+    align-items: center;
+    padding-left: 30px; /* 8 + 14 (icon) + 8*/
+    box-sizing: border-box;
+}
+
+.FilterField:focus-within {
+    border: 1px #e1e3e6 solid;
+    background-color: white;
+}
+.FilterField:focus-within button {
+    border-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: 30px; /* 32 - 1 (top) - 1 (bottom) */
+    height: 30px; /* 32 - 1 (top) - 1 (bottom) */
+    background-position: center;
+    background-color: #e1e3e6;
+    background-repeat: no-repeat;
+    background-image: url('icons/clear.svg');
+    border: 7px solid transparent; /* 8 - 1 */
+    border-radius: 100%;
+    box-sizing: border-box;
+}
+
 .PreSessionScreen {
     padding: 30px;
 }
@@ -141,6 +208,15 @@ button.styled {
 .LeftPanel {
     background: rgba(245, 245, 245, 0.90);
     font-size: 1.5rem;
+    padding: 12px 8px 0 8px;
+}
+
+.LeftPanel > :not(:first-child) {
+    margin-top: 12px;
+}
+
+.LeftPanel .utilities > :not(:first-child) {
+    margin-left: 8px;
 }
 
 .LeftPanel .filter {
@@ -152,36 +228,40 @@ button.styled {
     border: none;
 }
 
-.LeftPanel ul {
+.LeftPanel .RoomList {
     padding: 0;
-    margin: 0;
+    margin-right: -8px; /* make scrollbar hit right edge of parent */
 }
 
-.LeftPanel li {
+.RoomList li {
-    margin: 3px 10px;
+    margin: 0;
-    padding: 5px;
+    padding-right: 8px;
     /* vertical align */
     align-items: center;
 }
 
-.LeftPanel li.active {
+.RoomList li:not(:first-child) {
+    margin-top: 12px;
+}
+
+.RoomList li.active {
     background: rgba(141, 151, 165, 0.1);
     border-radius: 5px;
 }
 
-.LeftPanel li > * {
+.RoomList li > * {
-    margin-right: 10px;
+    margin-right: 8px;
 }
 
-.LeftPanel .description {
+.RoomList .description {
     align-items: baseline;
 }
 
-.LeftPanel .name.unread {
+.RoomList .name.unread {
     font-weight: 600;
 }
 
-.LeftPanel .badge {
+.RoomList .badge {
     min-width: 1.6rem;
     height: 1.6rem;
     border-radius: 1.6rem;
@@ -195,7 +275,7 @@ button.styled {
     text-align: center;
 }
 
-.LeftPanel .badge.highlighted {
+.RoomList .badge.highlighted {
     background-color: #ff4b55;
 }
 
@@ -211,15 +291,18 @@ a {
     background-color: #3D88FA;
     color: white;
     border-radius: 10px;
+    z-index: 2;
 }
 
 .room-shown .SessionStatusView {
     top: 72px;
 }
 
-.RoomPlaceholderView {
+.room-placeholder {
     align-items: center;
     justify-content: center;
+    text-align: center;
+    padding: 20px;
 }
 
 .SessionPickerView li {
@@ -258,9 +341,35 @@ a {
     color: #FF4B55;
 }
 
+.RoomGridView > div.container {
+    border-right: 1px solid rgba(245, 245, 245, 0.90);
+    border-bottom: 1px solid rgba(245, 245, 245, 0.90);
+}
+
+.RoomGridView > .focused > .room-placeholder .unfocused {
+    display: none;
+}
+
+.RoomGridView > :not(.focused) > .room-placeholder .focused {
+    display: none;
+}
+
+.room-placeholder .unfocused {
+    color: #8D99A5;
+}
+
+
+.RoomGridView > div.focus-ring {
+    border: 2px solid rgba(134, 193, 165, 1);
+    border-radius: 12px;
+}
+
 .RoomHeader {
-    background: rgba(245, 245, 245, 0.90);
+    box-sizing: border-box;
-    padding: 10px;
+    height: 58px; /* 12 + 36 + 12 to align with filter field + margin */
+    background: white;
+    padding: 0 16px;
+    border-bottom: 1px solid rgba(245, 245, 245, 0.90);
 }
 
 .RoomHeader h2 {
@@ -268,23 +377,16 @@ a {
     font-weight: 600;
 }
 
-.RoomHeader button {
+.RoomHeader > :not(:last-child) {
-    width: 40px;
+    /* use margin-right because the first item,
-    height: 40px;
+    button.back might be hidden and then we don't
-    font-size: 1.5em;
+    want a margin-left on the second item*/
-    padding: 0;
+    margin-right: 8px;
-    background: white;
-    border: none;
-    font-weight: bolder;
-    line-height: 40px;
 }
 
-.back::before {
+button.back {
-    content: "☰";
+    background-image: url('icons/chevron-left.svg');
-}
+    background-position-x: 10px;
-
-.more::before {
-    content: "⋮";
 }
 
 .RoomHeader .topic {
@@ -297,15 +399,24 @@ a {
 
 .MessageComposer {
     border-top: 1px solid rgba(245, 245, 245, 0.90);
+    padding: 8px 16px;
+}
+
+.MessageComposer > :not(:first-child) {
+    margin-left: 12px;
 }
 
 .MessageComposer > input {
-    padding: 0.8em;
+    padding: 0 16px;
     border: none;
+    border-radius: 24px;
+    background: #F6F6F6;
+    height: 48px;
+    font-size: 14px;
+    font-family: "Inter", sans-serif;
 }
 
 .MessageComposer > button.send {
-    margin: 8px;
     width: 32px;
     height: 32px;
     display: block;
@@ -408,3 +519,7 @@ ul.Timeline > li.messageStatus .message-container > p {
     text-align: center;
     border-radius: 10px;
 }
+
+.GapView > :not(:first-child) {
+    margin-left: 12px;
+}

src/ui/web/css/timeline.css

@@ -76,7 +76,6 @@ limitations under the License.
     visibility: visible;
 }
 
-.GapView > div {
+.GapView > :nth-child(2) {
-    flex: 1 1 0;
+    flex: 1;
-    margin-right: 10px;
 }

src/ui/web/general/StaticView.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,13 +17,12 @@ limitations under the License.
 
 import {tag} from "../general/html.js";
 
-export class RoomPlaceholderView {
+export class StaticView {
-    constructor() {
+    constructor(render) {
-        this._root = null;
+        this._root = render(tag);
     }
 
     mount() {
-        this._root = tag.div({className: "RoomPlaceholderView"}, tag.h2("Choose a room on the left side."));
         return this._root;
     }
 

src/ui/web/session/RoomGridView.js

@@ -0,0 +1,47 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {RoomView} from "./room/RoomView.js";
+import {TemplateView} from "../general/TemplateView.js";
+import {StaticView} from "../general/StaticView.js";
+
+export class RoomGridView extends TemplateView {
+    render(t, vm) {
+        const children = [];
+        for (let i = 0; i < (vm.height * vm.width); i+=1) {
+            children.push(t.div({
+                onClick: () => vm.setFocusIndex(i),
+                onFocusin: () => vm.setFocusIndex(i),
+                className: {
+                    "container": true,
+                    [`tile${i}`]: true,
+                    "focused": vm => vm.focusIndex === i
+                },
+            },t.mapView(vm => vm.roomViewModelAt(i), roomVM => {
+                if (roomVM) {
+                    return new RoomView(roomVM);
+                } else {
+                    return new StaticView(t => t.div({className: "room-placeholder"}, [
+                        t.h2({className: "focused"}, vm.i18n`Select a room on the left`),
+                        t.h2({className: "unfocused"}, vm.i18n`Click to select this tile`),
+                    ]));
+                }
+            })));
+        }
+        children.push(t.div({className: vm => `focus-ring tile${vm.focusIndex}`}));
+        return t.div({className: "RoomGridView layout3x2"}, children);
+    }
+}

src/ui/web/session/SessionView.js

@@ -17,25 +17,29 @@ limitations under the License.
 import {LeftPanelView} from "./leftpanel/LeftPanelView.js";
 import {RoomView} from "./room/RoomView.js";
 import {TemplateView} from "../general/TemplateView.js";
-import {RoomPlaceholderView} from "./RoomPlaceholderView.js";
+import {StaticView} from "../general/StaticView.js";
 import {SessionStatusView} from "./SessionStatusView.js";
+import {RoomGridView} from "./RoomGridView.js";
 
 export class SessionView extends TemplateView {
     render(t, vm) {
         return t.div({
             className: {
                 "SessionView": true,
-                "room-shown": vm => !!vm.currentRoom
+                "room-shown": vm => vm.selectionId !== "placeholder"
             },
         }, [
             t.view(new SessionStatusView(vm.sessionStatusViewModel)),
             t.div({className: "main"}, [
                 t.view(new LeftPanelView(vm.leftPanelViewModel)),
-                t.mapView(vm => vm.currentRoom, currentRoom => {
+                t.mapView(vm => vm.selectionId, selectionId => {
-                    if (currentRoom) {
+                    switch (selectionId) {
-                        return new RoomView(currentRoom);
+                        case "roomgrid":
-                    } else {
+                            return new RoomGridView(vm.roomGridViewModel);
-                        return new RoomPlaceholderView();
+                        case "placeholder":
+                            return new StaticView(t => t.div({className: "room-placeholder"}, t.h2(vm.i18n`Choose a room on the left side.`)));
+                        default: //room id
+                            return new RoomView(vm.currentRoom);
                     }
                 })
             ])

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

@@ -18,30 +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()
         });
+        const clearButton = t.button({
+            onClick: clear,
+            title: options.i18n`Clear`,
+            "aria-label": options.i18n`Clear`
+        });
+        return t.div({className: "FilterField"}, [filterInput, clearButton]);
+    }
+}
+
+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: {
+                    utility: true,
+                    grid: true,
+                    on: vm => vm.gridEnabled
+                },
+                title: gridButtonLabel,
+                "aria-label": gridButtonLabel
+            })
+        ]);
+
         return t.div({className: "LeftPanel"}, [
-            t.div({className: "filter"}, [
+            utilitiesRow,
-                filterInput,
-                t.button({onClick: () => {
-                    filterInput.value = "";
-                    vm.clearFilter();
-                }}, vm.i18n`Clear`)
-            ]),
             t.view(new ListView(
                 {
                     className: "RoomList",

src/ui/web/session/room/RoomView.js

@@ -26,7 +26,7 @@ export class RoomView extends TemplateView {
         return t.div({className: "RoomView"}, [
             t.div({className: "TimelinePanel"}, [
                 t.div({className: "RoomHeader"}, [
-                    t.button({className: "back", onClick: () => vm.close()}),
+                    t.button({className: "utility back", onClick: () => vm.close()}),
                     renderAvatar(t, vm, 32),
                     t.div({className: "room-description"}, [
                         t.h2(vm => vm.name),

src/utils/Disposables.js

@@ -35,6 +35,13 @@ export class Disposables {
         return disposable;
     }
 
+    untrack(disposable) {
+        const idx = this._disposables.indexOf(disposable);
+        if (idx >= 0) {
+            this._disposables.splice(idx, 1);
+        }
+    }
+
     dispose() {
         if (this._disposables) {
             for (const d of this._disposables) {

yarn.lock

@@ -933,6 +933,18 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+autoprefixer@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.0.1.tgz#e2d9000f84ebd98d77b7bc16f8adb2ff1f7bb946"
+  integrity sha512-aQo2BDIsoOdemXUAOBpFv4ZQa2DrOtEufarYhtFsK1088Ca0TUwu/aQWf0M3mrILXZ3mTIVn1lR3hPW8acacsw==
+  dependencies:
+    browserslist "^4.14.5"
+    caniuse-lite "^1.0.30001137"
+    colorette "^1.2.1"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss-value-parser "^4.1.0"
+
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
@@ -980,6 +992,16 @@ browserslist@^4.12.0, browserslist@^4.8.5:
     escalade "^3.0.2"
     node-releases "^1.1.60"
 
+browserslist@^4.14.5:
+  version "4.14.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.5.tgz#1c751461a102ddc60e40993639b709be7f2c4015"
+  integrity sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==
+  dependencies:
+    caniuse-lite "^1.0.30001135"
+    electron-to-chromium "^1.3.571"
+    escalade "^3.1.0"
+    node-releases "^1.1.61"
+
 bs58@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
@@ -997,6 +1019,11 @@ caniuse-lite@^1.0.30001111:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001115.tgz#c04cd828883ba47f6f776312e0817bcc9040cfa4"
   integrity sha512-NZrG0439ePYna44lJX8evHX2L7Z3/z3qjVLnHgbBb/duNEnGo348u+BQS5o4HTWcrb++100dHFrU36IesIrC1Q==
 
+caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137:
+  version "1.0.30001144"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001144.tgz#bca0fffde12f97e1127a351fec3bfc1971aa3b3d"
+  integrity sha512-4GQTEWNMnVZVOFG3BK0xvGeaDAtiPAbG2N8yuMXuXzx/c2Vd4XoMPO8+E918zeXn5IF0FRVtGShBfkfQea2wHQ==
+
 chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -1030,6 +1057,11 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
+colorette@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
+  integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
+
 colors@^1.3.3:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
@@ -1190,6 +1222,11 @@ electron-to-chromium@^1.3.523:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.534.tgz#fc7af8518dd00a5b22a24aed3f116b5d097e2330"
   integrity sha512-7x2S3yUrspNHQOoPk+Eo+iHViSiJiEGPI6BpmLy1eT2KRNGCkBt/NUYqjfXLd1DpDCQp7n3+LfA1RkbG+LqTZQ==
 
+electron-to-chromium@^1.3.571:
+  version "1.3.578"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.578.tgz#e6671936f4571a874eb26e2e833aa0b2c0b776e0"
+  integrity sha512-z4gU6dA1CbBJsAErW5swTGAaU2TBzc2mPAonJb00zqW1rOraDo2zfBMDRvaz9cVic+0JEZiYbHWPw/fTaZlG2Q==
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -1214,6 +1251,11 @@ escalade@^3.0.2:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
   integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==
 
+escalade@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.0.tgz#e8e2d7c7a8b76f6ee64c2181d6b8151441602d4e"
+  integrity sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -1382,6 +1424,18 @@ is-reference@^1.2.1:
   dependencies:
     "@types/estree" "*"
 
+isarray@1.0.0, isarray@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
+  dependencies:
+    isarray "1.0.0"
+
 js-cleanup@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-cleanup/-/js-cleanup-1.0.1.tgz#1d38080c7ee92e1d2d2b94054d0a33c48951e0df"
@@ -1425,6 +1479,14 @@ levenary@^1.1.1:
   dependencies:
     leven "^3.1.0"
 
+line-column@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
+  integrity sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=
+  dependencies:
+    isarray "^1.0.0"
+    isobject "^2.0.0"
+
 lodash@^4.15.0:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
@@ -1506,11 +1568,26 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+nanoid@^3.1.12:
+  version "3.1.12"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.12.tgz#6f7736c62e8d39421601e4a0c77623a97ea69654"
+  integrity sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A==
+
 node-releases@^1.1.60:
   version "1.1.60"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"
   integrity sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==
 
+node-releases@^1.1.61:
+  version "1.1.61"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.61.tgz#707b0fca9ce4e11783612ba4a2fcba09047af16e"
+  integrity sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
 nth-check@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -1518,6 +1595,11 @@ nth-check@~1.0.1:
   dependencies:
     boolbase "~1.0.0"
 
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+
 object-keys@^1.0.11, object-keys@^1.0.12:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -1631,6 +1713,11 @@ postcss-value-parser@^3.2.3:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
+postcss-value-parser@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
+  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+
 postcss@^6.0.8:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
@@ -1649,7 +1736,7 @@ postcss@^7.0.1:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32:
+postcss@^7.0.2, postcss@^7.0.26:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@@ -1658,6 +1745,16 @@ postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.1.tgz#c3a287dd10e4f6c84cb3791052b96a5d859c9389"
+  integrity sha512-9DGLSsjooH3kSNjTZUOt2eIj2ZTW0VI2PZ/3My+8TC7KIbH2OKwUlISfDsf63EP4aiRUt3XkEWMWvyJHvJelEg==
+  dependencies:
+    colorette "^1.2.1"
+    line-column "^1.0.2"
+    nanoid "^3.1.12"
+    source-map "^0.6.1"
+
 range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"