Merge branch 'dev' into main

src/plugins/friendsSince/index.tsx

@@ -6,6 +6,7 @@
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
+import { getCurrentChannel } from "@utils/discord";
 import definePlugin from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 import { React, RelationshipStore } from "@webpack/common";
@@ -49,6 +50,18 @@ export default definePlugin({
                 </Heading>
 
                 <div className={container.memberSinceContainer}>
+                    {!!getCurrentChannel()?.guild_id && (
+                        <svg
+                            aria-hidden="true"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="var(--interactive-normal)"
+                        >
+                            <path d="M13 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
+                            <path d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z" />
+                        </svg>
+                    )}
                     <Text variant="text-sm/normal" className={clydeMoreInfo.body}>
                         {getCreatedAtDate(friendsSince, locale.getLocale())}
                     </Text>

src/plugins/typingIndicator/index.tsx

@@ -16,20 +16,28 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./style.css";
+
 import { definePluginSettings, Settings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { findExportedComponentLazy, findStoreLazy } from "@webpack";
+import { findComponentByCodeLazy, findExportedComponentLazy, findStoreLazy } from "@webpack";
 import { ChannelStore, GuildMemberStore, i18n, RelationshipStore, SelectedChannelStore, Tooltip, UserStore, useStateFromStores } from "@webpack/common";
 
 import { buildSeveralUsers } from "../typingTweaks";
 
 const ThreeDots = findExportedComponentLazy("Dots", "AnimatedDots");
+const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
 
 const TypingStore = findStoreLazy("TypingStore");
 const UserGuildSettingsStore = findStoreLazy("UserGuildSettingsStore");
 
+const enum IndicatorMode {
+    Dots = 1 << 0,
+    Avatars = 1 << 1
+}
+
 function getDisplayName(guildId: string, userId: string) {
     const user = UserStore.getUser(userId);
     return GuildMemberStore.getNick(guildId, userId) ?? (user as any).globalName ?? user.username;
@@ -90,13 +98,26 @@ function TypingIndicator({ channelId }: { channelId: string; }) {
         return (
             <Tooltip text={tooltipText!}>
                 {props => (
-                    <div
+                    <div className="vc-typing-indicator" {...props}>
-                        {...props}
+                        {((settings.store.indicatorMode & IndicatorMode.Avatars) === IndicatorMode.Avatars) && (
-                        style={{ marginLeft: 6, height: 16, display: "flex", alignItems: "center", zIndex: 0, cursor: "pointer" }}
+                            <UserSummaryItem
-                    >
+                                users={typingUsersArray.map(id => UserStore.getUser(id))}
+                                guildId={guildId}
+                                renderIcon={false}
+                                max={3}
+                                showDefaultAvatarsForNullUsers
+                                showUserPopout
+                                size={16}
+                                className="vc-typing-indicator-avatars"
+                            />
+                        )}
+                        {((settings.store.indicatorMode & IndicatorMode.Dots) === IndicatorMode.Dots) && (
+                            <div className="vc-typing-indicator-dots">
                                 <ThreeDots dotRadius={3} themed={true} />
                             </div>
                         )}
+                    </div>
+                )}
             </Tooltip>
         );
     }
@@ -119,13 +140,22 @@ const settings = definePluginSettings({
         type: OptionType.BOOLEAN,
         description: "Whether to show the typing indicator for blocked users.",
         default: false
+    },
+    indicatorMode: {
+        type: OptionType.SELECT,
+        description: "How should the indicator be displayed?",
+        options: [
+            { label: "Avatars and animated dots", value: IndicatorMode.Dots | IndicatorMode.Avatars, default: true },
+            { label: "Animated dots", value: IndicatorMode.Dots },
+            { label: "Avatars", value: IndicatorMode.Avatars },
+        ],
     }
 });
 
 export default definePlugin({
     name: "TypingIndicator",
     description: "Adds an indicator if someone is typing on a channel.",
-    authors: [Devs.Nuckyz, Devs.fawn],
+    authors: [Devs.Nuckyz, Devs.fawn, Devs.Sqaaakoi],
     settings,
 
     patches: [

src/plugins/typingIndicator/style.css

@@ -0,0 +1,18 @@
+.vc-typing-indicator {
+    display: flex;
+    align-items: center;
+    height: 20px;
+}
+
+.vc-typing-indicator-avatars {
+    margin-left: 6px;
+}
+
+.vc-typing-indicator-dots {
+    margin-left: 6px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    z-index: 0;
+    cursor: pointer;
+}

src/utils/constants.ts

@@ -426,6 +426,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "newwares",
         id: 421405303951851520n
     },
+    Sqaaakoi: {
+        name: "Sqaaakoi",
+        id: 259558259491340288n
+    },
     Byron: {
         name: "byeoon",
         id: 1167275288036655133n