4 files changed, 80 insertions, 4 deletions
diff --git a/src/components/PluginSettings/components/NewBadgeComponent.tsx b/src/components/PluginSettings/components/NewBadgeComponent.tsx
new file mode 100644
index 0000000..50a6f37
--- /dev/null
+++ b/src/components/PluginSettings/components/NewBadgeComponent.tsx
@@ -0,0 +1,25 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Badge } from "../styles";
+
+export function NewBadge(): JSX.Element {
+    return (
+        <div style={{ backgroundColor: "#ED4245", justifySelf: "flex-end", marginLeft: "auto", ...Badge }}>New</div>
+    );
+}
diff --git a/src/components/PluginSettings/components/index.ts b/src/components/PluginSettings/components/index.ts
index 507b53a..6da30c9 100644
--- a/src/components/PluginSettings/components/index.ts
+++ b/src/components/PluginSettings/components/index.ts
@@ -35,3 +35,4 @@ export * from "./SettingNumericComponent";
 export * from "./SettingSelectComponent";
 export * from "./SettingSliderComponent";
 export * from "./SettingTextComponent";
+export * from "./NewBadgeComponent";
diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx
index a0dfc24..4fa2c44 100644
--- a/src/components/PluginSettings/index.tsx
+++ b/src/components/PluginSettings/index.tsx
@@ -17,13 +17,15 @@
 */
 
 import Plugins from "~plugins";
+import { DataStore } from "../../api";
 
 import { showNotice } from "../../api/Notices";
 import { Settings, useSettings } from "../../api/settings";
 import { startDependenciesRecursive, startPlugin, stopPlugin } from "../../plugins";
+import consoleShortcuts from "../../plugins/consoleShortcuts";
 import { ChangeList } from "../../utils/ChangeList";
 import Logger from "../../utils/Logger";
-import { classes, LazyComponent, lazyWebpack } from "../../utils/misc";
+import { classes, LazyComponent, lazyWebpack, useAwaiter } from "../../utils/misc";
 import { openModalLazy } from "../../utils/modal";
 import { Plugin } from "../../utils/types";
 import { filters, findByCode } from "../../webpack";
@@ -32,6 +34,7 @@ import ErrorBoundary from "../ErrorBoundary";
 import { ErrorCard } from "../ErrorCard";
 import { Flex } from "../Flex";
 import { handleComponentFailed } from "../handleComponentFailed";
+import { NewBadge } from "./components";
 import PluginModal from "./PluginModal";
 import * as styles from "./styles";
 
@@ -77,9 +80,10 @@ interface PluginCardProps extends React.HTMLProps<HTMLDivElement> {
     plugin: Plugin;
     disabled: boolean;
     onRestartNeeded(name: string): void;
+    isNew?: boolean;
 }
 
-function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave }: PluginCardProps) {
+function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave, isNew }: PluginCardProps) {
     const settings = useSettings();
     const pluginSettings = settings.plugins[plugin.name];
 
@@ -161,8 +165,8 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
                 </Text>}
                 hideBorder={true}
             >
-                <Flex style={{ marginTop: "auto", width: "100%", height: "100%", alignItems: "center" }}>
-                    <Text variant="text-md/bold" style={{ flexGrow: "1" }}>{plugin.name}</Text>
+                <Flex style={{ marginTop: "auto", width: "100%", height: "100%", alignItems: "center", gap: "8px" }}>
+                    <Text variant="text-md/bold" style={{ display: "flex", width: "100%", alignItems: "center", flexGrow: "1", gap: "8px" }}>{plugin.name}{(isNew) && <NewBadge />}</Text>
                     <button role="switch" onClick={() => openModal()} style={styles.SettingsIcon} className="button-12Fmur">
                         {plugin.options
                             ? <CogWheel
@@ -223,6 +227,7 @@ export default ErrorBoundary.wrap(function Settings() {
 
     const sortedPlugins = React.useMemo(() => Object.values(Plugins)
         .sort((a, b) => a.name.localeCompare(b.name)), []);
+    const sortedPluginNames = Object.values(sortedPlugins).map(plugin => plugin.name);
 
     const [searchValue, setSearchValue] = React.useState({ value: "", status: "all" });
 
@@ -242,6 +247,30 @@ export default ErrorBoundary.wrap(function Settings() {
         );
     };
 
+    const [newPlugins, error, newPluginsLoading] = useAwaiter(() => DataStore.get("Vencord_existingPlugins").then((existingPlugins: Record<string, number> | null) => {
+        logger.info("called func");
+        const dateNow: number = Date.now() / 1000;
+        logger.debug("dateNow", dateNow);
+        let Vencord_existingPlugins: Record<string, number> = {};
+        let newPlugins: Array<string> = [];
+        logger.info("sortedPlugins", sortedPlugins);
+        logger.info("existingPlugins (or list)", existingPlugins ? existingPlugins : []);
+        logger.info("Object.keys(existingPlugins ? existingPlugins : [])", Object.keys(existingPlugins ? existingPlugins : []));
+        sortedPlugins.forEach(plugin => {
+            logger.debug(plugin.name);
+            Vencord_existingPlugins[plugin.name] = Object.keys(existingPlugins ? existingPlugins : []).includes(plugin.name) ? existingPlugins[plugin.name] : dateNow;
+            logger.debug("1");
+            if (Vencord_existingPlugins[plugin.name] < (dateNow + 172800)) {
+                newPlugins.push(plugin.name);
+            }
+        });
+        DataStore.set("Vencord_existingPlugins", Vencord_existingPlugins).then(() => { logger.info("set Vencord_existingPlugins"); }).catch((err) => { logger.info("set Vencord_existingPlugins raised", err); });
+        return newPlugins;
+    }));
+
+    logger.debug("newPlugins", newPlugins);
+    logger.debug("error", error);
+
     return (
         <Forms.FormSection tag="h1" title="Vencord">
             <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
@@ -278,6 +307,7 @@ export default ErrorBoundary.wrap(function Settings() {
                             onRestartNeeded={name => changes.add(name)}
                             disabled={plugin.required || !!dependency}
                             plugin={plugin}
+                            isNew={newPlugins?.includes(plugin.name)}
                         />;
                     })
                     : <Text variant="text-md/normal">No plugins meet search criteria.</Text>
diff --git a/src/components/PluginSettings/styles.ts b/src/components/PluginSettings/styles.ts
index 703c579..81243ca 100644
--- a/src/components/PluginSettings/styles.ts
+++ b/src/components/PluginSettings/styles.ts
@@ -48,3 +48,23 @@ export const SettingsIcon: React.CSSProperties = {
     background: "transparent",
     marginRight: 8
 };
+
+export const Badge: React.CSSProperties = {
+    paddingTop: "0",
+    paddingBottom: "0",
+    paddingRight: "6px",
+    paddingLeft: "6px",
+    fontFamily: "var(--font-display)",
+    fontWeight: "500px",
+    textTransform: "uppercase",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    borderRadius: "8px",
+    height: "16px",
+    minWidth: "16px",
+    minHeight: "16px",
+    fontSize: "12px",
+    lineHeight: "16px",
+    color: "white",
+};