Skip to content
This repository was archived by the owner on Feb 12, 2025. It is now read-only.

Commit 0a45425

Browse files
ZickZenniZickZenni
committed
✨ Added user panel
1 parent e8be966 commit 0a45425

File tree

5 files changed

+120
-44
lines changed

5 files changed

+120
-44
lines changed

‎src/renderer/components/UserPanel/UserPanel.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
:root {
2+
--userpanel--padding: 10px;
3+
}
4+
5+
.userpanel__container {
6+
width: calc(100% - var(--border-size) - var(--userpanel--padding) * 2);
7+
height: calc(80px - var(--userpanel--padding) * 2);
8+
background: var(--background);
9+
border-top: var(--border) var(--border-size) solid;
10+
border-right: var(--border) var(--border-size) solid;
11+
flex-shrink: 0;
12+
padding: var(--userpanel--padding);
13+
}
14+
15+
.userpanel__user_info {
16+
display: flex;
17+
gap: 12px;
18+
width: 100%;
19+
height: 100%;
20+
}
21+
22+
.userpanel__user_avatar {
23+
width: 58px;
24+
border-radius: 50%;
25+
}
26+
27+
.userpanel__user_name {
28+
margin-top: 19px;
29+
}

‎src/renderer/components/UserPanel/index.tsx

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,37 @@
1+
import { useEffect, useState } from 'react';
12
import './UserPanel.css';
3+
import { User } from '../../../common/discord/user';
24

35
export default function UserPanel() {
4-
return <div className="userpanel__container" />;
6+
const [user, setUser] = useState<User | null>(null);
7+
8+
useEffect(() => {
9+
window.electron.ipcRenderer
10+
.invoke('DISCORD_GET_USER', '@me')
11+
.then((data) => {
12+
setUser(data);
13+
return true;
14+
})
15+
.catch((err) => window.logger.error(err));
16+
}, []);
17+
18+
if (user === null)
19+
return (
20+
<div className="userpanel__container">
21+
<div className="userpanel__user_info" />
22+
</div>
23+
);
24+
25+
return (
26+
<div className="userpanel__container">
27+
<div className="userpanel__user_info">
28+
<img
29+
className="userpanel__user_avatar"
30+
src={`https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`}
31+
alt=""
32+
/>
33+
<p className="userpanel__user_name">{user.globalName}</p>
34+
</div>
35+
</div>
36+
);
537
}

‎src/renderer/index.ejs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
content="default-src 'self';
88
script-src 'self';
99
font-src 'self' https://fonts.gstatic.com;
10-
img-src 'self' https://cdn.discordapp.com;
10+
img-src 'self' https://cdn.discordapp.com https://avatars.githubusercontent.com;
1111
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;"
1212
/>
1313
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -20,6 +20,6 @@
2020
<title>WaveCord</title>
2121
</head>
2222
<body>
23-
<div id="root" style="width: 100vw; height: 100vh; margin: 0;"></div>
23+
<div id="root" style="width: 100vw; height: 100vh; margin: 0"></div>
2424
</body>
2525
</html>

‎src/renderer/pages/Guild/Guild.css

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
:root {
2+
--guild-page--sidebar-width: 300px;
3+
}
4+
15
.guild_page {
26
width: 100%;
37
height: 100%;
@@ -11,19 +15,18 @@
1115
}
1216

1317
.guild_page__channel_list {
14-
flex-shrink: 0;
1518
display: flex;
1619
flex-direction: column;
17-
width: 300px;
20+
width: var(--guild-page--sidebar-width);
1821
overflow: hidden;
19-
height: calc(100% - var(--topbar-height));
22+
height: calc(100% - var(--topbar-height) - 80px);
2023
background: var(--background);
2124
overflow-y: auto;
2225
border-right: var(--border) var(--border-size) solid;
2326
}
2427

