diff --git a/src/components/PluginSettings/PluginModal.tsx b/src/components/PluginSettings/PluginModal.tsx index dce89df6..2b105ef9 100644 --- a/src/components/PluginSettings/PluginModal.tsx +++ b/src/components/PluginSettings/PluginModal.tsx @@ -398,7 +398,7 @@ function resetSettings(plugin: Plugin, warningModalProps?: ModalProps, pluginMod export function openWarningModal(plugin: Plugin, pluginModalProps: ModalProps, onRestartNeeded?: (pluginName: string) => void) { if (Settings.ignoreResetWarning) return resetSettings(plugin, pluginModalProps, pluginModalProps, onRestartNeeded); - + openModal(warningModalProps => ( + + + {alt} + + + + ); +} + +export function CategoryScroller(props: { children: React.ReactNode, categoryLength: number; }) { + const children = Array.isArray(props.children) ? props.children : [props.children]; + + return ( +
+
{ + children.map(child => ( +
+ {child} +
+ )) + }
+
+ +
+ ); +} + +export function CategoryWrapper(props: { children: JSX.Element | JSX.Element[]; }) { + return ( +
+ {props.children} +
+ ); +} + +export function StickerCategory(props: StickerCategoryProps) { + return ( +
+ {props.children} +
+ ); +} diff --git a/src/equicordplugins/moreStickers/components/icons.tsx b/src/equicordplugins/moreStickers/components/icons.tsx index 18e3f031..73a406e6 100644 --- a/src/equicordplugins/moreStickers/components/icons.tsx +++ b/src/equicordplugins/moreStickers/components/icons.tsx @@ -1,20 +1,23 @@ /* - * Vencord, a modification for Discord's desktop app - * Copyright (c) 2023 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 . -*/ + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +export function IconContainer(props: { children: JSX.Element | JSX.Element[]; }) { + return ( +
+ {props.children} +
+ ); +} + export function SearchIcon({ width, height, color }: { width: number, height: number, color: string; }) { return ( @@ -22,7 +25,7 @@ export function SearchIcon({ width, height, color }: { width: number, height: nu ); -}; +} export function CancelIcon({ width, height, className, onClick }: { width: number, height: number, className: string, onClick: () => void; }) { return ( @@ -30,7 +33,7 @@ export function CancelIcon({ width, height, className, onClick }: { width: numbe ); -}; +} export function RecentlyUsedIcon({ width, height, color }: { width: number, height: number, color: string; }) { return ( @@ -38,7 +41,7 @@ export function RecentlyUsedIcon({ width, height, color }: { width: number, heig ); -}; +} export function CogIcon({ width, height }: { width: number, height: number; }) { return ( @@ -46,4 +49,4 @@ export function CogIcon({ width, height }: { width: number, height: number; }) { ); -}; +} diff --git a/src/equicordplugins/moreStickers/components/index.ts b/src/equicordplugins/moreStickers/components/index.ts new file mode 100644 index 00000000..8a9996fe --- /dev/null +++ b/src/equicordplugins/moreStickers/components/index.ts @@ -0,0 +1,10 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +export * from "./categories"; +export * from "./icons"; +export * from "./misc"; +export * from "./picker"; diff --git a/src/equicordplugins/moreStickers/components/misc.tsx b/src/equicordplugins/moreStickers/components/misc.tsx new file mode 100644 index 00000000..1cb1cdd3 --- /dev/null +++ b/src/equicordplugins/moreStickers/components/misc.tsx @@ -0,0 +1,441 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import * as DataStore from "@api/DataStore"; +import { CheckedTextInput } from "@components/CheckedTextInput"; +import { Flex } from "@components/Flex"; +import { Button, Forms, React, TabBar, Text, TextArea, Toasts } from "@webpack/common"; + +import { convert as convertLineEP, getIdFromUrl as getLineEmojiPackIdFromUrl, getStickerPackById as getLineEmojiPackById, isLineEmojiPackHtml, parseHtml as getLineEPFromHtml } from "../lineEmojis"; +import { convert as convertLineSP, getIdFromUrl as getLineStickerPackIdFromUrl, getStickerPackById as getLineStickerPackById, isLineStickerPackHtml, parseHtml as getLineSPFromHtml } from "../lineStickers"; +import { deleteStickerPack, getStickerPackMetas, saveStickerPack } from "../stickers"; +import { SettingsTabsKey, Sticker, StickerPack, StickerPackMeta } from "../types"; +import { cl, clPicker, Mutex } from "../utils"; + +const mutex = new Mutex(); + +// The ID of recent sticker and recent sticker pack +export const RECENT_STICKERS_ID = "recent"; +export const RECENT_STICKERS_TITLE = "Recently Used"; + +const KEY = "Vencord-MoreStickers-RecentStickers"; + +const noDrag = { + onMouseDown: e => { e.preventDefault(); return false; }, + onDragStart: e => { e.preventDefault(); return false; } +}; + +const StickerPackMetadata = ({ meta, hoveredStickerPackId, setHoveredStickerPackId, refreshStickerPackMetas }: + { meta: StickerPackMeta, [key: string]: any; } +) => { + return ( +
setHoveredStickerPackId(meta.id)} + onMouseLeave={() => setHoveredStickerPackId(null)} + > +
+ + + {meta.title} +
+ ); +}; + +export const Settings = () => { + const [stickerPackMetas, setstickerPackMetas] = React.useState([]); + const [addStickerUrl, setAddStickerUrl] = React.useState(""); + const [addStickerHtml, setAddStickerHtml] = React.useState(""); + const [tab, setTab] = React.useState(SettingsTabsKey.ADD_STICKER_PACK_URL); + const [hoveredStickerPackId, setHoveredStickerPackId] = React.useState(null); + + async function refreshStickerPackMetas() { + setstickerPackMetas(await getStickerPackMetas()); + } + React.useEffect(() => { + refreshStickerPackMetas(); + }, []); + + return ( +
+ + { + Object.values(SettingsTabsKey).map(k => ( + + {k} + + )) + } + + + {tab === SettingsTabsKey.ADD_STICKER_PACK_URL && +
+ Add Sticker Pack from URL + +

+ Currently LINE stickers supported only.
+ Telegram stickers support is planned, but due to the lack of a public API, it is most likely to be provided by sticker pack files instead of adding by URL. +

+ + + + { + try { + getLineStickerPackIdFromUrl(v); + return true; + } catch (e: any) { } + try { + getLineEmojiPackIdFromUrl(v); + return true; + } catch (e: any) { } + + return "Invalid URL"; + }} + placeholder="Sticker Pack URL" + /> + + + +
+ } + {tab === SettingsTabsKey.ADD_STICKER_PACK_HTML && +
+ Add Sticker Pack from HTML + +

+ When encountering errors while adding a sticker pack, you can try to add it using the HTML source code of the sticker pack page.
+ This applies to stickers which are region locked / OS locked / etc.
+ The region LINE recognized may vary from the region you are in due to the CORS proxy we're using. +

+ + + +