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/app-shell/AppShell.styled.tsx

@@ -2,9 +2,9 @@ import { palette } from '@roleypoly/design-system/atoms/colors';
 import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
 import styled, { createGlobalStyle } from 'styled-components';
 
-export const Content = styled.div<{ small?: boolean }>`
+export const Content = styled.div<{ small?: boolean; double?: boolean }>`
   margin: 0 auto;
-  margin-top: 50px;
+  margin-top: ${(props) => (props.double ? '100px' : '50px')};
   width: ${(props) => (props.small ? '960px' : '1024px')};
   max-width: 98vw;
   max-height: calc(100vh - 50px);

packages/design-system/organisms/app-shell/AppShell.tsx

@@ -11,6 +11,7 @@ export type AppShellProps = {
   user?: DiscordUser;
   showFooter?: boolean;
   small?: boolean;
+  double?: boolean;
   activeGuildId?: string | null;
   guilds?: GuildSlug[];
   recentGuilds?: string[];
@@ -56,7 +57,9 @@ export const AppShell = (props: AppShellProps) => (
     )}
     <OptionallyScroll shouldScroll={!props.skeleton}>
       <>
-        <Content small={props.small}>{props.children}</Content>
+        <Content small={props.small} double={props.double}>
+          {props.children}
+        </Content>
         {props.showFooter && <Footer />}
       </>
     </OptionallyScroll>