Feat/editor as preview (#294)

* try editor as preview

* add databinding for editor actions and message

* add actions, reordering base interactions

* add drag and drop ordering for categoriers

* category skeleton

* fix linting issues

* add role list and add button, non-functional

* bump packages

* add role search prototype

* yarn.lock sync

* fix lint

* remove cfw-emulator bin

packages/design-system/organisms/masthead/Secondary.tsx

@@ -0,0 +1,46 @@
+import { BreakpointText } from '@roleypoly/design-system/atoms/breakpoints';
+import { Button } from '@roleypoly/design-system/atoms/button';
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { GuildSlug } from '@roleypoly/types';
+import { GoCheck, GoPencil } from 'react-icons/go';
+import {
+  IconHolder,
+  MastheadAlignment,
+  MastheadLeft,
+  MastheadRight,
+  SecondaryBase,
+  TextHolder,
+} from './Masthead.styled';
+
+type SecondaryEditingProps = {
+  guild: GuildSlug;
+  showReset: boolean;
+  onReset?: () => void;
+  onSubmit?: () => void;
+};
+
+export const SecondaryEditing = (props: SecondaryEditingProps) => (
+  <SecondaryBase>
+    <MastheadAlignment>
+      <MastheadLeft>
+        <TextHolder>
+          <IconHolder>
+            <GoPencil />
+          </IconHolder>
+          <BreakpointText small="Editing..." large={`Editing ${props.guild.name}...`} />
+        </TextHolder>
+      </MastheadLeft>
+      <MastheadRight>
+        <FaderOpacity isVisible={props.showReset}>
+          <Button size="small" color="silent" onClick={props.onReset}>
+            Reset
+          </Button>
+        </FaderOpacity>
+        &nbsp;&nbsp;
+        <Button size="small" onClick={props.onSubmit}>
+          Done <GoCheck />
+        </Button>
+      </MastheadRight>
+    </MastheadAlignment>
+  </SecondaryBase>
+);