diff --git a/plugins/Commands/settings.tsx b/plugins/Commands/settings.tsx index 0a8e5ec..f4af043 100644 --- a/plugins/Commands/settings.tsx +++ b/plugins/Commands/settings.tsx @@ -16,6 +16,76 @@ const { TableRowGroup, TableSwitchRow, Stack, TableRow } = findByProps( "TableRow", ); +const { FormRow, FormSwitchRow } = Forms; + +// Better Table Row Group Component (inspired by nexpid's styling) +function BetterTableRowGroup({ + title, + icon, + children, + padding = false, +}: React.PropsWithChildren<{ + title?: string; + icon?: number; + padding?: boolean; +}>) { + const styles = stylesheet.createThemedStyleSheet({ + main: { + backgroundColor: semanticColors.CARD_PRIMARY_BG, + borderColor: semanticColors.BORDER_FAINT, + borderWidth: 1, + borderRadius: 16, + overflow: "hidden", + flex: 1, + }, + titleContainer: { + marginBottom: 8, + marginHorizontal: 0, + marginTop: 8, + gap: 4, + flexDirection: "row", + alignItems: "center", + }, + icon: { + width: 16, + height: 16, + marginTop: 1.5, + tintColor: semanticColors.TEXT_MUTED, + }, + titleText: { + fontSize: 14, + fontWeight: "600", + color: semanticColors.TEXT_MUTED, + }, + }); + + return ( + + {title && ( + + {icon && ( + + )} + + {title.toUpperCase()} + + + )} + + {padding ? ( + + {children} + + ) : children} + + + ); +} + // Header Component function Header() { const styles = stylesheet.createThemedStyleSheet({ @@ -63,119 +133,6 @@ function Header() { ); } -// Gary API Selection Component -function GaryAPISelection({ forceRerender }: { forceRerender: () => void }) { - const styles = stylesheet.createThemedStyleSheet({ - container: { - backgroundColor: semanticColors.BACKGROUND_SECONDARY, - borderRadius: 12, - marginHorizontal: 16, - marginVertical: 8, - padding: 16, - }, - title: { - fontSize: 18, - fontWeight: "600", - color: semanticColors.TEXT_NORMAL, - marginBottom: 12, - }, - optionContainer: { - flexDirection: "row", - alignItems: "center", - paddingVertical: 12, - paddingHorizontal: 8, - borderRadius: 8, - marginVertical: 2, - }, - selectedOption: { - backgroundColor: semanticColors.BACKGROUND_MODIFIER_SELECTED, - }, - optionText: { - fontSize: 16, - fontWeight: "500", - marginLeft: 12, - flex: 1, - }, - selectedText: { - color: semanticColors.TEXT_BRAND, - }, - normalText: { - color: semanticColors.TEXT_NORMAL, - }, - radioButton: { - width: 20, - height: 20, - borderRadius: 10, - borderWidth: 2, - borderColor: semanticColors.TEXT_MUTED, - alignItems: "center", - justifyContent: "center", - }, - selectedRadio: { - borderColor: semanticColors.TEXT_BRAND, - }, - radioInner: { - width: 10, - height: 10, - borderRadius: 5, - backgroundColor: semanticColors.TEXT_BRAND, - }, - }); - - const options = [ - { value: "gary", label: "Gary API", desc: "Original Gary cat images" }, - { value: "catapi", label: "Cat API", desc: "Random cat pictures" }, - { value: "minker", label: "Minker API", desc: "Minky images" }, - { value: "goober", label: "Goober API", desc: "Goober images" }, - ]; - - const currentSource = storage.garySettings?.imageSource || "gary"; - - return ( - - Gary Image Source - {options.map((option) => { - const isSelected = currentSource === option.value; - return ( - { - storage.garySettings.imageSource = option.value; - forceRerender(); - }} - > - - {isSelected && } - - - - {option.label} - - - {option.desc} - - - - ); - })} - - ); -} - // Initialize storage with default values if (!storage.factSettings) { storage.factSettings = { @@ -257,6 +214,50 @@ 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(); + }, + }); + }, + }); + }, + }); + }; + return (
- - {/* Facts Commands */} - - { - storage.factSettings.sendAsReply = v; - forceRerender(); - }} - /> - { - storage.factSettings.includeCitation = v; - forceRerender(); - }} - /> - handleCommandToggle("catfact", v)} - /> - handleCommandToggle("dogfact", v)} - /> - handleCommandToggle("useless", v)} - /> - + {/* Facts Commands */} + + } + value={storage.factSettings?.sendAsReply ?? true} + onValueChange={(v: boolean) => { + storage.factSettings.sendAsReply = v; + forceRerender(); + }} + /> + } + value={storage.factSettings?.includeCitation ?? false} + onValueChange={(v: boolean) => { + storage.factSettings.includeCitation = v; + forceRerender(); + }} + /> + } + value={storage.enabledCommands?.catfact ?? true} + onValueChange={(v) => handleCommandToggle("catfact", v)} + /> + } + value={storage.enabledCommands?.dogfact ?? true} + onValueChange={(v) => handleCommandToggle("dogfact", v)} + /> + } + value={storage.enabledCommands?.useless ?? true} + onValueChange={(v) => handleCommandToggle("useless", v)} + /> + - {/* List Commands */} - - { - storage.listSettings.pluginListAlwaysDetailed = v; - forceRerender(); - }} - /> - { - storage.listSettings.themeListAlwaysDetailed = v; - forceRerender(); - }} - /> - handleCommandToggle("pluginList", v)} - /> - handleCommandToggle("themeList", v)} - /> - + {/* List Commands */} + + } + value={storage.listSettings?.pluginListAlwaysDetailed ?? false} + onValueChange={(v: boolean) => { + storage.listSettings.pluginListAlwaysDetailed = v; + forceRerender(); + }} + /> + } + value={storage.listSettings?.themeListAlwaysDetailed ?? false} + onValueChange={(v: boolean) => { + storage.listSettings.themeListAlwaysDetailed = v; + forceRerender(); + }} + /> + } + value={storage.enabledCommands?.pluginList ?? true} + onValueChange={(v) => handleCommandToggle("pluginList", v)} + /> + } + value={storage.enabledCommands?.themeList ?? true} + onValueChange={(v) => handleCommandToggle("themeList", v)} + /> + - {/* Image Commands */} - - handleCommandToggle("petpet", v)} - /> - + {/* Image Commands */} + + } + value={storage.enabledCommands?.petpet ?? true} + onValueChange={(v) => handleCommandToggle("petpet", v)} + /> + - {/* KonoChan Commands */} - - handleCommandToggle("konoself", v)} - /> - handleCommandToggle("konosend", v)} - /> - + {/* Gary Commands */} + + } + value={storage.enabledCommands?.gary ?? true} + onValueChange={(v) => handleCommandToggle("gary", v)} + /> + } + trailing={} + onPress={showGarySourceSelection} + /> + - {/* Message Commands */} - - handleCommandToggle("firstmessage", v)} - /> - + {/* KonoChan Commands */} + + } + value={storage.enabledCommands?.konoself ?? true} + onValueChange={(v) => handleCommandToggle("konoself", v)} + /> + } + value={storage.enabledCommands?.konosend ?? true} + onValueChange={(v) => handleCommandToggle("konosend", v)} + /> + - {/* System Commands */} - - handleCommandToggle("sysinfo", v)} - /> - + {/* Message Commands */} + + } + value={storage.enabledCommands?.firstmessage ?? true} + onValueChange={(v) => handleCommandToggle("firstmessage", v)} + /> + - {/* Spotify Commands */} - - handleCommandToggle("spotifyTrack", v)} - /> - handleCommandToggle("spotifyAlbum", v)} - /> - handleCommandToggle("spotifyArtists", v)} - /> - handleCommandToggle("spotifyCover", v)} - /> - + {/* System Commands */} + + } + value={storage.enabledCommands?.sysinfo ?? true} + onValueChange={(v) => handleCommandToggle("sysinfo", v)} + /> + - {/* Gary Commands */} - - handleCommandToggle("gary", v)} - /> - - + {/* Spotify Commands */} + + } + value={storage.enabledCommands?.spotifyTrack ?? true} + onValueChange={(v) => handleCommandToggle("spotifyTrack", v)} + /> + } + value={storage.enabledCommands?.spotifyAlbum ?? true} + onValueChange={(v) => handleCommandToggle("spotifyAlbum", v)} + /> + } + value={storage.enabledCommands?.spotifyArtists ?? true} + onValueChange={(v) => handleCommandToggle("spotifyArtists", v)} + /> + } + value={storage.enabledCommands?.spotifyCover ?? true} + onValueChange={(v) => handleCommandToggle("spotifyCover", v)} + /> + - {/* Custom Gary API Selection */} - - - - - - {/* Credits */} - - - - - - - - - - - - {/* About */} - - - - + {/* Credits */} + + + 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 + +