fix(sric): add compact mode support (#1263)

* fix(sric): add compact mode support

* fix(sric): cleaner

src/equicordplugins/showRolesInChat/index.tsx

@@ -12,9 +12,10 @@ import { EyeIcon } from "@components/Icons";
 import { EquicordDevs } from "@utils/constants";
 import { classNameFactory } from "@utils/css";
 import { getCurrentGuild } from "@utils/discord";
+import { classes } from "@utils/misc";
 import definePlugin, { OptionType } from "@utils/types";
 import { User } from "@vencord/discord-types";
-import { ChannelStore, ContextMenuApi, GuildMemberStore, GuildRoleStore, Menu, useStateFromStores } from "@webpack/common";
+import { ChannelStore, ContextMenuApi, GuildMemberStore, GuildRoleStore, Menu, Tooltip, useStateFromStores } from "@webpack/common";
 import type React from "react";
 
 const cl = classNameFactory("vc-sric-");
@@ -76,7 +77,7 @@ function ShieldUserIcon({ color }: { color: string; }) {
     );
 }
 
-const HighestRoleIndicator = ErrorBoundary.wrap(({ user, channelId }: { user: User; channelId: string; }) => {
+const HighestRoleIndicator = ErrorBoundary.wrap(({ user, channelId, isCompact }: { user: User; channelId: string; isCompact?: boolean; }) => {
     const { showBots, useRoleColor, excludedRoles } = settings.use(SETTINGS_KEYS);
 
     const guildId = (!user.bot || showBots) ? ChannelStore.getChannel(channelId)?.guild_id : null;
@@ -114,12 +115,20 @@ const HighestRoleIndicator = ErrorBoundary.wrap(({ user, channelId }: { user: Us
     };
 
     return (
-        <span className={cl("indicator")} onContextMenu={handleContextMenu}>
-            <ShieldUserIcon color={(useRoleColor && role.colorString) || "currentColor"} />
-            <span className={cl("name")}>
-                {role.name}
-            </span>
-        </span>
+        <Tooltip text={role.name}>
+            {tooltipProps => (
+                <span
+                    {...tooltipProps}
+                    className={classes(cl("indicator"), isCompact && cl("indicator-compact"))}
+                    onContextMenu={handleContextMenu}
+                >
+                    <ShieldUserIcon color={(useRoleColor && role.colorString) || "currentColor"} />
+                    <span className={cl("name")}>
+                        {role.name}
+                    </span>
+                </span>
+            )}
+        </Tooltip>
     );
 }, { noop: true });
 
@@ -147,10 +156,11 @@ export default definePlugin({
             );
         }
     },
-    renderMessageDecoration: ({ message }) => (
+    renderMessageDecoration: ({ message, compact }) => (
         <HighestRoleIndicator
             user={message.author}
             channelId={message.channel_id}
+            isCompact={compact}
         />
     )
 });

src/equicordplugins/showRolesInChat/styles.css

@@ -1,6 +1,7 @@
 .vc-sric-indicator {
     display: inline-flex;
     align-items: center;
+    gap: 4px;
     box-sizing: border-box;
     height: 16px;
     padding: 0 6px 0 4px;
@@ -16,7 +17,6 @@
 .vc-sric-icon {
     width: 14px;
     height: 14px;
-    margin-right: 4px;
     flex-shrink: 0;
 }
 
@@ -25,4 +25,12 @@
     max-width: 120px;
     overflow: hidden;
     text-overflow: ellipsis;
+}
+
+.vc-sric-indicator-compact {
+    padding: 0 2px;
+}
+
+.vc-sric-indicator-compact .vc-sric-name {
+    display: none;
 }