update(plugin): fix themeLibrary

src/equicordplugins/themeLibrary/components/ThemeInfoModal.tsx

@@ -32,36 +32,40 @@ async function downloadTheme(themesDir: string, theme: Theme) {
 }
 
 export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, ...props }) => {
-    const content = window.atob(theme.content);
+    const { type, content, likes, guild, tags } = theme;
-    const metadata = content.match(/\/\*\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\//g)?.[0] || "";
+
+    const themeContent = window.atob(content);
+    const metadata = themeContent.match(/\/\*\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\//g)?.[0] || "";
     const donate = metadata.match(/@donate\s+(.+)/)?.[1] || "";
     const version = metadata.match(/@version\s+(.+)/)?.[1] || "";
 
-    const { likes, guild, tags } = theme;
+
+    const authors = Array.isArray(author) ? author : [author];
 
     return (
         <ModalRoot {...props}>
             <ModalHeader>
-                <Forms.FormTitle tag="h4">Theme Details</Forms.FormTitle>
+                <Forms.FormTitle tag="h4">{type} Details</Forms.FormTitle>
             </ModalHeader>
 
             <ModalContent>
-                <Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Author</Forms.FormTitle>
+                <Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>{authors.length > 1 ? "Authors" : "Author"}</Forms.FormTitle>
                 <div style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
                     <div>
                         <div style={{ display: "flex", alignItems: "center" }}>
                             <UserSummaryItem
-                                users={[author]}
+                                users={authors}
+                                count={authors.length}
                                 guildId={undefined}
                                 renderIcon={false}
-                                showDefaultAvatarsForNullUsers
+                                max={4}
                                 size={32}
+                                showDefaultAvatarsForNullUsers
                                 showUserPopout
                                 className={Margins.right8}
                             />
-
+                            <Forms.FormText style={{ maxWidth: "200px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                            <Forms.FormText>
+                                {authors.map(author => author.username).join(", ")}
-                                {author.username}
                             </Forms.FormText>
                         </div>
                         {version && (
@@ -74,7 +78,7 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
                         )}
                         <Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Likes</Forms.FormTitle>
                         <Forms.FormText>
-                            {likes === 0 ? `Nobody liked this ${theme.type} yet.` : `${likes} users liked this ${theme.type}!`}
+                            {likes === 0 ? `Nobody liked this ${type} yet.` : `${likes} users liked this ${type}!`}
                         </Forms.FormText>
                         {donate && (
                             <>
@@ -122,7 +126,7 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
                                         <Forms.FormText style={{
                                             padding: "8px",
                                         }}>
-                                            <CodeBlock lang="css" content={content} />
+                                            <CodeBlock lang="css" content={themeContent} />
                                         </Forms.FormText>
                                     </ModalContent>
                                     <ModalFooter>
@@ -135,7 +139,7 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
                                         </Button>
                                         <Button className={Margins.right8}
                                             onClick={() => {
-                                                Clipboard.copy(content);
+                                                Clipboard.copy(themeContent);
                                                 showToast("Copied to Clipboard", Toasts.Type.SUCCESS);
                                             }}>Copy to Clipboard</Button>
                                     </ModalFooter>

src/equicordplugins/themeLibrary/components/ThemeTab.tsx

@@ -18,7 +18,7 @@ import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { openModal } from "@utils/modal";
-import { findByPropsLazy, findLazy } from "@webpack";
+import { findByPropsLazy } from "@webpack";
 import { Button, Card, FluxDispatcher, Forms, React, SearchableSelect, TabBar, TextArea, TextInput, Toasts, useEffect, UserStore, UserUtils, useState } from "@webpack/common";
 import { User } from "discord-types/general";
 import { Constructor } from "type-fest";
@@ -30,7 +30,6 @@ import { ThemeInfoModal } from "./ThemeInfoModal";
 
 const InputStyles = findByPropsLazy("inputDefault", "inputWrapper", "error");
 const UserRecord: Constructor<Partial<User>> = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
-const TextAreaProps = findLazy(m => typeof m.textarea === "string");
 
 const API_URL = "https://themes-delta.vercel.app/api";
 
@@ -124,7 +123,7 @@ function ThemeTab() {
         return (
             theme.name.toLowerCase().includes(v) ||
             theme.description.toLowerCase().includes(v) ||
-            theme.author.discord_name.toLowerCase().includes(v) ||
+            (Array.isArray(theme.author) ? theme.author.some(author => author.discord_name.toLowerCase().includes(v)) : theme.author.discord_name.toLowerCase().includes(v)) ||
             tags.has(v)
         );
     };
@@ -281,8 +280,11 @@ function ThemeTab() {
                                                 )}
                                                 <Button
                                                     onClick={async () => {
-                                                        const author = await getUser(theme.author.discord_snowflake, theme.author.discord_name);
+                                                        const authors = Array.isArray(theme.author)
-                                                        openModal(props => <ThemeInfoModal {...props} author={author} theme={theme} />);
+                                                            ? await Promise.all(theme.author.map(author => getUser(author.discord_snowflake, author.discord_name)))
+                                                            : [await getUser(theme.author.discord_snowflake, theme.author.discord_name)];
+
+                                                        openModal(props => <ThemeInfoModal {...props} author={authors} theme={theme} />);
                                                     }}
                                                     size={Button.Sizes.MEDIUM}
                                                     color={Button.Colors.BRAND}
@@ -417,8 +419,11 @@ function ThemeTab() {
                                                 )}
                                                 <Button
                                                     onClick={async () => {
-                                                        const author = await getUser(theme.author.discord_snowflake, theme.author.discord_name);
+                                                        const authors = Array.isArray(theme.author)
-                                                        openModal(props => <ThemeInfoModal {...props} author={author} theme={theme} />);
+                                                            ? await Promise.all(theme.author.map(author => getUser(author.discord_snowflake, author.discord_name)))
+                                                            : [await getUser(theme.author.discord_snowflake, theme.author.discord_name)];
+
+                                                        openModal(props => <ThemeInfoModal {...props} author={authors} theme={theme} />);
                                                     }}
                                                     size={Button.Sizes.MEDIUM}
                                                     color={Button.Colors.BRAND}
@@ -492,7 +497,7 @@ function SubmitThemes() {
                 <TextArea
                     content={themeTemplate}
                     onChange={handleChange}
-                    className={classes(TextAreaProps.textarea, "vce-text-input")}
+                    className={"vce-text-input"}
                     placeholder={themeTemplate}
                     spellCheck={false}
                     rows={35}

src/equicordplugins/themeLibrary/types.ts

@@ -7,6 +7,12 @@
 import { ModalProps } from "@utils/modal";
 import { User } from "discord-types/general";
 
+type Author = {
+    github_name?: string;
+    discord_name: string;
+    discord_snowflake: string;
+};
+
 export interface Theme {
     id: string;
     name: string;
@@ -14,11 +20,7 @@ export interface Theme {
     type: string | "theme" | "snippet";
     description: string;
     version: string;
-    author: {
+    author: Author | Author[];
-        github_name?: string;
-        discord_name: string;
-        discord_snowflake: string;
-    };
     likes: number;
     tags: string[];
     thumbnail_url: string;
@@ -32,7 +34,7 @@ export interface Theme {
 }
 
 export interface ThemeInfoModalProps extends ModalProps {
-    author: User;
+    author: User | User[];
     theme: Theme;
 }