add actions, reordering base interactions

packages/api/index.ts

@@ -8,6 +8,7 @@ import { LoginBounce } from './handlers/login-bounce';
 import { LoginCallback } from './handlers/login-callback';
 import { RevokeSession } from './handlers/revoke-session';
 import { SyncFromLegacy } from './handlers/sync-from-legacy';
+import { UpdateGuild } from './handlers/update-guild';
 import { UpdateRoles } from './handlers/update-roles';
 import { Router } from './router';
 import { respond } from './utils/api-tools';
@@ -28,6 +29,7 @@ router.add('POST', 'revoke-session', RevokeSession);
 router.add('GET', 'get-slug', GetSlug);
 router.add('GET', 'get-picker-data', GetPickerData);
 router.add('PATCH', 'update-roles', UpdateRoles);
+router.add('PATCH', 'update-guild', UpdateGuild);
 router.add('POST', 'sync-from-legacy', SyncFromLegacy);
 router.add('POST', 'clear-guild-cache', ClearGuildCache);
 

packages/design-system/molecules/editable-server-message/EditableServerMessage.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { mastheadSlugs } from '../../fixtures/storyData';
+import { EditableServerMessage } from './EditableServerMessage';
+export default {
+  title: 'Molecules/Editable Server Message',
+  component: EditableServerMessage,
+  args: {
+    value: 'Hello World',
+    guild: mastheadSlugs[1],
+  },
+};
+
+export const editableServerMessage = (args) => {
+  const [value, setValue] = React.useState(args.value);
+  React.useEffect(() => {
+    setValue(args.value);
+  }, [args.value]);
+
+  return (
+    <EditableServerMessage
+      {...args}
+      value={value}
+      onChange={(message) => setValue(message)}
+    />
+  );
+};

packages/design-system/molecules/editable-server-message/EditableServerMessage.tsx

