diff options
| -rw-r--r-- | src/components/PluginSettings/components/NewBadgeComponent.tsx | 25 | ||||
| -rw-r--r-- | src/components/PluginSettings/components/index.ts | 1 | ||||
| -rw-r--r-- | src/components/PluginSettings/index.tsx | 38 | ||||
| -rw-r--r-- | src/components/PluginSettings/styles.ts | 20 |
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", +}; |