Add space settings

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/navigation/Drawer.scss

@@ -10,6 +10,13 @@
     1px solid var(--bg-surface-border),
   );
 
+  & .header {
+    padding: var(--sp-extra-tight);
+    & > .header__title-wrapper {
+      @include dir.side(margin, var(--sp-ultra-tight), 0);
+    }
+  }
+
   &__content-wrapper {
     @extend .cp-fx__item-one;
     @extend .cp-fx__column;

src/app/organisms/navigation/DrawerHeader.jsx

@@ -1,16 +1,20 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import './DrawerHeader.scss';
 
 import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import {
-  openPublicRooms, openCreateRoom, openInviteUser,
+  openSpaceSettings, openPublicRooms, openCreateRoom, openInviteUser,
 } from '../../../client/action/navigation';
 import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
 
+import { blurOnBubbling } from '../../atoms/button/script';
+
 import Text from '../../atoms/text/Text';
+import RawIcon from '../../atoms/system-icons/RawIcon';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import IconButton from '../../atoms/button/IconButton';
 import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
@@ -18,12 +22,14 @@ import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/Cont
 import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
 import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
 import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
 import PinIC from '../../../../public/res/ic/outlined/pin.svg';
 import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
 
 function DrawerHeader({ selectedTab, spaceId }) {
   const [, forceUpdate] = useState({});
   const mx = initMatrix.matrixClient;
+  const { spaceShortcut } = initMatrix.roomList;
   const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages';
 
   const room = mx.getRoom(spaceId);
@@ -31,17 +37,30 @@ function DrawerHeader({ selectedTab, spaceId }) {
 
   return (
     <Header>
-      <TitleWrapper>
-        <Text variant="s1" weight="medium" primary>{twemojify(spaceName) || tabName}</Text>
-      </TitleWrapper>
+      {spaceName ? (
+        <button
+          className="drawer-header__btn"
+          onClick={() => openSpaceSettings(spaceId)}
+          type="button"
+          onMouseUp={(e) => blurOnBubbling(e, '.drawer-header__btn')}
+        >
+          <TitleWrapper>
+            <Text variant="s1" weight="medium" primary>{twemojify(spaceName)}</Text>
+          </TitleWrapper>
+          <RawIcon size="small" src={ChevronBottomIC} />
+        </button>
+      ) : (
+        <TitleWrapper>
+          <Text variant="s1" weight="medium" primary>{tabName}</Text>
+        </TitleWrapper>
+      )}
       {spaceName && (
         <IconButton
           size="extra-small"
-          variant="surface"
-          tooltip={initMatrix.roomList.spaceShortcut.has(spaceId) ? 'Unpin' : 'Pin to sidebar'}
-          src={initMatrix.roomList.spaceShortcut.has(spaceId) ? PinFilledIC : PinIC}
+          tooltip={spaceShortcut.has(spaceId) ? 'Unpin' : 'Pin to sidebar'}
+          src={spaceShortcut.has(spaceId) ? PinFilledIC : PinIC}
           onClick={() => {
-            if (initMatrix.roomList.spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId);
+            if (spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId);
             else createSpaceShortcut(spaceId);
             forceUpdate({});
           }}
@@ -72,7 +91,6 @@ function DrawerHeader({ selectedTab, spaceId }) {
           />
         </>
       )}
-      {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
     </Header>
   );
 }

src/app/organisms/navigation/DrawerHeader.scss

@@ -0,0 +1,28 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.drawer-header__btn {
+  min-width: 0;
+  @extend .cp-fx__row--s-c;
+  @include dir.side(margin, 0, auto);
+  padding: var(--sp-ultra-tight);
+  border-radius: calc(var(--bo-radius) / 2);
+  cursor: pointer;
+  
+  & .header__title-wrapper {
+    @include dir.side(margin, 0, var(--sp-extra-tight));
+  }
+
+  @media (hover:hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+      box-shadow: var(--bs-surface-outline);
+    }
+  }
+  &:focus,
+  &:active {
+    background-color: var(--bg-surface-active);
+    box-shadow: var(--bs-surface-outline);
+    outline: none;
+  }
+}