feat: add channel selection indicator

ZickZenni · Sep 18, 2024 · 2a20b4b · 2a20b4b
1 parent 8a6f04f
commit 2a20b4b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/renderer/components/channel/ChannelButton.tsx b/src/renderer/components/channel/ChannelButton.tsx
@@ -1,6 +1,7 @@
 import { ChannelType } from '@/discord/structures/channel/BaseChannel';
 import RendererChannel from '@/discord/structures/channel/RendererChannel';
 import { getChannelIcon } from '@/utils/channelUtils';
+import { useLocation } from 'react-router-dom';
 
 type ChannelButtonProps = {
   channel: RendererChannel;
@@ -11,13 +12,23 @@ export default function ChannelButton({
   channel,
   onClick,
 }: ChannelButtonProps) {
+  const location = useLocation();
+
+  const isCategory = channel.type === ChannelType.GuildCategory;
+  const isSelected =
+    !isCategory && location.pathname.includes(`/channel/${channel.id}`);
+
+  let classes = !isCategory
+    ? `ChannelButton--normal`
+    : 'ChannelButton--category';
+
+  if (isSelected) {
+    classes += ' ChannelButton--selected';
+  }
+
   return (
     <div
-      className={
-        channel.type !== ChannelType.GuildCategory
-          ? `ChannelButton--normal`
-          : 'ChannelButton--category'
-      }
+      className={classes}
       onClick={() => onClick(channel)}
       role="presentation"
     >

diff --git a/src/renderer/styles/channel/ChannelButton.css b/src/renderer/styles/channel/ChannelButton.css
@@ -36,13 +36,14 @@
   width: 0px;
 }
 
-.ChannelButton--normal:hover {
+.ChannelButton--normal:hover,
+.ChannelButton--selected {
   background: #1f1e25;
   color: #fff;
 }
 
 .ChannelButton--icon {
   width: 23px;
   filter: invert(57%) sepia(0%) saturate(256%) hue-rotate(170deg)
-  brightness(101%) contrast(84%);
+    brightness(101%) contrast(84%);
 }