Live location sharing: maximised view sidebar container (#8360)

* add h4

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add mixin to clear list style

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add basic sidebar container

Signed-off-by: Kerry Archibald <kerrya@element.io>

* open list view button on beaconviewdialog

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update tests for new utils

Signed-off-by: Kerry Archibald <kerrya@element.io>

src/components/views/beacon/BeaconViewDialog.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { MatrixClient } from 'matrix-js-sdk/src/client';
 import {
     Beacon,
@@ -22,6 +22,7 @@ import {
 } from 'matrix-js-sdk/src/matrix';
 import maplibregl from 'maplibre-gl';
 
+import { Icon as LiveLocationIcon } from '../../../../res/img/location/live-location.svg';
 import { useLiveBeacons } from '../../../utils/beacon/useLiveBeacons';
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import BaseDialog from "../dialogs/BaseDialog";
@@ -34,6 +35,7 @@ import { getGeoUri } from '../../../utils/beacon';
 import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
+import DialogSidebar from './DialogSidebar';
 
 interface IProps extends IDialogProps {
     roomId: Room['roomId'];
@@ -64,6 +66,8 @@ const BeaconViewDialog: React.FC<IProps> = ({
 }) => {
     const liveBeacons = useLiveBeacons(roomId, matrixClient);
 
+    const [isSidebarOpen, setSidebarOpen] = useState(false);
+
     const bounds = getBeaconBounds(liveBeacons);
     const centerGeoUri = focusBeacon?.latestLocationState?.uri || getBoundsCenter(bounds);
 
@@ -108,6 +112,18 @@ const BeaconViewDialog: React.FC<IProps> = ({
                         </AccessibleButton>
                     </div>
                 }
+                { isSidebarOpen ?
+                    <DialogSidebar beacons={liveBeacons} requestClose={() => setSidebarOpen(false)} /> :
+                    <AccessibleButton
+                        kind='primary'
+                        onClick={() => setSidebarOpen(true)}
+                        data-test-id='beacon-view-dialog-open-sidebar'
+                        className='mx_BeaconViewDialog_viewListButton'
+                    >
+                        <LiveLocationIcon height={12} />&nbsp;
+                        { _t('View list') }
+                    </AccessibleButton>
+                }
             </MatrixClientContext.Provider>
         </BaseDialog>
     );

src/components/views/beacon/DialogSidebar.tsx

@@ -0,0 +1,50 @@
+/*
+Copyright 2022 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 React from 'react';
+import { Beacon } from 'matrix-js-sdk/src/matrix';
+
+import { Icon as CloseIcon } from '../../../../res/img/image-view/close.svg';
+import { _t } from '../../../languageHandler';
+import AccessibleButton from '../elements/AccessibleButton';
+import Heading from '../typography/Heading';
+
+interface Props {
+    beacons: Beacon[];
+    requestClose: () => void;
+}
+
+const DialogSidebar: React.FC<Props> = ({ beacons, requestClose }) => {
+    return <div className='mx_DialogSidebar'>
+        <div className='mx_DialogSidebar_header'>
+            <Heading size='h4'>{ _t('View List') }</Heading>
+            <AccessibleButton
+                className='mx_DialogSidebar_closeButton'
+                onClick={requestClose}
+                title={_t('Close sidebar')}
+                data-test-id='dialog-sidebar-close'
+            >
+                <CloseIcon className='mx_DialogSidebar_closeButtonIcon' />
+            </AccessibleButton>
+        </div>
+        <ol className='mx_DialogSidebar_list'>
+            { /* TODO nice elements */ }
+            { beacons.map((beacon, index) => <li key={beacon.identifier}>{ index }</li>) }
+        </ol>
+    </div>;
+};
+
+export default DialogSidebar;

src/components/views/typography/Heading.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
-type Size = 'h1' | 'h2' | 'h3';
+type Size = 'h1' | 'h2' | 'h3' | 'h4';
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     size: Size;
 }