add databinding for editor actions and message

packages/design-system/atoms/text-input/TextInput.tsx

@@ -94,18 +94,27 @@ const StyledTextarea = styled.textarea`
 export const MultilineTextInput = (
   props: TextInputProps<HTMLTextAreaElement> & { rows?: number }
 ) => {
-  const { ...rest } = props;
+  const { children, ...rest } = props;
   const [value, setValue] = React.useState(String(props.value));
-  const rows = Math.min(10, Math.max(props.rows || 2, value.split(/\r?\n/).length));
+  const rows = React.useMemo(
+    () => Math.min(10, Math.max(props.rows || 2, value.split(/\r?\n/).length)),
+    [value]
+  );
+
+  React.useEffect(() => {
+    setValue(String(props.value));
+  }, [props.value]);
+
   return (
     <StyledTextarea
       {...rest}
       rows={rows}
-      value={value}
       onChange={(eventData) => {
         setValue(eventData.target.value);
         props.onChange?.(eventData);
       }}
-    />
+    >
+      {value}
+    </StyledTextarea>
   );
 };

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>

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

@@ -1,4 +1,8 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
 import { Space } from '@roleypoly/design-system/atoms/space';
+import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
+import { AmbientLarge, LargeText } from '@roleypoly/design-system/atoms/typography';
 import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category';
 import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead';
 import { SecondaryEditing } from '@roleypoly/design-system/organisms/masthead';
@@ -7,11 +11,11 @@ import {
   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';
+import { GoEyeClosed } from 'react-icons/go';
 
 export type EditorShellProps = {
   guild: PresentableGuild;
@@ -23,6 +27,10 @@ export type EditorShellProps = {
 export const EditorShell = (props: EditorShellProps) => {
   const [guild, setGuild] = React.useState<PresentableGuild>(props.guild);
 
+  React.useEffect(() => {
+    setGuild(props.guild);
+  }, [props.guild]);
+
   const reset = () => {
     setGuild(props.guild);
   };
@@ -50,14 +58,33 @@ export const EditorShell = (props: EditorShellProps) => {
 
   return (
     <>
-      <SecondaryEditing showReset={hasChanges} guild={props.guild.guild} />
-      <Container style={{ marginTop: 90 }}>
-        <Space />
+      <SecondaryEditing
+        showReset={hasChanges}
+        guild={props.guild.guild}
+        onReset={reset}
+        onSubmit={() => props.onGuildChange?.(guild)}
+      />
+      <Container style={{ marginTop: 95 }}>
         <ServerMasthead guild={props.guild.guild} editable={false} />
         <Space />
 
         <MessageBox>
-          <ReactifyNewlines>{props.guild.data.message}</ReactifyNewlines>
+          <LargeText>Server Message</LargeText>
+          <MultilineTextInput
+            rows={2}
+            value={guild.data.message}
+            onChange={(event) => onMessageChange(event.target.value)}
+            placeholder={`Hey friend from ${guild.guild.name}! Pick your roles!`}
+          >
+            {guild.data.message}
+          </MultilineTextInput>
+          <AmbientLarge style={{ display: 'flex', color: palette.taupe600 }}>
+            Shows a message to your server members.
+            <FaderOpacity isVisible={guild.data.message.trim().length === 0}>
+              &nbsp;Since the message is empty, this won't show up.&nbsp;&nbsp;&nbsp;
+              <GoEyeClosed style={{ position: 'relative', top: 2 }} />
+            </FaderOpacity>
+          </AmbientLarge>
         </MessageBox>
         <Space />
 

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

@@ -97,7 +97,7 @@ export const SecondaryBase = styled(MastheadBase)`
   background-color: ${palette.taupe300};
   z-index: 99;
   padding: 0 15px;
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
 `;
 
 export const IconHolder = styled.div`

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

@@ -15,6 +15,8 @@ import {
 type SecondaryEditingProps = {
   guild: GuildSlug;
   showReset: boolean;
+  onReset?: () => void;
+  onSubmit?: () => void;
 };
 
 export const SecondaryEditing = (props: SecondaryEditingProps) => (
@@ -30,12 +32,12 @@ export const SecondaryEditing = (props: SecondaryEditingProps) => (
       </MastheadLeft>
       <MastheadRight>
         <FaderOpacity isVisible={props.showReset}>
-          <Button size="small" color="silent">
+          <Button size="small" color="silent" onClick={props.onReset}>
             Reset
           </Button>
         </FaderOpacity>
         &nbsp;&nbsp;
-        <Button size="small">
+        <Button size="small" onClick={props.onSubmit}>
           Done <GoCheck />
         </Button>
       </MastheadRight>

packages/design-system/templates/editor/Editor.tsx

@@ -10,7 +10,7 @@ export const EditorTemplate = (
   const { guild, onCategoryChange, onMessageChange, onGuildChange, ...appShellProps } =
     props;
   return (
-    <AppShell {...appShellProps} activeGuildId={guild.id}>
+    <AppShell {...appShellProps} activeGuildId={guild.id} small double>
       <EditorShell guild={guild} onGuildChange={onGuildChange} />
     </AppShell>
   );