Use element home screen to create new chats by default

.gitignore

@@ -19,6 +19,7 @@ config.js
 
 # misc
 .DS_Store
+/.idea
 *.pem
 
 # debug

components/UI/ServiceLink.js

@@ -19,24 +19,70 @@ const LockIconWrapper = styled(Icon)`
   }
 `;
 
-const ServiceLink = forwardRef(({ name, href, selected, passwordProtected }, ref) => {
+const BlockLink = styled(Link)`
+  display: block;
+`;
+
+const NotificationBadge = styled.span`
+  justify-self: end;
+  padding: 0 calc(var(--margin) / 4);
+  line-height: var(--line-height);
+  color: rgb(255 255 255);
+  background-color: var(--color-notification);
+
+  > small {
+    font-weight: 600;
+  }
+`;
+
+const Avatar = styled.img`
+  position: relative;
+  float: left;
+  width: 2rem;
+  height: 2rem;
+  background-color: var(--color-foreground);
+
+  &.placeholder {
+    backdrop-filter: invert(100%);
+  }
+`;
+
+const ServiceLink = forwardRef(({ name, href, selected, passwordProtected, notifications, avatar }, ref) => {
     const { t } = useTranslation();
 
     return (
         <ServiceTable.Row>
-            <ServiceTable.Cell>
-                { /* Tell if this is our active item by displaying an arrow */ }
-                { selected && <span style={{ float: 'right' }}>→</span> }
-                <Link
-                    style={{ display: 'block' }}
+            { avatar && (
+                <ServiceTable.Cell>
+                    <Avatar src={avatar} alt={name} />
+                </ServiceTable.Cell>)
+            }
+            <ServiceTable.Cell width="100%">
+                <BlockLink
                     ref={ref}
                     href={href}
                 >
                     { name }
                     { /* Show a lock icon if this Link is password protected */ }
                     { passwordProtected && <LockIconWrapper title={t('password protected')}><LockIcon /></LockIconWrapper> }
-                </Link>
+                </BlockLink>
             </ServiceTable.Cell>
+            { /* Tell if this is our active item by displaying an arrow */ }
+            { selected &&
+                <ServiceTable.Cell align="right">
+                    →
+                </ServiceTable.Cell>
+            }
+            { /* Show notification badge if there are notifications */ }
+            { !selected && notifications > 0 &&
+                <ServiceTable.Cell>
+                    <NotificationBadge>
+                        <small>
+                            { notifications < 100 ? notifications : '99+' }
+                        </small>
+                    </NotificationBadge>
+                </ServiceTable.Cell>
+            }
         </ServiceTable.Row>
     );
 });

components/UI/ServiceSubmenu.js

@@ -35,7 +35,7 @@ const Submenu = styled.aside`
   }
 `;
 
-export function ServiceSubmenu({ title, icon, subheadline, items, disabled }) {
+export function ServiceSubmenu({ title, icon, subheadline, items, disabled, onClick }) {
     const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState('');
@@ -53,7 +53,7 @@ export function ServiceSubmenu({ title, icon, subheadline, items, disabled }) {
                 { title && title }
                 <ToggleButton
                     disabled={disabled}
-                    onClick={handleMenuToggle}>
+                    onClick={onClick || handleMenuToggle}>
                     { icon ?
                         icon
                         :
@@ -63,7 +63,7 @@ export function ServiceSubmenu({ title, icon, subheadline, items, disabled }) {
                     }
                 </ToggleButton>
             </Header>
-            { isOpen && (
+            { isOpen && items && (
                 <Submenu>
                     { subheadline && <h3>{ subheadline }</h3> }
                     <select

components/_breakpoints.js

@@ -1,4 +1,6 @@
 export const breakpoints = {
     phoneOnly: `(max-width: 1079px)`,
     tabletAndAbove: `(min-width: 1080px)`,
+    phoneBreakpoint: 1079,
+    tabletAndAboveBreakpoint: 1080,
 };

lib/auth/MatrixAuthProvider.js

@@ -112,21 +112,22 @@ class MatrixAuthProvider {
      * @param {string} type - The type of the room or space.
      * @param {string} template - The template for the room or space.
      * @param {string} parentId - The ID of the parent space, if any.
+     * @TODO: Missing some @param declarations
      * @returns {Promise<Object>} A promise that resolves to the created room or space.
      * @throws {Error} If there was an error creating the room or space.
      */
-    async createRoom(name, isSpace, topic, joinRule, type, template, parentId) {
+    async createRoom(name, isSpace, topic, joinRule, type, template, parentId, application, visibility, historyVisible, encrypted) {
         const opts = {
             name: name,
             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',
@@ -152,6 +153,16 @@ class MatrixAuthProvider {
             },
         };
 
+        if (encrypted) {
+            opts.initial_state.push({
+                type: 'm.room.encryption',
+                state_key: '',
+                content: {
+                    algorithm: 'm.megolm.v1.aes-sha2',
+                },
+            });
+        }
+
         if (parentId) {
             opts.initial_state.push({
                 // Spec: https://spec.matrix.org/v1.9/client-server-api/#mspaceparent
@@ -169,7 +180,8 @@ class MatrixAuthProvider {
         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);