feat(rpc): link user rpc icon to settings tab

When the user clicks on the their rich presence icon, the RPC settings tab will display.

Author: hazzuk

res/css/structures/_UserRPC.pcss

@@ -10,6 +10,9 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     align-items: center;
 
+    user-select: none;
+    cursor: pointer;
+
     .mx_UserRPC_activity {
         width: 32px;
         height: 32px;
@@ -18,7 +21,8 @@ Please see LICENSE files in the repository root for full details.
         justify-content: center;
         align-items: center;
 
-        background-color: #000;
+        color: #666c75;
+        background-color: #1a1c1e;
         border-radius: 50%;
 
         /* crop image to circle */

src/components/structures/UserRPC.tsx

@@ -7,7 +7,11 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { useEffect, useState } from 'react';
 
-import { logger } from "matrix-js-sdk/src/logger";
+// import { logger } from "matrix-js-sdk/src/logger";
+
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { Action } from "../../dispatcher/actions";
+import { UserTab } from "../views/dialogs/UserTab";
 
 import { BridgeRPC, Activity } from '../../elecord/rpc/BridgeRPC';
 
@@ -33,7 +37,15 @@ const UserRPC: React.FC = () => {
 
     // render user activity
     return (
-        <div className="mx_UserRPC">
+        <div
+            onClick={() => {
+                defaultDispatcher.dispatch({
+                    action: Action.ViewUserSettings,
+                    initialTabId: UserTab.RichPresence,
+                });
+            }}
+            className="mx_UserRPC"
+        >
             <div className="mx_UserRPC_activity">
                 {activity?.application_id && activity.status ? (
                     <img