try editor as preview

packages/design-system/atoms/breakpoints/BreakpointText.tsx

@@ -0,0 +1,26 @@
+import styled, { css } from 'styled-components';
+import { onSmallScreen } from './Breakpoints';
+
+const ShowOnSmall = styled.span`
+  display: none;
+  ${onSmallScreen(css`
+    display: initial;
+  `)}
+`;
+
+const ShowOnLarge = styled.span`
+  display: initial;
+  ${onSmallScreen(css`
+    display: none;
+  `)}
+`;
+
+export const BreakpointText = (props: { small: string; large: string }) => {
+  const { small, large } = props;
+  return (
+    <>
+      <ShowOnSmall>{small}</ShowOnSmall>
+      <ShowOnLarge>{large}</ShowOnLarge>
+    </>
+  );
+};

packages/design-system/atoms/breakpoints/index.ts

@@ -1,3 +1,4 @@
 export * from './BreakpointProvider';
 export * from './Breakpoints';
+export * from './BreakpointText';
 export * from './Context';

packages/design-system/atoms/button/Button.styled.ts

@@ -67,6 +67,13 @@ const colors = {
       background-color: ${palette.taupe200};
     }
   `,
+  silent: css`
+    background: none;
+    border-color: transparent;
+    :hover {
+      background-color: ${palette.taupe200};
+    }
+  `,
 };
 
 const sizes = {

packages/design-system/organisms/editor-shell/EditorShell.tsx

@@ -1,10 +1,16 @@
 import { Space } from '@roleypoly/design-system/atoms/space';
-import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view';
+import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category';
-import { EditorMasthead } from '@roleypoly/design-system/molecules/editor-masthead';
+import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead';
-import { EditorCategoriesTab } from '@roleypoly/design-system/organisms/editor-categories-tab';
+import { SecondaryEditing } from '@roleypoly/design-system/organisms/masthead';
-import { EditorDetailsTab } from '@roleypoly/design-system/organisms/editor-details-tab';
+import {
-import { Category, PresentableGuild } from '@roleypoly/types';
+  CategoryContainer,
+  Container,
+  MessageBox,
+} from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { ReactifyNewlines } from '@roleypoly/misc-utils/ReactifyNewlines';
+import { Category, CategoryType, PresentableGuild, Role } from '@roleypoly/types';
 import deepEqual from 'deep-equal';
+import { sortBy } from 'lodash';
 import React from 'react';
 
 export type EditorShellProps = {
@@ -43,39 +49,39 @@ export const EditorShell = (props: EditorShellProps) => {
   );
 
   return (
-    <div>
+    <>
-      <Space />
+      <SecondaryEditing showReset={hasChanges} guild={props.guild.guild} />
-      <TabView
+      <Container style={{ marginTop: 90 }}>
-        initialTab={0}
+        <Space />
-        masthead={
+        <ServerMasthead guild={props.guild.guild} editable={false} />
-          <EditorMasthead
+        <Space />
-            guild={guild}
+
-            onReset={reset}
+        <MessageBox>
-            onSubmit={() => props.onGuildChange?.(guild)}
+          <ReactifyNewlines>{props.guild.data.message}</ReactifyNewlines>
-            showSaveReset={hasChanges}
+        </MessageBox>
-          />
+        <Space />
-        }
+
-      >
+        <div>
-        <Tab title="Guild Details">
+          {sortBy(props.guild.data.categories, 'position').map((category, idx) => (
-          {() => (
+            <CategoryContainer key={idx}>
-            <EditorDetailsTab
+              <PickerCategory
-              {...props}
+                key={idx}
-              guild={guild}
+                category={category}
-              onMessageChange={onMessageChange}
+                title={category.name}
-            />
+                selectedRoles={[]}
-          )}
+                roles={
-        </Tab>
+                  category.roles
-        <Tab title="Categories & Roles">
+                    .map((role) => props.guild.roles.find((r) => r.id === role))
-          {() => (
+                    .filter((r) => r !== undefined) as Role[]
-            <EditorCategoriesTab
+                }
-              {...props}
+                onChange={() => () => {}}
-              guild={guild}
+                wikiMode={false}
-              onCategoryChange={onCategoryChange}
+                type={category.type === CategoryType.Single ? 'single' : 'multi'}
-            />
+              />
-          )}
+            </CategoryContainer>
-        </Tab>
+          ))}
-        <Tab title="Utilities">{() => <div>hi2!</div>}</Tab>
+        </div>
-      </TabView>
+      </Container>
-    </div>
+    </>
   );
 };

packages/design-system/organisms/masthead/Masthead.stories.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { guild, mastheadSlugs, user } from '../../fixtures/storyData';
 import { Authed } from './Authed';
 import { Guest } from './Guest';
+import { SecondaryEditing } from './Secondary';
 import { Skeleton } from './Skeleton';
 
 export default {
@@ -12,6 +13,18 @@ export const hasGuilds = () => (
   <Authed guilds={mastheadSlugs} activeGuildId={guild.id} user={user} recentGuilds={[]} />
 );
 
+export const withSecondary = () => (
+  <>
+    <Authed
+      guilds={mastheadSlugs}
+      activeGuildId={mastheadSlugs[0].id}
+      user={user}
+      recentGuilds={[]}
+    />
+    <SecondaryEditing guild={mastheadSlugs[0]} showReset />
+  </>
+);
+
 export const noGuilds = () => (
   <Authed guilds={[]} activeGuildId={null} user={user} recentGuilds={[]} />
 );

packages/design-system/organisms/masthead/Masthead.styled.tsx

@@ -91,3 +91,29 @@ export const GuildPopoverHead = styled.div`
     `)}
   }
 `;
+
+export const SecondaryBase = styled(MastheadBase)`
+  top: 50px;
+  background-color: ${palette.taupe300};
+  z-index: 99;
+  padding: 0 15px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+`;
+
+export const IconHolder = styled.div`
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  border: 2px solid ${palette.taupe200};
+  background-color: ${palette.taupe100};
+  margin-right: 1em;
+`;
+
+export const TextHolder = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

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

@@ -0,0 +1,44 @@
+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;
+};
+
+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">
+            Reset
+          </Button>
+        </FaderOpacity>
+        &nbsp;&nbsp;
+        <Button size="small">
+          Done <GoCheck />
+        </Button>
+      </MastheadRight>
+    </MastheadAlignment>
+  </SecondaryBase>
+);

packages/design-system/organisms/masthead/index.ts

@@ -1,3 +1,4 @@
 export * from './Authed';
 export * from './Guest';
+export * from './Secondary';
 export * from './Skeleton';