RosePlugs: inline install button on each row, plus a timeout safety net

This commit is contained in:
Ally Founder 2026-08-11 18:41:58 -04:00
parent 986f9a6352
commit a42d97decb
2 changed files with 68 additions and 18 deletions

View file

@ -6,21 +6,28 @@ import { NexusPlugin } from "../lib/nexusApi";
const { ScrollView, Text } = ReactNative;
// Confirmed live: this could get stuck on "Installing..." forever - the timeout below is a safety
// net so a hung installPlugin() call can't leave the button stuck indefinitely.
function withTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => reject(new Error("Timed out")), ms);
promise.then(
(v) => { clearTimeout(timer); resolve(v); },
(e) => { clearTimeout(timer); reject(e); },
);
});
}
export default function PluginDetailSheet({ plugin }: { plugin: NexusPlugin }) {
const [installing, setInstalling] = React.useState(false);
const alreadyInstalled = plugin.installUrl in installedPlugins;
const onInstall = React.useCallback(() => {
setInstalling(true);
installPlugin(plugin.installUrl)
.then(() => {
setInstalling(false);
showToast(`${plugin.name} installed`);
})
.catch((e: any) => {
setInstalling(false);
showToast(`Install failed: ${e?.message ?? e}`);
});
withTimeout(installPlugin(plugin.installUrl), 20000)
.then(() => showToast(`${plugin.name} installed`))
.catch((e: any) => showToast(`Install failed: ${e?.message ?? e}`))
.finally(() => setInstalling(false));
}, [plugin.installUrl]);
return (

View file

@ -1,6 +1,7 @@
import { React, ReactNative } from "@vendetta/metro/common";
import { plugins as installedPlugins } from "@vendetta/plugins";
import { plugins as installedPlugins, installPlugin } from "@vendetta/plugins";
import { showCustomAlert } from "@vendetta/ui/alerts";
import { showToast } from "@vendetta/ui/toasts";
import SettingsScaffold from "@shared/ui/SettingsScaffold";
import NoteBox from "@shared/ui/NoteBox";
import PrimaryButton from "@shared/ui/PrimaryButton";
@ -8,7 +9,7 @@ import { TableRow, TableRowGroup } from "@shared/ui/table";
import { fetchNexusPlugins, NexusPlugin } from "../lib/nexusApi";
import PluginDetailSheet from "./PluginDetailSheet";
const { Text } = ReactNative;
const { Text, View, TouchableOpacity } = ReactNative;
interface BrowserState {
loading: boolean;
@ -16,8 +17,22 @@ interface BrowserState {
plugins: NexusPlugin[];
}
// Confirmed live: installing from the detail sheet could get stuck on "Installing..." forever -
// the promise from installPlugin wasn't reliably settling. This timeout is a safety net so a hung
// call can't leave a row stuck indefinitely, on top of moving the action to an inline button.
function withTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => reject(new Error("Timed out")), ms);
promise.then(
(v) => { clearTimeout(timer); resolve(v); },
(e) => { clearTimeout(timer); reject(e); },
);
});
}
export default function PluginsBrowser() {
const [state, setState] = React.useState<BrowserState>({ loading: true, error: null, plugins: [] });
const [installingId, setInstallingId] = React.useState<string | null>(null);
const load = React.useCallback(() => {
setState((s) => ({ ...s, loading: true, error: null }));
@ -30,6 +45,14 @@ export default function PluginsBrowser() {
load();
}, [load]);
const onInstall = React.useCallback((plugin: NexusPlugin) => {
setInstallingId(plugin.id);
withTimeout(installPlugin(plugin.installUrl), 20000)
.then(() => showToast(`${plugin.name} installed`))
.catch((e: any) => showToast(`Install failed: ${e?.message ?? e}`))
.finally(() => setInstallingId(null));
}, []);
if (state.loading) {
return (
<SettingsScaffold>
@ -60,19 +83,39 @@ export default function PluginsBrowser() {
<TableRowGroup key={category} title={category}>
{plugins.map((plugin) => {
const installed = plugin.installUrl in installedPlugins;
const installing = installingId === plugin.id;
return (
<TableRow
key={plugin.id}
label={plugin.name}
subLabel={installed ? "Installed" : plugin.tagline || plugin.description}
trailing={
plugin.status && plugin.status !== "default" ? (
<Text style={{ fontSize: 11, fontWeight: "700", opacity: 0.7 }}>
{plugin.status.toUpperCase()}
</Text>
) : installed ? (
<Text style={{ fontSize: 14, fontWeight: "700", color: "#23A55A" }}>✓</Text>
) : undefined
<View style={{ flexDirection: "row", alignItems: "center" }}>
{plugin.status && plugin.status !== "default" && (
<Text style={{ fontSize: 11, fontWeight: "700", opacity: 0.7, marginRight: 8 }}>
{plugin.status.toUpperCase()}
</Text>
)}
{installed ? (
<Text style={{ fontSize: 14, fontWeight: "700", color: "#23A55A" }}>✓</Text>
) : (
<TouchableOpacity
disabled={installing}
onPress={() => onInstall(plugin)}
style={{
backgroundColor: "#5865F2",
borderRadius: 6,
paddingHorizontal: 10,
paddingVertical: 5,
opacity: installing ? 0.6 : 1,
}}
>
<Text style={{ color: "white", fontSize: 12, fontWeight: "600" }}>
{installing ? "Installing…" : "Install"}
</Text>
</TouchableOpacity>
)}
</View>
}
onPress={() => showCustomAlert(PluginDetailSheet, { plugin })}
/>