improvement(plugins-page): Use i18n Text

Note that, since the translation PR has not been made yet, this patch
was used to test the changes: https://public.alyxia.dev/revolt/lang.diff

src/pages/settings/Settings.tsx

@@ -166,8 +166,7 @@ export default observer(() => {
                 {
                     id: "plugins",
                     icon: <Plug size={20} />,
-                    // TODO(lexisother): Replace this with the actual i18n <Text />
+                    title: <Text id="app.settings.pages.plugins.title" />,
-                    title: <p>Plugins</p>,
                     hidden: !experiments.isEnabled("plugins"),
                 },
                 {

src/pages/settings/panes/Panes.module.scss

@@ -532,6 +532,13 @@
     h1 {
         margin-bottom: 20px !important;
     }
+
+    .empty {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 1rem;
+    }
 }
 
 .myBots {

src/pages/settings/panes/Plugins.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react-lite";
 
 import styles from "./Panes.module.scss";
+import { Text } from "preact-i18n";
 
 import { useApplicationState } from "../../../mobx/State";
 
@@ -11,12 +12,11 @@ export const PluginsPage = observer(() => {
     const plugins = useApplicationState().plugins;
     return (
         <div className={styles.plugins}>
-            {/* TODO(lexisother): Wrap in <h3><Text /></h3> */}
-            <h1>Plugins</h1>
             <Tip error hideSeparator>
                 Warning: This feature is still in development.
             </Tip>
             {plugins.list().map((plugin) => {
+                // TODO(lexisother): Stop using Checkbox, write a custom component
                 return (
                     <Checkbox
                         key={plugin.id}
@@ -31,6 +31,12 @@ export const PluginsPage = observer(() => {
                     </Checkbox>
                 );
             })}
+
+            {plugins.list().length === 0 && (
+                <div className={styles.empty}>
+                    <Text id="app.settings.pages.plugins.no_plugins" />
+                </div>
+            )}
         </div>
     );
 });