First pass at new server console design

resources/scripts/components/server/console/PowerButtons.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/elements/button/index';
+import Can from '@/components/elements/Can';
+import { ServerContext } from '@/state/server';
+import { PowerAction } from '@/components/server/ServerConsole';
+import { Dialog } from '@/components/elements/dialog';
+
+interface PowerButtonProps {
+    className?: string;
+}
+
+export default ({ className }: PowerButtonProps) => {
+    const [ open, setOpen ] = useState(false);
+    const status = ServerContext.useStoreState(state => state.status.value);
+    const instance = ServerContext.useStoreState(state => state.socket.instance);
+
+    const killable = status === 'stopping';
+    const onButtonClick = (action: PowerAction | 'kill-confirmed', e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+        e.preventDefault();
+        if (action === 'kill') {
+            return setOpen(true);
+        }
+
+        if (instance) {
+            setOpen(false);
+            instance.send('set state', action === 'kill-confirmed' ? 'kill' : action);
+        }
+    };
+
+    return (
+        <div className={className}>
+            <Dialog.Confirm
+                open={open}
+                hideCloseIcon
+                onClose={() => setOpen(false)}
+                title={'Forcibly Stop Process'}
+                confirm={'Continue'}
+                onConfirmed={onButtonClick.bind(this, 'kill-confirmed')}
+            >
+                Forcibly stopping a server can lead to data corruption.
+            </Dialog.Confirm>
+            <Can action={'control.start'}>
+                <Button
+                    className={'w-24'}
+                    disabled={status !== 'offline'}
+                    onClick={onButtonClick.bind(this, 'start')}
+                >
+                    Start
+                </Button>
+            </Can>
+            <Can action={'control.restart'}>
+                <Button.Text
+                    className={'w-24'}
+                    variant={Button.Variants.Secondary}
+                    disabled={!status}
+                    onClick={onButtonClick.bind(this, 'restart')}
+                >
+                    Restart
+                </Button.Text>
+            </Can>
+            <Can action={'control.stop'}>
+                <Button.Danger
+                    className={'w-24'}
+                    variant={killable ? undefined : Button.Variants.Secondary}
+                    disabled={status === 'offline'}
+                    onClick={onButtonClick.bind(this, killable ? 'kill' : 'stop')}
+                >
+                    {killable ? 'Kill' : 'Stop'}
+                </Button.Danger>
+            </Can>
+        </div>
+    );
+};