Use element home screen to create new chats by default

lib/Matrix.js

@@ -261,8 +261,8 @@ function useMatrixProvider(activeMatrixAuthenticationProviders) {
             leaveMatrixRoom.event_id && deleteElement(roomId);
         };
 
-        const createRoom = async (name, isSpace, topic, joinRule, type, template, application) => {
-            const room = await authenticationProvider.createRoom(name, isSpace, topic, joinRule, type, template, application);
+        const createRoom = async (name, isSpace, topic, joinRule, type, template, application, visibility, historyVisible, encrypted) => {
+            const room = await authenticationProvider.createRoom(name, isSpace, topic, joinRule, type, template, application, visibility, historyVisible, encrypted);
             if (isSpace) {
                 if (!spaces.has(room.room_id)) {
                     setSpaces(setRoom(room.room_id));

lib/auth/MatrixAuthProvider.js

@@ -94,19 +94,19 @@ class MatrixAuthProvider {
         return this.matrixClient.http.authedRequest('GET', `/rooms/${roomId}/messages`, { limit: limit, dir: 'b', filter: JSON.stringify({ types: ['m.room.message'] }) }, undefined, { abortSignal });
     }
 
-    async createRoom(name, isSpace, topic, joinRule, type, template) {
+    async createRoom(name, isSpace, topic, joinRule, type, template, application, visibility, historyVisible, encrypted) {
         const opts = {
             name: name,
             room_version: '9',
             preset: 'private_chat',
             topic: topic,
-            visibility: 'private', // by default we want rooms and spaces to be private, this can later be changed either in /content or /moderate
+            visibility: visibility || 'private', // by default we want rooms and spaces to be private, this can later be changed either in /content or /moderate
             creation_content: {
                 type: isSpace ? 'm.space' : 'm.room',
             },
             initial_state: [{
                 type: 'm.room.history_visibility',
-                content: { history_visibility: 'world_readable' }, // history has to be world_readable so content of the rooms is visible for everyone who joins the room at a later point in time
+                content: { history_visibility: historyVisible || 'world_readable' }, // history has to be world_readable so content of the rooms is visible for everyone who joins the room at a later point in time
             },
             {
                 type: 'm.room.join_rules',
@@ -130,12 +130,20 @@ class MatrixAuthProvider {
                 users_default: 0,
             },
         };
+        encrypted && opts.initial_state.push({
+            type: 'm.room.encryption',
+            state_key: '',
+            content: {
+                algorithm: 'm.megolm.v1.aes-sha2',
+            },
 
+        });
         const room = await this.matrixClient.createRoom(opts);
         const medienhausMetaEvent = {
             type: type,
             template: template,
-            version: '0.4',
+            application: application,
+            version: '0.5',
         };
         await this.matrixClient.sendStateEvent(room.room_id, 'dev.medienhaus.meta', medienhausMetaEvent);
 

pages/chat/[[...roomId]].js

@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import _ from 'lodash';
+import _, { debounce } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import getConfig from 'next/config';
 import { useRouter } from 'next/router';
@@ -9,6 +9,12 @@
 import { useAuth } from '../../lib/Auth';
 import { useMatrix } from '../../lib/Matrix';
 import IframeLayout from '../../components/layouts/iframe';
+import { ServiceSubmenu } from '../../components/UI/ServiceSubmenu';
+import Form from '../../components/UI/Form';
+import LoadingSpinnerInline from '../../components/UI/LoadingSpinnerInline';
+import { ServiceTable } from '../../components/UI/ServiceTable';
+import Bin from '../../assets/icons/bin.svg';
+import TextButton from '../../components/UI/TextButton';
 import { breakpoints } from '../../components/_breakpoints';
 
 const sortRooms = function(room) {
@@ -38,39 +44,53 @@
   background: var(--color-foreground);
 `;
 
-const SidebarListEntryWrapper = styled.a`
+const Checkbox = styled.div`
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 0.3rem;
-`;
-
-const RoomName = styled.span`
-  flex: 1 0;
-  height: 2rem;
-  overflow: hidden;
-  line-height: 2rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  justify-content: space-between;
 `;
 
 const SidebarListEntry = function({ room }) {
+    const [isLeavingRoom, setIsLeavingRoom] = useState(false);
+    const { t } = useTranslation();
+    const auth = useAuth();
+    const matrix = useMatrix(auth.getAuthenticationProvider('matrix'));
+
+    const handleLeave = async (roomId) => {
+        setIsLeavingRoom(true);
+        await matrix.leaveRoom(roomId)
+            .catch(error => console.debug(error));
+        setIsLeavingRoom(false);
+    };
+
     return (
-        <Link href={`/chat/${room.roomId}`} passHref>
-            <SidebarListEntryWrapper>
-                { room.avatar ? (
+        <ServiceTable.Row>
+            <ServiceTable.Cell selected={false}>
+                <Link href={`/chat/${room.roomId}`} passHref>
+                    <span>
+                        { room.avatar && (
+                        // Render the avatar if we have one
+                            <Avatar src={room.avatar} alt={room.name} />
+                        ) }
+                        { /* { room.avatar ? (
                     // Render the avatar if we have one
-                    <Avatar src={room.avatar} alt={room.name} />
-                ) : (
+                        <Avatar src={room.avatar} alt={room.name} />
+                    ) : (
                     // Render an empty GIF if we don't have an avatar
-                    <Avatar src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
-                ) }
-                <RoomName>{ room.name }</RoomName>
-                { room.notificationCount > 0 && (
-                    <UnreadNotificationBadge>{ room.notificationCount }</UnreadNotificationBadge>
-                ) }
-            </SidebarListEntryWrapper>
-        </Link>
+                        <Avatar src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
+                    ) } */ }
+                        { room.name }
+                        { room.notificationCount > 0 && (
+                            <UnreadNotificationBadge>{ room.notificationCount }</UnreadNotificationBadge>
+                        ) }
+                    </span>
+                </Link>
+            </ServiceTable.Cell>
+            <ServiceTable.Cell>
+                <TextButton title={t('Leave room and remove from my library')} onClick={() => handleLeave(room.roomId)}>
+                    { isLeavingRoom ? <LoadingSpinnerInline /> : <Bin fill="var(--color-foreground)" /> }
+                </TextButton>
+            </ServiceTable.Cell>
+        </ServiceTable.Row>
     );
 };
 
@@ -100,6 +120,13 @@
                 /* Hide the search bar buttons to only allow searching inside current room */
                 .mx_SearchBar_buttons { display: none !important }
 
+                /* @TODO: This can be improved... and should probably not target mobile viewports. It's to make the */
+                /* header look like it's on line with our header elements from first & second sidebar. */
+                .mx_RoomHeader_wrapper { height: unset; padding: 0; border-bottom: none }
+                .mx_RoomHeader { flex: unset; -webkit-box-flex: unset; padding: 2.85rem 0 } 
+                .mx_RoomHeader_name { font-weight: bold }
+                .mx_HomePage_default_buttons { display: initial !important }
+                .mx_HomePage_default_wrapper > div:first-child { display: none }
                 .mx_RoomHeader {
                     position: absolute; right: 0; left: 0; z-index: 10;
                     background: rgba(255, 255, 255, 90%); backdrop-filter: blur(4px);
@@ -149,10 +176,46 @@
         .sortBy(sortRooms)
         .value();
 
+    const ActionNewRoom = ({ callbackDone }) => {
+        const [roomName, setRoomName] = useState('');
+        const [topic, setTopic] = useState('');
+        const [encrypted, setEncrypted] = useState(false);
+        const [isLoading, setIsLoading] = useState(false);
+
+        const createNewRoom = async () => {
+            setIsLoading(true);
+            // eslint-disable-next-line no-undef
+            if (process.env.NODE_ENV === 'development') console.log('creating room for ' + roomName);
+            await matrix.createRoom(roomName, false, topic, 'invite', 'item', 'chat', getConfig().publicRuntimeConfig.name, 'private', 'shared', encrypted)
+                .catch((error => console.debug(error)));
+            // router.push(`/chat/${roomId}`);
+
+            callbackDone && callbackDone();
+            setIsLoading(false);
+        };
+
+        return (
+            <Form onSubmit={(e) => { e.preventDefault(); createNewRoom(); }}>
+                <input type="text" placeholder={t('room name')} value={roomName} onChange={(e) => setRoomName(e.target.value)} />
+                <input type="text" placeholder={t('topic (optional)')} value={topic} onChange={(e) => setTopic(e.target.value)} />
+                <Checkbox><label htmlFor="encrypted">Encrypted</label><input type="checkbox" name="encrypted" checked={encrypted} onChange={() => setEncrypted(prevState => !prevState)} /></Checkbox>
+                <button type="submit" disabled={!roomName}>{ isLoading ?<LoadingSpinnerInline inverted /> : t('Create room') }</button>
+            </Form>
+        );
+    };
+
+    const submenuItems = _.filter([
+        { value: 'newRoom', actionComponentToRender: ActionNewRoom, label: t('New room') },
+
+    ]);
+
     return (
         <>
             <IframeLayout.Sidebar>
-                <h2>/chat</h2>
+                <ServiceSubmenu
+                    title={<h2>/chat</h2>}
+                    subheadline={t('What would you like to do?')}
+                    items={submenuItems} />
                 { matrix.invites.size > 0 && (
                     <>
                         <details open>
@@ -169,15 +232,16 @@
                 <br />
                 <details open>
                     <summary><h3 style={{ display: 'inline-block', marginBottom: '1rem' }}>{ t('Rooms') }</h3></summary>
-                    { otherRooms && otherRooms.map((room) => <SidebarListEntry key={room.roomId} room={room} />) }
+                    { otherRooms && otherRooms.map((room) => {
+                        return <ServiceTable><SidebarListEntry key={room.roomId} room={room} /></ServiceTable>;
+                    }) }
                 </details>
                 <br />
             </IframeLayout.Sidebar>
-            { roomId && (
-                <IframeLayout.IframeWrapper>
-                    <iframe src={`${getConfig().publicRuntimeConfig.chat.pathToElement}/#/room/${roomId}`} ref={iframe} />
-                </IframeLayout.IframeWrapper>
-            ) }
+
+            <IframeLayout.IframeWrapper>
+                <iframe src={`${getConfig().publicRuntimeConfig.chat.pathToElement}/#/${roomId ? 'room/' + roomId : 'home' }`} ref={iframe} />
+            </IframeLayout.IframeWrapper>
         </>
     );
 }