ShowConnections: improve look in simplified prof; fix tooltip overflow

Vendicated · Jun 9, 2024 · aaba22f · aaba22f
1 parent 4bf28f4
commit aaba22f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 25 deletions.
diff --git a/src/plugins/_core/settings.tsx b/src/plugins/_core/settings.tsx
@@ -60,6 +60,7 @@ export default definePlugin({
         // FIXME: remove once change merged to stable
         {
             find: "Messages.ACTIVITY_SETTINGS",
+            noWarn: true,
             replacement: {
                 get match() {
                     switch (Settings.plugins.Settings.settingsLocation) {

diff --git a/src/plugins/showConnections/index.tsx b/src/plugins/showConnections/index.tsx
@@ -74,15 +74,28 @@ interface ConnectionPlatform {
     icon: { lightSVG: string, darkSVG: string; };
 }
 
-const profilePopoutComponent = ErrorBoundary.wrap((props: { user: User, displayProfile, compactSpacing; }) =>
-    <ConnectionsComponent id={props.user.id} theme={getProfileThemeProps(props).theme} compactSpacing={props.compactSpacing} />
+const profilePopoutComponent = ErrorBoundary.wrap(
+    (props: { user: User; displayProfile?: any; simplified?: boolean; }) => (
+        <ConnectionsComponent
+            {...props}
+            id={props.user.id}
+            theme={getProfileThemeProps(props).theme}
+        />
+    ),
+    { noop: true }
 );
 
-const profilePanelComponent = ErrorBoundary.wrap(({ id }: { id: string; }) =>
-    <ConnectionsComponent id={id} theme={ThemeStore.theme} />
+const profilePanelComponent = ErrorBoundary.wrap(
+    (props: { id: string; simplified?: boolean; }) => (
+        <ConnectionsComponent
+            {...props}
+            theme={ThemeStore.theme}
+        />
+    ),
+    { noop: true }
 );
 
-function ConnectionsComponent({ id, theme, compactSpacing }: { id: string, theme: string, compactSpacing?: boolean; }) {
+function ConnectionsComponent({ id, theme, simplified }: { id: string, theme: string, simplified?: boolean; }) {
     const profile = UserProfileStore.getUserProfile(id);
     if (!profile)
         return null;
@@ -91,25 +104,30 @@ function ConnectionsComponent({ id, theme, compactSpacing }: { id: string, theme
     if (!connections?.length)
         return null;
 
-    const Container = compactSpacing ? "div" : Section;
+    const connectionsContainer = (
+        <Flex style={{
+            marginTop: !simplified ? "8px" : undefined,
+            gap: getSpacingPx(settings.store.iconSpacing),
+            flexWrap: "wrap"
+        }}>
+            {connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
+        </Flex>
+    );
+
+    if (simplified)
+        return connectionsContainer;
 
     return (
-        <Container>
+        <Section>
             <Text
                 tag="h2"
                 variant="eyebrow"
                 style={{ color: "var(--header-primary)" }}
             >
                 Connections
             </Text>
-            <Flex style={{
-                marginTop: "8px",
-                gap: getSpacingPx(settings.store.iconSpacing),
-                flexWrap: "wrap"
-            }}>
-                {connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
-            </Flex>
-        </Container>
+            {connectionsContainer}
+        </Section>
     );
 }
 
@@ -134,7 +152,7 @@ function CompactConnectionComponent({ connection, theme }: { connection: Connect
         <Tooltip
             text={
                 <span className="vc-sc-tooltip">
-                    {connection.name}
+                    <span className="vc-sc-connection-name">{connection.name}</span>
                     {connection.verified && <VerifiedIcon />}
                     <TooltipIcon height={16} width={16} />
                 </span>
@@ -180,7 +198,7 @@ export default definePlugin({
             find: "{isUsingGuildBio:null!==(",
             replacement: {
                 match: /,theme:\i\}\)(?=,.{0,150}setNote:)/,
-                replace: "$&,$self.profilePopoutComponent({ user: arguments[0].user, displayProfile: arguments[0].displayProfile, compactSpacing: false })"
+                replace: "$&,$self.profilePopoutComponent({ user: arguments[0].user, displayProfile: arguments[0].displayProfile })"
             }
         },
         {
@@ -195,7 +213,7 @@ export default definePlugin({
             find: "autoFocusNote:!0})",
             replacement: {
                 match: /{autoFocusNote:!1}\)}\)(?<=user:(\i),bio:null==(\i)\?.+?)/,
-                replace: "$&,$self.profilePopoutComponent({ user: $1, displayProfile: $2, compactSpacing: true })"
+                replace: "$&,$self.profilePopoutComponent({ user: $1, displayProfile: $2, simplified: true })"
             }
         }
     ],

diff --git a/src/plugins/showConnections/styles.css b/src/plugins/showConnections/styles.css
@@ -9,3 +9,11 @@
     gap: 0.25em;
     align-items: center;
 }
+
+.vc-sc-connection-name {
+    word-break: break-all;
+}
+
+.vc-sc-tooltip svg {
+    min-width: 16px;
+}
diff --git a/src/plugins/usrbg/index.tsx b/src/plugins/usrbg/index.tsx
@@ -69,13 +69,6 @@ export default definePlugin({
                 }
             ]
         },
-        {
-            find: "=!1,canUsePremiumCustomization:",
-            replacement: {
-                match: /(\i)\.premiumType/,
-                replace: "$self.patchPremiumType($1)||$&"
-            }
-        },
         {
             find: "BannerLoadingStatus:function",
             replacement: {