From fc7804f372137f99501d392cf71436dc5629635a Mon Sep 17 00:00:00 2001 From: kmmiio99o Date: Wed, 1 Oct 2025 16:28:57 +0200 Subject: [PATCH] Refactor settings page v3 --- plugins/Commands/settings.tsx | 374 ++++++++++++++++++++++++++++------ 1 file changed, 313 insertions(+), 61 deletions(-) diff --git a/plugins/Commands/settings.tsx b/plugins/Commands/settings.tsx index f4af043..d128d2a 100644 --- a/plugins/Commands/settings.tsx +++ b/plugins/Commands/settings.tsx @@ -3,6 +3,7 @@ import { storage } from "@vendetta/plugin"; import { useProxy } from "@vendetta/storage"; import { React, ReactNative as RN, stylesheet } from "@vendetta/metro/common"; import { findByProps } from "@vendetta/metro"; +import { NavigationNative } from "@vendetta/metro/common"; import { semanticColors } from "@vendetta/ui"; import { getAssetIDByName } from "@vendetta/ui/assets"; import { Forms } from "@vendetta/ui/components"; @@ -133,6 +134,293 @@ function Header() { ); } +// Credits Page Component +function CreditsPage() { + const styles = stylesheet.createThemedStyleSheet({ + container: { + flex: 1, + backgroundColor: semanticColors.BACKGROUND_PRIMARY, + }, + creditItem: { + flexDirection: "row", + alignItems: "center", + paddingVertical: 12, + paddingHorizontal: 16, + backgroundColor: semanticColors.CARD_PRIMARY_BG, + borderRadius: 12, + marginHorizontal: 16, + marginVertical: 4, + }, + avatar: { + width: 40, + height: 40, + borderRadius: 20, + marginRight: 12, + }, + textContainer: { + flex: 1, + }, + commandText: { + fontSize: 16, + fontWeight: "600", + color: semanticColors.TEXT_NORMAL, + }, + authorText: { + fontSize: 14, + color: semanticColors.TEXT_MUTED, + marginTop: 2, + }, + }); + + const credits = [ + { command: "Facts Commands", author: "jdev082", avatar: "https://github.com/jdev082.png" }, + { command: "List Commands", author: "Kitomanari", avatar: "https://github.com/kitomanari.png" }, + { command: "PetPet Command", author: "wolfieeee", avatar: "https://github.com/wolfieeee.png" }, + { command: "KonoChan Commands", author: "btmc727 & Rico040", avatar: "https://github.com/btmc727.png" }, + { command: "FirstMessage Command", author: "sapphire", avatar: "https://github.com/sapphiredevs.png" }, + { command: "Sysinfo Command", author: "mugman", avatar: "https://github.com/mugmandev.png" }, + { command: "Spotify Commands", author: "Kitomanari", avatar: "https://github.com/kitomanari.png" }, + { command: "Gary Command", author: "Zach Orange", avatar: "https://github.com/zachorange.png" }, + ]; + + return ( + + + + + Thanks to all the amazing developers who contributed to this plugin collection! + + + + {credits.map((credit, index) => ( + + + + {credit.command} + by {credit.author} + + + ))} + + + + Commands Plugin Collection{'\n'} + Version 1.0.0{'\n'} + Made with ❤️ for the community + + + + + ); +} + +// Gary API Settings Page Component +function GaryAPIPage({ forceRerender }: { forceRerender: () => void }) { + const styles = stylesheet.createThemedStyleSheet({ + container: { + flex: 1, + backgroundColor: semanticColors.BACKGROUND_PRIMARY, + }, + optionContainer: { + flexDirection: "row", + alignItems: "center", + paddingVertical: 16, + paddingHorizontal: 16, + backgroundColor: semanticColors.CARD_PRIMARY_BG, + borderRadius: 12, + marginHorizontal: 16, + marginVertical: 4, + }, + selectedOption: { + backgroundColor: semanticColors.BRAND_500_ALPHA, + borderColor: semanticColors.BRAND_500, + borderWidth: 2, + }, + normalOption: { + borderColor: semanticColors.BORDER_FAINT, + borderWidth: 1, + }, + radioButton: { + width: 20, + height: 20, + borderRadius: 10, + borderWidth: 2, + borderColor: semanticColors.TEXT_MUTED, + alignItems: "center", + justifyContent: "center", + marginRight: 12, + }, + selectedRadio: { + borderColor: semanticColors.BRAND_500, + }, + radioInner: { + width: 10, + height: 10, + borderRadius: 5, + backgroundColor: semanticColors.BRAND_500, + }, + textContainer: { + flex: 1, + }, + optionTitle: { + fontSize: 16, + fontWeight: "600", + color: semanticColors.TEXT_NORMAL, + }, + optionDesc: { + fontSize: 14, + color: semanticColors.TEXT_MUTED, + marginTop: 2, + }, + selectedText: { + color: semanticColors.BRAND_500, + }, + }); + + const options = [ + { + value: "gary", + title: "Gary API", + desc: "Original Gary the cat images from api.garythe.cat", + icon: getAssetIDByName("ic_cat") + }, + { + value: "catapi", + title: "Cat API", + desc: "Random cat pictures from thecatapi.com", + icon: getAssetIDByName("ic_cat") + }, + { + value: "minker", + title: "Minker API", + desc: "Minky images from minky.materii.dev", + icon: getAssetIDByName("ImageIcon") + }, + { + value: "goober", + title: "Goober API", + desc: "Goober images from api.garythe.cat/goober", + icon: getAssetIDByName("ImageIcon") + }, + ]; + + const currentSource = storage.garySettings?.imageSource || "gary"; + + return ( + + + + + Choose which API the /gary command should use to fetch images. + + + + {options.map((option) => { + const isSelected = currentSource === option.value; + return ( + { + storage.garySettings.imageSource = option.value; + forceRerender(); + }} + > + + {isSelected && } + + + + + {option.title} + + + {option.desc} + + + + ); + })} + + + + Currently using: { + currentSource === "gary" ? "Gary API" : + currentSource === "catapi" ? "Cat API" : + currentSource === "minker" ? "Minker API" : + currentSource === "goober" ? "Goober API" : "Gary API" + } + + + + + ); +} + // Initialize storage with default values if (!storage.factSettings) { storage.factSettings = { @@ -178,9 +466,11 @@ if (!storage.pendingRestart) { storage.pendingRestart = false; } +// Main Settings Component export default function Settings() { useProxy(storage); const [rerender, forceRerender] = React.useReducer((x) => x + 1, 0); + const navigation = NavigationNative.useNavigation(); const styles = stylesheet.createThemedStyleSheet({ container: { @@ -214,47 +504,17 @@ export default function Settings() { forceRerender(); }; - const showGarySourceSelection = () => { - alerts.showConfirmationAlert({ - title: "Choose Gary Image Source", - content: "Select an image source for the Gary command:", - confirmText: "Gary API", - cancelText: "Other Options", - confirmColor: "brand", - onConfirm: () => { - storage.garySettings.imageSource = "gary"; - forceRerender(); - }, - onCancel: () => { - alerts.showConfirmationAlert({ - title: "Choose Image Source", - content: "Select from remaining options:", - confirmText: "Cat API", - cancelText: "More Options", - confirmColor: "brand", - onConfirm: () => { - storage.garySettings.imageSource = "catapi"; - forceRerender(); - }, - onCancel: () => { - alerts.showConfirmationAlert({ - title: "Choose Image Source", - content: "Select from final options:", - confirmText: "Minker API", - cancelText: "Goober API", - confirmColor: "brand", - onConfirm: () => { - storage.garySettings.imageSource = "minker"; - forceRerender(); - }, - onCancel: () => { - storage.garySettings.imageSource = "goober"; - forceRerender(); - }, - }); - }, - }); - }, + const navigateToCredits = () => { + navigation.push("VendettaCustomPage", { + title: "Credits", + render: () => , + }); + }; + + const navigateToGaryAPI = () => { + navigation.push("VendettaCustomPage", { + title: "Gary API Settings", + render: () => , }); }; @@ -383,14 +643,14 @@ export default function Settings() { onValueChange={(v) => handleCommandToggle("gary", v)} /> } trailing={} - onPress={showGarySourceSelection} + onPress={navigateToGaryAPI} /> @@ -478,26 +738,18 @@ export default function Settings() { /> - {/* Credits */} + {/* Navigation Pages */} - - Facts Commands by jdev082{'\n'} - List Commands by Kitomanari{'\n'} - PetPet Command by wolfieeee{'\n'} - KonoChan Commands by btmc727 & Rico040{'\n'} - FirstMessage Command by sapphire{'\n'} - Sysinfo Command by mugman{'\n'} - Spotify Commands by Kitomanari{'\n'} - Gary Command by Zach Orange - + } + trailing={} + onPress={navigateToCredits} + />