2528
.guild_page__content {
26-
width: calc(100% - 270px - 300px);
29+
width: calc(100% - 270px - var(--guild-page--sidebar-width));
2730
background: var(--background2);
2831
height: 100%;
2932
}
@@ -68,7 +71,7 @@
6871

6972
.guild_page__channel_name {
7073
overflow: hidden;
71-
text-overflow: ellipsis;;
74+
text-overflow: ellipsis;
7275
text-wrap: nowrap;
7376
}
7477

‎src/renderer/pages/Guild/index.tsx

Lines changed: 48 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Guild } from '../../../common/discord/guild';
1919
import Channel, { ChannelType } from '../../../common/discord/channel';
2020
import Topbar from '../../components/Topbar';
2121
import { sortChannels } from '../../utils/channelUtils';
22+
import UserPanel from '../../components/UserPanel';
2223

2324
function ChannelWrapper({
2425
children,
@@ -115,43 +116,54 @@ export default function GuildPage() {
115116
</div>
116117
)}
117118
</div>
118-
<div className="guild_page__channel_list app__item_list hidden_scrollbar">
119-
{sorted.map((channel) => {
120-
const isCategory = channel.type === ChannelType.GuildCategory;
121-
const isCurrent =
122-
location.pathname === `/guild/${guild?.id}/channel/${channel.id}`;
119+
<div
120+
style={{
121+
display: 'flex',
122+
flexDirection: 'column',
123+
width: 'var(--guild-page--sidebar-width)',
124+
overflow: 'hidden',
125+
}}
126+
>
127+
<div className="guild_page__channel_list app__item_list hidden_scrollbar">
128+
{sorted.map((channel) => {
129+
const isCategory = channel.type === ChannelType.GuildCategory;
130+
const isCurrent =
131+
location.pathname ===
132+
`/guild/${guild?.id}/channel/${channel.id}`;
123133

124-
const getIcon = () => {
125-
switch (channel.type) {
126-
case ChannelType.GuildVoice:
127-
return VoiceChannelIcon;
128-
case ChannelType.GuildAnnouncement:
129-
return AnnouncementChannelIcon;
130-
case ChannelType.GuildStageVoice:
131-
return StageChannelIcon;
132-
case ChannelType.GuildCategory:
133-
return CategoryIcon;
134-
default:
135-
return TextChannelIcon;
136-
}
137-
};
138-
return (
139-
<ChannelWrapper isCurrent={isCurrent} channel={channel}>
140-
{!isCategory && (
141-
<img
142-
className="guild_page__channel_icon"
143-
src={getIcon()}
144-
alt="Text Channel Icon"
145-
/>
146-
)}
147-
<p
148-
className={`guild_page__channel_name ${isCategory ? 'guild_page__category' : ''}`}
149-
>
150-
{channel.name}
151-
</p>
152-
</ChannelWrapper>
153-
);
154-
})}
134+
const getIcon = () => {
135+
switch (channel.type) {
136+
case ChannelType.GuildVoice:
137+
return VoiceChannelIcon;
138+
case ChannelType.GuildAnnouncement:
139+
return AnnouncementChannelIcon;
140+
case ChannelType.GuildStageVoice:
141+
return StageChannelIcon;
142+
case ChannelType.GuildCategory:
143+
return CategoryIcon;
144+
default:
145+
return TextChannelIcon;
146+
}
147+
};
148+
return (
149+
<ChannelWrapper isCurrent={isCurrent} channel={channel}>
150+
{!isCategory && (
151+
<img
152+
className="guild_page__channel_icon"
153+
src={getIcon()}
154+
alt="Text Channel Icon"
155+
/>
156+
)}
157+
<p
158+
className={`guild_page__channel_name ${isCategory ? 'guild_page__category' : ''}`}
159+
>
160+
{channel.name}
161+
</p>
162+
</ChannelWrapper>
163+
);
164+
})}
165+
</div>
166+
<UserPanel />
155167
</div>
156168
<div className="guild_page__content">
157169
<Outlet />

0 commit comments

Comments
 (0)