From 11f395f65f88d0921a31503c9f13c64e96acc34c Mon Sep 17 00:00:00 2001
From: Gregory Anders <8965202+gpanders@users.noreply.github.com>
Date: Mon, 3 Jan 2022 06:16:43 -0700
Subject: [PATCH 1/6] Add toggle to use browser's preferred theme (#224)

* Add Auto theme that uses browser's preferred color scheme

This will use dark mode automatically if the browser requests it.

* fixup! Add Auto theme that uses browser's preferred color scheme

* Use a toggle to use system theme
---
 src/app/organisms/settings/Settings.jsx | 38 +++++++++++++++++--------
 src/client/action/settings.js           |  6 ++++
 src/client/state/cons.js                |  2 ++
 src/client/state/settings.js            | 28 ++++++++++++++++++
 src/index.scss                          | 14 +++++++--
 5 files changed, 74 insertions(+), 14 deletions(-)

diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index e31af8f3..9a3db0fd 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -5,7 +5,7 @@ import './Settings.scss';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
-import { toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings';
+import { toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings';
 import logout from '../../../client/action/logout';
 
 import Text from '../../atoms/text/Text';
@@ -49,20 +49,34 @@ function AppearanceSection() {
   return (
     <div className="settings-content">
       <SettingTile
-        title="Theme"
-        content={(
-          <SegmentedControls
-            selected={settings.getThemeIndex()}
-            segments={[
-              { text: 'Light' },
-              { text: 'Silver' },
-              { text: 'Dark' },
-              { text: 'Butter' },
-            ]}
-            onSelect={(index) => settings.setTheme(index)}
+        title="Follow system theme"
+        options={(
+          <Toggle
+            isActive={settings.useSystemTheme}
+            onToggle={() => { toggleSystemTheme(); updateState({}); }}
           />
         )}
+        content={<Text variant="b3">Use light or dark mode based on the system's settings.</Text>}
       />
+      {(() => {
+        if (!settings.useSystemTheme) {
+          return <SettingTile
+            title="Theme"
+            content={(
+              <SegmentedControls
+                selected={settings.getThemeIndex()}
+                segments={[
+                  { text: 'Light' },
+                  { text: 'Silver' },
+                  { text: 'Dark' },
+                  { text: 'Butter' },
+                ]}
+                onSelect={(index) => settings.setTheme(index)}
+              />
+            )}
+          />
+        }
+      })()}
       <SettingTile
         title="Markdown formatting"
         options={(
diff --git a/src/client/action/settings.js b/src/client/action/settings.js
index d868c156..e849702b 100644
--- a/src/client/action/settings.js
+++ b/src/client/action/settings.js
@@ -1,6 +1,12 @@
 import appDispatcher from '../dispatcher';
 import cons from '../state/cons';
 
+export function toggleSystemTheme() {
+  appDispatcher.dispatch({
+    type: cons.actions.settings.TOGGLE_SYSTEM_THEME,
+  });
+}
+
 export function toggleMarkdown() {
   appDispatcher.dispatch({
     type: cons.actions.settings.TOGGLE_MARKDOWN,
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index de220303..84359a8f 100644
--- a/src/client/state/cons.js
+++ b/src/client/state/cons.js
@@ -54,6 +54,7 @@ const cons = {
       },
     },
     settings: {
+      TOGGLE_SYSTEM_THEME: 'TOGGLE_SYSTEM_THEME',
       TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
       TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
       TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
@@ -110,6 +111,7 @@ const cons = {
       ATTACHMENT_CANCELED: 'ATTACHMENT_CANCELED',
     },
     settings: {
+      SYSTEM_THEME_TOGGLED: 'SYSTEM_THEME_TOGGLED',
       MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
       PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
       MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',
diff --git a/src/client/state/settings.js b/src/client/state/settings.js
index ba31fa82..13870446 100644
--- a/src/client/state/settings.js
+++ b/src/client/state/settings.js
@@ -23,6 +23,7 @@ class Settings extends EventEmitter {
     this.themes = ['', 'silver-theme', 'dark-theme', 'butter-theme'];
     this.themeIndex = this.getThemeIndex();
 
+    this.useSystemTheme = this.getUseSystemTheme();
     this.isMarkdown = this.getIsMarkdown();
     this.isPeopleDrawer = this.getIsPeopleDrawer();
     this.hideMembershipEvents = this.getHideMembershipEvents();
@@ -56,6 +57,15 @@ class Settings extends EventEmitter {
     this.themeIndex = themeIndex;
   }
 
+  getUseSystemTheme() {
+    if (typeof this.useSystemTheme === 'boolean') return this.useSystemTheme;
+
+    const settings = getSettings();
+    if (settings === null) return false;
+    if (typeof settings.useSystemTheme === 'undefined') return false;
+    return settings.useSystemTheme;
+  }
+
   getIsMarkdown() {
     if (typeof this.isMarkdown === 'boolean') return this.isMarkdown;
 
@@ -94,6 +104,24 @@ class Settings extends EventEmitter {
 
   setter(action) {
     const actions = {
+      [cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => {
+        this.useSystemTheme = !this.useSystemTheme;
+        setSettings('useSystemTheme', this.useSystemTheme);
+        const appBody = document.getElementById('appBody');
+
+        if (this.useSystemTheme) {
+          appBody.classList.add('system-theme');
+          this.themes.forEach((themeName) => {
+            if (themeName === '') return;
+            appBody.classList.remove(themeName);
+          });
+        } else {
+          appBody.classList.remove('system-theme');
+          this.setTheme(this.themeIndex);
+        }
+
+        this.emit(cons.events.settings.SYSTEM_THEME_TOGGLED, this.useSystemTheme);
+      },
       [cons.actions.settings.TOGGLE_MARKDOWN]: () => {
         this.isMarkdown = !this.isMarkdown;
         setSettings('isMarkdown', this.isMarkdown);
diff --git a/src/index.scss b/src/index.scss
index 52688e8d..e24af320 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -202,8 +202,7 @@
   --bg-surface-extra-low-transparent: hsla(0, 0%, 91%, 0);
 }
 
-.dark-theme,
-.butter-theme {
+@mixin dark-mode() {
   /* background color | --bg-[background type]: value */
   --bg-surface: hsl(208, 8%, 20%);
   --bg-surface-transparent: hsla(208, 8%, 20%, 0);
@@ -290,6 +289,17 @@
   --font-secondary: 'Inter', 'Roboto', sans-serif;
 }
 
+.dark-theme,
+.butter-theme {
+  @include dark-mode();
+}
+
+@media (prefers-color-scheme: dark) {
+  .system-theme {
+    @include dark-mode();
+  }
+}
+
 .butter-theme {
   /* background color | --bg-[background type]: value */
   --bg-surface: hsl(64, 6%, 14%);

From c27b11bf258e3d0928e36f03a9cef98dba53d9a5 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Wed, 5 Jan 2022 14:56:30 +0530
Subject: [PATCH 2/6] Add room alias or id as fallback in room profile

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/molecules/room-profile/RoomProfile.jsx  | 1 +
 src/app/molecules/room-profile/RoomProfile.scss | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/molecules/room-profile/RoomProfile.jsx b/src/app/molecules/room-profile/RoomProfile.jsx
index fefac0bb..d9869bc8 100644
--- a/src/app/molecules/room-profile/RoomProfile.jsx
+++ b/src/app/molecules/room-profile/RoomProfile.jsx
@@ -153,6 +153,7 @@ function RoomProfile({ roomId }) {
           />
         )}
       </div>
+      <Text variant="b3">{room.getCanonicalAlias() || room.roomId}</Text>
       {roomTopic && <Text variant="b2">{twemojify(roomTopic, undefined, true)}</Text>}
     </div>
   );
diff --git a/src/app/molecules/room-profile/RoomProfile.scss b/src/app/molecules/room-profile/RoomProfile.scss
index e6b12db2..43d70144 100644
--- a/src/app/molecules/room-profile/RoomProfile.scss
+++ b/src/app/molecules/room-profile/RoomProfile.scss
@@ -21,7 +21,7 @@
       }
     }
 
-    & > *:last-child {
+    & > *:not(:first-child) {
       margin-top: var(--sp-ultra-tight);
       white-space: pre-wrap;
       word-break: break-word;

From 6388894aa463ad8ee3814e49a38bd97b6cc114ec Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Wed, 5 Jan 2022 14:57:11 +0530
Subject: [PATCH 3/6] Fix focus bug on room-selector

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/molecules/room-selector/RoomSelector.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/molecules/room-selector/RoomSelector.jsx b/src/app/molecules/room-selector/RoomSelector.jsx
index c96612ef..22f233f0 100644
--- a/src/app/molecules/room-selector/RoomSelector.jsx
+++ b/src/app/molecules/room-selector/RoomSelector.jsx
@@ -21,7 +21,7 @@ function RoomSelectorWrapper({
         className="room-selector__content"
         type="button"
         onClick={onClick}
-        onMouseUp={(e) => blurOnBubbling(e, '.room-selector')}
+        onMouseUp={(e) => blurOnBubbling(e, '.room-selector__content')}
       >
         {content}
       </button>

From c304670f47e981fa7631ef47c7422c5e4636740a Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Wed, 5 Jan 2022 17:47:41 +0530
Subject: [PATCH 4/6] Add globe icons in search

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/organisms/navigation/Selector.jsx |  8 ++++----
 src/app/organisms/search/Search.jsx       | 16 ++++++++++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/organisms/navigation/Selector.jsx b/src/app/organisms/navigation/Selector.jsx
index b54f1a61..80a03574 100644
--- a/src/app/organisms/navigation/Selector.jsx
+++ b/src/app/organisms/navigation/Selector.jsx
@@ -49,11 +49,11 @@ function Selector({
     };
   }, []);
 
-  const joinRuleToIconSrc = {
+  const joinRuleToIconSrc = (joinRule) => ({
     restricted: () => (room.isSpaceRoom() ? SpaceIC : HashIC),
     invite: () => (room.isSpaceRoom() ? SpaceLockIC : HashLockIC),
     public: () => (room.isSpaceRoom() ? SpaceGlobeIC : HashGlobeIC),
-  };
+  }[joinRule]?.() || null);
 
   if (room.isSpaceRoom()) {
     return (
@@ -61,7 +61,7 @@ function Selector({
         key={roomId}
         name={room.name}
         roomId={roomId}
-        iconSrc={joinRuleToIconSrc[room.getJoinRule()]?.() || null}
+        iconSrc={joinRuleToIconSrc(room.getJoinRule())}
         isUnread={noti.hasNoti(roomId)}
         notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
         isAlert={noti.getHighlightNoti(roomId) !== 0}
@@ -90,7 +90,7 @@ function Selector({
       name={room.name}
       roomId={roomId}
       imageSrc={isDM ? imageSrc : null}
-      iconSrc={isDM ? null : joinRuleToIconSrc[room.getJoinRule()]?.() || null}
+      iconSrc={isDM ? null : joinRuleToIconSrc(room.getJoinRule())}
       isSelected={isSelected}
       isUnread={noti.hasNoti(roomId)}
       notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
diff --git a/src/app/organisms/search/Search.jsx b/src/app/organisms/search/Search.jsx
index b03c8016..2a707424 100644
--- a/src/app/organisms/search/Search.jsx
+++ b/src/app/organisms/search/Search.jsx
@@ -17,8 +17,10 @@ import RoomSelector from '../../molecules/room-selector/RoomSelector';
 
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import HashIC from '../../../../public/res/ic/outlined/hash.svg';
+import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
 import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
 import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
+import SpaceGlobeIC from '../../../../public/res/ic/outlined/space-globe.svg';
 import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
@@ -176,12 +178,18 @@ function Search() {
 
   const notifs = initMatrix.notifications;
   const renderRoomSelector = (item) => {
-    const isPrivate = item.room.getJoinRule() === 'invite';
     let imageSrc = null;
     let iconSrc = null;
-    if (item.type === 'room') iconSrc = isPrivate ? HashLockIC : HashIC;
-    if (item.type === 'space') iconSrc = isPrivate ? SpaceLockIC : SpaceIC;
-    if (item.type === 'direct') imageSrc = item.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+    if (item.type === 'direct') {
+      imageSrc = item.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+    } else {
+      const joinRuleToIconSrc = (joinRule) => ({
+        restricted: () => (item.type === 'space' ? SpaceIC : HashIC),
+        invite: () => (item.type === 'space' ? SpaceLockIC : HashLockIC),
+        public: () => (item.type === 'space' ? SpaceGlobeIC : HashGlobeIC),
+      }[joinRule]?.() || null);
+      iconSrc = joinRuleToIconSrc(item.room.getJoinRule());
+    }
 
     const isUnread = notifs.hasNoti(item.roomId);
     const noti = notifs.getNoti(item.roomId);

From 53f3ccc888daefc07cd5c8418daefe3b258dd09d Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Wed, 5 Jan 2022 17:48:37 +0530
Subject: [PATCH 5/6] Fix memory leaks

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/organisms/room/RoomViewHeader.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx
index 6b8b4c8e..847eb6ea 100644
--- a/src/app/organisms/room/RoomViewHeader.jsx
+++ b/src/app/organisms/room/RoomViewHeader.jsx
@@ -56,7 +56,7 @@ function RoomViewHeader({ roomId }) {
 
     roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
     return () => {
-      roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
+      roomList.removeListener(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
     };
   }, [roomId]);
 

From be905ac7be1aaee660492d371ab8901ab5ee796a Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Wed, 5 Jan 2022 17:50:50 +0530
Subject: [PATCH 6/6] Hide role dropdown icon in profile viewer (#215)

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/organisms/profile-viewer/ProfileViewer.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/organisms/profile-viewer/ProfileViewer.jsx b/src/app/organisms/profile-viewer/ProfileViewer.jsx
index 25040550..3b7a07c9 100644
--- a/src/app/organisms/profile-viewer/ProfileViewer.jsx
+++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx
@@ -261,6 +261,7 @@ function ProfileViewer() {
   function renderProfile() {
     const member = room.getMember(userId) || mx.getUser(userId) || {};
     const avatarMxc = member.getMxcAvatarUrl?.() || member.avatarUrl;
+    const canChangeRole = room.currentState.maySendEvent('m.room.power_levels', mx.getUserId());
 
     return (
       <div className="profile-viewer">
@@ -277,7 +278,7 @@ function ProfileViewer() {
           </div>
           <div className="profile-viewer__user__role">
             <Text variant="b3">Role</Text>
-            <Button iconSrc={ChevronBottomIC}>{getPowerLabel(member.powerLevel) || 'Member'}</Button>
+            <Button iconSrc={canChangeRole ? ChevronBottomIC : null}>{getPowerLabel(member.powerLevel) || 'Member'}</Button>
           </div>
         </div>
         <SessionInfo userId={userId} />