✨ Added user panel

ZickZenni · Sep 2, 2024 · 0a45425 · 0a45425
1 parent e8be966
commit 0a45425
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 44 deletions.
diff --git a/src/renderer/components/UserPanel/UserPanel.css b/src/renderer/components/UserPanel/UserPanel.css
@@ -0,0 +1,29 @@
+:root {
+  --userpanel--padding: 10px;
+}
+
+.userpanel__container {
+  width: calc(100% - var(--border-size) - var(--userpanel--padding) * 2);
+  height: calc(80px - var(--userpanel--padding) * 2);
+  background: var(--background);
+  border-top: var(--border) var(--border-size) solid;
+  border-right: var(--border) var(--border-size) solid;
+  flex-shrink: 0;
+  padding: var(--userpanel--padding);
+}
+
+.userpanel__user_info {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+}
+
+.userpanel__user_avatar {
+  width: 58px;
+  border-radius: 50%;
+}
+
+.userpanel__user_name {
+  margin-top: 19px;
+}
diff --git a/src/renderer/components/UserPanel/index.tsx b/src/renderer/components/UserPanel/index.tsx
@@ -1,5 +1,37 @@
+import { useEffect, useState } from 'react';
 import './UserPanel.css';
+import { User } from '../../../common/discord/user';
 
 export default function UserPanel() {
-  return <div className="userpanel__container" />;
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    window.electron.ipcRenderer
+      .invoke('DISCORD_GET_USER', '@me')
+      .then((data) => {
+        setUser(data);
+        return true;
+      })
+      .catch((err) => window.logger.error(err));
+  }, []);
+
+  if (user === null)
+    return (
+      <div className="userpanel__container">
+        <div className="userpanel__user_info" />
+      </div>
+    );
+
+  return (
+    <div className="userpanel__container">
+      <div className="userpanel__user_info">
+        <img
+          className="userpanel__user_avatar"
+          src={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`}
+          alt=""
+        />
+        <p className="userpanel__user_name">{user.globalName}</p>
+      </div>
+    </div>
+  );
 }
diff --git a/src/renderer/index.ejs b/src/renderer/index.ejs
@@ -7,7 +7,7 @@
       content="default-src 'self';
           script-src 'self';
           font-src 'self' https://fonts.gstatic.com;
-          img-src 'self' https://cdn.discordapp.com;
+          img-src 'self' https://cdn.discordapp.com https://avatars.githubusercontent.com;
           style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;"
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -20,6 +20,6 @@
     <title>WaveCord</title>
   </head>
   <body>
-    <div id="root" style="width: 100vw; height: 100vh; margin: 0;"></div>
+    <div id="root" style="width: 100vw; height: 100vh; margin: 0"></div>
   </body>
 </html>
diff --git a/src/renderer/pages/Guild/Guild.css b/src/renderer/pages/Guild/Guild.css
@@ -1,3 +1,7 @@
+:root {
+  --guild-page--sidebar-width: 300px;
+}
+
 .guild_page {
   width: 100%;
   height: 100%;
@@ -11,19 +15,18 @@
 }
 
 .guild_page__channel_list {
-  flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  width: 300px;
+  width: var(--guild-page--sidebar-width);
   overflow: hidden;
-  height: calc(100% - var(--topbar-height));
+  height: calc(100% - var(--topbar-height) - 80px);
   background: var(--background);
   overflow-y: auto;
   border-right: var(--border) var(--border-size) solid;
 }
 
 .guild_page__content {
-  width: calc(100% - 270px - 300px);
+  width: calc(100% - 270px - var(--guild-page--sidebar-width));
   background: var(--background2);
   height: 100%;
 }
@@ -68,7 +71,7 @@
 
 .guild_page__channel_name {
   overflow: hidden;
-  text-overflow: ellipsis;;
+  text-overflow: ellipsis;
   text-wrap: nowrap;
 }
 

diff --git a/src/renderer/pages/Guild/index.tsx b/src/renderer/pages/Guild/index.tsx
@@ -19,6 +19,7 @@ import { Guild } from '../../../common/discord/guild';
 import Channel, { ChannelType } from '../../../common/discord/channel';
 import Topbar from '../../components/Topbar';
 import { sortChannels } from '../../utils/channelUtils';
+import UserPanel from '../../components/UserPanel';
 
 function ChannelWrapper({
   children,
@@ -115,43 +116,54 @@ export default function GuildPage() {
             </div>
           )}
         </div>
-        <div className="guild_page__channel_list app__item_list hidden_scrollbar">
-          {sorted.map((channel) => {
-            const isCategory = channel.type === ChannelType.GuildCategory;
-            const isCurrent =
-              location.pathname === `/guild/${guild?.id}/channel/${channel.id}`;
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: 'var(--guild-page--sidebar-width)',
+            overflow: 'hidden',
+          }}
+        >
+          <div className="guild_page__channel_list app__item_list hidden_scrollbar">
+            {sorted.map((channel) => {
+              const isCategory = channel.type === ChannelType.GuildCategory;
+              const isCurrent =
+                location.pathname ===
+                `/guild/${guild?.id}/channel/${channel.id}`;
 
-            const getIcon = () => {
-              switch (channel.type) {
-                case ChannelType.GuildVoice:
-                  return VoiceChannelIcon;
-                case ChannelType.GuildAnnouncement:
-                  return AnnouncementChannelIcon;
-                case ChannelType.GuildStageVoice:
-                  return StageChannelIcon;
-                case ChannelType.GuildCategory:
-                  return CategoryIcon;
-                default:
-                  return TextChannelIcon;
-              }
-            };
-            return (
-              <ChannelWrapper isCurrent={isCurrent} channel={channel}>
-                {!isCategory && (
-                  <img
-                    className="guild_page__channel_icon"
-                    src={getIcon()}
-                    alt="Text Channel Icon"
-                  />
-                )}
-                <p
-                  className={`guild_page__channel_name ${isCategory ? 'guild_page__category' : ''}`}
-                >
-                  {channel.name}
-                </p>
-              </ChannelWrapper>
-            );
-          })}
+              const getIcon = () => {
+                switch (channel.type) {
+                  case ChannelType.GuildVoice:
+                    return VoiceChannelIcon;
+                  case ChannelType.GuildAnnouncement:
+                    return AnnouncementChannelIcon;
+                  case ChannelType.GuildStageVoice:
+                    return StageChannelIcon;
+                  case ChannelType.GuildCategory:
+                    return CategoryIcon;
+                  default:
+                    return TextChannelIcon;
+                }
+              };
+              return (
+                <ChannelWrapper isCurrent={isCurrent} channel={channel}>
+                  {!isCategory && (
+                    <img
+                      className="guild_page__channel_icon"
+                      src={getIcon()}
+                      alt="Text Channel Icon"
+                    />
+                  )}
+                  <p
+                    className={`guild_page__channel_name ${isCategory ? 'guild_page__category' : ''}`}
+                  >
+                    {channel.name}
+                  </p>
+                </ChannelWrapper>
+              );
+            })}
+          </div>
+          <UserPanel />
         </div>
         <div className="guild_page__content">
           <Outlet />