@@ -0,0 +1,37 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
+import {
+  AmbientLarge,
+  Text as TextTypo,
+} from '@roleypoly/design-system/atoms/typography';
+import { MessageBox } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { GuildSlug } from '@roleypoly/types';
+import { GoEyeClosed } from 'react-icons/go';
+
+type Props = {
+  guild: GuildSlug;
+  onChange: (newMessage: string) => void;
+  value: string;
+};
+
+export const EditableServerMessage = (props: Props) => (
+  <MessageBox>
+    <TextTypo>Server Message</TextTypo>
+    <MultilineTextInput
+      rows={2}
+      value={props.value}
+      onChange={(event) => props.onChange(event.target.value)}
+      placeholder={`Hey friend from ${props.guild.name}! Pick your roles!`}
+    >
+      {props.value}
+    </MultilineTextInput>
+    <AmbientLarge style={{ display: 'flex', color: palette.taupe600 }}>
+      Shows a message to your server members.
+      <FaderOpacity isVisible={props.value.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>
+);

packages/design-system/molecules/editable-server-message/index.ts

@@ -0,0 +1 @@
+export * from './EditableServerMessage';

packages/design-system/molecules/editor-category-short/EditorCategoryShort.spec.tsx

@@ -1,12 +0,0 @@
-import { mockCategory } from '@roleypoly/design-system/fixtures/storyData';
-import { render } from '@testing-library/react';
-import { EditorCategoryShort } from './EditorCategoryShort';
-
-it('triggers onOpen when clicked', async () => {
-  const onOpen = jest.fn();
-  const view = render(<EditorCategoryShort category={mockCategory} onOpen={onOpen} />);
-
-  view.getByRole('menuitem')?.click();
-
-  expect(onOpen).toHaveBeenCalled();
-});

packages/design-system/molecules/editor-category-short/EditorCategoryShort.stories.tsx

@@ -1,30 +0,0 @@
-import { mockCategory } from '@roleypoly/design-system/fixtures/storyData';
-import ReactTooltip from 'react-tooltip';
-import styled from 'styled-components';
-import { EditorCategoryShort } from './EditorCategoryShort';
-
-const decorator = (story) => (
-  <Wrapper>
-    {story()}
-    <ReactTooltip />
-  </Wrapper>
-);
-
-export default {
-  title: 'Molecules/Short Category',
-  component: EditorCategoryShort,
-  args: {
-    category: mockCategory,
-  },
-  decorators: [decorator],
-};
-
-const Wrapper = styled.div`
-  box-shadow: 0 0 10px #000;
-`;
-
-export const shortEditor = (args) => <EditorCategoryShort {...args} />;
-export const shortEditorHidden = (args) => <EditorCategoryShort {...args} />;
-shortEditorHidden.args = {
-  category: { ...mockCategory, hidden: true },
-};

packages/design-system/molecules/editor-category-short/EditorCategoryShort.styled.ts

@@ -1,60 +0,0 @@
-import { transitions } from '@roleypoly/design-system/atoms/timings';
-import styled from 'styled-components';
-
-export const GrabberBox = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 1em;
-  flex: 0;
-  cursor: grab;
-  position: relative;
-
-  ::before {
-    content: '';
-    position: absolute;
-    top: -5px;
-    left: -8px;
-    width: 32px;
-    height: 32px;
-    background-color: rgba(0, 0, 0, 0.25);
-    opacity: 0;
-    border-radius: 50%;
-    transition: opacity ${transitions.actionable}s ease-in-out;
-  }
-
-  &:hover {
-    ::before {
-      opacity: 1;
-    }
-  }
-`;
-
-export const Opener = styled.div`
-  opacity: 0;
-  transition: opacity ${transitions.actionable}s ease-in-out;
-`;
-
-export const Container = styled.div`
-  display: flex;
-  padding: 1em;
-  cursor: pointer;
-
-  &:hover {
-    ${Opener} {
-      opacity: 1;
-    }
-  }
-`;
-
-export const Name = styled.div`
-  position: relative;
-  top: -2px;
-  margin-right: 1em;
-`;
-
-export const Flags = styled.div``;
-
-export const Void = styled.div`
-  flex: 1;
-`;

packages/design-system/molecules/editor-category-short/EditorCategoryShort.tsx

@@ -1,31 +0,0 @@
-import { Category } from '@roleypoly/types';
-import { DragEventHandler, MouseEventHandler } from 'react';
-import { GoEyeClosed, GoGrabber, GoKebabHorizontal } from 'react-icons/go';
-import {
-  Container,
-  Flags,
-  GrabberBox,
-  Name,
-  Opener,
-  Void,
-} from './EditorCategoryShort.styled';
-
-type ShortProps = {
-  category: Category;
-  onDrag?: DragEventHandler;
-  onOpen?: MouseEventHandler;
-};
-
-export const EditorCategoryShort = (props: ShortProps) => (
-  <Container onClick={props.onOpen} role="menuitem">
-    <GrabberBox onDrag={props.onDrag} role="button">
-      <GoGrabber />
-    </GrabberBox>
-    <Name>{props.category.name}</Name>
-    <Flags>{props.category.hidden && <GoEyeClosed data-tip="Hidden to Members" />}</Flags>
-    <Void />
-    <Opener role="button">
-      <GoKebabHorizontal />
-    </Opener>
-  </Container>
-);

packages/design-system/molecules/editor-category-short/index.ts

@@ -1 +0,0 @@
-export * from './EditorCategoryShort';

packages/design-system/molecules/editor-category/EditorCategory.stories.tsx

@@ -1,19 +1,30 @@
 import * as React from 'react';
-import { mockCategory, roleCategory, roleCategory2 } from '../../fixtures/storyData';
+import { mockCategory, roleCategory } from '../../fixtures/storyData';
 import { EditorCategory } from './EditorCategory';
 
 export default {
-  title: 'Molecules/Editor/Category',
+  title: 'Molecules/Editor Category',
+  component: EditorCategory,
+  args: {
+    title: 'Pronouns',
+    roles: roleCategory,
+    category: mockCategory,
+    selectedRoles: [],
+  },
 };
 
-export const CategoryEditor = () => {
-  const [categoryData, setCategoryData] = React.useState(mockCategory);
-  return (
-    <EditorCategory
-      category={categoryData}
-      onChange={(category) => setCategoryData(category)}
-      uncategorizedRoles={roleCategory}
-      guildRoles={[...roleCategory, ...roleCategory2]}
-    />
-  );
+export const Default = (args) => {
+  return <EditorCategory {...args} />;
+};
+export const Single = (args) => {
+  return <EditorCategory {...args} type="single" />;
+};
+Single.args = {
+  type: 'single',
+};
+export const Multi = (args) => {
+  return <EditorCategory {...args} type="single" />;
+};
+Multi.args = {
+  type: 'multi',
 };

packages/design-system/molecules/editor-category/EditorCategory.styled.ts

@@ -1,13 +1,20 @@
 import styled from 'styled-components';
 
-export const RoleContainer = styled.div`
+export const Head = styled.div`
+  margin: 7px 5px;
+  line-height: 200%;
   display: flex;
-  margin: 10px;
-  flex-wrap: wrap;
-
-  & > div {
-    /* This should be a Role element */
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    margin: 1px;
-  }
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const HeadTitle = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const HeadSub = styled.div`
+  flex-shrink: 0;
+  margin-top: -4px;
 `;

packages/design-system/molecules/editor-category/EditorCategory.tsx

@@ -1,142 +1,50 @@
-import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
-import { Popover } from '@roleypoly/design-system/atoms/popover';
-import { Role } from '@roleypoly/design-system/atoms/role';
-import { Space } from '@roleypoly/design-system/atoms/space';
-import { TextInput, TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
-import { Toggle } from '@roleypoly/design-system/atoms/toggle';
+import { TextInput } from '@roleypoly/design-system/atoms/text-input';
 import { Text } from '@roleypoly/design-system/atoms/typography';
-import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
-import { Category, CategoryType, Role as RoleType } from '@roleypoly/types';
+import { Category as CategoryT, Role as RoleT } from '@roleypoly/types';
 import * as React from 'react';
-import { GoSearch } from 'react-icons/go';
-import { RoleContainer } from './EditorCategory.styled';
+import ReactTooltip from 'react-tooltip';
+import styled from 'styled-components';
+import { Head, HeadTitle } from './EditorCategory.styled';
 
-type Props = {
-  category: Category;
-  uncategorizedRoles: RoleType[];
-  guildRoles: RoleType[];
-  onChange: (category: Category) => void;
+export type CategoryProps = {
+  title: string;
+  roles: RoleT[];
+  category: CategoryT;
+  selectedRoles: string[];
+  onChange: (updatedCategory: CategoryT) => void;
+  type: 'single' | 'multi';
 };
 
-const typeEnumToSwitch = (typeData: CategoryType) => {
-  if (typeData === CategoryType.Single) {
-    return 'Single';
-  } else {
-    return 'Multiple';
-  }
-};
+const Category = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
 
-const switchToTypeEnum = (typeData: 'Single' | 'Multiple') => {
-  if (typeData === 'Single') {
-    return CategoryType.Single;
-  } else {
-    return CategoryType.Multi;
-  }
-};
+const Container = styled.div`
+  overflow: hidden;
+  padding: 5px;
+`;
 
-export const EditorCategory = (props: Props) => {
-  const [roleSearchPopoverActive, setRoleSearchPopoverActive] = React.useState(false);
-  const [roleSearchTerm, updateSearchTerm] = React.useState('');
-
-  const onUpdate =
-    (key: keyof typeof props.category, pred?: (newValue: any) => any) =>
-    (newValue: any) => {
-      props.onChange({
-        ...props.category,
-        [key]: pred ? pred(newValue) : newValue,
-      });
-    };
-
-  const handleRoleSelect = (role: RoleType) => {
-    setRoleSearchPopoverActive(false);
-    updateSearchTerm('');
-    props.onChange({
-      ...props.category,
-      roles: [...props.category.roles, role.id],
-    });
-  };
-
-  const handleRoleDeselect = (role: RoleType) => () => {
-    props.onChange({
-      ...props.category,
-      roles: props.category.roles.filter((x) => x !== role.id),
-    });
+export const EditorCategory = (props: CategoryProps) => {
+  const updateValue = <T extends keyof CategoryT>(key: T, value: CategoryT[T]) => {
+    props.onChange({ ...props.category, [key]: value });
   };
 
   return (
-    <div>
-      <Text>Category Name</Text>
-      <TextInput
-        placeholder="Pronouns, Political, Colors..."
-        value={props.category.name}
-        onChange={onUpdate('name', (x) => x.target.value)}
-      />
-
-      <Space />
-
-      <div>
-        <Toggle
-          state={props.category.type === CategoryType.Multi}
-          onChange={onUpdate('type', (x) =>
-            x ? CategoryType.Multi : CategoryType.Single
-          )}
-        >
-          Allow users to pick multiple roles
-        </Toggle>
-      </div>
-
-      <Space />
-      <div>
-        <Toggle state={props.category.hidden} onChange={onUpdate('hidden')}>
-          Hide category from users
-        </Toggle>
-      </div>
-
-      <Space />
-      <Text>Roles</Text>
-      <Popover
-        position={'top left'}
-        headContent={null}
-        active={roleSearchPopoverActive}
-        onExit={() => setRoleSearchPopoverActive(false)}
-      >
-        {() => (
-          <RoleSearch
-            placeholder={'Type or drag a role...'}
-            roles={props.uncategorizedRoles}
-            onSelect={handleRoleSelect}
-            searchTerm={roleSearchTerm}
-            onSearchUpdate={(newTerm) => updateSearchTerm(newTerm)}
+    <>
+      <Head>
+        <HeadTitle>
+          <div>
+            <Text>Category Name</Text>
+          </div>
+          <TextInput
+            value={props.category.name}
+            onChange={(event) => updateValue('name', event.target.value)}
           />
-        )}
-      </Popover>
-      <FaderOpacity isVisible={!roleSearchPopoverActive}>
-        <TextInputWithIcon
-          icon={<GoSearch />}
-          placeholder={'Type or drag a role...'}
-          onFocus={() => setRoleSearchPopoverActive(true)}
-          value={roleSearchTerm}
-          onChange={(x) => updateSearchTerm(x.target.value)}
-        />
-        <RoleContainer>
-          {props.category.roles.map((id) => {
-            const role = props.guildRoles.find((x) => x.id === id);
-            if (!role) {
-              return <></>;
-            }
-
-            return (
-              <Role
-                role={role}
-                selected={false}
-                key={id}
-                type="delete"
-                onClick={handleRoleDeselect(role)}
-              />
-            );
-          })}
-        </RoleContainer>
-      </FaderOpacity>
-    </div>
+        </HeadTitle>
+      </Head>
+      <Category></Category>
+      <ReactTooltip id={props.category.id} />
+    </>
   );
 };

packages/design-system/molecules/editor-category/index.ts

@@ -1 +1 @@
-export * from './EditorCategory';
+export { EditorCategory } from './EditorCategory';

packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.stories.tsx

@@ -1,12 +0,0 @@
-import { guildEnum } from '@roleypoly/design-system/fixtures/storyData';
-import { EditorCategoriesTab } from './EditorCategoriesTab';
-
-export default {
-  title: 'Organisms/Editor/Categories Tab',
-  component: EditorCategoriesTab,
-  args: {
-    guild: guildEnum.guilds[0],
-  },
-};
-
-export const categoriesTab = (args) => <EditorCategoriesTab {...args} />;

packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.styled.ts

@@ -1,8 +0,0 @@
-import { palette } from '@roleypoly/design-system/atoms/colors';
-import styled from 'styled-components';
-
-export const CategoryContainer = styled.div`
-  background-color: ${palette.taupe100};
-  padding: 10px;
-  margin: 15px 0;
-`;

packages/design-system/organisms/editor-categories-tab/EditorCategoriesTab.tsx

@@ -1,39 +0,0 @@
-import { TabDepth } from '@roleypoly/design-system/atoms/tab-view/TabView.styled';
-import { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
-import { EditorCategoryShort } from '@roleypoly/design-system/molecules/editor-category-short/EditorCategoryShort';
-import { EditorShellProps } from '@roleypoly/design-system/organisms/editor-shell';
-import { Category } from '@roleypoly/types';
-import { sortBy } from 'lodash';
-import * as React from 'react';
-import { CategoryContainer } from './EditorCategoriesTab.styled';
-
-export const EditorCategoriesTab = (props: EditorShellProps) => {
-  const [openStates, setOpenStates] = React.useState<Category['id'][]>([]);
-
-  const onCategoryOpen = (id: Category['id']) => () => {
-    setOpenStates([...new Set(openStates).add(id)]);
-  };
-
-  return (
-    <TabDepth>
-      {sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) =>
-        openStates.includes(category.id) ? (
-          <CategoryContainer key={idx}>
-            <EditorCategory
-              category={category}
-              uncategorizedRoles={[]}
-              guildRoles={props.guild.roles}
-              onChange={(category) => props.onCategoryChange?.(category)}
-            />
-          </CategoryContainer>
-        ) : (
-          <EditorCategoryShort
-            key={idx}
-            category={category}
-            onOpen={onCategoryOpen(category.id)}
-          />
-        )
-      )}
-    </TabDepth>
-  );
-};

packages/design-system/organisms/editor-categories-tab/index.ts

@@ -1 +0,0 @@
-export * from './EditorCategoriesTab';

packages/design-system/organisms/editor-details-tab/EditorDetailsTab.tsx

@@ -1,20 +0,0 @@
-import { Space } from '@roleypoly/design-system/atoms/space';
-import { TabDepth } from '@roleypoly/design-system/atoms/tab-view/TabView.styled';
-import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
-import { Text } from '@roleypoly/design-system/atoms/typography';
-import { EditorShellProps } from '@roleypoly/design-system/organisms/editor-shell';
-import * as React from 'react';
-
-export const EditorDetailsTab = (props: EditorShellProps) => {
-  return (
-    <TabDepth>
-      <Space />
-      <Text>Server Message</Text>
-      <MultilineTextInput
-        value={props.guild.data.message}
-        onChange={(eventData) => props.onMessageChange?.(eventData.target.value)}
-      />
-      <Space />
-    </TabDepth>
-  );
-};

packages/design-system/organisms/editor-details-tab/index.ts

@@ -1 +0,0 @@
-export * from './EditorDetailsTab';

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

@@ -1,12 +1,20 @@
 import { BreakpointsProvider } from '@roleypoly/design-system/atoms/breakpoints';
 import { guildEnum } from '@roleypoly/design-system/fixtures/storyData';
 import * as React from 'react';
+import ReactTooltip from 'react-tooltip';
 import { EditorShell } from './EditorShell';
 
 export default {
   title: 'Organisms/Editor',
   component: EditorShell,
-  decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
+  decorators: [
+    (story) => (
+      <BreakpointsProvider>
+        {story()}
+        <ReactTooltip />
+      </BreakpointsProvider>
+    ),
+  ],
 };
 
 export const Shell = () => <EditorShell guild={guildEnum.guilds[0]} />;

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

@@ -1,21 +1,12 @@
-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 { EditableServerMessage } from '@roleypoly/design-system/molecules/editable-server-message';
 import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead';
 import { SecondaryEditing } from '@roleypoly/design-system/organisms/masthead';
-import {
-  CategoryContainer,
-  Container,
-  MessageBox,
-} from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
-import { Category, CategoryType, PresentableGuild, Role } from '@roleypoly/types';
+import { Container } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { ServerCategoryEditor } from '@roleypoly/design-system/organisms/server-category-editor';
+import { Category, PresentableGuild } 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;
@@ -26,6 +17,7 @@ export type EditorShellProps = {
 
 export const EditorShell = (props: EditorShellProps) => {
   const [guild, setGuild] = React.useState<PresentableGuild>(props.guild);
+  const [reorderMode, setReorderMode] = React.useState<boolean>(false);
 
   React.useEffect(() => {
     setGuild(props.guild);
@@ -35,12 +27,8 @@ export const EditorShell = (props: EditorShellProps) => {
     setGuild(props.guild);
   };
 
-  const onCategoryChange = (category: Category) => {
+  const replaceCategories = (categories: Category[]) => {
     setGuild((currentGuild) => {
-      const categories = [
-        ...currentGuild.data.categories.filter((x) => x.id !== category.id),
-        category,
-      ];
       return { ...currentGuild, data: { ...currentGuild.data, categories } };
     });
   };
@@ -51,6 +39,10 @@ export const EditorShell = (props: EditorShellProps) => {
     });
   };
 
+  const doSubmit = () => {
+    props.onGuildChange?.(guild);
+  };
+
   const hasChanges = React.useMemo(
     () => !deepEqual(guild.data, props.guild.data),
     [guild.data, props.guild.data]
@@ -62,52 +54,18 @@ export const EditorShell = (props: EditorShellProps) => {
         showReset={hasChanges}
         guild={props.guild.guild}
         onReset={reset}
-        onSubmit={() => props.onGuildChange?.(guild)}
+        onSubmit={doSubmit}
       />
       <Container style={{ marginTop: 95 }}>
         <ServerMasthead guild={props.guild.guild} editable={false} />
         <Space />
-
-        <MessageBox>
-          <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>
+        <EditableServerMessage
+          onChange={onMessageChange}
+          value={guild.data.message}
+          guild={guild.guild}
+        />
         <Space />
-
-        <div>
-          {sortBy(props.guild.data.categories, 'position').map((category, idx) => (
-            <CategoryContainer key={idx}>
-              <PickerCategory
-                key={idx}
-                category={category}
-                title={category.name}
-                selectedRoles={[]}
-                roles={
-                  category.roles
-                    .map((role) => props.guild.roles.find((r) => r.id === role))
-                    .filter((r) => r !== undefined) as Role[]
-                }
-                onChange={() => () => {}}
-                wikiMode={false}
-                type={category.type === CategoryType.Single ? 'single' : 'multi'}
-              />
-            </CategoryContainer>
-          ))}
-        </div>
+        <ServerCategoryEditor guild={guild} onChange={replaceCategories} />
       </Container>
     </>
   );

packages/design-system/organisms/server-category-editor/ServerCategoryEditor.styled.ts

@@ -0,0 +1,42 @@
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import { CategoryContainer } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import styled, { css } from 'styled-components';
+
+export const CategoryActions = styled.div<{ right?: boolean }>`
+  display: flex;
+  flex-direction: row;
+
+  ${(props) =>
+    props.right &&
+    css`
+      justify-content: flex-end;
+    `}
+
+  & > * {
+    ${(props) => (props.right ? 'margin-left' : 'margin-right')}: 5px;
+  }
+`;
+
+export const ReorderButton = styled.div`
+  height: 40px;
+  width: 40px;
+  font-size: 20px;
+  margin-right: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color ${transitions.actionable}s ease-in-out;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+`;
+
+export const ReorderCategoryContainer = styled(CategoryContainer)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  user-select: none;
+`;

packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx

@@ -0,0 +1,158 @@
+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 { LargeText } from '@roleypoly/design-system/atoms/typography';
+import { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
+import { CategoryContainer } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { Category, CategoryType, PresentableGuild, Role } from '@roleypoly/types';
+import KSUID from 'ksuid';
+import { sortBy } from 'lodash';
+import React from 'react';
+import { CgReorder } from 'react-icons/cg';
+import { GoArrowDown, GoArrowUp, GoCheck, GoGrabber, GoPlus } from 'react-icons/go';
+import {
+  CategoryActions,
+  ReorderButton,
+  ReorderCategoryContainer,
+} from './ServerCategoryEditor.styled';
+
+type Props = {
+  guild: PresentableGuild;
+  onChange: (categories: PresentableGuild['data']['categories']) => void;
+};
+
+const resetOrder = (categories: Category[]) =>
+  sortBy(categories, ['position', 'id']).map((c, index) => ({ ...c, position: index }));
+
+const forceOrder = (categories: Category[]) =>
+  categories.map((c, index) => ({ ...c, position: index }));
+
+export const ServerCategoryEditor = (props: Props) => {
+  const [reorderMode, setReorderMode] = React.useState(false);
+
+  const updateSingleCategory = (category: Category) => {
+    const newCategories = props.guild.data.categories.map((c) => {
+      if (c.id === category.id) {
+        return category;
+      }
+      return c;
+    });
+    props.onChange(newCategories);
+  };
+
+  const createCategory = () => {
+    // Reset order now that we're creating a new category
+    const categories = resetOrder(props.guild.data.categories);
+
+    const newCategory: Category = {
+      id: KSUID.randomSync().toString(),
+      name: 'New Category',
+      type: CategoryType.Multi,
+      position: categories.length,
+      roles: [],
+      hidden: false,
+    };
+
+    props.onChange([...categories, newCategory]);
+  };
+
+  const onReorder = (categories: Category[]) => {
+    setReorderMode(false);
+    props.onChange(resetOrder(categories));
+  };
+
+  if (reorderMode) {
+    return <ReorderMode {...props} exitReorderMode={onReorder} />;
+  }
+
+  return (
+    <div>
+      <CategoryActions>
+        <Button color="muted" size="small" onClick={() => createCategory()}>
+          Create New <GoPlus />
+        </Button>
+        <Button color="muted" size="small" onClick={() => setReorderMode(true)}>
+          Change Order <CgReorder />
+        </Button>
+      </CategoryActions>
+      {sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) => (
+        <CategoryContainer key={idx}>
+          <EditorCategory
+            key={idx}
+            category={category}
+            title={category.name}
+            selectedRoles={[]}
+            roles={
+              category.roles
+                .map((role) => props.guild.roles.find((r) => r.id === role))
+                .filter((r) => r !== undefined) as Role[]
+            }
+            onChange={updateSingleCategory}
+            type={category.type === CategoryType.Single ? 'single' : 'multi'}
+          />
+        </CategoryContainer>
+      ))}
+    </div>
+  );
+};
+
+const ReorderMode = (props: Props & { exitReorderMode: (final: Category[]) => void }) => {
+  const [categories, setCategories] = React.useState(props.guild.data.categories);
+
+  React.useEffect(() => {
+    setCategories(props.guild.data.categories);
+  }, [props.guild.data.categories]);
+
+  const handleReorder = (category: Category, direction: 'up' | 'down') => () => {
+    const newCategories = [...categories];
+    const index = newCategories.findIndex((c) => c.id === category.id);
+    const newIndex = direction === 'up' ? index - 1 : index + 1;
+
+    if (newIndex < 0 || newIndex > newCategories.length - 1) {
+      return;
+    }
+
+    newCategories.splice(index, 1);
+    newCategories.splice(newIndex, 0, category);
+    setCategories(forceOrder(newCategories));
+  };
+
+  return (
+    <div>
+      <CategoryActions right>
+        <Button
+          color="muted"
+          size="small"
+          onClick={() => props.exitReorderMode(props.guild.data.categories)}
+        >
+          Reset
+        </Button>
+        <Button
+          color="primary"
+          size="small"
+          onClick={() => props.exitReorderMode(categories)}
+        >
+          <BreakpointText small="Save" large="Save Order" /> <GoCheck />
+        </Button>
+      </CategoryActions>
+      {sortBy(categories, ['position', 'id']).map((category, idx, array) => (
+        <ReorderCategoryContainer key={idx}>
+          <ReorderButton data-tip="Drag to reorder" style={{ cursor: 'grab' }}>
+            <GoGrabber />
+          </ReorderButton>
+          <FaderOpacity isVisible={idx !== 0}>
+            <ReorderButton onClick={handleReorder(category, 'up')} data-tip="Move up">
+              <GoArrowUp />
+            </ReorderButton>
+          </FaderOpacity>
+          <FaderOpacity isVisible={categories.length - 1 !== idx}>
+            <ReorderButton onClick={handleReorder(category, 'down')} data-tip="Move down">
+              <GoArrowDown />
+            </ReorderButton>
+          </FaderOpacity>
+          <LargeText>{category.name}</LargeText>
+        </ReorderCategoryContainer>
+      ))}
+    </div>
+  );
+};

