for-legacy-web/src/pages/settings/panes/Plugins.tsx

87 lines
2.8 KiB
TypeScript

import { observer } from "mobx-react-lite";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { Button, Checkbox } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import Tip from "../../../components/ui/Tip";
// Just keeping this here for general purpose. Should probably be exported
// elsewhere, though.
interface Plugin {
namespace: string;
id: string;
version: string;
enabled: boolean | undefined;
}
interface CardProps {
plugin: Plugin;
}
function PluginCard({ plugin }: CardProps) {
const plugins = useApplicationState().plugins;
// TODO(lexisother): ...don't hijack bot cards? We need a general-purpose
// card component.
return (
<div className={styles.myBots}>
<div key={plugin.id} className={styles.botCard}>
<div className={styles.infocontainer}>
<div className={styles.infoheader}>
<Checkbox
key={plugin.id}
value={plugin.enabled!}
title={
<>
{plugin.namespace} / {plugin.id}
</>
}
onChange={() => {
!plugin.enabled
? plugins.load(plugin.namespace, plugin.id)
: plugins.unload(
plugin.namespace,
plugin.id,
);
}}
/>
</div>
</div>
<div className={styles.buttonRow}>
<Button
palette="error"
onClick={() =>
plugins.remove(plugin.namespace, plugin.id)
}>
<Text id="app.settings.pages.plugins.delete_plugin" />
</Button>
</div>
</div>
</div>
);
}
export const PluginsPage = observer(() => {
const plugins = useApplicationState().plugins;
return (
<div className={styles.plugins}>
<Tip error hideSeparator>
<Text id="app.settings.pages.plugins.wip" />
</Tip>
{plugins.list().map((plugin) => {
return <PluginCard key={plugin.id} plugin={plugin} />;
})}
{plugins.list().length === 0 && (
<div className={styles.empty}>
<Text id="app.settings.pages.plugins.no_plugins" />
</div>
)}
</div>
);
});