From cdc077ffa1608ef56300c05e6c83bf482ef11c54 Mon Sep 17 00:00:00 2001
From: Alyxia Sother <lexisoth2005@gmail.com>
Date: Tue, 29 Mar 2022 17:09:52 +0200
Subject: [PATCH] improvement(plugins-page): Refactor using card

I've (hackily so) written my own plugin card to replace the previous
usage of the `Checkbox` component.
Beware, ye who tread these lands, for they are decrepid.
---
 src/components/ui/Checkbox.tsx       |   4 +-
 src/pages/settings/panes/Plugins.tsx | 108 +++++++++++++++++++++++----
 2 files changed, 95 insertions(+), 17 deletions(-)

diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx
index e681ed92..a0e84d14 100644
--- a/src/components/ui/Checkbox.tsx
+++ b/src/components/ui/Checkbox.tsx
@@ -3,7 +3,7 @@ import styled, { css } from "styled-components/macro";
 
 import { Children } from "../../types/Preact";
 
-const CheckboxBase = styled.label`
+export const CheckboxBase = styled.label`
     gap: 4px;
     z-index: 1;
     display: flex;
@@ -52,7 +52,7 @@ const CheckboxDescription = styled.span`
     color: var(--secondary-foreground);
 `;
 
-const Checkmark = styled.div<{ checked: boolean; contrast?: boolean }>`
+export const Checkmark = styled.div<{ checked: boolean; contrast?: boolean }>`
     margin: 4px;
     width: 24px;
     height: 24px;
diff --git a/src/pages/settings/panes/Plugins.tsx b/src/pages/settings/panes/Plugins.tsx
index 8560a520..32e7877e 100644
--- a/src/pages/settings/panes/Plugins.tsx
+++ b/src/pages/settings/panes/Plugins.tsx
@@ -1,13 +1,104 @@
+import { Check } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
+import styled from "styled-components";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 
 import { useApplicationState } from "../../../mobx/State";
 
-import Checkbox from "../../../components/ui/Checkbox";
+import Button from "../../../components/ui/Button";
+import { CheckboxBase, Checkmark } from "../../../components/ui/Checkbox";
 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;
+}
+
+const CustomCheckboxBase = styled(CheckboxBase)`
+    margin-top: 0 !important;
+`;
+export interface CheckboxProps {
+    checked: boolean;
+    disabled?: boolean;
+    onChange: (state: boolean) => void;
+}
+function PluginCheckbox(props: CheckboxProps) {
+    // HACK HACK HACK(lexisother): THIS ENTIRE THING IS A HACK!!!!
+    /*
+        Until some reviewer points me in the right direction, I've resorted to
+         fabricating my own checkbox component.
+       "WHY?!", you might ask. Well, the normal `Checkbox` component can take
+         textual contents, and *also* adds a `margin-top` of 20 pixels.
+        We... don't need that. At all. *Especially* the margin. It makes our card
+         look disproportionate.
+        
+        Apologies, @insert!
+    */
+    return (
+        <CustomCheckboxBase disabled={props.disabled}>
+            <input
+                type="checkbox"
+                checked={props.checked}
+                onChange={() =>
+                    !props.disabled && props.onChange(!props.checked)
+                }
+            />
+            <Checkmark checked={props.checked} className="check">
+                <Check size={20} />
+            </Checkmark>
+        </CustomCheckboxBase>
+    );
+}
+
+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}>
+                        <div className={styles.container}>
+                            {plugin.namespace} / {plugin.id}
+                        </div>
+                        <PluginCheckbox
+                            key={plugin.id}
+                            checked={plugin.enabled!}
+                            onChange={() => {
+                                !plugin.enabled
+                                    ? plugins.load(plugin.namespace, plugin.id)
+                                    : plugins.unload(
+                                          plugin.namespace,
+                                          plugin.id,
+                                      );
+                            }}
+                        />
+                    </div>
+                </div>
+                <div className={styles.buttonRow}>
+                    <Button
+                        onClick={() =>
+                            plugins.remove(plugin.namespace, plugin.id)
+                        }>
+                        <p>Delete</p>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
 export const PluginsPage = observer(() => {
     const plugins = useApplicationState().plugins;
     return (
@@ -16,20 +107,7 @@ export const PluginsPage = observer(() => {
                 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}
-                        checked={plugin.enabled!}
-                        onChange={() => {
-                            !plugin.enabled
-                                ? plugins.load(plugin.namespace, plugin.id)
-                                : plugins.unload(plugin.namespace, plugin.id);
-                        }}
-                        description={""}>
-                        {plugin.namespace} / {plugin.id}
-                    </Checkbox>
-                );
+                return <PluginCard key={plugin.id} plugin={plugin} />;
             })}
 
             {plugins.list().length === 0 && (