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 | 31 | ||||
| -rw-r--r-- | src/components/PluginSettings/styles.ts | 20 |
4 files changed, 73 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..deac079 100644 --- a/src/components/PluginSettings/components/index.ts +++ b/src/components/PluginSettings/components/index.ts @@ -29,6 +29,7 @@ export interface ISettingElementProps<T extends PluginOptionBase> { onError(hasError: boolean): void; } +export * from "./NewBadgeComponent"; export * from "./SettingBooleanComponent"; export * from "./SettingCustomComponent"; export * from "./SettingNumericComponent"; diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx index 2de9362..a605d31 100644 --- a/src/components/PluginSettings/index.tsx +++ b/src/components/PluginSettings/index.tsx @@ -18,12 +18,13 @@ 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 { 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 +33,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 +79,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 +164,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 +226,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 +246,24 @@ export default ErrorBoundary.wrap(function Settings() { ); }; + let [newPlugins, error, newPluginsLoading] = useAwaiter(() => DataStore.get("Vencord_existingPlugins").then((existingPlugins: Record<string, number>) => { + const dateNow: number = Date.now() / 1000; + const Vencord_existingPlugins: Record<string, number> = {}; + const newPlugins: Array<string> = []; + sortedPlugins.forEach(plugin => { + Vencord_existingPlugins[plugin.name] = Object.keys(existingPlugins || []).includes(plugin.name) ? existingPlugins[plugin.name] : dateNow; + if ((Vencord_existingPlugins[plugin.name] + 172800) > dateNow) { + newPlugins.push(plugin.name); + } + }); + DataStore.set("Vencord_existingPlugins", Vencord_existingPlugins); + return newPlugins; + })); + + if (JSON.stringify(newPlugins) === JSON.stringify(sortedPluginNames)) { + newPlugins = []; + } + return ( <Forms.FormSection tag="h1" title="Vencord"> <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}> @@ -278,6 +300,7 @@ export default ErrorBoundary.wrap(function Settings() { onRestartNeeded={name => changes.add(name)} disabled={plugin.required || !!dependency} plugin={plugin} + isNew={newPlugins?.includes(plugin.name)} key={plugin.name} />; }) 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", +}; |