Add a minimized view to the new room list

This covers everything except breadcrumbs, as those are somewhat undecided from a design perspective.

src/components/structures/LeftPanel2.tsx

@@ -40,7 +40,7 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
  *******************************************************************/
 
 interface IProps {
-    // TODO: Support collapsed state
+    isMinimized: boolean;
 }
 
 interface IState {
@@ -106,11 +106,22 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         if (this.state.showBreadcrumbs) {
             breadcrumbs = (
                 <div className="mx_LeftPanel2_headerRow mx_LeftPanel2_breadcrumbsContainer">
-                    <RoomBreadcrumbs2 />
+                    {this.props.isMinimized ? null : <RoomBreadcrumbs2 />}
                 </div>
             );
         }
 
+        let name = <span className="mx_LeftPanel2_userName">{displayName}</span>;
+        let buttons = (
+            <span className="mx_LeftPanel2_headerButtons">
+                <UserMenuButton />
+            </span>
+        );
+        if (this.props.isMinimized) {
+            name = null;
+            buttons = null;
+        }
+
         return (
             <div className="mx_LeftPanel2_userHeader">
                 <div className="mx_LeftPanel2_headerRow">
@@ -125,10 +136,8 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                             className="mx_LeftPanel2_userAvatar"
                         />
                     </span>
-                    <span className="mx_LeftPanel2_userName">{displayName}</span>
-                    <span className="mx_LeftPanel2_headerButtons">
-                        <UserMenuButton />
-                    </span>
+                    {name}
+                    {buttons}
                 </div>
                 {breadcrumbs}
             </div>
@@ -140,7 +149,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
 
         return (
             <div className="mx_LeftPanel2_filterContainer">
-                <RoomSearch onQueryUpdate={this.onSearch} />
+                <RoomSearch onQueryUpdate={this.onSearch} isMinimized={this.props.isMinimized} />
                 <AccessibleButton
                     tabIndex={-1}
                     className='mx_LeftPanel2_exploreButton'
@@ -166,12 +175,14 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
             searchFilter={this.state.searchFilter}
             onFocus={() => {/*TODO*/}}
             onBlur={() => {/*TODO*/}}
+            isMinimized={this.props.isMinimized}
         />;
 
         // TODO: Conference handling / calls
 
         const containerClasses = classNames({
             "mx_LeftPanel2": true,
+            "mx_LeftPanel2_minimized": this.props.isMinimized,
         });
 
         return (

src/components/structures/LoggedInView.tsx

@@ -677,7 +677,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         if (SettingsStore.isFeatureEnabled("feature_new_room_list")) {
             // TODO: Supply props like collapsed and disabled to LeftPanel2
             leftPanel = (
-                <LeftPanel2 />
+                <LeftPanel2 isMinimized={this.props.collapseLhs || false} />
             );
         }
 

src/components/structures/RoomSearch.tsx

@@ -35,6 +35,7 @@ import { Action } from "../../dispatcher/actions";
 
 interface IProps {
     onQueryUpdate: (newQuery: string) => void;
+    isMinimized: boolean;
 }
 
 interface IState {
@@ -75,6 +76,10 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         this.onChange();
     };
 
+    private openSearch = () => {
+        defaultDispatcher.dispatch({action: "show_left_panel"});
+    };
+
     private onChange = () => {
         if (!this.inputRef.current) return;
         this.setState({query: this.inputRef.current.value});
@@ -111,6 +116,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         const classes = classNames({
             'mx_RoomSearch': true,
             'mx_RoomSearch_expanded': this.state.query || this.state.focused,
+            'mx_RoomSearch_minimized': this.props.isMinimized,
         });
 
         const inputClasses = classNames({
@@ -118,26 +124,48 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
             'mx_RoomSearch_inputExpanded': this.state.query || this.state.focused,
         });
 
-        return (
-            <div className={classes}>
-                <div className='mx_RoomSearch_icon'/>
-                <input
-                    type="text"
-                    ref={this.inputRef}
-                    className={inputClasses}
-                    value={this.state.query}
-                    onFocus={this.onFocus}
-                    onBlur={this.onBlur}
-                    onChange={this.onChange}
-                    onKeyDown={this.onKeyDown}
-                    placeholder={_t("Search")}
-                    autoComplete="off"
-                />
+        let icon = (
+            <div className='mx_RoomSearch_icon'/>
+        );
+        let input = (
+            <input
+                type="text"
+                ref={this.inputRef}
+                className={inputClasses}
+                value={this.state.query}
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+                onChange={this.onChange}
+                onKeyDown={this.onKeyDown}
+                placeholder={_t("Search")}
+                autoComplete="off"
+            />
+        );
+        let clearButton = (
+            <AccessibleButton
+                tabIndex={-1}
+                className='mx_RoomSearch_clearButton'
+                onClick={this.clearInput}
+            />
+        );
+
+        if (this.props.isMinimized) {
+            icon = (
                 <AccessibleButton
                     tabIndex={-1}
-                    className='mx_RoomSearch_clearButton'
-                    onClick={this.clearInput}
+                    className='mx_RoomSearch_icon'
+                    onClick={this.openSearch}
                 />
+            );
+            input = null;
+            clearButton = null;
+        }
+
+        return (
+            <div className={classes}>
+                {icon}
+                {input}
+                {clearButton}
             </div>
         );
     }