packages/design-system/organisms/server-category-editor/index.ts

@@ -0,0 +1 @@
+export * from './ServerCategoryEditor';

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

@@ -1,8 +1,18 @@
+import ReactTooltip from 'react-tooltip';
+import { BreakpointsProvider } from '../../atoms/breakpoints';
 import { guildEnum, mastheadSlugs, user } from '../../fixtures/storyData';
 import { EditorTemplate } from './Editor';
 export default {
   title: 'Templates/Server Editor',
   component: EditorTemplate,
+  decorators: [
+    (story) => (
+      <BreakpointsProvider>
+        {story()}
+        <ReactTooltip />
+      </BreakpointsProvider>
+    ),
+  ],
   args: {
     guilds: mastheadSlugs,
     user: user,

packages/web/src/pages/editor.tsx

@@ -1,4 +1,4 @@
-import { Redirect } from '@reach/router';
+import { navigate, Redirect } from '@reach/router';
 import { EditorTemplate } from '@roleypoly/design-system/templates/editor';
 import { GenericLoadingTemplate } from '@roleypoly/design-system/templates/generic-loading';
 import {
@@ -87,6 +87,8 @@ const Editor = (props: EditorProps) => {
       setGuild(guild);
       setPending(false);
     }
+
+    navigate(`/s/${props.serverID}`);
   };
 
   return (