feat: more changes

Introduce `reset-password` command.

Refs #71

.github/ISSUE_TEMPLATE/bug_report.md

@@ -18,6 +18,8 @@ If applicable, add screenshots to help explain your problem.
 **Additional context**
 Add any other context about the problem here.
 
+Please send the Taskcafe web service logs if applicable.
+
 <!--
 
 Please read the contributing guide before working on any new pull requests!

.pre-commit-config.yaml

@@ -3,11 +3,10 @@ repos:
   hooks:
     - id: eslint
       name: eslint
-      entry: go run cmd/mage/main.go frontend:lint
+      entry: scripts/lint.sh
       language: system
       files: \.[jt]sx?$  # *.js, *.jsx, *.ts and *.tsx
       types: [file]
-      pass_filenames: false
 - hooks:
   - id: check-yaml
   - id: end-of-file-fixer

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Task sorting & filtering
 - Redesigned the Task Details UI
+- Implement task group actions (duplicate/delete all tasks/sort)
 
 ### Fixed
 - removed CORS middleware to fix security issue

CONTRIBUTING.md

@@ -32,6 +32,10 @@ The `description` is a decriptive summary of the change the PR will make.
 - One PR per fix or feature
 - Setup & install [pre-commit hooks](https://pre-commit.com/#install) then install the hooks `pre-commit install && pre-commit install --hook-type commit-msg`
 
+### Unwanted PRs
+
+- Please do not submit pull requests containing only typo fixes, fixed spelling mistakes, or minor wording changes.
+
 ### Git Commit Message Style
 
 This project uses the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) format.

README.md

@@ -9,11 +9,14 @@
     <img alt="Releases" src="https://img.shields.io/github/v/release/JordanKnott/taskcafe" />
   </a>
   <a href="https://hub.docker.com/repository/docker/taskcafe/taskcafe">
-    <img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker" />
+    <img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker&sort=semver" />
   </a>
   <a href="https://goreportcard.com/report/github.com/JordanKnott/taskcafe">
     <img alt="Go Report Card" src="https://goreportcard.com/badge/github.com/JordanKnott/taskcafe" />
   </a>
+  <a href="">
+    <img alt="Docker pulls" src="https://img.shields.io/docker/pulls/taskcafe/taskcafe" />
+  </a>
 </p>
 <p align="center">
 Was this project useful? Please consider <a href="https://www.buymeacoffee.com/jordanknott">donating</a> to help me improve it!
@@ -21,6 +24,8 @@ Was this project useful? Please consider <a href="https://www.buymeacoffee.com/j
 
 **Please note that this project is still in active development. Some options may not work yet! For updates on development, join the Discord server**
 
+![Taskcafe](./.github/taskcafe_preview.png)
+
 ## Features
 
 Currently Taskcafe only offers basic task tracking through a Kanban board.

conf/air.toml

@@ -0,0 +1,47 @@
+# Config file for [Air](https://github.com/cosmtrek/air) in TOML format
+
+# Working directory
+# . or absolute path, please note that the directories following must be under root.
+root = "."
+tmp_dir = "tmp"
+
+[build]
+# Just plain old shell command. You could use `make` as well.
+cmd = "go build -o ./dist/taskcafe cmd/taskcafe/main.go"
+# Binary file yields from `cmd`.
+bin = "dist/taskcafe"
+# Customize binary.
+full_bin = "./dist/taskcafe web"
+# Watch these filename extensions.
+include_ext = ["go"]
+# Ignore these filename extensions or directories.
+exclude_dir = ["dist", "frontend"]
+# Watch these directories if you specified.
+include_dir = []
+# Exclude files.
+exclude_file = []
+# This log file places in your tmp_dir.
+log = "air.log"
+# It's not necessary to trigger build each time file changes if it's too frequent.
+delay = 1000 # ms
+# Stop running old binary when build errors occur.
+stop_on_error = true
+# Send Interrupt signal before killing process (windows does not support this feature)
+send_interrupt = false
+# Delay after sending Interrupt signal
+kill_delay = 500 # ms
+
+[log]
+# Show log time
+time = false
+
+[color]
+# Customize each part's color. If no color found, use the raw app log.
+main = "magenta"
+watcher = "cyan"
+build = "yellow"
+runner = "green"
+
+[misc]
+# Delete tmp directory on exit
+clean_on_exit = true

conf/taskcafe.example.toml

@@ -1,5 +1,5 @@
-[general]
+[server]
-host = '0.0.0.0:3333'
+hostname = '0.0.0.0:3333'
 
 [email_notifications]
 enabled = true

docker-compose.dev.yml

@@ -12,7 +12,7 @@ services:
     volumes:
       - taskcafe-postgres:/var/lib/postgresql/data
     ports:
-      - 5432:5432
+      - 8855:5432
   mailhog:
     image: mailhog/mailhog:latest
     restart: always

frontend/.eslintrc.json

@@ -31,7 +31,9 @@
     "@typescript-eslint/no-unused-vars": "off",
     "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
     "no-case-declarations": "off",
+    "no-plusplus": "off",
     "react/prop-types": 0,
+    "no-continue": "off",
     "react/jsx-props-no-spreading": "off",
     "no-param-reassign": "off",
     "import/extensions": [

frontend/package.json

@@ -6,14 +6,6 @@
     "@apollo/client": "^3.0.0-rc.8",
     "@apollo/react-common": "^3.1.4",
     "@apollo/react-hooks": "^3.1.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.27",
-    "@fortawesome/free-brands-svg-icons": "^5.12.1",
-    "@fortawesome/free-regular-svg-icons": "^5.12.1",
-    "@fortawesome/free-solid-svg-icons": "^5.12.1",
-    "@fortawesome/react-fontawesome": "^0.1.8",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
     "@types/axios": "^0.14.0",
     "@types/color": "^3.0.1",
     "@types/date-fns": "^2.6.0",
@@ -41,13 +33,13 @@
     "axios-auth-refresh": "^2.2.7",
     "color": "^3.1.2",
     "date-fns": "^2.14.0",
+    "dayjs": "^1.9.1",
     "graphql": "^15.0.0",
     "graphql-tag": "^2.10.3",
     "history": "^4.10.1",
     "immer": "^6.0.3",
     "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.20",
-    "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-autosize-textarea": "^7.0.0",
@@ -60,9 +52,9 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
     "react-select": "^3.1.0",
-    "rich-markdown-editor": "^10.6.5",
     "react-timeago": "^4.4.0",
     "react-toastify": "^6.0.8",
+    "rich-markdown-editor": "^10.6.5",
     "styled-components": "^5.0.1",
     "typescript": "~3.7.2"
   },

frontend/src/Admin/index.tsx

@@ -5,6 +5,7 @@ import GlobalTopNavbar from 'App/TopNavbar';
 import {
   useUsersQuery,
   useDeleteUserAccountMutation,
+  useDeleteInvitedUserAccountMutation,
   useCreateUserAccountMutation,
   UsersDocument,
   UsersQuery,
@@ -171,11 +172,22 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
 
 const AdminRoute = () => {
   useEffect(() => {
-    document.title = 'Taskcafé | Admin';
+    document.title = 'Admin | Taskcafé';
   }, []);
   const { loading, data } = useUsersQuery();
   const { showPopup, hidePopup } = usePopup();
   const { user } = useCurrentUser();
+  const [deleteInvitedUser] = useDeleteInvitedUserAccountMutation({
+    update: (client, response) => {
+      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
+        produce(cache, draftCache => {
+          draftCache.invitedUsers = cache.invitedUsers.filter(
+            u => u.id !== response.data.deleteInvitedUserAccount.invitedUser.id,
+          );
+        }),
+      );
+    },
+  });
   const [deleteUser] = useDeleteUserAccountMutation({
     update: (client, response) => {
       updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
@@ -215,11 +227,16 @@ const AdminRoute = () => {
         <Admin
           initialTab={0}
           users={data.users}
+          invitedUsers={data.invitedUsers}
           canInviteUser={user.roles.org === 'admin'}
           onInviteUser={NOOP}
           onUpdateUserPassword={() => {
             hidePopup();
           }}
+          onDeleteInvitedUser={invitedUserID => {
+            deleteInvitedUser({ variables: { invitedUserID } });
+            hidePopup();
+          }}
           onDeleteUser={(userID, newOwnerID) => {
             deleteUser({ variables: { userID, newOwnerID } });
             hidePopup();

frontend/src/App/Routes.tsx

@@ -5,6 +5,7 @@ import * as H from 'history';
 import Dashboard from 'Dashboard';
 import Admin from 'Admin';
 import Projects from 'Projects';
+import Outline from 'Outline';
 import Project from 'Projects/Project';
 import Teams from 'Teams';
 import Login from 'Auth';
@@ -36,6 +37,7 @@ const Routes: React.FC<RoutesProps> = () => (
       <Route path="/teams/:teamID" component={Teams} />
       <Route path="/profile" component={Profile} />
       <Route path="/admin" component={Admin} />
+      <Route path="/outline" component={Outline} />
     </MainContent>
   </Switch>
 );

frontend/src/App/TopNavbar.tsx

@@ -137,7 +137,7 @@ const ProjectFinder = () => {
       return {
         id: team.id,
         name: team.name,
-        projects: projects.filter(project => project.team.id === team.id),
+        projects: projects.filter(project => project.team && project.team.id === team.id),
       };
     });
     return (
@@ -230,10 +230,12 @@ type GlobalTopNavbarProps = {
   menuType?: Array<MenuItem>;
   onChangeRole?: (userID: string, roleCode: RoleCode) => void;
   projectMembers?: null | Array<TaskUser>;
+  projectInvitedMembers?: null | Array<InvitedUser>;
   onSaveProjectName?: (projectName: string) => void;
   onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
   onSetTab?: (tab: number) => void;
   onRemoveFromBoard?: (userID: string) => void;
+  onRemoveInvitedFromBoard?: (email: string) => void;
 };
 
 const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
@@ -246,8 +248,10 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
   name,
   popupContent,
   projectMembers,
+  projectInvitedMembers,
   onInviteUser,
   onSaveProjectName,
+  onRemoveInvitedFromBoard,
   onRemoveFromBoard,
 }) => {
   const { user, setUserRoles, setUser } = useCurrentUser();
@@ -333,6 +337,34 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
     return null;
   }
   const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
+  const onInvitedMemberProfile = ($targetRef: React.RefObject<HTMLElement>, email: string) => {
+    const member = projectInvitedMembers ? projectInvitedMembers.find(u => u.email === email) : null;
+    if (member) {
+      showPopup(
+        $targetRef,
+        <MiniProfile
+          onRemoveFromBoard={() => {
+            if (onRemoveInvitedFromBoard) {
+              onRemoveInvitedFromBoard(member.email);
+            }
+          }}
+          invited
+          user={{
+            id: member.email,
+            fullName: member.email,
+            bio: 'Invited',
+            profileIcon: {
+              bgColor: '#000',
+              url: null,
+              initials: member.email.charAt(0),
+            },
+          }}
+          bio=""
+        />,
+      );
+    }
+  };
+
   const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
     const member = projectMembers ? projectMembers.find(u => u.id === memberID) : null;
     const warning =
@@ -382,6 +414,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
         canEditProjectName={userIsTeamOrProjectAdmin}
         canInviteUser={userIsTeamOrProjectAdmin}
         onMemberProfile={onMemberProfile}
+        onInvitedMemberProfile={onInvitedMemberProfile}
         onInviteUser={onInviteUser}
         onChangeRole={onChangeRole}
         onChangeProjectOwner={onChangeProjectOwner}
@@ -392,6 +425,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
           history.push('/');
         }}
         projectMembers={projectMembers}
+        projectInvitedMembers={projectInvitedMembers}
         onProfileClick={onProfileClick}
         onSaveName={onSaveProjectName}
         onOpenSettings={onOpenSettings}

frontend/src/Install/index.tsx

@@ -59,7 +59,7 @@ const Install = () => {
                   } else {
                     const response: RefreshTokenResponse = await x.data;
                     const { accessToken: newToken, isInstalled } = response;
-                    const claims: JWTToken = jwtDecode(accessToken);
+                    const claims: JWTToken = jwtDecode(newToken);
                     const currentUser = {
                       id: claims.userId,
                       roles: {
@@ -69,7 +69,7 @@ const Install = () => {
                       },
                     };
                     setUser(currentUser);
-                    setAccessToken(accessToken);
+                    setAccessToken(newToken);
                     if (!isInstalled) {
                       history.replace('/install');
                     }

frontend/src/Outline/DragDebug.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { DragDebugWrapper } from './Styles';
+
+type DragDebugProps = {
+  zone: ImpactZone | null;
+  depthTarget: number;
+  draggedNodes: Array<string> | null;
+};
+
+const DragDebug: React.FC<DragDebugProps> = ({ zone, depthTarget, draggedNodes }) => {
+  let aboveID = null;
+  let belowID = null;
+  if (zone) {
+    aboveID = zone.above ? zone.above.node.id : null;
+    belowID = zone.below ? zone.below.node.id : null;
+  }
+  return (
+    <DragDebugWrapper>{`aboveID=${aboveID} / belowID=${belowID} / depthTarget=${depthTarget} draggedNodes=${
+      draggedNodes ? draggedNodes.toString() : null
+    }`}</DragDebugWrapper>
+  );
+};
+
+export default DragDebug;

frontend/src/Outline/DragIndicator.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { getDimensions } from './utils';
+import { DragIndicatorBar } from './Styles';
+
+type DragIndicatorProps = {
+  container: React.RefObject<HTMLDivElement>;
+  zone: ImpactZone;
+  depthTarget: number;
+};
+
+const DragIndicator: React.FC<DragIndicatorProps> = ({ container, zone, depthTarget }) => {
+  let top = 0;
+  let width = 0;
+  if (zone.below === null) {
+    if (zone.above) {
+      const entry = getDimensions(zone.above.dimensions.entry);
+      const children = getDimensions(zone.above.dimensions.children);
+      if (children) {
+        top = children.top;
+        width = children.width - depthTarget * 35;
+      } else if (entry) {
+        top = entry.bottom;
+        width = entry.width - depthTarget * 35;
+      }
+    }
+  } else if (zone.below) {
+    const entry = getDimensions(zone.below.dimensions.entry);
+    if (entry) {
+      top = entry.top;
+      width = entry.width - depthTarget * 35;
+    }
+  }
+  let left = 0;
+  if (container && container.current) {
+    left = container.current.getBoundingClientRect().left + (depthTarget - 1) * 35;
+    width = container.current.getBoundingClientRect().width - depthTarget * 35;
+  }
+  return <DragIndicatorBar top={top} left={left} width={width} />;
+};
+
+export default DragIndicator;

frontend/src/Outline/Dragger.tsx

@@ -0,0 +1,242 @@
+import React, { useRef, useCallback, useState, useMemo, useEffect } from 'react';
+import { Dot } from 'shared/icons';
+import styled from 'styled-components';
+import {
+  findNextDraggable,
+  getDimensions,
+  getTargetDepth,
+  getNodeAbove,
+  getBelowParent,
+  findNodeAbove,
+  getNodeOver,
+  getLastChildInBranch,
+  findNodeDepth,
+} from './utils';
+import { useDrag } from './useDrag';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background: rgba(${p => p.theme.colors.primary});
+  svg {
+    fill: rgba(${p => p.theme.colors.text.primary});
+    stroke: rgba(${p => p.theme.colors.text.primary});
+  }
+`;
+
+type DraggerProps = {
+  container: React.RefObject<HTMLDivElement>;
+  draggedNodes: { nodes: Array<string>; first?: OutlineNode | null };
+  isDragging: boolean;
+  onDragEnd: (zone: ImpactZone) => void;
+  initialPos: { x: number; y: number };
+};
+
+const Dragger: React.FC<DraggerProps> = ({ draggedNodes, container, onDragEnd, isDragging, initialPos }) => {
+  const [pos, setPos] = useState<{ x: number; y: number }>(initialPos);
+  const { outline, impact, setImpact } = useDrag();
+  const $handle = useRef<HTMLDivElement>(null);
+  const handleMouseUp = useCallback(() => {
+    onDragEnd(impact ? impact.zone : { below: null, above: null });
+  }, [impact]);
+  const handleMouseMove = useCallback(
+    e => {
+      e.preventDefault();
+      const { clientX, clientY, pageX, pageY } = e;
+      setPos({ x: clientX, y: clientY });
+      const { curDepth, curPosition, curDraggable } = getNodeOver({ x: clientX, y: clientY }, outline.current);
+      let depthTarget: number = 0;
+      let aboveNode: null | OutlineNode = null;
+      let belowNode: null | OutlineNode = null;
+
+      if (curPosition === 'before') {
+        belowNode = curDraggable;
+      } else {
+        aboveNode = curDraggable;
+      }
+
+      // if belowNode has the depth of 1, then the above element will be a part of a different branch
+
+      const { relationships, nodes } = outline.current;
+      if (!belowNode || !aboveNode) {
+        if (belowNode) {
+          aboveNode = findNodeAbove(outline.current, curDepth, belowNode);
+        } else if (aboveNode) {
+          let targetBelowNode: RelationshipChild | null = null;
+          const parent = relationships.get(aboveNode.parent);
+          if (aboveNode.children !== 0 && !aboveNode.collapsed) {
+            const abr = relationships.get(aboveNode.id);
+            if (abr) {
+              const newTarget = abr.children[0];
+              if (newTarget) {
+                targetBelowNode = newTarget;
+              }
+            }
+          } else if (parent) {
+            const aboveNodeIndex = parent.children.findIndex(c => aboveNode && c.id === aboveNode.id);
+            if (aboveNodeIndex !== -1) {
+              if (aboveNodeIndex === parent.children.length - 1) {
+                targetBelowNode = getBelowParent(aboveNode, outline.current);
+              } else {
+                const nextChild = parent.children[aboveNodeIndex + 1];
+                targetBelowNode = nextChild ?? null;
+              }
+            }
+          }
+          if (targetBelowNode) {
+            const depthNodes = nodes.get(targetBelowNode.depth);
+            if (depthNodes) {
+              belowNode = depthNodes.get(targetBelowNode.id) ?? null;
+            }
+          }
+        }
+      }
+
+      // if outside outline, get either first or last item in list based on mouse Y
+      if (!aboveNode && !belowNode) {
+        if (container && container.current) {
+          const bounds = container.current.getBoundingClientRect();
+          if (clientY < bounds.top + bounds.height / 2) {
+            const rootChildren = outline.current.relationships.get('root');
+            const rootDepth = outline.current.nodes.get(1);
+            if (rootChildren && rootDepth) {
+              const firstChild = rootChildren.children[0];
+              belowNode = rootDepth.get(firstChild.id) ?? null;
+              aboveNode = null;
+            }
+          } else {
+            // TODO: enhance to actually get last child item, not last top level branch
+            const rootChildren = outline.current.relationships.get('root');
+            const rootDepth = outline.current.nodes.get(1);
+            if (rootChildren && rootDepth) {
+              const lastChild = rootChildren.children[rootChildren.children.length - 1];
+              const lastParentNode = rootDepth.get(lastChild.id) ?? null;
+
+              if (lastParentNode) {
+                const lastBranchChild = getLastChildInBranch(outline.current, lastParentNode);
+                if (lastBranchChild) {
+                  const lastChildDepth = outline.current.nodes.get(lastBranchChild.depth);
+                  if (lastChildDepth) {
+                    aboveNode = lastChildDepth.get(lastBranchChild.id) ?? null;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      if (aboveNode) {
+        const { ancestors } = findNodeDepth(outline.current.published, aboveNode.id);
+        for (let i = 0; i < draggedNodes.nodes.length; i++) {
+          const nodeID = draggedNodes.nodes[i];
+          if (ancestors.find(c => c === nodeID)) {
+            if (draggedNodes.first) {
+              belowNode = draggedNodes.first;
+              aboveNode = findNodeAbove(outline.current, aboveNode ? aboveNode.depth : 1, draggedNodes.first);
+            } else {
+              const { depth } = findNodeDepth(outline.current.published, nodeID);
+              const nodeDepth = outline.current.nodes.get(depth);
+              const targetNode = nodeDepth ? nodeDepth.get(nodeID) : null;
+              if (targetNode) {
+                belowNode = targetNode;
+
+                aboveNode = findNodeAbove(outline.current, depth, targetNode);
+              }
+            }
+          }
+        }
+      }
+
+      // calculate available depths
+
+      let minDepth = 1;
+      let maxDepth = 2;
+      if (aboveNode) {
+        const aboveParent = relationships.get(aboveNode.parent);
+        if (aboveNode.children !== 0 && !aboveNode.collapsed) {
+          minDepth = aboveNode.depth + 1;
+          maxDepth = aboveNode.depth + 1;
+        } else if (aboveParent) {
+          minDepth = aboveNode.depth;
+          maxDepth = aboveNode.depth + 1;
+          const aboveNodeIndex = aboveParent.children.findIndex(c => aboveNode && c.id === aboveNode.id);
+          if (aboveNodeIndex === aboveParent.children.length - 1) {
+            minDepth = belowNode ? belowNode.depth : minDepth;
+          }
+        }
+      }
+      if (aboveNode) {
+        const dimensions = outline.current.dimensions.get(aboveNode.id);
+        const entry = getDimensions(dimensions?.entry);
+        if (entry) {
+          depthTarget = getTargetDepth(clientX, entry.left, { min: minDepth, max: maxDepth });
+        }
+      }
+
+      let aboveImpact: null | ImpactZoneData = null;
+      let belowImpact: null | ImpactZoneData = null;
+      if (aboveNode) {
+        const aboveDim = outline.current.dimensions.get(aboveNode.id);
+        if (aboveDim) {
+          aboveImpact = {
+            node: aboveNode,
+            dimensions: aboveDim,
+          };
+        }
+      }
+      if (belowNode) {
+        const belowDim = outline.current.dimensions.get(belowNode.id);
+        if (belowDim) {
+          belowImpact = {
+            node: belowNode,
+            dimensions: belowDim,
+          };
+        }
+      }
+
+      setImpact({
+        zone: {
+          above: aboveImpact,
+          below: belowImpact,
+        },
+        depth: depthTarget,
+      });
+    },
+    [outline.current.nodes],
+  );
+  useEffect(() => {
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+  const styles = useMemo(() => {
+    const position: 'absolute' | 'relative' = isDragging ? 'absolute' : 'relative';
+    return {
+      cursor: isDragging ? '-webkit-grabbing' : '-webkit-grab',
+      transform: `translate(${pos.x - 10}px, ${pos.y - 4}px)`,
+      transition: isDragging ? 'none' : 'transform 500ms',
+      zIndex: isDragging ? 2 : 1,
+      position,
+    };
+  }, [isDragging, pos]);
+
+  return (
+    <>
+      {pos && (
+        <Container ref={$handle} style={styles}>
+          <Dot width={18} height={18} />
+        </Container>
+      )}
+    </>
+  );
+};
+
+export default Dragger;

frontend/src/Outline/Entry.tsx

@@ -0,0 +1,155 @@
+import React, { useRef, useEffect } from 'react';
+import { Dot, CaretDown, CaretRight } from 'shared/icons';
+
+import { EntryChildren, EntryWrapper, EntryContent, EntryInnerContent, EntryHandle, ExpandButton } from './Styles';
+import { useDrag } from './useDrag';
+
+function getCaretPosition(editableDiv: any) {
+  let caretPos = 0;
+  let sel: any = null;
+  let range: any = null;
+  if (window.getSelection) {
+    sel = window.getSelection();
+    if (sel && sel.rangeCount) {
+      range = sel.getRangeAt(0);
+      if (range.commonAncestorContainer.parentNode === editableDiv) {
+        caretPos = range.endOffset;
+      }
+    }
+  }
+  return caretPos;
+}
+
+type EntryProps = {
+  id: string;
+  collapsed?: boolean;
+  onToggleCollapse: (id: string, collapsed: boolean) => void;
+  parentID: string;
+  onStartDrag: (e: { id: string; clientX: number; clientY: number }) => void;
+  onStartSelect: (e: { id: string; depth: number }) => void;
+  isRoot?: boolean;
+  selection: null | Array<{ id: string }>;
+  draggedNodes: null | Array<string>;
+  entries: Array<ItemElement>;
+  onCancelDrag: () => void;
+  position: number;
+  chain?: Array<string>;
+  depth?: number;
+};
+
+const Entry: React.FC<EntryProps> = ({
+  id,
+  parentID,
+  isRoot = false,
+  selection,
+  onToggleCollapse,
+  onStartSelect,
+  position,
+  onCancelDrag,
+  onStartDrag,
+  collapsed = false,
+  draggedNodes,
+  entries,
+  chain = [],
+  depth = 0,
+}) => {
+  const $entry = useRef<HTMLDivElement>(null);
+  const $children = useRef<HTMLDivElement>(null);
+  const { setNodeDimensions, clearNodeDimensions } = useDrag();
+  useEffect(() => {
+    if (isRoot) return;
+    if ($entry && $entry.current) {
+      setNodeDimensions(id, {
+        entry: $entry,
+        children: entries.length !== 0 ? $children : null,
+      });
+    }
+    return () => {
+      clearNodeDimensions(id);
+    };
+  }, [position, depth, entries]);
+  let showHandle = true;
+  if (draggedNodes && draggedNodes.length === 1 && draggedNodes.find(c => c === id)) {
+    showHandle = false;
+  }
+  let isSelected = false;
+  if (selection && selection.find(c => c.id === id)) {
+    isSelected = true;
+  }
+  let onSaveTimer: any = null;
+  const onSaveTimeout = 300;
+  return (
+    <EntryWrapper isSelected={isSelected} isDragging={!showHandle}>
+      {!isRoot && (
+        <EntryContent>
+          {entries.length !== 0 && (
+            <ExpandButton onClick={() => onToggleCollapse(id, !collapsed)}>
+              {collapsed ? <CaretRight width={20} height={20} /> : <CaretDown width={20} height={20} />}
+            </ExpandButton>
+          )}
+          {showHandle && (
+            <EntryHandle
+              onMouseUp={() => onCancelDrag()}
+              onMouseDown={e => {
+                onStartDrag({ id, clientX: e.clientX, clientY: e.clientY });
+              }}
+            >
+              <Dot width={18} height={18} />
+            </EntryHandle>
+          )}
+          <EntryInnerContent
+            onMouseDown={() => {
+              onStartSelect({ id, depth });
+            }}
+            onKeyDown={e => {
+              if (e.key === 'z' && e.ctrlKey) {
+                if ($entry && $entry.current) {
+                  console.log(getCaretPosition($entry.current));
+                }
+              } else {
+                clearTimeout(onSaveTimer);
+                if ($entry && $entry.current) {
+                  onSaveTimer = setTimeout(() => {
+                    if ($entry && $entry.current) {
+                      console.log($entry.current.textContent);
+                    }
+                  }, onSaveTimeout);
+                }
+              }
+            }}
+            contentEditable
+            ref={$entry}
+          >
+            {`${id.toString()} - ${position}`}
+          </EntryInnerContent>
+        </EntryContent>
+      )}
+      {entries.length !== 0 && !collapsed && (
+        <EntryChildren ref={$children} isRoot={isRoot}>
+          {entries
+            .sort((a, b) => a.position - b.position)
+            .map(entry => (
+              <Entry
+                parentID={id}
+                key={entry.id}
+                position={entry.position}
+                depth={depth + 1}
+                draggedNodes={draggedNodes}
+                collapsed={entry.collapsed}
+                id={entry.id}
+                onStartSelect={onStartSelect}
+                onStartDrag={onStartDrag}
+                onCancelDrag={onCancelDrag}
+                entries={entry.children ?? []}
+                chain={[...chain, id]}
+                selection={selection}
+                onToggleCollapse={onToggleCollapse}
+              />
+            ))}
+        </EntryChildren>
+      )}
+    </EntryWrapper>
+  );
+};
+
+export default Entry;

frontend/src/Outline/Styles.ts

@@ -0,0 +1,164 @@
+import styled, { css } from 'styled-components';
+import { mixin } from 'shared/utils/styles';
+
+export const EntryWrapper = styled.div<{ isDragging: boolean; isSelected: boolean }>`
+  position: relative;
+  ${props =>
+    props.isDragging &&
+    css`
+      &:before {
+        border-radius: 3px;
+        content: '';
+        position: absolute;
+        top: 2px;
+        right: -5px;
+        left: -5px;
+        bottom: -2px;
+        background-color: #eceef0;
+      }
+    `}
+  ${props =>
+    props.isSelected &&
+    css`
+      &:before {
+        border-radius: 3px;
+        content: '';
+        position: absolute;
+        top: 2px;
+        right: -5px;
+        bottom: -2px;
+        left: -5px;
+        background-color: rgba(${props.theme.colors.primary}, 0.75);
+      }
+    `}
+`;
+
+export const EntryChildren = styled.div<{ isRoot: boolean }>`
+  position: relative;
+  ${props =>
+    !props.isRoot &&
+    css`
+      margin-left: 10px;
+      padding-left: 25px;
+      border-left: 1px solid rgba(${props.theme.colors.text.primary}, 0.6);
+    `}
+`;
+
+export const PageContent = styled.div`
+  min-height: calc(100vh - 146px);
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-shadow: none;
+  user-select: none;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 700px;
+  padding-left: 56px;
+  padding-right: 56px;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  text-size-adjust: none;
+`;
+
+export const DragHandle = styled.div<{ top: number; left: number }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  transform: translate3d(${props => props.left}px, ${props => props.top}px, 0);
+  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
+  width: 18px;
+  height: 18px;
+  color: rgb(75, 81, 85);
+  border-radius: 9px;
+`;
+export const RootWrapper = styled.div``;
+
+export const EntryHandle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 501px;
+  top: 7px;
+  width: 18px;
+  height: 18px;
+  color: rgba(${p => p.theme.colors.text.primary});
+  border-radius: 9px;
+  &:hover {
+    background: rgba(${p => p.theme.colors.primary});
+  }
+  svg {
+    fill: rgba(${p => p.theme.colors.text.primary});
+    stroke: rgba(${p => p.theme.colors.text.primary});
+  }
+`;
+
+export const EntryInnerContent = styled.div`
+  padding-top: 4px;
+  font-size: 15px;
+  white-space: pre-wrap;
+  line-height: 24px;
+  min-height: 24px;
+  overflow-wrap: break-word;
+  position: relative;
+  user-select: text;
+  color: rgba(${p => p.theme.colors.text.primary});
+  &::selection {
+    background: #a49de8;
+  }
+  &:focus {
+    outline: 0;
+  }
+`;
+
+export const DragDebugWrapper = styled.div`
+  position: absolute;
+  left: 42px;
+  bottom: 24px;
+  color: #fff;
+`;
+
+export const DragIndicatorBar = styled.div<{ left: number; top: number; width: number }>`
+  position: absolute;
+  width: ${props => props.width}px;
+  top: ${props => props.top}px;
+  left: ${props => props.left}px;
+  height: 4px;
+  border-radius: 3px;
+  background: rgb(204, 204, 204);
+`;
+
+export const ExpandButton = styled.div`
+  top: 6px;
+  cursor: default;
+  color: transparent;
+  position: absolute;
+  top: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 478px;
+  width: 20px;
+  height: 20px;
+  svg {
+    fill: transparent;
+  }
+`;
+export const EntryContent = styled.div`
+  position: relative;
+  margin-left: -500px;
+  padding-left: 524px;
+
+  &:hover ${ExpandButton} svg {
+    fill: rgb(${props => props.theme.colors.text.primary});
+  }
+`;
+
+export const PageContainer = styled.div`
+  overflow: scroll;
+`;

frontend/src/Outline/index.tsx

@@ -0,0 +1,504 @@
+import React, { useState, useRef, useEffect, useMemo, useCallback, useContext, memo, createRef } from 'react';
+import { DotCircle } from 'shared/icons';
+import styled from 'styled-components/macro';
+import GlobalTopNavbar from 'App/TopNavbar';
+import _ from 'lodash';
+import produce from 'immer';
+import Entry from './Entry';
+import DragIndicator from './DragIndicator';
+import Dragger from './Dragger';
+import DragDebug from './DragDebug';
+import { DragContext } from './useDrag';
+
+import {
+  PageContainer,
+  DragDebugWrapper,
+  DragIndicatorBar,
+  PageContent,
+  EntryChildren,
+  EntryInnerContent,
+  EntryWrapper,
+  EntryContent,
+  RootWrapper,
+  EntryHandle,
+} from './Styles';
+import {
+  transformToTree,
+  findNode,
+  findNodeDepth,
+  getNumberOfChildren,
+  validateDepth,
+  getDimensions,
+  findNextDraggable,
+  getNodeOver,
+  getCorrectNode,
+  findCommonParent,
+} from './utils';
+import NOOP from 'shared/utils/noop';
+
+type OutlineCommand = {
+  nodes: Array<{
+    id: string;
+    prev: { position: number; parent: string | null };
+    next: { position: number; parent: string | null };
+  }>;
+};
+
+type ItemCollapsed = {
+  id: string;
+  collapsed: boolean;
+};
+
+const listItems: Array<ItemElement> = [
+  { id: 'root', position: 4096, parent: null, collapsed: false },
+  { id: 'entry-1', position: 4096, parent: 'root', collapsed: false },
+  { id: 'entry-1_3', position: 4096 * 3, parent: 'entry-1', collapsed: false },
+  { id: 'entry-1_3_1', position: 4096, parent: 'entry-1_3', collapsed: false },
+  { id: 'entry-1_3_2', position: 4096 * 2, parent: 'entry-1_3', collapsed: false },
+  { id: 'entry-1_3_3', position: 4096 * 3, parent: 'entry-1_3', collapsed: false },
+  { id: 'entry-1_3_3_1', position: 4096 * 1, parent: 'entry-1_3_3', collapsed: false },
+  { id: 'entry-1_3_3_1_1', position: 4096 * 1, parent: 'entry-1_3_3_1', collapsed: false },
+  { id: 'entry-2', position: 4096 * 2, parent: 'root', collapsed: false },
+  { id: 'entry-3', position: 4096 * 3, parent: 'root', collapsed: false },
+  { id: 'entry-4', position: 4096 * 4, parent: 'root', collapsed: false },
+  { id: 'entry-5', position: 4096 * 5, parent: 'root', collapsed: false },
+];
+
+const Outline: React.FC = () => {
+  const [items, setItems] = useState(listItems);
+  const [selecting, setSelecting] = useState<{
+    isSelecting: boolean;
+    node: { id: string; depth: number } | null;
+  }>({ isSelecting: false, node: null });
+  const [selection, setSelection] = useState<null | { nodes: Array<{ id: string }>; first?: OutlineNode | null }>(null);
+  const [dragging, setDragging] = useState<{
+    show: boolean;
+    draggedNodes: null | Array<string>;
+    initialPos: { x: number; y: number };
+  }>({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
+  const [impact, setImpact] = useState<null | {
+    listPosition: number;
+    zone: ImpactZone;
+    depthTarget: number;
+  }>(null);
+  const selectRef = useRef<{ isSelecting: boolean; hasSelection: boolean; node: { id: string; depth: number } | null }>(
+    {
+      isSelecting: false,
+      node: null,
+      hasSelection: false,
+    },
+  );
+  const impactRef = useRef<null | { listPosition: number; depth: number; zone: ImpactZone }>(null);
+  useEffect(() => {
+    if (impact) {
+      impactRef.current = { zone: impact.zone, depth: impact.depthTarget, listPosition: impact.listPosition };
+    }
+  }, [impact]);
+  useEffect(() => {
+    selectRef.current.isSelecting = selecting.isSelecting;
+    selectRef.current.node = selecting.node;
+  }, [selecting]);
+
+  const $content = useRef<HTMLDivElement>(null);
+  const outline = useRef<OutlineData>({
+    published: new Map<string, string>(),
+    dimensions: new Map<string, NodeDimensions>(),
+    nodes: new Map<number, Map<string, OutlineNode>>(),
+    relationships: new Map<string, NodeRelationships>(),
+  });
+
+  const tree = transformToTree(_.cloneDeep(items));
+  let root: any = null;
+  if (tree.length === 1) {
+    root = tree[0];
+  }
+  const outlineHistory = useRef<{ commands: Array<OutlineCommand>; current: number }>({ current: -1, commands: [] });
+
+  useEffect(() => {
+    outline.current.relationships = new Map<string, NodeRelationships>();
+    outline.current.published = new Map<string, string>();
+    outline.current.nodes = new Map<number, Map<string, OutlineNode>>();
+    const collapsedMap = items.reduce((map, next) => {
+      if (next.collapsed) {
+        map.set(next.id, true);
+      }
+      return map;
+    }, new Map<string, boolean>());
+    items.forEach(item => outline.current.published.set(item.id, item.parent ?? 'root'));
+
+    for (let i = 0; i < items.length; i++) {
+      const { collapsed, position, id, parent: curParent } = items[i];
+      if (id === 'root') {
+        continue;
+      }
+      const parent = curParent ?? 'root';
+      outline.current.published.set(id, parent ?? 'root');
+      const { depth, ancestors } = findNodeDepth(outline.current.published, id);
+      const collapsedParent = ancestors.slice(0, -1).find(a => collapsedMap.get(a));
+      if (collapsedParent) {
+        continue;
+      }
+      const children = getNumberOfChildren(root, ancestors);
+      if (!outline.current.nodes.has(depth)) {
+        outline.current.nodes.set(depth, new Map<string, OutlineNode>());
+      }
+      const targetDepthNodes = outline.current.nodes.get(depth);
+      if (targetDepthNodes) {
+        targetDepthNodes.set(id, {
+          id,
+          children,
+          position,
+          depth,
+          ancestors,
+          collapsed,
+          parent,
+        });
+      }
+      if (!outline.current.relationships.has(parent)) {
+        outline.current.relationships.set(parent, {
+          self: {
+            depth: depth - 1,
+            id: parent,
+          },
+          children: [],
+          numberOfSubChildren: 0,
+        });
+      }
+      const nodeRelations = outline.current.relationships.get(parent);
+      if (nodeRelations) {
+        outline.current.relationships.set(parent, {
+          self: nodeRelations.self,
+          numberOfSubChildren: nodeRelations.numberOfSubChildren + children,
+          children: [...nodeRelations.children, { id, position, depth, children }].sort(
+            (a, b) => a.position - b.position,
+          ),
+        });
+      }
+    }
+  }, [items]);
+  const handleKeyDown = useCallback(e => {
+    if (e.code === 'KeyZ' && e.ctrlKey) {
+      const currentCommand = outlineHistory.current.commands[outlineHistory.current.current];
+      if (currentCommand) {
+        setItems(prevItems =>
+          produce(prevItems, draftItems => {
+            currentCommand.nodes.forEach(node => {
+              const idx = prevItems.findIndex(c => c.id === node.id);
+              if (idx !== -1) {
+                draftItems[idx].parent = node.prev.parent;
+                draftItems[idx].position = node.prev.position;
+              }
+            });
+            outlineHistory.current.current--;
+          }),
+        );
+      }
+    } else if (e.code === 'KeyY' && e.ctrlKey) {
+      const currentCommand = outlineHistory.current.commands[outlineHistory.current.current + 1];
+      if (currentCommand) {
+        setItems(prevItems =>
+          produce(prevItems, draftItems => {
+            currentCommand.nodes.forEach(node => {
+              const idx = prevItems.findIndex(c => c.id === node.id);
+              if (idx !== -1) {
+                draftItems[idx].parent = node.next.parent;
+                draftItems[idx].position = node.next.position;
+              }
+            });
+            outlineHistory.current.current++;
+          }),
+        );
+      }
+    }
+  }, []);
+
+  const handleMouseUp = useCallback(
+    e => {
+      if (selectRef.current.hasSelection && !selectRef.current.isSelecting) {
+        setSelection(null);
+      }
+      if (selectRef.current.isSelecting) {
+        setSelecting({ isSelecting: false, node: null });
+      }
+    },
+    [dragging, selecting],
+  );
+  const handleMouseMove = useCallback(e => {
+    if (selectRef.current.isSelecting && selectRef.current.node) {
+      const { clientX, clientY } = e;
+      const dimensions = outline.current.dimensions.get(selectRef.current.node.id);
+      if (dimensions) {
+        const entry = getDimensions(dimensions.entry);
+        if (entry) {
+          const isAbove = clientY < entry.top;
+          const isBelow = clientY > entry.bottom;
+          if (!isAbove && !isBelow && selectRef.current.hasSelection) {
+            const nodeDepth = outline.current.nodes.get(selectRef.current.node.depth);
+            const aboveNode = nodeDepth ? nodeDepth.get(selectRef.current.node.id) : null;
+            if (aboveNode) {
+              setSelection({ nodes: [{ id: selectRef.current.node.id }], first: aboveNode });
+              selectRef.current.hasSelection = false;
+            }
+          }
+          if (isAbove || isBelow) {
+            e.preventDefault();
+            const { curDraggable } = getNodeOver({ x: clientX, y: clientY }, outline.current);
+            const nodeDepth = outline.current.nodes.get(selectRef.current.node.depth);
+            const selectedNode = nodeDepth ? nodeDepth.get(selectRef.current.node.id) : null;
+            let aboveNode: OutlineNode | undefined | null = null;
+            let belowNode: OutlineNode | undefined | null = null;
+            if (isBelow) {
+              aboveNode = selectedNode;
+              belowNode = curDraggable;
+            } else {
+              aboveNode = curDraggable;
+              belowNode = selectedNode;
+            }
+            if (aboveNode && belowNode) {
+              const aboveDim = outline.current.dimensions.get(aboveNode.id);
+              const belowDim = outline.current.dimensions.get(belowNode.id);
+              if (aboveDim && belowDim) {
+                const aboveDimBounds = getDimensions(aboveDim.entry);
+                const belowDimBounds = getDimensions(belowDim.children ? belowDim.children : belowDim.entry);
+                const aboveDimY = aboveDimBounds ? aboveDimBounds.bottom : 0;
+                const belowDimY = belowDimBounds ? belowDimBounds.top : 0;
+                const inbetweenNodes: Array<{ id: string }> = [];
+                for (const [id, dimension] of outline.current.dimensions.entries()) {
+                  if (id === aboveNode.id || id === belowNode.id) {
+                    inbetweenNodes.push({ id });
+                    continue;
+                  }
+                  const targetNodeBounds = getDimensions(dimension.entry);
+                  if (targetNodeBounds) {
+                    if (
+                      Math.round(aboveDimY) <= Math.round(targetNodeBounds.top) &&
+                      Math.round(belowDimY) >= Math.round(targetNodeBounds.bottom)
+                    ) {
+                      inbetweenNodes.push({ id });
+                    }
+                  }
+                }
+                const filteredNodes = inbetweenNodes.filter(n => {
+                  const parent = outline.current.published.get(n.id);
+                  if (parent) {
+                    const foundParent = inbetweenNodes.find(c => c.id === parent);
+                    if (foundParent) {
+                      return false;
+                    }
+                  }
+                  return true;
+                });
+                selectRef.current.hasSelection = true;
+                setSelection({ nodes: filteredNodes, first: aboveNode });
+              }
+            }
+          }
+        }
+      }
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.addEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  if (!root) {
+    return null;
+  }
+  return (
+    <>
+      <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
+      <DragContext.Provider
+        value={{
+          outline,
+          impact,
+          setImpact: data => {
+            if (data) {
+              const { zone, depth } = data;
+              let listPosition = 65535;
+              if (zone.above && zone.above.node.depth + 1 <= depth && zone.above.node.collapsed) {
+                const aboveChildren = items
+                  .filter(i => (zone.above ? i.parent === zone.above.node.id : false))
+                  .sort((a, b) => a.position - b.position);
+                const lastChild = aboveChildren[aboveChildren.length - 1];
+                if (lastChild) {
+                  listPosition = lastChild.position * 2.0;
+                }
+              } else {
+                console.log(zone.above);
+                console.log(zone.below);
+                const correctNode = getCorrectNode(outline.current, zone.above ? zone.above.node : null, depth);
+                console.log(correctNode);
+                const listAbove = validateDepth(correctNode, depth);
+                const listBelow = validateDepth(zone.below ? zone.below.node : null, depth);
+                console.log(listAbove, listBelow);
+                if (listAbove && listBelow) {
+                  listPosition = (listAbove.position + listBelow.position) / 2.0;
+                } else if (listAbove && !listBelow) {
+                  listPosition = listAbove.position * 2.0;
+                } else if (!listAbove && listBelow) {
+                  listPosition = listBelow.position / 2.0;
+                }
+              }
+
+              if (!zone.above && zone.below) {
+                const newPosition = zone.below.node.position / 2.0;
+                setImpact(() => ({
+                  zone,
+                  listPosition: newPosition,
+                  depthTarget: depth,
+                }));
+              }
+              if (zone.above) {
+                // console.log(`prev=${prev} next=${next} targetPosition=${targetPosition}`);
+                // let targetID = depthTarget === 1 ? 'root' : node.ancestors[depthTarget - 1];
+                // targetID = targetID ?? node.id;
+                setImpact(() => ({
+                  zone,
+                  listPosition,
+                  depthTarget: depth,
+                }));
+              }
+            } else {
+              setImpact(null);
+            }
+          },
+          setNodeDimensions: (nodeID, ref) => {
+            outline.current.dimensions.set(nodeID, ref);
+          },
+          clearNodeDimensions: nodeID => {
+            outline.current.dimensions.delete(nodeID);
+          },
+        }}
+      >
+        <>
+          <PageContainer>
+            <PageContent>
+              <RootWrapper ref={$content}>
+                <Entry
+                  onStartSelect={({ id, depth }) => {
+                    setSelection(null);
+                    setSelecting({ isSelecting: true, node: { id, depth } });
+                  }}
+                  onToggleCollapse={(id, collapsed) => {
+                    setItems(prevItems =>
+                      produce(prevItems, draftItems => {
+                        const idx = prevItems.findIndex(c => c.id === id);
+                        if (idx !== -1) {
+                          draftItems[idx].collapsed = collapsed;
+                        }
+                      }),
+                    );
+                  }}
+                  id="root"
+                  parentID="root"
+                  isRoot
+                  selection={selection ? selection.nodes : null}
+                  draggedNodes={dragging.draggedNodes}
+                  position={root.position}
+                  entries={root.children}
+                  onCancelDrag={() => {
+                    setImpact(null);
+                    setDragging({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
+                  }}
+                  onStartDrag={e => {
+                    if (e.id !== 'root') {
+                      if (selectRef.current.hasSelection && selection && selection.nodes.find(c => c.id === e.id)) {
+                        setImpact(null);
+                        setDragging({
+                          show: true,
+                          draggedNodes: [...selection.nodes.map(c => c.id)],
+                          initialPos: { x: e.clientX, y: e.clientY },
+                        });
+                      } else {
+                        setImpact(null);
+                        setDragging({ show: true, draggedNodes: [e.id], initialPos: { x: e.clientX, y: e.clientY } });
+                      }
+                    }
+                  }}
+                />
+              </RootWrapper>
+            </PageContent>
+          </PageContainer>
+          {dragging.show && dragging.draggedNodes && (
+            <Dragger
+              container={$content}
+              initialPos={dragging.initialPos}
+              draggedNodes={{ nodes: dragging.draggedNodes, first: selection ? selection.first : null }}
+              isDragging={dragging.show}
+              onDragEnd={() => {
+                if (dragging.draggedNodes && impactRef.current) {
+                  const { zone, depth, listPosition } = impactRef.current;
+                  const noZone = !zone.above && !zone.below;
+                  if (!noZone) {
+                    let parentID = 'root';
+                    if (zone.above) {
+                      parentID = zone.above.node.ancestors[depth - 1];
+                    }
+                    let reparent = true;
+                    for (let i = 0; i < dragging.draggedNodes.length; i++) {
+                      const draggedID = dragging.draggedNodes[i];
+                      const prevItem = items.find(i => i.id === draggedID);
+                      if (prevItem && prevItem.position === listPosition && prevItem.parent === parentID) {
+                        reparent = false;
+                        break;
+                      }
+                    }
+                    // TODO: set reparent if list position changed but parent did not
+                    //
+
+                    if (reparent) {
+                      // UPDATE OUTLINE DATA AFTER NODE MOVE
+                      setItems(itemsPrev =>
+                        produce(itemsPrev, draftItems => {
+                          if (dragging.draggedNodes) {
+                            const command: OutlineCommand = { nodes: [] };
+                            outlineHistory.current.current += 1;
+                            dragging.draggedNodes.forEach(n => {
+                              const curDragging = itemsPrev.findIndex(i => i.id === n);
+                              command.nodes.push({
+                                id: n,
+                                prev: {
+                                  parent: draftItems[curDragging].parent,
+                                  position: draftItems[curDragging].position,
+                                },
+                                next: {
+                                  parent: parentID,
+                                  position: listPosition,
+                                },
+                              });
+                              draftItems[curDragging].parent = parentID;
+                              draftItems[curDragging].position = listPosition;
+                            });
+                            outlineHistory.current.commands[outlineHistory.current.current] = command;
+                            if (outlineHistory.current.commands[outlineHistory.current.current + 1]) {
+                              outlineHistory.current.commands.splice(outlineHistory.current.current + 1);
+                            }
+                          }
+                        }),
+                      );
+                    }
+                  }
+                }
+                setImpact(null);
+                setDragging({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
+              }}
+            />
+          )}
+        </>
+      </DragContext.Provider>
+      {impact && <DragIndicator depthTarget={impact.depthTarget} container={$content} zone={impact.zone} />}
+      {impact && (
+        <DragDebug zone={impact.zone ?? null} draggedNodes={dragging.draggedNodes} depthTarget={impact.depthTarget} />
+      )}
+    </>
+  );
+};
+
+export default Outline;

frontend/src/Outline/useDrag.ts

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+
+type DragContextData = {
+  impact: null | { zone: ImpactZone; depthTarget: number };
+  outline: React.MutableRefObject<OutlineData>;
+  setNodeDimensions: (
+    nodeID: string,
+    ref: { entry: React.RefObject<HTMLElement>; children: React.RefObject<HTMLElement> | null },
+  ) => void;
+  clearNodeDimensions: (nodeID: string) => void;
+  setImpact: (data: ImpactData | null) => void;
+};
+
+export const DragContext = React.createContext<DragContextData | null>(null);
+
+export const useDrag = () => {
+  const ctx = useContext(DragContext);
+  if (ctx) {
+    return ctx;
+  }
+  throw new Error('context is null');
+};

frontend/src/Outline/utils.ts

@@ -0,0 +1,361 @@
+import _ from 'lodash';
+
+export function getCorrectNode(data: OutlineData, node: OutlineNode | null, depth: number) {
+  if (node) {
+    console.log(depth, node);
+    if (depth === node.depth) {
+      return node;
+    }
+    const parent = node.ancestors[depth];
+    console.log('parent', parent);
+    if (parent) {
+      const parentNode = data.relationships.get(parent);
+      if (parentNode) {
+        const parentDepth = parentNode.self.depth;
+        const nodeDepth = data.nodes.get(parentDepth);
+        return nodeDepth ? nodeDepth.get(parent) : null;
+      }
+    }
+  }
+  return null;
+}
+export function validateDepth(node: OutlineNode | null | undefined, depth: number) {
+  if (node) {
+    return node.depth === depth ? node : null;
+  }
+  return null;
+}
+
+export function getNodeAbove(node: OutlineNode, startingParent: RelationshipChild, outline: OutlineData) {
+  let hasChildren = true;
+  let nodeAbove: null | RelationshipChild = null;
+  let aboveTargetID = startingParent.id;
+  while (hasChildren) {
+    const targetParent = outline.relationships.get(aboveTargetID);
+    if (targetParent) {
+      const parentNodes = outline.nodes.get(targetParent.self.depth);
+      const parentNode = parentNodes ? parentNodes.get(targetParent.self.id) : null;
+      if (targetParent.children.length === 0) {
+        if (parentNode) {
+          nodeAbove = {
+            id: parentNode.id,
+            depth: parentNode.depth,
+            position: parentNode.position,
+            children: parentNode.children,
+          };
+          console.log('node above', nodeAbove);
+        }
+        hasChildren = false;
+        continue;
+      }
+      nodeAbove = targetParent.children[targetParent.children.length - 1];
+      if (targetParent.numberOfSubChildren === 0) {
+        hasChildren = false;
+      } else {
+        aboveTargetID = nodeAbove.id;
+      }
+    } else {
+      const target = outline.relationships.get(node.ancestors[0]);
+      if (target) {
+        const targetChild = target.children.find(i => i.id === aboveTargetID);
+        if (targetChild) {
+          nodeAbove = targetChild;
+        }
+        hasChildren = false;
+      }
+    }
+  }
+  console.log('final node above', nodeAbove);
+  return nodeAbove;
+}
+
+export function getBelowParent(node: OutlineNode, outline: OutlineData) {
+  const { relationships, nodes } = outline;
+  const parentDepth = nodes.get(node.depth - 1);
+  const parent = parentDepth ? parentDepth.get(node.parent) : null;
+  if (parent) {
+    const grandfather = relationships.get(parent.parent);
+    if (grandfather) {
+      const parentIndex = grandfather.children.findIndex(c => c.id === parent.id);
+      if (parentIndex !== -1) {
+        if (parentIndex === grandfather.children.length - 1) {
+          const root = relationships.get(node.ancestors[0]);
+          if (root) {
+            const ancestorIndex = root.children.findIndex(c => c.id === node.ancestors[1]);
+            if (ancestorIndex !== -1) {
+              const nextAncestor = root.children[ancestorIndex + 1];
+              if (nextAncestor) {
+                return nextAncestor;
+              }
+            }
+          }
+        } else {
+          const nextChild = grandfather.children[parentIndex + 1];
+          if (nextChild) {
+            return nextChild;
+          }
+        }
+      }
+    }
+  }
+  return null;
+}
+
+export function getDimensions(ref: React.RefObject<HTMLElement> | null | undefined) {
+  if (ref && ref.current) {
+    return ref.current.getBoundingClientRect();
+  }
+  return null;
+}
+
+export function getTargetDepth(mouseX: number, handleLeft: number, availableDepths: { min: number; max: number }) {
+  if (mouseX > handleLeft) {
+    return availableDepths.max;
+  }
+  let curDepth = availableDepths.max - 1;
+  for (let x = availableDepths.min; x < availableDepths.max; x++) {
+    const breakpoint = handleLeft - x * 35;
+    // console.log(`mouseX=${mouseX} breakpoint=${breakpoint} x=${x} curDepth=${curDepth}`);
+    if (mouseX > breakpoint) {
+      return curDepth;
+    }
+    curDepth -= 1;
+  }
+
+  return availableDepths.min;
+}
+
+export function findNextDraggable(pos: { x: number; y: number }, outline: OutlineData, curDepth: number) {
+  let index = 0;
+  const currentDepthNodes = outline.nodes.get(curDepth);
+  let nodeAbove: null | RelationshipChild = null;
+  if (!currentDepthNodes) {
+    return null;
+  }
+  for (const [id, node] of currentDepthNodes) {
+    const dimensions = outline.dimensions.get(id);
+    const target = dimensions ? getDimensions(dimensions.entry) : null;
+    const children = dimensions ? getDimensions(dimensions.children) : null;
+    if (target) {
+      console.log(
+        `[${id}] ${pos.y} <= ${target.bottom} = ${pos.y <= target.bottom} / ${pos.y} >= ${target.top} = ${pos.y >=
+          target.top}`,
+      );
+      if (pos.y <= target.bottom && pos.y >= target.top) {
+        const middlePoint = target.top + target.height / 2;
+        const position: ImpactPosition = pos.y > middlePoint ? 'after' : 'before';
+        return {
+          found: true,
+          node,
+          position,
+        };
+      }
+    }
+    if (children) {
+      console.log(
+        `[${id}] ${pos.y} <= ${children.bottom} = ${pos.y <= children.bottom} / ${pos.y} >= ${children.top} = ${pos.y >=
+          children.top}`,
+      );
+      if (pos.y <= children.bottom && pos.y >= children.top) {
+        const position: ImpactPosition = 'after';
+        return { found: false, node, position };
+      }
+    }
+    index += 1;
+  }
+  return null;
+}
+
+export function transformToTree(arr: any) {
+  const nodes: any = {};
+  return arr.filter(function(obj: any) {
+    var id = obj['id'],
+      parentId = obj['parent'];
+
+    nodes[id] = _.defaults(obj, nodes[id], { children: [] });
+    parentId && (nodes[parentId] = nodes[parentId] || { children: [] })['children'].push(obj);
+
+    return !parentId;
+  });
+}
+
+export function findNode(parentID: string, nodeID: string, data: OutlineData) {
+  const nodeRelations = data.relationships.get(parentID);
+  if (nodeRelations) {
+    const nodeDepth = data.nodes.get(nodeRelations.self.depth + 1);
+    if (nodeDepth) {
+      const node = nodeDepth.get(nodeID);
+      return node ?? null;
+    }
+  }
+  return null;
+}
+
+export function findNodeDepth(published: Map<string, string>, id: string) {
+  let currentID = id;
+  let breaker = 0;
+  let depth = 0;
+  let ancestors = [id];
+  while (currentID !== 'root') {
+    const nextID = published.get(currentID);
+    if (nextID) {
+      ancestors = [nextID, ...ancestors];
+      currentID = nextID;
+      depth += 1;
+      breaker += 1;
+      if (breaker > 100) {
+        throw new Error('node depth breaker was thrown');
+      }
+    } else {
+      throw new Error('unable to find nextID');
+    }
+  }
+  return { depth, ancestors };
+}
+
+export function getNumberOfChildren(root: ItemElement, ancestors: Array<string>) {
+  let currentBranch = root;
+  for (let i = 1; i < ancestors.length; i++) {
+    const nextBranch = currentBranch.children ? currentBranch.children.find(c => c.id === ancestors[i]) : null;
+    if (nextBranch) {
+      currentBranch = nextBranch;
+    } else {
+      throw new Error('unable to find next branch');
+    }
+  }
+  return currentBranch.children ? currentBranch.children.length : 0;
+}
+
+export function findNodeAbove(outline: OutlineData, curDepth: number, belowNode: OutlineNode) {
+  let targetAboveNode: null | RelationshipChild = null;
+  if (curDepth === 1) {
+    const relations = outline.relationships.get(belowNode.ancestors[0]);
+    if (relations) {
+      const parentIndex = relations.children.findIndex(n => belowNode && n.id === belowNode.ancestors[1]);
+      if (parentIndex !== -1) {
+        const aboveParent = relations.children[parentIndex - 1];
+        if (parentIndex === 0) {
+          targetAboveNode = null;
+        } else {
+          targetAboveNode = getNodeAbove(belowNode, aboveParent, outline);
+        }
+      }
+    }
+  } else {
+    const relations = outline.relationships.get(belowNode.parent);
+    if (relations) {
+      const currentIndex = relations.children.findIndex(n => belowNode && n.id === belowNode.id);
+      // is first child, so use parent
+      if (currentIndex === 0) {
+        const parentNodes = outline.nodes.get(belowNode.depth - 1);
+        const parentNode = parentNodes ? parentNodes.get(belowNode.parent) : null;
+        if (parentNode) {
+          targetAboveNode = {
+            id: belowNode.parent,
+            depth: belowNode.depth - 1,
+            position: parentNode.position,
+            children: parentNode.children,
+          };
+        }
+      } else if (currentIndex !== -1) {
+        // is not first child, so first prev sibling
+        const aboveParentNode = relations.children[currentIndex - 1];
+        if (aboveParentNode) {
+          targetAboveNode = getNodeAbove(belowNode, aboveParentNode, outline);
+          if (targetAboveNode === null) {
+            targetAboveNode = aboveParentNode;
+          }
+        }
+      }
+    }
+  }
+  if (targetAboveNode) {
+    const depthNodes = outline.nodes.get(targetAboveNode.depth);
+    if (depthNodes) {
+      return depthNodes.get(targetAboveNode.id) ?? null;
+    }
+  }
+  return null;
+}
+
+export function getNodeOver(mouse: { x: number; y: number }, outline: OutlineData) {
+  let curDepth = 1;
+  let curDraggables: any;
+  let curDraggable: any;
+  let curPosition: ImpactPosition = 'after';
+  while (outline.nodes.size + 1 > curDepth) {
+    curDraggables = outline.nodes.get(curDepth);
+    if (curDraggables) {
+      const nextDraggable = findNextDraggable(mouse, outline, curDepth);
+      if (nextDraggable) {
+        curDraggable = nextDraggable.node;
+        curPosition = nextDraggable.position;
+        if (nextDraggable.found) {
+          break;
+        }
+        curDepth += 1;
+      } else {
+        break;
+      }
+    }
+  }
+  return {
+    curDepth,
+    curDraggable,
+    curPosition,
+  };
+}
+
+export function findCommonParent(outline: OutlineData, aboveNode: OutlineNode, belowNode: OutlineNode) {
+  let aboveParentID = null;
+  let depth = 0;
+  for (let aIdx = aboveNode.ancestors.length - 1; aIdx !== 0; aIdx--) {
+    depth = aIdx;
+    const aboveNodeParent = aboveNode.ancestors[aIdx];
+    for (let bIdx = belowNode.ancestors.length - 1; bIdx !== 0; bIdx--) {
+      if (belowNode.ancestors[bIdx] === aboveNodeParent) {
+        aboveParentID = aboveNodeParent;
+      }
+    }
+  }
+  if (aboveParentID) {
+    const parent = outline.relationships.get(aboveParentID) ?? null;
+    if (parent) {
+      return {
+        parent,
+        depth,
+      };
+    }
+    return null;
+  }
+  return null;
+}
+
+export function getLastChildInBranch(outline: OutlineData, lastParentNode: OutlineNode) {
+  let curParentRelation = outline.relationships.get(lastParentNode.id);
+  if (!curParentRelation) {
+    return { id: lastParentNode.id, depth: 1 };
+  }
+  let hasChildren = lastParentNode.children !== 0;
+  let depth = 1;
+  let finalID: null | string = null;
+  while (hasChildren) {
+    if (curParentRelation) {
+      const lastChild = curParentRelation.children.sort((a, b) => a.position - b.position)[
+        curParentRelation.children.length - 1
+      ];
+      depth += 1;
+      if (lastChild.children === 0) {
+        finalID = lastChild.id;
+        break;
+      }
+      curParentRelation = outline.relationships.get(lastChild.id);
+    } else {
+      hasChildren = false;
+    }
+  }
+  if (finalID !== null) {
+    return { id: finalID, depth };
+  }
+  return null;
+}

frontend/src/Profile/index.tsx

@@ -3,11 +3,20 @@ import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
 import { getAccessToken } from 'shared/utils/accessToken';
 import Settings from 'shared/components/Settings';
-import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutation } from 'shared/generated/graphql';
+import {
+  useMeQuery,
+  useClearProfileAvatarMutation,
+  useUpdateUserPasswordMutation,
+  useUpdateUserInfoMutation,
+  MeQuery,
+  MeDocument,
+} from 'shared/generated/graphql';
 import axios from 'axios';
 import { useCurrentUser } from 'App/context';
 import NOOP from 'shared/utils/noop';
 import { toast } from 'react-toastify';
+import updateApolloCache from 'shared/utils/cache';
+import produce from 'immer';
 
 const MainContent = styled.div`
   padding: 0 0 50px 80px;
@@ -19,6 +28,7 @@ const Projects = () => {
   const $fileUpload = useRef<HTMLInputElement>(null);
   const [clearProfileAvatar] = useClearProfileAvatarMutation();
   const { user } = useCurrentUser();
+  const [updateUserInfo] = useUpdateUserInfoMutation();
   const [updateUserPassword] = useUpdateUserPasswordMutation();
   const { loading, data, refetch } = useMeQuery();
   useEffect(() => {
@@ -69,6 +79,13 @@ const Projects = () => {
             toast('Password was changed!');
             done();
           }}
+          onChangeUserInfo={(d, done) => {
+            updateUserInfo({
+              variables: { name: d.full_name, bio: d.bio, email: d.email, initials: d.initials },
+            });
+            toast('User info was saved!');
+            done();
+          }}
           onProfileAvatarRemove={() => {
             clearProfileAvatar();
           }}

frontend/src/Projects/Project/Board/FilterMeta.tsx

@@ -5,7 +5,6 @@ import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'sha
 import Input from 'shared/components/ControlledInput';
 import { Popup, usePopup } from 'shared/components/PopupMenu';
 import produce from 'immer';
-import moment from 'moment';
 import { mixin } from 'shared/utils/styles';
 import Member from 'shared/components/Member';
 

frontend/src/Projects/Project/Board/SortPopup.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/components/Lists';
+import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
 
 export const ActionsList = styled.ul`
   margin: 0;
@@ -73,6 +73,11 @@ const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) =
       >
         <ActionTitle>Task title</ActionTitle>
       </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Complete</ActionTitle>
+      </ActionItem>
     </ActionsList>
   );
 };

frontend/src/Projects/Project/Board/index.tsx

@@ -8,6 +8,7 @@ import {
   useSetTaskCompleteMutation,
   useToggleTaskLabelMutation,
   useFindProjectQuery,
+  useSortTaskGroupMutation,
   useUpdateTaskGroupNameMutation,
   useUpdateTaskNameMutation,
   useCreateTaskMutation,
@@ -21,6 +22,10 @@ import {
   useUnassignTaskMutation,
   useUpdateTaskDueDateMutation,
   FindProjectQuery,
+  useDuplicateTaskGroupMutation,
+  DuplicateTaskGroupMutation,
+  DuplicateTaskGroupDocument,
+  useDeleteTaskGroupTasksMutation,
 } from 'shared/generated/graphql';
 
 import QuickCardEditor from 'shared/components/QuickCardEditor';
@@ -33,10 +38,8 @@ import SimpleLists, {
   TaskMeta,
   TaskMetaMatch,
   TaskMetaFilters,
-  TaskSorting,
-  TaskSortingType,
-  TaskSortingDirection,
 } from 'shared/components/Lists';
+import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
 import produce from 'immer';
 import MiniProfile from 'shared/components/MiniProfile';
 import DueDateManager from 'shared/components/DueDateManager';
@@ -44,6 +47,7 @@ import EmptyBoard from 'shared/components/EmptyBoard';
 import NOOP from 'shared/utils/noop';
 import LabelManagerEditor from 'Projects/Project/LabelManagerEditor';
 import Chip from 'shared/components/Chip';
+import { toast } from 'react-toastify';
 import { useCurrentUser } from 'App/context';
 import FilterStatus from './FilterStatus';
 import FilterMeta from './FilterMeta';
@@ -263,6 +267,11 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
   const [taskMetaFilters, setTaskMetaFilters] = useState(initTaskMetaFilters);
   const [taskSorting, setTaskSorting] = useState(initTaskSorting);
   const history = useHistory();
+  const [sortTaskGroup] = useSortTaskGroupMutation({
+    onCompleted: () => {
+      toast('List was sorted');
+    },
+  });
   const [deleteTaskGroup] = useDeleteTaskGroupMutation({
     update: (client, deletedTaskGroupData) => {
       updateApolloCache<FindProjectQuery>(
@@ -315,6 +324,36 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
   const { loading, data } = useFindProjectQuery({
     variables: { projectID },
   });
+  const [deleteTaskGroupTasks] = useDeleteTaskGroupTasksMutation({
+    update: (client, resp) =>
+      updateApolloCache<FindProjectQuery>(
+        client,
+        FindProjectDocument,
+        cache =>
+          produce(cache, draftCache => {
+            const idx = cache.findProject.taskGroups.findIndex(
+              t => t.id === resp.data.deleteTaskGroupTasks.taskGroupID,
+            );
+            if (idx !== -1) {
+              draftCache.findProject.taskGroups[idx].tasks = [];
+            }
+          }),
+        { projectID },
+      ),
+  });
+  const [duplicateTaskGroup] = useDuplicateTaskGroupMutation({
+    update: (client, resp) => {
+      updateApolloCache<FindProjectQuery>(
+        client,
+        FindProjectDocument,
+        cache =>
+          produce(cache, draftCache => {
+            draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
+          }),
+        { projectID },
+      );
+    },
+  });
 
   const [updateTaskDueDate] = useUpdateTaskDueDateMutation();
   const [setTaskComplete] = useSetTaskCompleteMutation();
@@ -624,15 +663,44 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
           onExtraMenuOpen={(taskGroupID: string, $targetRef: any) => {
             showPopup(
               $targetRef,
-              <Popup title="List actions" tab={0} onClose={() => hidePopup()}>
+              <ListActions
-                <ListActions
+                taskGroupID={taskGroupID}
-                  taskGroupID={taskGroupID}
+                onDeleteTaskGroupTasks={() => {
-                  onArchiveTaskGroup={tgID => {
+                  deleteTaskGroupTasks({ variables: { taskGroupID } });
-                    deleteTaskGroup({ variables: { taskGroupID: tgID } });
+                  hidePopup();
+                }}
+                onSortTaskGroup={taskSort => {
+                  const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
+                  if (taskGroup) {
+                    const tasks: Array<{ taskID: string; position: number }> = taskGroup.tasks
+                      .sort((a, b) => sortTasks(a, b, taskSort))
+                      .reduce((prevTasks: Array<{ taskID: string; position: number }>, t, idx) => {
+                        prevTasks.push({ taskID: t.id, position: (idx + 1) * 2048 });
+                        return tasks;
+                      }, []);
+                    sortTaskGroup({ variables: { taskGroupID, tasks } });
                     hidePopup();
-                  }}
+                  }
-                />
+                }}
-              </Popup>,
+                onDuplicateTaskGroup={newName => {
+                  const idx = data.findProject.taskGroups.findIndex(t => t.id === taskGroupID);
+                  if (idx !== -1) {
+                    const taskGroups = data.findProject.taskGroups.sort((a, b) => a.position - b.position);
+                    const prevPos = taskGroups[idx].position;
+                    const next = taskGroups[idx + 1];
+                    let newPos = prevPos * 2;
+                    if (next) {
+                      newPos = (prevPos + next.position) / 2.0;
+                    }
+                    duplicateTaskGroup({ variables: { projectID, taskGroupID, name: newName, position: newPos } });
+                    hidePopup();
+                  }
+                }}
+                onArchiveTaskGroup={tgID => {
+                  deleteTaskGroup({ variables: { taskGroupID: tgID } });
+                  hidePopup();
+                }}
+              />,
             );
           }}
         />

frontend/src/Projects/Project/Details/index.tsx

@@ -309,7 +309,7 @@ const Details: React.FC<DetailsProps> = ({
               task={data.findTask}
               onChecklistDrop={checklist => {
                 updateTaskChecklistLocation({
-                  variables: { checklistID: checklist.id, position: checklist.position },
+                  variables: { taskChecklistID: checklist.id, position: checklist.position },
 
                   optimisticResponse: {
                     __typename: 'Mutation',
@@ -324,20 +324,24 @@ const Details: React.FC<DetailsProps> = ({
                   },
                 });
               }}
-              onChecklistItemDrop={(prevChecklistID, checklistID, checklistItem) => {
+              onChecklistItemDrop={(prevChecklistID, taskChecklistID, checklistItem) => {
                 updateTaskChecklistItemLocation({
-                  variables: { checklistID, checklistItemID: checklistItem.id, position: checklistItem.position },
+                  variables: {
+                    taskChecklistID,
+                    taskChecklistItemID: checklistItem.id,
+                    position: checklistItem.position,
+                  },
                   optimisticResponse: {
                     __typename: 'Mutation',
                     updateTaskChecklistItemLocation: {
                       __typename: 'UpdateTaskChecklistItemLocationPayload',
                       prevChecklistID,
-                      checklistID,
+                      taskChecklistID,
                       checklistItem: {
                         __typename: 'TaskChecklistItem',
                         position: checklistItem.position,
                         id: checklistItem.id,
-                        taskChecklistID: checklistID,
+                        taskChecklistID,
                       },
                     },
                   },

frontend/src/Projects/Project/LabelManagerEditor/index.tsx

@@ -3,32 +3,11 @@ import updateApolloCache from 'shared/utils/cache';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 import {
-  useUpdateProjectMemberRoleMutation,
-  useCreateProjectMemberMutation,
-  useDeleteProjectMemberMutation,
-  useSetTaskCompleteMutation,
-  useToggleTaskLabelMutation,
-  useUpdateProjectNameMutation,
-  useFindProjectQuery,
-  useUpdateTaskGroupNameMutation,
-  useUpdateTaskNameMutation,
   useUpdateProjectLabelMutation,
-  useCreateTaskMutation,
   useDeleteProjectLabelMutation,
-  useDeleteTaskMutation,
-  useUpdateTaskLocationMutation,
-  useUpdateTaskGroupLocationMutation,
-  useCreateTaskGroupMutation,
-  useDeleteTaskGroupMutation,
-  useUpdateTaskDescriptionMutation,
-  useAssignTaskMutation,
-  DeleteTaskDocument,
   FindProjectDocument,
   useCreateProjectLabelMutation,
-  useUnassignTaskMutation,
-  useUpdateTaskDueDateMutation,
   FindProjectQuery,
-  useUsersQuery,
 } from 'shared/generated/graphql';
 import LabelManager from 'shared/components/PopupMenu/LabelManager';
 import LabelEditor from 'shared/components/PopupMenu/LabelEditor';

frontend/src/Projects/Project/index.tsx

@@ -3,6 +3,7 @@ import React, { useState, useRef, useEffect, useContext } from 'react';
 import updateApolloCache from 'shared/utils/cache';
 import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
 import styled from 'styled-components/macro';
+import AsyncSelect from 'react-select/async';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import {
   useParams,
@@ -15,11 +16,12 @@ import {
 } from 'react-router-dom';
 import {
   useUpdateProjectMemberRoleMutation,
-  useCreateProjectMemberMutation,
+  useInviteProjectMembersMutation,
   useDeleteProjectMemberMutation,
   useToggleTaskLabelMutation,
   useUpdateProjectNameMutation,
   useFindProjectQuery,
+  useDeleteInvitedProjectMemberMutation,
   useUpdateTaskNameMutation,
   useCreateTaskMutation,
   useDeleteTaskMutation,
@@ -37,12 +39,20 @@ import Input from 'shared/components/Input';
 import Member from 'shared/components/Member';
 import EmptyBoard from 'shared/components/EmptyBoard';
 import NOOP from 'shared/utils/noop';
+import { Lock, Cross } from 'shared/icons';
+import Button from 'shared/components/Button';
+import { useApolloClient } from '@apollo/react-hooks';
+import TaskAssignee from 'shared/components/TaskAssignee';
+import gql from 'graphql-tag';
+import { colourStyles } from 'shared/components/Select';
 import Board, { BoardLoading } from './Board';
 import Details from './Details';
 import LabelManagerEditor from './LabelManagerEditor';
 
 const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
 
+const RFC2822_EMAIL = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
+
 const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispatch<React.SetStateAction<string>>] => {
   const [value, setValue] = React.useState<string>(localStorage.getItem(localStorageKey) || '');
 
@@ -70,29 +80,299 @@ const MemberList = styled.div`
   margin: 8px 0;
 `;
 
+type InviteUserData = {
+  email?: string;
+  suerID?: string;
+};
 type UserManagementPopupProps = {
+  projectID: string;
   users: Array<User>;
   projectMembers: Array<TaskUser>;
-  onAddProjectMember: (userID: string) => void;
+  onInviteProjectMembers: (data: Array<InviteUserData>) => void;
 };
 
-const UserManagementPopup: React.FC<UserManagementPopupProps> = ({ users, projectMembers, onAddProjectMember }) => {
+const VisibiltyPrivateIcon = styled(Lock)`
+  padding-right: 4px;
+`;
+
+const VisibiltyButtonText = styled.span`
+  color: rgba(${props => props.theme.colors.text.primary});
+`;
+
+const ShareActions = styled.div`
+  border-top: 1px solid #414561;
+  margin-top: 8px;
+  padding-top: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const VisibiltyButton = styled.button`
+  cursor: pointer;
+  margin: 2px 4px;
+  padding: 2px 4px;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid transparent;
+  &:hover ${VisibiltyButtonText} {
+    color: rgba(${props => props.theme.colors.text.secondary});
+  }
+  &:hover ${VisibiltyPrivateIcon} {
+    fill: rgba(${props => props.theme.colors.text.secondary});
+    stroke: rgba(${props => props.theme.colors.text.secondary});
+  }
+  &:hover {
+    border-bottom: 1px solid rgba(${props => props.theme.colors.primary});
+  }
+`;
+
+type MemberFilterOptions = {
+  projectID?: null | string;
+  teamID?: null | string;
+  organization?: boolean;
+};
+
+const fetchMembers = async (client: any, projectID: string, options: MemberFilterOptions, input: string, cb: any) => {
+  console.log(input.trim().length < 3);
+  if (input && input.trim().length < 3) {
+    return [];
+  }
+  const res = await client.query({
+    query: gql`
+    query {
+      searchMembers(input: {searchFilter:"${input}", projectID:"${projectID}"}) {
+        id
+        similarity
+        status
+        user {
+          id
+          fullName
+          email
+          profileIcon {
+            url
+            initials
+            bgColor
+          }
+        }
+      }
+    }
+    `,
+  });
+
+  let results: any = [];
+  const emails: Array<string> = [];
+  console.log(res.data && res.data.searchMembers);
+  if (res.data && res.data.searchMembers) {
+    results = [
+      ...res.data.searchMembers.map((m: any) => {
+        if (m.status === 'INVITED') {
+          console.log(`${m.id} is added`);
+          return {
+            label: m.id,
+            value: {
+              id: m.id,
+              type: 2,
+              profileIcon: {
+                bgColor: '#ccc',
+                initials: m.id.charAt(0),
+              },
+            },
+          };
+        } else {
+          console.log(`${m.user.email} is added`);
+          emails.push(m.user.email);
+          return {
+            label: m.user.fullName,
+            value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
+          };
+        }
+      }),
+    ];
+    console.log(results);
+  }
+
+  if (RFC2822_EMAIL.test(input) && !emails.find(e => e === input)) {
+    results = [
+      ...results,
+      {
+        label: input,
+        value: {
+          id: input,
+          type: 1,
+          profileIcon: {
+            bgColor: '#ccc',
+            initials: input.charAt(0),
+          },
+        },
+      },
+    ];
+  }
+
+  return results;
+};
+
+type UserOptionProps = {
+  innerProps: any;
+  isDisabled: boolean;
+  isFocused: boolean;
+  label: string;
+  data: any;
+  getValue: any;
+};
+
+const OptionWrapper = styled.div<{ isFocused: boolean }>`
+  cursor: pointer;
+  padding: 4px 8px;
+  ${props => props.isFocused && `background: rgba(${props.theme.colors.primary});`}
+  display: flex;
+  align-items: center;
+`;
+const OptionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 12px;
+`;
+
+const OptionLabel = styled.span<{ fontSize: number; quiet: boolean }>`
+  display: flex;
+  align-items: center;
+  font-size: ${p => p.fontSize}px;
+  color: rgba(${p => (p.quiet ? p.theme.colors.text.primary : p.theme.colors.text.primary)});
+`;
+
+const UserOption: React.FC<UserOptionProps> = ({ isDisabled, isFocused, innerProps, label, data }) => {
+  console.log(data);
+  return !isDisabled ? (
+    <OptionWrapper {...innerProps} isFocused={isFocused}>
+      <TaskAssignee
+        size={32}
+        member={{
+          id: '',
+          fullName: data.value.label,
+          profileIcon: data.value.profileIcon,
+        }}
+      />
+      <OptionContent>
+        <OptionLabel fontSize={16} quiet={false}>
+          {label}
+        </OptionLabel>
+        {data.value.type === 2 && (
+          <OptionLabel fontSize={14} quiet>
+            Joined
+          </OptionLabel>
+        )}
+      </OptionContent>
+    </OptionWrapper>
+  ) : null;
+};
+
+const OptionValueWrapper = styled.div`
+  background: rgba(${props => props.theme.colors.bg.primary});
+  border-radius: 4px;
+  margin: 2px;
+  padding: 3px 6px 3px 4px;
+  display: flex;
+  align-items: center;
+`;
+
+const OptionValueLabel = styled.span`
+  font-size: 12px;
+  color: rgba(${props => props.theme.colors.text.secondary});
+`;
+
+const OptionValueRemove = styled.button`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  margin-left: 4px;
+`;
+const OptionValue = ({ data, removeProps }: any) => {
+  return (
+    <OptionValueWrapper>
+      <OptionValueLabel>{data.label}</OptionValueLabel>
+      <OptionValueRemove {...removeProps}>
+        <Cross width={14} height={14} />
+      </OptionValueRemove>
+    </OptionValueWrapper>
+  );
+};
+
+const InviteButton = styled(Button)`
+  margin-top: 12px;
+  height: 32px;
+  padding: 4px 12px;
+  width: 100%;
+  justify-content: center;
+`;
+
+const InviteContainer = styled.div`
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const UserManagementPopup: React.FC<UserManagementPopupProps> = ({
+  projectID,
+  users,
+  projectMembers,
+  onInviteProjectMembers,
+}) => {
+  const client = useApolloClient();
+  const [invitedUsers, setInvitedUsers] = useState<Array<any> | null>(null);
   return (
     <Popup tab={0} title="Invite a user">
-      <SearchInput width="100%" variant="alternate" placeholder="Email address or name" name="search" />
+      <InviteContainer>
-      <MemberList>
+        <AsyncSelect
-        {users
+          getOptionValue={option => option.value.id}
-          .filter(u => u.id !== projectMembers.find(p => p.id === u.id)?.id)
+          placeholder="Email address or username"
-          .map(user => (
+          noOptionsMessage={() => null}
-            <UserMember
+          onChange={(e: any) => {
-              key={user.id}
+            setInvitedUsers(e);
-              onCardMemberClick={() => onAddProjectMember(user.id)}
+          }}
-              showName
+          isMulti
-              member={user}
+          autoFocus
-              taskID=""
+          cacheOptions
-            />
+          styles={colourStyles}
-          ))}
+          defaultOption
-      </MemberList>
+          components={{
+            MultiValue: OptionValue,
+            Option: UserOption,
+            IndicatorSeparator: null,
+            DropdownIndicator: null,
+          }}
+          loadOptions={(i, cb) => fetchMembers(client, projectID, {}, i, cb)}
+        />
+      </InviteContainer>
+      <InviteButton
+        onClick={() => {
+          if (invitedUsers) {
+            onInviteProjectMembers(
+              invitedUsers.map(user => {
+                if (user.value.type === 0) {
+                  return {
+                    userID: user.value.id,
+                  };
+                }
+                return {
+                  email: user.value.id,
+                };
+              }),
+            );
+          }
+        }}
+        disabled={invitedUsers === null}
+        hoverVariant="none"
+        fontSize="16px"
+      >
+        Send Invite
+      </InviteButton>
     </Popup>
   );
 };
@@ -135,11 +415,30 @@ const Project = () => {
   const [value, setValue] = useStateWithLocalStorage(CARD_LABEL_VARIANT_STORAGE_KEY);
   const [updateProjectMemberRole] = useUpdateProjectMemberRoleMutation();
 
-  const [deleteTask] = useDeleteTaskMutation();
+  const [deleteTask] = useDeleteTaskMutation({
+    update: (client, resp) =>
+      updateApolloCache<FindProjectQuery>(
+        client,
+        FindProjectDocument,
+        cache =>
+          produce(cache, draftCache => {
+            const taskGroupIdx = draftCache.findProject.taskGroups.findIndex(
+              tg => tg.tasks.findIndex(t => t.id === resp.data.deleteTask.taskID) !== -1,
+            );
+
+            if (taskGroupIdx !== -1) {
+              draftCache.findProject.taskGroups[taskGroupIdx].tasks = cache.findProject.taskGroups[
+                taskGroupIdx
+              ].tasks.filter(t => t.id !== resp.data.deleteTask.taskID);
+            }
+          }),
+        { projectID },
+      ),
+  });
 
   const [updateTaskName] = useUpdateTaskNameMutation();
 
-  const { loading, data } = useFindProjectQuery({
+  const { loading, data, error } = useFindProjectQuery({
     variables: { projectID },
   });
 
@@ -157,14 +456,36 @@ const Project = () => {
     },
   });
 
-  const [createProjectMember] = useCreateProjectMemberMutation({
+  const [inviteProjectMembers] = useInviteProjectMembersMutation({
     update: (client, response) => {
       updateApolloCache<FindProjectQuery>(
         client,
         FindProjectDocument,
         cache =>
           produce(cache, draftCache => {
-            draftCache.findProject.members.push({ ...response.data.createProjectMember.member });
+            draftCache.findProject.members = [
+              ...cache.findProject.members,
+              ...response.data.inviteProjectMembers.members,
+            ];
+            draftCache.findProject.invitedMembers = [
+              ...cache.findProject.invitedMembers,
+              ...response.data.inviteProjectMembers.invitedMembers,
+            ];
+          }),
+        { projectID },
+      );
+    },
+  });
+  const [deleteInvitedProjectMember] = useDeleteInvitedProjectMemberMutation({
+    update: (client, response) => {
+      updateApolloCache<FindProjectQuery>(
+        client,
+        FindProjectDocument,
+        cache =>
+          produce(cache, draftCache => {
+            draftCache.findProject.invitedMembers = cache.findProject.invitedMembers.filter(
+              m => m.email !== response.data.deleteInvitedProjectMember.invitedMember.email,
+            );
           }),
         { projectID },
       );
@@ -205,6 +526,9 @@ const Project = () => {
       </>
     );
   }
+  if (error) {
+    history.push('/projects');
+  }
   if (data) {
     labelsRef.current = data.findProject.labels;
 
@@ -221,6 +545,10 @@ const Project = () => {
             deleteProjectMember({ variables: { userID, projectID } });
             hidePopup();
           }}
+          onRemoveInvitedFromBoard={email => {
+            deleteInvitedProjectMember({ variables: { projectID, email } });
+            hidePopup();
+          }}
           onSaveProjectName={projectName => {
             updateProjectName({ variables: { projectID, name: projectName } });
           }}
@@ -228,8 +556,10 @@ const Project = () => {
             showPopup(
               $target,
               <UserManagementPopup
-                onAddProjectMember={userID => {
+                projectID={projectID}
-                  createProjectMember({ variables: { userID, projectID } });
+                onInviteProjectMembers={members => {
+                  inviteProjectMembers({ variables: { projectID, members } });
+                  hidePopup();
                 }}
                 users={data.users}
                 projectMembers={data.findProject.members}
@@ -240,8 +570,9 @@ const Project = () => {
           menuType={[{ name: 'Board', link: location.pathname }]}
           currentTab={0}
           projectMembers={data.findProject.members}
+          projectInvitedMembers={data.findProject.invitedMembers}
           projectID={projectID}
-          teamID={data.findProject.team.id}
+          teamID={data.findProject.team ? data.findProject.team.id : null}
           name={data.findProject.name}
         />
         <Route path={`${match.path}`} exact render={() => <Redirect to={`${match.url}/board`} />} />
@@ -284,6 +615,7 @@ const Project = () => {
               }}
               onDeleteTask={deletedTask => {
                 deleteTask({ variables: { taskID: deletedTask.id } });
+                history.push(`${match.url}/board`);
               }}
               onOpenAddLabelPopup={(task, $targetRef) => {
                 taskLabelsRef.current = task.labels;

frontend/src/Projects/index.tsx

@@ -21,33 +21,6 @@ import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
 import NOOP from 'shared/utils/noop';
 
-const EmptyStateContent = styled.div`
-  display: flex;
-  justy-content: center;
-  align-items: center;
-  flex-direction: column;
-`;
-
-const EmptyStateTitle = styled.h3`
-  color: #fff;
-  font-size: 18px;
-`;
-
-const EmptyStatePrompt = styled.span`
-  color: rgba(${props => props.theme.colors.text.primary});
-  font-size: 16px;
-  margin-top: 8px;
-`;
-
-const EmptyState = styled(Empty)`
-  display: block;
-  margin: 0 auto;
-`;
-
-const CreateTeamButton = styled(Button)`
-  width: 100%;
-`;
-
 type CreateTeamData = { teamName: string };
 
 type CreateTeamFormProps = {
@@ -56,6 +29,10 @@ type CreateTeamFormProps = {
 
 const CreateTeamFormContainer = styled.form``;
 
+const CreateTeamButton = styled(Button)`
+  width: 100%;
+`;
+
 const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
   const { register, handleSubmit } = useForm<CreateTeamData>();
   const createTeam = (data: CreateTeamData) => {
@@ -209,13 +186,6 @@ const ProjectsContainer = styled.div`
   min-width: 288px;
 `;
 
-const ProjectGrid = styled.div`
-  max-width: 780px;
-  display: grid;
-  grid-template-columns: 240px 240px 240px;
-  gap: 20px 10px;
-`;
-
 const AddTeamButton = styled(Button)`
   padding: 6px 12px;
   position: absolute;
@@ -223,10 +193,6 @@ const AddTeamButton = styled(Button)`
   right: 12px;
 `;
 
-const CreateFirstTeam = styled(Button)`
-  margin-top: 8px;
-`;
-
 type ShowNewProject = {
   open: boolean;
   initialTeamID: null | string;
@@ -260,17 +226,20 @@ const Projects = () => {
     },
   });
   if (loading) {
-    return (
+    return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
-      <>
-        <span>loading</span>
-      </>
-    );
   }
 
   const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
   if (data && user) {
     const { projects, teams, organizations } = data;
     const organizationID = organizations[0].id ?? null;
+    const personalProjects = projects
+      .filter(p => p.team === null)
+      .sort((a, b) => {
+        const textA = a.name.toUpperCase();
+        const textB = b.name.toUpperCase();
+        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
+      });
     const projectTeams = teams
       .sort((a, b) => {
         const textA = a.name.toUpperCase();
@@ -282,7 +251,7 @@ const Projects = () => {
           id: team.id,
           name: team.name,
           projects: projects
-            .filter(project => project.team.id === team.id)
+            .filter(project => project.team && project.team.id === team.id)
             .sort((a, b) => {
               const textA = a.name.toUpperCase();
               const textB = b.name.toUpperCase();
@@ -323,39 +292,35 @@ const Projects = () => {
                 Add Team
               </AddTeamButton>
             )}
-            {projectTeams.length === 0 && (
+            <div>
-              <EmptyStateContent>
+              <ProjectSectionTitleWrapper>
-                <EmptyState width={425} height={425} />
+                <ProjectSectionTitle>Personal Projects</ProjectSectionTitle>
-                <EmptyStateTitle>No teams exist</EmptyStateTitle>
+              </ProjectSectionTitleWrapper>
-                <EmptyStatePrompt>Create a new team to get started</EmptyStatePrompt>
+              <ProjectList>
-                <CreateFirstTeam
+                {personalProjects.map((project, idx) => (
-                  variant="outline"
+                  <ProjectListItem key={project.id}>
-                  onClick={$target => {
+                    <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
-                    showPopup(
+                      <ProjectTileFade />
-                      $target,
+                      <ProjectTileDetails>
-                      <Popup
+                        <ProjectTileName>{project.name}</ProjectTileName>
-                        title="Create team"
+                      </ProjectTileDetails>
-                        tab={0}
+                    </ProjectTile>
-                        onClose={() => {
+                  </ProjectListItem>
-                          hidePopup();
+                ))}
-                        }}
+                <ProjectListItem>
-                      >
+                  <ProjectAddTile
-                        <CreateTeamForm
+                    onClick={() => {
-                          onCreateTeam={teamName => {
+                      setShowNewProject({ open: true, initialTeamID: 'no-team' });
-                            if (organizationID) {
+                    }}
-                              createTeam({ variables: { name: teamName, organizationID } });
+                  >
-                              hidePopup();
+                    <ProjectTileFade />
-                            }
+                    <ProjectAddTileDetails>
-                          }}
+                      <ProjectTileName centered>Create new project</ProjectTileName>
-                        />
+                    </ProjectAddTileDetails>
-                      </Popup>,
+                  </ProjectAddTile>
-                    );
+                </ProjectListItem>
-                  }}
+              </ProjectList>
-                >
+            </div>
-                  Create new team
-                </CreateFirstTeam>
-              </EmptyStateContent>
-            )}
             {projectTeams.map(team => {
               return (
                 <div key={team.id}>
@@ -409,7 +374,7 @@ const Projects = () => {
                 initialTeamID={showNewProject.initialTeamID}
                 onCreateProject={(name, teamID) => {
                   if (user) {
-                    createProject({ variables: { teamID, name, userID: user.id } });
+                    createProject({ variables: { teamID, name } });
                     setShowNewProject({ open: false, initialTeamID: null });
                   }
                 }}

frontend/src/Teams/index.tsx

@@ -85,18 +85,30 @@ type TeamsRouteProps = {
 const Teams = () => {
   const { teamID } = useParams<TeamsRouteProps>();
   const history = useHistory();
-  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
+  const { loading, data } = useGetTeamQuery({
+    variables: { teamID },
+    onCompleted: resp => {
+      document.title = `${resp.findTeam.name} | Taskcafé`;
+    },
+  });
   const { user } = useCurrentUser();
   const [currentTab, setCurrentTab] = useState(0);
   const match = useRouteMatch();
-  useEffect(() => {
-    document.title = 'Teams | Taskcafé';
-  }, []);
   if (loading) {
     return (
-      <>
+      <GlobalTopNavbar
-        <span>loading</span>
+        menuType={[
-      </>
+          { name: 'Projects', link: `${match.url}` },
+          { name: 'Members', link: `${match.url}/members` },
+        ]}
+        currentTab={currentTab}
+        onSetTab={tab => {
+          setCurrentTab(tab);
+        }}
+        onSaveProjectName={NOOP}
+        projectID={null}
+        name={null}
+      />
     );
   }
   if (data && user) {

frontend/src/index.tsx

@@ -8,15 +8,28 @@ import { HttpLink } from 'apollo-link-http';
 import { onError } from 'apollo-link-error';
 import { enableMapSet } from 'immer';
 import { ApolloLink, Observable, fromPromise } from 'apollo-link';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import updateLocale from 'dayjs/plugin/updateLocale';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import isBetween from 'dayjs/plugin/isBetween';
+import weekday from 'dayjs/plugin/weekday';
 import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
 import cache from './App/cache';
 import App from './App';
 
 // https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
+
+dayjs.extend(isSameOrAfter);
+
+dayjs.extend(weekday);
+dayjs.extend(isBetween);
+dayjs.extend(customParseFormat);
 enableMapSet();
 
-moment.updateLocale('en', {
+dayjs.extend(updateLocale);
+
+dayjs.updateLocale('en', {
   week: {
     dow: 1, // First day of week is Monday
     doy: 7, // First week of year must contain 1 January (7 + 1 - 1)

frontend/src/shared/components/AddList/index.tsx

@@ -16,11 +16,12 @@ import {
 } from './Styles';
 
 type NameEditorProps = {
+  buttonLabel?: string;
   onSave: (listName: string) => void;
   onCancel: () => void;
 };
 
-const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
+export const NameEditor: React.FC<NameEditorProps> = ({ onSave: handleSave, onCancel, buttonLabel = 'Save' }) => {
   const $editorRef = useRef<HTMLTextAreaElement>(null);
   const [listName, setListName] = useState('');
   useEffect(() => {
@@ -28,6 +29,11 @@ const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
       $editorRef.current.focus();
     }
   });
+  const onSave = (newName: string) => {
+    if (newName.replace(/\s+/g, '') !== '') {
+      handleSave(newName);
+    }
+  };
   const onKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -60,7 +66,7 @@ const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
             }
           }}
         >
-          Save
+          {buttonLabel}
         </AddListButton>
         <CancelAdd onClick={() => onCancel()}>
           <Cross width={16} height={16} />

frontend/src/shared/components/Admin/Admin.stories.tsx

@@ -51,7 +51,9 @@ export const Default = () => {
               },
             },
           ]}
+          invitedUsers={[]}
           onAddUser={action('add user')}
+          onDeleteInvitedUser={action('delete invited user')}
         />
       </ThemeProvider>
     </>

frontend/src/shared/components/Admin/index.tsx

@@ -104,8 +104,8 @@ type TeamRoleManagerPopupProps = {
   user: User;
   users: Array<User>;
   warning?: string | null;
-  canChangeRole: boolean;
+  canChangeRole?: boolean;
-  onChangeRole: (roleCode: RoleCode) => void;
+  onChangeRole?: (roleCode: RoleCode) => void;
   updateUserPassword?: (user: TaskUser, password: string) => void;
   onDeleteUser?: (userID: string, newOwnerID: string | null) => void;
 };
@@ -530,8 +530,10 @@ type AdminProps = {
   onDeleteUser: (userID: string, newOwnerID: string | null) => void;
   onInviteUser: ($target: React.RefObject<HTMLElement>) => void;
   users: Array<User>;
+  invitedUsers: Array<InvitedUserAccount>;
   canInviteUser: boolean;
   onUpdateUserPassword: (user: TaskUser, password: string) => void;
+  onDeleteInvitedUser: (invitedUserID: string) => void;
 };
 
 const Admin: React.FC<AdminProps> = ({
@@ -540,7 +542,9 @@ const Admin: React.FC<AdminProps> = ({
   onUpdateUserPassword,
   canInviteUser,
   onDeleteUser,
+  onDeleteInvitedUser,
   onInviteUser,
+  invitedUsers,
   users,
 }) => {
   const warning =
@@ -557,6 +561,7 @@ const Admin: React.FC<AdminProps> = ({
         <TabNavContent>
           {items.map((item, idx) => (
             <NavItem
+              key={item.name}
               onClick={(tab, top) => {
                 if ($tabNav && $tabNav.current) {
                   const pos = $tabNav.current.getBoundingClientRect();
@@ -576,7 +581,7 @@ const Admin: React.FC<AdminProps> = ({
         <TabContent>
           <MemberListWrapper>
             <MemberListHeader>
-              <ListTitle>{`Members (${users.length})`}</ListTitle>
+              <ListTitle>{`Members (${users.length + invitedUsers.length})`}</ListTitle>
               <ListDesc>
                 Organization admins can create / manage / delete all projects & teams. Members only have access to teams
                 or projects they have been added to.
@@ -634,6 +639,65 @@ const Admin: React.FC<AdminProps> = ({
                   </MemberListItem>
                 );
               })}
+              {invitedUsers.map(member => {
+                return (
+                  <MemberListItem>
+                    <MemberProfile
+                      showRoleIcons
+                      size={32}
+                      onMemberProfile={NOOP}
+                      member={{
+                        id: member.id,
+                        fullName: member.email,
+                        profileIcon: {
+                          bgColor: '#fff',
+                          url: null,
+                          initials: member.email.charAt(0),
+                        },
+                      }}
+                    />
+                    <MemberListItemDetails>
+                      <MemberItemName>{member.email}</MemberItemName>
+                      <MemberItemUsername>Invited</MemberItemUsername>
+                    </MemberListItemDetails>
+                    <MemberItemOptions>
+                      <MemberItemOption
+                        variant="outline"
+                        onClick={$target => {
+                          showPopup(
+                            $target,
+                            <TeamRoleManagerPopup
+                              user={{
+                                id: member.id,
+                                fullName: member.email,
+                                profileIcon: {
+                                  bgColor: '#fff',
+                                  url: null,
+                                  initials: member.email.charAt(0),
+                                },
+                                member: {
+                                  teams: [],
+                                  projects: [],
+                                },
+                                owned: {
+                                  teams: [],
+                                  projects: [],
+                                },
+                              }}
+                              users={users}
+                              onDeleteUser={() => {
+                                onDeleteInvitedUser(member.id);
+                              }}
+                            />,
+                          );
+                        }}
+                      >
+                        Manage
+                      </MemberItemOption>
+                    </MemberItemOptions>
+                  </MemberListItem>
+                );
+              })}
             </MemberList>
           </MemberListWrapper>
         </TabContent>

frontend/src/shared/components/Button/index.tsx

@@ -35,11 +35,15 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
     `}
 `;
 
-const Filled = styled(Base)`
+const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
   background: rgba(${props => props.theme.colors[props.color]});
-  &:hover {
+  ${props =>
-    box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
+    props.hoverVariant === 'boxShadow' &&
-  }
+    css`
+      &:hover {
+        box-shadow: 0 8px 25px -8px rgba(${props.theme.colors[props.color]});
+      }
+    `}
 `;
 const Outline = styled(Base)<{ invert: boolean }>`
   border: 1px solid rgba(${props => props.theme.colors[props.color]});
@@ -123,9 +127,11 @@ const Relief = styled(Base)`
   }
 `;
 
+type HoverVariant = 'boxShadow' | 'none';
 type ButtonProps = {
   fontSize?: string;
   variant?: 'filled' | 'outline' | 'flat' | 'lineDown' | 'gradient' | 'relief';
+  hoverVariant?: HoverVariant;
   color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
   disabled?: boolean;
   type?: 'button' | 'submit';
@@ -142,6 +148,7 @@ const Button: React.FC<ButtonProps> = ({
   invert = false,
   color = 'primary',
   variant = 'filled',
+  hoverVariant = 'boxShadow',
   type = 'button',
   justifyTextContent = 'center',
   icon,
@@ -158,7 +165,15 @@ const Button: React.FC<ButtonProps> = ({
   switch (variant) {
     case 'filled':
       return (
-        <Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
+        <Filled
+          ref={$button}
+          hoverVariant={hoverVariant}
+          type={type}
+          onClick={handleClick}
+          className={className}
+          disabled={disabled}
+          color={color}
+        >
           {icon && icon}
           <Text hasIcon={typeof icon !== 'undefined'} justifyTextContent={justifyTextContent} fontSize={fontSize}>
             {children}

frontend/src/shared/components/Card/Styles.ts

@@ -1,9 +1,7 @@
 import styled, { css, keyframes } from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';
 import TextareaAutosize from 'react-autosize-textarea';
-import { CheckCircle, CheckSquareOutline } from 'shared/icons';
+import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
-import { RefObject } from 'react';
 import TaskAssignee from 'shared/components/TaskAssignee';
 
 export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
@@ -20,7 +18,9 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
       stroke: rgba(${props.theme.colors.success});
     `}
 `;
-export const ClockIcon = styled(FontAwesomeIcon)``;
+export const ClockIcon = styled(Clock)<{ color: string }>`
+  fill: ${props => props.color};
+`;
 
 export const EditorTextarea = styled(TextareaAutosize)`
   overflow: hidden;
@@ -147,6 +147,11 @@ export const ListCardLabelText = styled.span`
   line-height: 16px;
 `;
 
+export const ListCardLabelsWrapper = styled.div`
+  overflow: auto;
+  position: relative;
+`;
+
 export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
   ${props =>
     props.variant === 'small'
@@ -178,8 +183,6 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
 `;
 
 export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
-  overflow: auto;
-  position: relative;
   &:hover {
     opacity: 0.8;
   }

frontend/src/shared/components/Card/index.tsx

@@ -1,7 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Pencil, Eye, List } from 'shared/icons';
-import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
-import { faClock, faEye } from '@fortawesome/free-regular-svg-icons';
 import {
   EditorTextarea,
   CardMember,
@@ -20,6 +18,7 @@ import {
   ListCardLabels,
   ListCardLabel,
   ListCardLabelText,
+  ListCardLabelsWrapper,
   ListCardOperation,
   CardTitle,
   CardMembers,
@@ -154,39 +153,42 @@ const Card = React.forwardRef(
                 }
               }}
             >
-              <FontAwesomeIcon onClick={onOperationClick} color="#c2c6dc" size="xs" icon={faPencilAlt} />
+              <Pencil width={8} height={8} />
             </ListCardOperation>
           )}
           <ListCardDetails complete={complete ?? false}>
-            <ListCardLabels
+            {labels && labels.length !== 0 && (
-              toggleLabels={toggleLabels}
+              <ListCardLabelsWrapper>
-              toggleDirection={toggleDirection}
+                <ListCardLabels
-              onClick={e => {
+                  toggleLabels={toggleLabels}
-                e.stopPropagation();
+                  toggleDirection={toggleDirection}
-                if (onCardLabelClick) {
+                  onClick={e => {
-                  onCardLabelClick();
+                    e.stopPropagation();
-                }
+                    if (onCardLabelClick) {
-              }}
+                      onCardLabelClick();
-            >
+                    }
-              {labels &&
+                  }}
-                labels
+                >
-                  .slice()
+                  {labels
-                  .sort((a, b) => a.labelColor.position - b.labelColor.position)
+                    .slice()
-                  .map(label => (
+                    .sort((a, b) => a.labelColor.position - b.labelColor.position)
-                    <ListCardLabel
+                    .map(label => (
-                      onAnimationEnd={() => {
+                      <ListCardLabel
-                        if (setToggleLabels) {
+                        onAnimationEnd={() => {
-                          setToggleLabels(false);
+                          if (setToggleLabels) {
-                        }
+                            setToggleLabels(false);
-                      }}
+                          }
-                      variant={labelVariant ?? 'large'}
+                        }}
-                      color={label.labelColor.colorHex}
+                        variant={labelVariant ?? 'large'}
-                      key={label.id}
+                        color={label.labelColor.colorHex}
-                    >
+                        key={label.id}
-                      <ListCardLabelText>{label.name}</ListCardLabelText>
+                      >
-                    </ListCardLabel>
+                        <ListCardLabelText>{label.name}</ListCardLabelText>
-                  ))}
+                      </ListCardLabel>
-            </ListCardLabels>
+                    ))}
+                </ListCardLabels>
+              </ListCardLabelsWrapper>
+            )}
             {editable ? (
               <EditorContent>
                 {complete && <CompleteIcon width={16} height={16} />}
@@ -214,18 +216,18 @@ const Card = React.forwardRef(
             <ListCardBadges>
               {watched && (
                 <ListCardBadge>
-                  <FontAwesomeIcon color="#6b778c" icon={faEye} size="xs" />
+                  <Eye width={8} height={8} />
                 </ListCardBadge>
               )}
               {dueDate && (
                 <DueDateCardBadge isPastDue={dueDate.isPastDue}>
-                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} icon={faClock} size="xs" />
+                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} width={8} height={8} />
                   <ListCardBadgeText>{dueDate.formattedDate}</ListCardBadgeText>
                 </DueDateCardBadge>
               )}
               {description && (
                 <DescriptionBadge>
-                  <FontAwesomeIcon color="#6b778c" icon={faList} size="xs" />
+                  <List width={8} height={8} />
                 </DescriptionBadge>
               )}
               {checklists && (

frontend/src/shared/components/CardComposer/Styles.ts

@@ -1,15 +1,15 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import TextareaAutosize from 'react-autosize-textarea';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';
 
-export const CancelIcon = styled(FontAwesomeIcon)`
+export const CancelIconWrapper = styled.div`
   opacity: 0.8;
   cursor: pointer;
   font-size: 1.25em;
   padding-left: 5px;
 `;
+
 export const CardComposerWrapper = styled.div<{ isOpen: boolean }>`
   padding-bottom: 8px;
   display: ${props => (props.isOpen ? 'flex' : 'none')};

frontend/src/shared/components/CardComposer/index.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
+import { Cross } from 'shared/icons';
 
 import {
   CardComposerWrapper,
-  CancelIcon,
+  CancelIconWrapper,
   AddCardButton,
   ComposerControls,
   ComposerControlsSaveSection,
@@ -26,10 +26,9 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
   useOnOutsideClick($cardRef, true, onClose, null);
   useOnEscapeKeyDown(isOpen, onClose);
   return (
-    <CardComposerWrapper isOpen={isOpen}>
+    <CardComposerWrapper isOpen={isOpen} ref={$cardRef}>
       <Card
         title={cardName}
-        ref={$cardRef}
         taskID=""
         taskGroupID=""
         editable
@@ -52,7 +51,9 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
           >
             Add Card
           </AddCardButton>
-          <CancelIcon onClick={onClose} icon={faTimes} color="#42526e" />
+          <CancelIconWrapper onClick={() => onClose()}>
+            <Cross width={12} height={12} />
+          </CancelIconWrapper>
         </ComposerControlsSaveSection>
         <ComposerControlsActionsSection />
       </ComposerControls>

frontend/src/shared/components/DueDateManager/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, forwardRef } from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
@@ -110,12 +110,12 @@ const HeaderActions = styled.div`
 `;
 
 const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
-  const now = moment();
+  const now = dayjs();
   const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
   const [startDate, setStartDate] = useState(new Date());
 
   useEffect(() => {
-    const newDate = moment(startDate).format('YYYY-MM-DD');
+    const newDate = dayjs(startDate).format('YYYY-MM-DD');
     setValue('endDate', newDate);
   }, [startDate]);
 
@@ -135,7 +135,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
     'December',
   ];
   const saveDueDate = (data: any) => {
-    const newDate = moment(`${data.endDate} ${moment(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
+    const newDate = dayjs(`${data.endDate} ${dayjs(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
     if (newDate.isValid()) {
       onDueDateChange(task, newDate.toDate());
     }

frontend/src/shared/components/Input/index.tsx

@@ -78,6 +78,7 @@ const Icon = styled.div`
 
 type InputProps = {
   variant?: 'normal' | 'alternate';
+  disabled?: boolean;
   label?: string;
   width?: string;
   floatingLabel?: boolean;
@@ -116,6 +117,7 @@ function useCombinedRefs(...refs: any) {
 const Input = React.forwardRef(
   (
     {
+      disabled = false,
       width = 'auto',
       variant = 'normal',
       type = 'text',
@@ -160,6 +162,7 @@ const Input = React.forwardRef(
           onChange={e => {
             setHasValue((e.currentTarget.value !== '' || floatingLabel) ?? false);
           }}
+          disabled={disabled}
           hasValue={hasValue}
           ref={combinedRef}
           id={id}

frontend/src/shared/components/List/Styles.ts

@@ -73,7 +73,6 @@ export const HeaderName = styled(TextareaAutosize)`
   box-shadow: none;
   font-weight: 600;
   margin: -4px 0;
-  padding: 4px 8px;
 
   letter-spacing: normal;
   word-spacing: normal;

frontend/src/shared/components/ListActions/ListActions.stories.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import ListActions from '.';
-
-export default {
-  component: ListActions,
-  title: 'ListActions',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff', default: true },
-      { name: 'gray', value: '#f8f8f8' },
-    ],
-  },
-};
-
-export const Default = () => {
-  return <ListActions taskGroupID="1" onArchiveTaskGroup={action('on archive task group')} />;
-};

frontend/src/shared/components/ListActions/index.tsx

@@ -1,50 +1,100 @@
 import React from 'react';
+import { usePopup, Popup } from 'shared/components/PopupMenu';
+import { NameEditor } from 'shared/components/AddList';
+import NOOP from 'shared/utils/noop';
+import styled from 'styled-components';
+import { TaskSorting, TaskSortingDirection, TaskSortingType } from 'shared/utils/sorting';
 import { InnerContent, ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles';
 
+const CopyWrapper = styled.div`
+  margin: 0 12px;
+`;
+
 type Props = {
   taskGroupID: string;
-
+  onDuplicateTaskGroup: (newTaskGroupName: string) => void;
+  onDeleteTaskGroupTasks: () => void;
   onArchiveTaskGroup: (taskGroupID: string) => void;
+  onSortTaskGroup: (taskSorting: TaskSorting) => void;
 };
-const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
+
+const LabelManager: React.FC<Props> = ({
+  taskGroupID,
+  onDeleteTaskGroupTasks,
+  onDuplicateTaskGroup,
+  onArchiveTaskGroup,
+  onSortTaskGroup,
+}) => {
+  const { setTab } = usePopup();
   return (
-    <InnerContent>
+    <>
-      <ListActionsWrapper>
+      <Popup tab={0} title={null}>
-        <ListActionItemWrapper>
+        <InnerContent>
-          <ListActionItem>Add card...</ListActionItem>
+          <ListActionsWrapper>
-        </ListActionItemWrapper>
+            <ListActionItemWrapper onClick={() => setTab(1)}>
-        <ListActionItemWrapper>
+              <ListActionItem>Duplicate</ListActionItem>
-          <ListActionItem>Copy List...</ListActionItem>
+            </ListActionItemWrapper>
-        </ListActionItemWrapper>
+            <ListActionItemWrapper onClick={() => setTab(2)}>
-        <ListActionItemWrapper>
+              <ListActionItem>Sort</ListActionItem>
-          <ListActionItem>Move card...</ListActionItem>
+            </ListActionItemWrapper>
-        </ListActionItemWrapper>
+          </ListActionsWrapper>
-        <ListActionItemWrapper>
+          <ListSeparator />
-          <ListActionItem>Watch</ListActionItem>
+          <ListActionsWrapper>
-        </ListActionItemWrapper>
+            <ListActionItemWrapper onClick={() => onDeleteTaskGroupTasks()}>
-      </ListActionsWrapper>
+              <ListActionItem>Delete All Tasks</ListActionItem>
-      <ListSeparator />
+            </ListActionItemWrapper>
-      <ListActionsWrapper>
+          </ListActionsWrapper>
-        <ListActionItemWrapper>
+          <ListSeparator />
-          <ListActionItem>Sort By...</ListActionItem>
+          <ListActionsWrapper>
-        </ListActionItemWrapper>
+            <ListActionItemWrapper onClick={() => onArchiveTaskGroup(taskGroupID)}>
-      </ListActionsWrapper>
+              <ListActionItem>Delete</ListActionItem>
-      <ListSeparator />
+            </ListActionItemWrapper>
-      <ListActionsWrapper>
+          </ListActionsWrapper>
-        <ListActionItemWrapper>
+        </InnerContent>
-          <ListActionItem>Move All Cards in This List...</ListActionItem>
+      </Popup>
-        </ListActionItemWrapper>
+      <Popup tab={1} title="Copy list" onClose={NOOP}>
-        <ListActionItemWrapper>
+        <CopyWrapper>
-          <ListActionItem>Archive All Cards in This List...</ListActionItem>
+          <NameEditor
-        </ListActionItemWrapper>
+            onCancel={NOOP}
-      </ListActionsWrapper>
+            onSave={listName => {
-      <ListSeparator />
+              onDuplicateTaskGroup(listName);
-      <ListActionsWrapper>
+            }}
-        <ListActionItemWrapper onClick={() => onArchiveTaskGroup(taskGroupID)}>
+            buttonLabel="Duplicate"
-          <ListActionItem>Archive This List</ListActionItem>
+          />
-        </ListActionItemWrapper>
+        </CopyWrapper>
-      </ListActionsWrapper>
+      </Popup>
-    </InnerContent>
+      <Popup tab={2} title="Sort list" onClose={NOOP}>
+        <InnerContent>
+          <ListActionsWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Task title</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Due date</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Complete</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Labels</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Members</ListActionItem>
+            </ListActionItemWrapper>
+          </ListActionsWrapper>
+        </InnerContent>
+      </Popup>
+    </>
   );
 };
 export default LabelManager;

frontend/src/shared/components/Lists/index.tsx

@@ -10,7 +10,8 @@ import {
   getNewDraggablePosition,
   getAfterDropDraggableList,
 } from 'shared/utils/draggables';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
 
 import { Container, BoardContainer, BoardWrapper } from './Styles';
 import shouldMetaFilter from './metaFilter';
@@ -50,7 +51,7 @@ export type TaskStatusFilter = {
 
 export interface TaskMetaFilterName {
   meta: TaskMeta;
-  value?: string | moment.Moment | null;
+  value?: string | dayjs.Dayjs | null;
   id?: string | null;
 }
 
@@ -94,127 +95,6 @@ export type TaskMetaFilters = {
   labels: Array<LabelMetaFilter>;
 };
 
-export enum TaskSortingType {
-  NONE,
-  DUE_DATE,
-  MEMBERS,
-  LABELS,
-  TASK_TITLE,
-}
-
-export enum TaskSortingDirection {
-  ASC,
-  DESC,
-}
-
-export type TaskSorting = {
-  type: TaskSortingType;
-  direction: TaskSortingDirection;
-};
-
-function sortString(a: string, b: string) {
-  if (a < b) {
-    return -1;
-  }
-  if (a > b) {
-    return 1;
-  }
-  return 0;
-}
-
-function sortTasks(a: Task, b: Task, taskSorting: TaskSorting) {
-  if (taskSorting.type === TaskSortingType.TASK_TITLE) {
-    if (a.name < b.name) {
-      return -1;
-    }
-    if (a.name > b.name) {
-      return 1;
-    }
-    return 0;
-  }
-  if (taskSorting.type === TaskSortingType.DUE_DATE) {
-    if (a.dueDate && !b.dueDate) {
-      return -1;
-    }
-    if (b.dueDate && !a.dueDate) {
-      return 1;
-    }
-    return moment(a.dueDate).diff(moment(b.dueDate));
-  }
-  if (taskSorting.type === TaskSortingType.LABELS) {
-    // sorts non-empty labels by name, then by empty label color name
-    let aLabels = [];
-    let bLabels = [];
-    let aLabelsEmpty = [];
-    let bLabelsEmpty = [];
-    if (a.labels) {
-      for (const aLabel of a.labels) {
-        if (aLabel.projectLabel.name && aLabel.projectLabel.name !== '') {
-          aLabels.push(aLabel.projectLabel.name);
-        } else {
-          aLabelsEmpty.push(aLabel.projectLabel.labelColor.name);
-        }
-      }
-    }
-    if (b.labels) {
-      for (const bLabel of b.labels) {
-        if (bLabel.projectLabel.name && bLabel.projectLabel.name !== '') {
-          bLabels.push(bLabel.projectLabel.name);
-        } else {
-          bLabelsEmpty.push(bLabel.projectLabel.labelColor.name);
-        }
-      }
-    }
-    aLabels = aLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
-    bLabels = bLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
-    aLabelsEmpty = aLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
-    bLabelsEmpty = bLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
-    if (aLabelsEmpty.length !== 0 || bLabelsEmpty.length !== 0) {
-      if (aLabelsEmpty.length > bLabelsEmpty.length) {
-        if (bLabels.length !== 0) {
-          return 1;
-        }
-        return -1;
-      }
-    }
-    if (aLabels.length < bLabels.length) {
-      return 1;
-    }
-    if (aLabels.length > bLabels.length) {
-      return -1;
-    }
-    return 0;
-  }
-  if (taskSorting.type === TaskSortingType.MEMBERS) {
-    let aMembers = [];
-    let bMembers = [];
-    if (a.assigned) {
-      for (const aMember of a.assigned) {
-        if (aMember.fullName) {
-          aMembers.push(aMember.fullName);
-        }
-      }
-    }
-    if (b.assigned) {
-      for (const bMember of b.assigned) {
-        if (bMember.fullName) {
-          bMembers.push(bMember.fullName);
-        }
-      }
-    }
-    aMembers = aMembers.sort((aMember, bMember) => sortString(aMember, bMember));
-    bMembers = bMembers.sort((aMember, bMember) => sortString(aMember, bMember));
-    if (aMembers.length < bMembers.length) {
-      return 1;
-    }
-    if (aMembers.length > bMembers.length) {
-      return -1;
-    }
-    return 0;
-  }
-  return 0;
-}
-
 function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
   if (filter.status === TaskStatus.ALL) {
     return true;
@@ -224,30 +104,30 @@ function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
     return true;
   }
   if (filter.status === TaskStatus.COMPLETE && task.completedAt && task.complete === true) {
-    const completedAt = moment(task.completedAt);
+    const completedAt = dayjs(task.completedAt);
-    const REFERENCE = moment(); // fixed just for testing, use moment();
+    const REFERENCE = dayjs();
     switch (filter.since) {
       case TaskSince.TODAY:
         const TODAY = REFERENCE.clone().startOf('day');
         return completedAt.isSame(TODAY, 'd');
       case TaskSince.YESTERDAY:
         const YESTERDAY = REFERENCE.clone()
-          .subtract(1, 'days')
+          .subtract(1, 'day')
           .startOf('day');
         return completedAt.isSameOrAfter(YESTERDAY, 'd');
       case TaskSince.ONE_WEEK:
         const ONE_WEEK = REFERENCE.clone()
-          .subtract(7, 'days')
+          .subtract(7, 'day')
           .startOf('day');
         return completedAt.isSameOrAfter(ONE_WEEK, 'd');
       case TaskSince.TWO_WEEKS:
         const TWO_WEEKS = REFERENCE.clone()
-          .subtract(14, 'days')
+          .subtract(14, 'day')
           .startOf('day');
         return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
       case TaskSince.THREE_WEEKS:
         const THREE_WEEKS = REFERENCE.clone()
-          .subtract(21, 'days')
+          .subtract(21, 'day')
           .startOf('day');
         return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
       default:
@@ -473,7 +353,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                                   task.dueDate
                                                     ? {
                                                         isPastDue: false,
-                                                        formattedDate: moment(task.dueDate).format('MMM D, YYYY'),
+                                                        formattedDate: dayjs(task.dueDate).format('MMM D, YYYY'),
                                                       }
                                                     : undefined
                                                 }

frontend/src/shared/components/Lists/metaFilter.ts

@@ -1,5 +1,5 @@
 import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 enum ShouldFilter {
   NO_FILTER,
@@ -24,8 +24,8 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
       isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
     }
     if (task.dueDate) {
-      const taskDueDate = moment(task.dueDate);
+      const taskDueDate = dayjs(task.dueDate);
-      const today = moment();
+      const today = dayjs();
       let start;
       let end;
       switch (filters.dueDate.type) {
@@ -40,7 +40,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
             taskDueDate.isBefore(
               today
                 .clone()
-                .add(1, 'days')
+                .add(1, 'day')
                 .endOf('day'),
             ),
           );
@@ -60,12 +60,12 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today
             .clone()
             .weekday(0)
-            .add(7, 'days')
+            .add(7, 'day')
             .startOf('day');
           end = today
             .clone()
             .weekday(6)
-            .add(7, 'days')
+            .add(7, 'day')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
@@ -73,7 +73,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today.clone().startOf('day');
           end = today
             .clone()
-            .add(7, 'days')
+            .add(7, 'day')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
@@ -81,7 +81,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today.clone().startOf('day');
           end = today
             .clone()
-            .add(14, 'days')
+            .add(14, 'day')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;
@@ -89,7 +89,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
           start = today.clone().startOf('day');
           end = today
             .clone()
-            .add(21, 'days')
+            .add(21, 'day')
             .endOf('day');
           isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
           break;

frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+import LoadingSpinner from '.';
+
+export default {
+  component: LoadingSpinner,
+  title: 'Login',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff' },
+      { name: 'gray', value: '#cdd3e1', default: true },
+    ],
+  },
+};
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <LoadingSpinner />
+    </>
+  );
+};

frontend/src/shared/components/LoadingSpinner/Styles.ts

@@ -0,0 +1,42 @@
+import styled, { keyframes } from 'styled-components';
+
+const LoadingSpinnerKeyframes = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+export const LoadingSpinnerWrapper = styled.div<{ color: string; size: string; borderSize: string; thickness: string }>`
+  display: inline-block;
+  position: relative;
+  width: ${props => props.borderSize};
+  height: ${props => props.borderSize};
+
+  & > div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: ${props => props.size};
+    height: ${props => props.size};
+    margin: ${props => props.thickness};
+    border: ${props => props.thickness} solid rgba(${props => props.theme.colors[props.color]});
+    border-radius: 50%;
+    animation: 1.2s ${LoadingSpinnerKeyframes} cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: rgba(${props => props.theme.colors[props.color]}) transparent transparent transparent;
+  }
+
+  & > div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+  & > div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+  & > div:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+`;
+
+export default LoadingSpinnerWrapper;

frontend/src/shared/components/LoadingSpinner/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { LoadingSpinnerWrapper} from './Styles';
+
+type LoadingSpinnerProps = {
+  color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
+  size?: string;
+  borderSize?: string;
+  thickness?: string;
+};
+
+/**
+ * The default parameters may not be applicable to every scenario
+ *
+ * While borderSize and size should be a single prop,
+ * it is currently not as such because it would require math to be done to strings
+ * e.g "80px - 16"
+ *
+ *
+ * @param color
+ * @param size The size of the spinner. It is recommended to be at least 16 px less than the borderSize
+ * @param thickness
+ * @param borderSize Border size affects the size of the border which if is too small may break the spinner.
+ * @constructor
+ */
+const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  color = 'primary',
+  size = '64px',
+  thickness = '8px',
+  borderSize = '80px',
+}) => {
+  return (
+      <LoadingSpinnerWrapper color={color} size={size} thickness={thickness} borderSize={borderSize}>
+        <div />
+        <div />
+        <div />
+      </LoadingSpinnerWrapper>
+  );
+};
+
+export default LoadingSpinner;

frontend/src/shared/components/Login/index.tsx

@@ -3,6 +3,7 @@ import AccessAccount from 'shared/undraw/AccessAccount';
 import { User, Lock, Taskcafe } from 'shared/icons';
 import { useForm } from 'react-hook-form';
 
+import LoadingSpinner from 'shared/components/LoadingSpinner';
 import {
   Form,
   LogoWrapper,
@@ -73,6 +74,7 @@ const Login = ({ onSubmit }: LoginProps) => {
 
               <ActionButtons>
                 <RegisterButton variant="outline">Register</RegisterButton>
+                {!isComplete && <LoadingSpinner size="32px" thickness="2px" borderSize="48px" />}
                 <LoginButton type="submit" disabled={!isComplete}>
                   Login
                 </LoginButton>

frontend/src/shared/components/MiniProfile/index.tsx

@@ -47,6 +47,7 @@ const permissions = [
 type MiniProfileProps = {
   bio: string;
   user: TaskUser;
+  invited?: boolean;
   onRemoveFromTask?: () => void;
   onChangeRole?: (roleCode: RoleCode) => void;
   onRemoveFromBoard?: () => void;
@@ -56,6 +57,7 @@ type MiniProfileProps = {
 const MiniProfile: React.FC<MiniProfileProps> = ({
   user,
   bio,
+  invited,
   canChangeRole,
   onRemoveFromTask,
   onChangeRole,
@@ -74,7 +76,7 @@ const MiniProfile: React.FC<MiniProfileProps> = ({
           )}
           <ProfileInfo>
             <InfoTitle>{user.fullName}</InfoTitle>
-            <InfoUsername>{`@${user.username}`}</InfoUsername>
+            {invited ? <InfoUsername>Invited</InfoUsername> : <InfoUsername>{`@${user.username}`}</InfoUsername>}
             <InfoBio>{bio}</InfoBio>
           </ProfileInfo>
         </Profile>

frontend/src/shared/components/NewProject/index.tsx

@@ -217,13 +217,13 @@ type NewProjectProps = {
   initialTeamID: string | null;
   teams: Array<Team>;
   onClose: () => void;
-  onCreateProject: (projectName: string, teamID: string) => void;
+  onCreateProject: (projectName: string, teamID: string | null) => void;
 };
 
 const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose, onCreateProject }) => {
   const [projectName, setProjectName] = useState('');
   const [team, setTeam] = useState<null | string>(initialTeamID);
-  const options = teams.map(t => ({ label: t.name, value: t.id }));
+  const options = [{ label: 'No team', value: 'no-team' }, ...teams.map(t => ({ label: t.name, value: t.id }))];
   return (
     <Overlay>
       <Content>
@@ -271,8 +271,8 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
             </ProjectInfo>
             <CreateButton
               onClick={() => {
-                if (team && projectName !== '') {
+                if (projectName !== '') {
-                  onCreateProject(projectName, team);
+                  onCreateProject(projectName, team === 'no-team' ? null : team);
                 }
               }}
             >

frontend/src/shared/components/Select/index.tsx

@@ -16,7 +16,7 @@ function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused:
   return null;
 }
 
-const colourStyles = {
+export const colourStyles = {
   control: (styles: any, data: any) => {
     return {
       ...styles,

frontend/src/shared/components/Settings/Settings.stories.tsx

@@ -27,6 +27,7 @@ export const Default = () => {
       <BaseStyles />
       <Settings
         profile={profile}
+        onChangeUserInfo={action('change user info')}
         onResetPassword={action('reset password')}
         onProfileAvatarRemove={action('remove')}
         onProfileAvatarChange={action('profile avatar change')}

frontend/src/shared/components/Settings/index.tsx

@@ -10,6 +10,11 @@ const PasswordInput = styled(Input)`
   margin-bottom: 0;
 `;
 
+const UserInfoInput = styled(Input)`
+  margin-top: 30px;
+  margin-bottom: 0;
+`;
+
 const FormError = styled.span`
   font-size: 12px;
   color: rgba(${props => props.theme.colors.warning});
@@ -240,6 +245,7 @@ const SaveButton = styled(Button)`
 type SettingsProps = {
   onProfileAvatarChange: () => void;
   onProfileAvatarRemove: () => void;
+  onChangeUserInfo: (data: UserInfoData, done: () => void) => void;
   onResetPassword: (password: string, done: () => void) => void;
   profile: TaskUser;
 };
@@ -300,9 +306,93 @@ const ResetPasswordTab: React.FC<ResetPasswordTabProps> = ({ onResetPassword })
   );
 };
 
+type UserInfoData = {
+  full_name: string;
+  bio: string;
+  initials: string;
+  email: string;
+};
+type UserInfoTabProps = {
+  profile: TaskUser;
+  onProfileAvatarChange: () => void;
+  onProfileAvatarRemove: () => void;
+  onChangeUserInfo: (data: UserInfoData, done: () => void) => void;
+};
+
+const EMAIL_PATTERN = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;
+const INITIALS_PATTERN = /^[a-zA-Z]{2,3}$/i;
+
+const UserInfoTab: React.FC<UserInfoTabProps> = ({
+  profile,
+  onProfileAvatarRemove,
+  onProfileAvatarChange,
+  onChangeUserInfo,
+}) => {
+  const [active, setActive] = useState(true);
+  const { register, handleSubmit, errors } = useForm<UserInfoData>();
+  const done = () => {
+    setActive(true);
+  };
+  return (
+    <>
+      <AvatarSettings
+        onProfileAvatarRemove={onProfileAvatarRemove}
+        onProfileAvatarChange={onProfileAvatarChange}
+        profile={profile.profileIcon}
+      />
+      <form
+        onSubmit={handleSubmit(data => {
+          setActive(false);
+          onChangeUserInfo(data, done);
+        })}
+      >
+        <UserInfoInput
+          ref={register({ required: 'Full name is required' })}
+          name="full_name"
+          defaultValue={profile.fullName}
+          width="100%"
+          label="Name"
+        />
+        {errors.full_name && <FormError>{errors.full_name.message}</FormError>}
+        <UserInfoInput
+          defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
+          ref={register({
+            required: 'Initials is required',
+            pattern: { value: INITIALS_PATTERN, message: 'Intials must be between two to four characters' },
+          })}
+          name="initials"
+          width="100%"
+          label="Initials "
+        />
+        {errors.initials && <FormError>{errors.initials.message}</FormError>}
+        <UserInfoInput disabled defaultValue={profile.username ?? ''} width="100%" label="Username " />
+        <UserInfoInput
+          width="100%"
+          name="email"
+          ref={register({
+            required: 'Email is required',
+            pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
+          })}
+          defaultValue={profile.email ?? ''}
+          label="Email"
+        />
+        {errors.email && <FormError>{errors.email.message}</FormError>}
+        <UserInfoInput width="100%" name="bio" ref={register()} defaultValue={profile.bio ?? ''} label="Bio" />
+        {errors.bio && <FormError>{errors.bio.message}</FormError>}
+        <SettingActions>
+          <SaveButton disabled={!active} type="submit">
+            Save Change
+          </SaveButton>
+        </SettingActions>
+      </form>
+    </>
+  );
+};
+
 const Settings: React.FC<SettingsProps> = ({
   onProfileAvatarRemove,
   onProfileAvatarChange,
+  onChangeUserInfo,
   onResetPassword,
   profile,
 }) => {
@@ -315,6 +405,7 @@ const Settings: React.FC<SettingsProps> = ({
         <TabNavContent>
           {items.map((item, idx) => (
             <NavItem
+              key={item.name}
               onClick={(tab, top) => {
                 if ($tabNav && $tabNav.current) {
                   const pos = $tabNav.current.getBoundingClientRect();
@@ -332,23 +423,12 @@ const Settings: React.FC<SettingsProps> = ({
       </TabNav>
       <TabContentWrapper>
         <Tab tab={0} currentTab={currentTab}>
-          <AvatarSettings
+          <UserInfoTab
-            onProfileAvatarRemove={onProfileAvatarRemove}
             onProfileAvatarChange={onProfileAvatarChange}
-            profile={profile.profileIcon}
+            onProfileAvatarRemove={onProfileAvatarRemove}
+            profile={profile}
+            onChangeUserInfo={onChangeUserInfo}
           />
-          <Input defaultValue={profile.fullName} width="100%" label="Name" />
-          <Input
-            defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
-            width="100%"
-            label="Initials "
-          />
-          <Input defaultValue={profile.username ?? ''} width="100%" label="Username " />
-          <Input width="100%" label="Email" />
-          <Input width="100%" label="Bio" />
-          <SettingActions>
-            <SaveButton>Save Change</SaveButton>
-          </SettingActions>
         </Tab>
         <Tab tab={1} currentTab={currentTab}>
           <ResetPasswordTab onResetPassword={onResetPassword} />

frontend/src/shared/components/TaskAssignee/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { DoubleChevronUp, Crown } from 'shared/icons';
 
 export const AdminIcon = styled(DoubleChevronUp)`
@@ -24,7 +24,12 @@ const TaskDetailAssignee = styled.div`
   position: relative;
 `;
 
-export const Wrapper = styled.div<{ size: number | string; bgColor: string | null; backgroundURL: string | null }>`
+export const Wrapper = styled.div<{
+  size: number | string;
+  bgColor: string | null;
+  backgroundURL: string | null;
+  hasClick: boolean;
+}>`
   width: ${props => props.size}px;
   height: ${props => props.size}px;
   border-radius: 9999px;
@@ -37,33 +42,60 @@ export const Wrapper = styled.div<{ size: number | string; bgColor: string | nul
   background-size: contain;
   font-size: 14px;
   font-weight: 400;
-  &:hover {
+  ${props =>
-    opacity: 0.8;
+    props.hasClick &&
-  }
+    css`
+      &:hover {
+        opacity: 0.8;
+      }
+    `}
 `;
 
 type TaskAssigneeProps = {
   size: number | string;
   showRoleIcons?: boolean;
   member: TaskUser;
-  onMemberProfile: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
+  invited?: boolean;
+  onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
   className?: string;
 };
 
-const TaskAssignee: React.FC<TaskAssigneeProps> = ({ showRoleIcons, member, onMemberProfile, size, className }) => {
+const TaskAssignee: React.FC<TaskAssigneeProps> = ({
+  showRoleIcons,
+  member,
+  invited,
+  onMemberProfile,
+  size,
+  className,
+}) => {
   const $memberRef = useRef<HTMLDivElement>(null);
+  let profileIcon: ProfileIcon = {
+    url: null,
+    bgColor: null,
+    initials: null,
+  };
+  if (member.profileIcon) {
+    profileIcon = member.profileIcon;
+  }
   return (
     <TaskDetailAssignee
       className={className}
       ref={$memberRef}
       onClick={e => {
         e.stopPropagation();
-        onMemberProfile($memberRef, member.id);
+        if (onMemberProfile) {
+          onMemberProfile($memberRef, member.id);
+        }
       }}
       key={member.id}
     >
-      <Wrapper backgroundURL={member.profileIcon.url ?? null} bgColor={member.profileIcon.bgColor ?? null} size={size}>
+      <Wrapper
-        {(!member.profileIcon.url && member.profileIcon.initials) ?? ''}
+        hasClick={typeof onMemberProfile !== undefined}
+        backgroundURL={profileIcon.url ?? null}
+        bgColor={profileIcon.bgColor ?? null}
+        size={size}
+      >
+        {(!profileIcon.url && profileIcon.initials) ?? ''}
       </Wrapper>
       {showRoleIcons && member.role && member.role.code === 'admin' && <AdminIcon width={10} height={10} />}
       {showRoleIcons && member.role && member.role.code === 'owner' && <OwnerIcon width={10} height={10} />}

frontend/src/shared/components/TaskDetails/Styles.ts

@@ -585,3 +585,30 @@ export const ActivityItemLog = styled.span`
   margin-left: 2px;
   color: rgba(${props => props.theme.colors.text.primary});
 `;
+
+export const ViewRawButton = styled.button`
+  border-radius: 3px;
+  padding: 8px 12px;
+  display: flex;
+  position: absolute;
+  right: 4px;
+  bottom: -24px;
+  cursor: pointer;
+  color: rgba(${props => props.theme.colors.text.primary}, 0.25);
+  &:hover {
+    color: rgba(${props => props.theme.colors.text.primary});
+  }
+`;
+
+export const TaskDetailsEditor = styled(TextareaAutosize)`
+  min-height: 108px;
+  color: #c2c6dc;
+  background: #262c49;
+  border-radius: 3px;
+  line-height: 20px;
+  margin-left: 32px;
+  margin-right: 32px;
+  padding: 9px 8px 7px 8px;
+  outline: none;
+  border: none;
+`;

frontend/src/shared/components/TaskDetails/index.tsx

@@ -17,7 +17,7 @@ import dark from 'shared/utils/editorTheme';
 import styled from 'styled-components';
 
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import Task from 'shared/icons/Task';
 import {
@@ -30,6 +30,7 @@ import {
   AssignUserLabel,
   AssignUsersButton,
   AssignedUsersSection,
+  ViewRawButton,
   DueDateTitle,
   Container,
   LeftSidebar,
@@ -65,6 +66,7 @@ import {
   CommentProfile,
   CommentInnerWrapper,
   ActivitySection,
+  TaskDetailsEditor,
 } from './Styles';
 import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
 import onDragEnd from './onDragEnd';
@@ -153,6 +155,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
     return true;
   });
   const [saveTimeout, setSaveTimeout] = useState<any>(null);
+  const [showRaw, setShowRaw] = useState(false);
   const [showCommentActions, setShowCommentActions] = useState(false);
   const taskDescriptionRef = useRef(task.description ?? '');
   const $noMemberBtn = useRef<HTMLDivElement>(null);
@@ -169,7 +172,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
           <LeftSidebarSection>
             <SidebarTitle>TASK GROUP</SidebarTitle>
             <SidebarButton>
-              <SidebarButtonText>Release 0.1.0</SidebarButtonText>
+              <SidebarButtonText>{task.taskGroup.name}</SidebarButtonText>
             </SidebarButton>
             <DueDateTitle>DUE DATE</DueDateTitle>
             <SidebarButton
@@ -179,7 +182,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
               }}
             >
               {task.dueDate ? (
-                <SidebarButtonText>{moment(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
+                <SidebarButtonText>{dayjs(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
               ) : (
                 <SidebarButtonText>No due date</SidebarButtonText>
               )}
@@ -309,28 +312,34 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
         </HeaderContainer>
         <InnerContentContainer>
           <DescriptionContainer>
-            <EditorContainer
+            {showRaw ? (
-              onClick={e => {
+              <TaskDetailsEditor value={taskDescriptionRef.current} />
-                if (!editTaskDescription) {
+            ) : (
-                  setEditTaskDescription(true);
+              <EditorContainer
-                }
+                onClick={e => {
-              }}
+                  if (!editTaskDescription) {
-            >
+                    setEditTaskDescription(true);
-              <Editor
+                  }
-                defaultValue={task.description ?? ''}
-                theme={dark}
-                readOnly={!editTaskDescription}
-                autoFocus
-                onChange={value => {
-                  setSaveTimeout(() => {
-                    clearTimeout(saveTimeout);
-                    return setTimeout(saveDescription, 2000);
-                  });
-                  const text = value();
-                  taskDescriptionRef.current = text;
                 }}
-              />
+              >
-            </EditorContainer>
+                <Editor
+                  defaultValue={task.description ?? ''}
+                  theme={dark}
+                  readOnly={!editTaskDescription}
+                  autoFocus
+                  onChange={value => {
+                    setSaveTimeout(() => {
+                      clearTimeout(saveTimeout);
+                      return setTimeout(saveDescription, 2000);
+                    });
+                    const text = value();
+                    taskDescriptionRef.current = text;
+                  }}
+                />
+              </EditorContainer>
+            )}
+
+            <ViewRawButton onClick={() => setShowRaw(!showRaw)}>{showRaw ? 'Show editor' : 'Show raw'}</ViewRawButton>
           </DescriptionContainer>
           <ChecklistSection>
             <DragDropContext onDragEnd={result => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>

frontend/src/shared/components/TopNavbar/Styles.ts

@@ -251,8 +251,8 @@ export const NavSeparator = styled.div`
 export const LogoContainer = styled(Link)`
   display: block;
   left: 50%;
+  right: 50%;
   position: absolute;
-  transform: translateX(-50%);
   display: flex;
   align-items: center;
   justify-content: center;

frontend/src/shared/components/TopNavbar/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { Home, Star, Bell, AngleDown, BarChart, CheckCircle } from 'shared/icons';
+import { Home, Star, Bell, AngleDown, BarChart, CheckCircle, ListUnordered } from 'shared/icons';
 import styled from 'styled-components';
 import ProfileIcon from 'shared/components/ProfileIcon';
 import { usePopup } from 'shared/components/PopupMenu';
@@ -30,6 +30,7 @@ import {
   ProjectMember,
   ProjectMembers,
 } from './Styles';
+import { useHistory } from 'react-router';
 
 type IconContainerProps = {
   disabled?: boolean;
@@ -173,8 +174,11 @@ type NavBarProps = {
   user: TaskUser | null;
   onOpenSettings: ($target: React.RefObject<HTMLElement>) => void;
   projectMembers?: Array<TaskUser> | null;
+  projectInvitedMembers?: Array<InvitedUser> | null;
+
   onRemoveFromBoard?: (userID: string) => void;
   onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
+  onInvitedMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, email: string) => void;
 };
 
 const NavBar: React.FC<NavBarProps> = ({
@@ -184,10 +188,12 @@ const NavBar: React.FC<NavBarProps> = ({
   onChangeProjectOwner,
   currentTab,
   onMemberProfile,
+  onInvitedMemberProfile,
   canEditProjectName = false,
   onOpenProjectFinder,
   onFavorite,
   onSetTab,
+  projectInvitedMembers,
   onChangeRole,
   name,
   onRemoveFromBoard,
@@ -204,6 +210,7 @@ const NavBar: React.FC<NavBarProps> = ({
       onProfileClick($target);
     }
   };
+  const history = useHistory();
   const { showPopup } = usePopup();
   return (
     <NavbarWrapper>
@@ -245,19 +252,38 @@ const NavBar: React.FC<NavBarProps> = ({
           <TaskcafeTitle>Taskcafé</TaskcafeTitle>
         </LogoContainer>
         <GlobalActions>
-          {projectMembers && onMemberProfile && (
+          {projectMembers && projectInvitedMembers && onMemberProfile && onInvitedMemberProfile && (
             <>
               <ProjectMembers>
                 {projectMembers.map((member, idx) => (
                   <ProjectMember
                     showRoleIcons
-                    zIndex={projectMembers.length - idx}
+                    zIndex={projectMembers.length - idx + projectInvitedMembers.length}
                     key={member.id}
                     size={28}
                     member={member}
                     onMemberProfile={onMemberProfile}
                   />
                 ))}
+                {projectInvitedMembers.map((member, idx) => (
+                  <ProjectMember
+                    showRoleIcons
+                    zIndex={projectInvitedMembers.length - idx}
+                    key={member.email}
+                    size={28}
+                    invited
+                    member={{
+                      id: member.email,
+                      fullName: member.email,
+                      profileIcon: {
+                        url: null,
+                        initials: member.email.charAt(0),
+                        bgColor: '#fff',
+                      },
+                    }}
+                    onMemberProfile={onInvitedMemberProfile}
+                  />
+                ))}
                 {canInviteUser && (
                   <InviteButton
                     onClick={$target => {
@@ -283,6 +309,9 @@ const NavBar: React.FC<NavBarProps> = ({
           <IconContainer disabled onClick={NOOP}>
             <CheckCircle width={20} height={20} />
           </IconContainer>
+          <IconContainer onClick={() => history.push('/outline')}>
+            <ListUnordered width={20} height={20} />
+          </IconContainer>
           <IconContainer disabled onClick={onNotificationClick}>
             <Bell color="#c2c6dc" size={20} />
           </IconContainer>

frontend/src/shared/graphql/createProject.graphqls

@@ -1,5 +1,5 @@
-mutation createProject($teamID: UUID!, $userID: UUID!, $name: String!) {
+mutation createProject($teamID: UUID, $name: String!) {
-  createProject(input: {teamID: $teamID, userID: $userID, name: $name}) {
+  createProject(input: {teamID: $teamID, name: $name}) {
     id
     name
     team {

frontend/src/shared/graphql/createTaskGroup.graphqls

@@ -1,4 +1,4 @@
-mutation createTaskGroup( $projectID: String!, $name: String!, $position: Float! ) {
+mutation createTaskGroup( $projectID: UUID!, $name: String!, $position: Float! ) {
   createTaskGroup(
     input: { projectID: $projectID, name: $name, position: $position }
   ) {

frontend/src/shared/graphql/deleteTask.graphqls

@@ -1,4 +1,4 @@
-mutation deleteTask($taskID: String!) {
+mutation deleteTask($taskID: UUID!) {
   deleteTask(input: { taskID: $taskID }) {
     taskID
   }

frontend/src/shared/graphql/findProject.ts

@@ -22,6 +22,10 @@ query findProject($projectID: UUID!) {
         bgColor
       }
     }
+    invitedMembers {
+      email
+      invitedOn
+    }
     labels {
       id
       createdDate

frontend/src/shared/graphql/findTask.graphqls

@@ -8,6 +8,7 @@ query findTask($taskID: UUID!) {
     complete
     taskGroup {
       id
+      name
     }
     badges {
       checklist {

frontend/src/shared/graphql/me.graphqls

@@ -3,6 +3,9 @@ query me {
     user {
       id
       fullName
+      username
+      email
+      bio
       profileIcon {
         initials
         bgColor

frontend/src/shared/graphql/project/createProjectMember.ts

@@ -1,25 +0,0 @@
-import gql from 'graphql-tag';
-
-export const CREATE_PROJECT_MEMBER_MUTATION = gql`
-  mutation createProjectMember($projectID: UUID!, $userID: UUID!) {
-    createProjectMember(input: { projectID: $projectID, userID: $userID }) {
-      ok
-      member {
-        id
-        fullName
-        profileIcon {
-          url
-          initials
-          bgColor
-        }
-        username
-        role {
-          code
-          name
-        }
-      }
-    }
-  }
-`;
-
-export default CREATE_PROJECT_MEMBER_MUTATION;

frontend/src/shared/graphql/project/deleteProjectInvitedMember.ts

@@ -0,0 +1,13 @@
+import gql from 'graphql-tag';
+
+export const DELETE_PROJECT_INVITED_MEMBER_MUTATION = gql`
+  mutation deleteInvitedProjectMember($projectID: UUID!, $email: String!) {
+    deleteInvitedProjectMember(input: { projectID: $projectID, email: $email }) {
+      invitedMember {
+        email
+      }
+    }
+  }
+`;
+
+export default DELETE_PROJECT_INVITED_MEMBER_MUTATION;

frontend/src/shared/graphql/project/inviteProjectMembers.ts

@@ -0,0 +1,29 @@
+import gql from 'graphql-tag';
+
+export const INVITE_PROJECT_MEMBERS_MUTATION = gql`
+  mutation inviteProjectMembers($projectID: UUID!, $members: [MemberInvite!]!) {
+    inviteProjectMembers(input: { projectID: $projectID, members: $members }) {
+      ok
+      invitedMembers {
+        email
+        invitedOn
+      }
+      members {
+        id
+        fullName
+        profileIcon {
+          url
+          initials
+          bgColor
+        }
+        username
+        role {
+          code
+          name
+        }
+      }
+    }
+  }
+`;
+
+export default INVITE_PROJECT_MEMBERS_MUTATION;

frontend/src/shared/graphql/task/createTask.ts

@@ -2,7 +2,7 @@ import gql from 'graphql-tag';
 import TASK_FRAGMENT from '../fragments/task';
 
 const CREATE_TASK_MUTATION = gql`
-  mutation createTask($taskGroupID: String!, $name: String!, $position: Float!) {
+  mutation createTask($taskGroupID: UUID!, $name: String!, $position: Float!) {
     createTask(input: { taskGroupID: $taskGroupID, name: $name, position: $position }) {
       ...TaskFields
     }

frontend/src/shared/graphql/task/updateTaskChecklistItemLocation.ts

@@ -1,11 +1,11 @@
 import gql from 'graphql-tag';
 
 const UPDATE_TASK_CHECKLIST_ITEM_LOCATION_MUTATION = gql`
-  mutation updateTaskChecklistItemLocation($checklistID: UUID!, $checklistItemID: UUID!, $position: Float!) {
+  mutation updateTaskChecklistItemLocation($taskChecklistID: UUID!, $taskChecklistItemID: UUID!, $position: Float!) {
     updateTaskChecklistItemLocation(
-      input: { checklistID: $checklistID, checklistItemID: $checklistItemID, position: $position }
+      input: { taskChecklistID: $taskChecklistID, taskChecklistItemID: $taskChecklistItemID, position: $position }
     ) {
-      checklistID
+      taskChecklistID
       prevChecklistID
       checklistItem {
         id

frontend/src/shared/graphql/task/updateTaskChecklistLocation.ts

@@ -1,8 +1,8 @@
 import gql from 'graphql-tag';
 
 const UPDATE_TASK_CHECKLIST_LOCATION_MUTATION = gql`
-  mutation updateTaskChecklistLocation($checklistID: UUID!, $position: Float!) {
+  mutation updateTaskChecklistLocation($taskChecklistID: UUID!, $position: Float!) {
-    updateTaskChecklistLocation(input: { checklistID: $checklistID, position: $position }) {
+    updateTaskChecklistLocation(input: { taskChecklistID: $taskChecklistID, position: $position }) {
       checklist {
         id
         position

frontend/src/shared/graphql/taskGroup/deleteTaskGroupTasks.ts

@@ -0,0 +1,10 @@
+import gql from 'graphql-tag';
+
+const DELETE_TASK_GROUP_TASKS_MUTATION = gql`
+  mutation deleteTaskGroupTasks($taskGroupID: UUID!) {
+    deleteTaskGroupTasks(input: { taskGroupID: $taskGroupID }) {
+      tasks
+      taskGroupID
+    }
+  }
+`;

frontend/src/shared/graphql/taskGroup/duplicateTaskGroup.ts

@@ -0,0 +1,26 @@
+import gql from 'graphql-tag';
+import TASK_FRAGMENT from '../fragments/task';
+
+const DUPLICATE_TASK_GROUP_MUTATION = gql`
+mutation duplicateTaskGroup($taskGroupID: UUID!, $name: String!, $position: Float!, $projectID: UUID!) {
+  duplicateTaskGroup(
+  input: {
+    projectID: $projectID
+    taskGroupID: $taskGroupID
+    name: $name
+    position: $position
+  }
+  ) {
+    taskGroup {
+      id
+      name
+      position
+      tasks {
+        ...TaskFields
+      }
+    }
+  }
+
+  ${TASK_FRAGMENT}
+}
+`;

frontend/src/shared/graphql/taskGroup/sortTaskGroup.ts

@@ -0,0 +1,13 @@
+import gql from 'graphql-tag';
+
+const SORT_TASK_GROUP_MUTATION = gql`
+  mutation sortTaskGroup($tasks: [TaskPositionUpdate!]!, $taskGroupID: UUID!) {
+    sortTaskGroup(input: { taskGroupID: $taskGroupID, tasks: $tasks }) {
+      taskGroupID
+      tasks {
+        id
+        position
+      }
+    }
+  }
+`;

frontend/src/shared/graphql/updateTaskName.graphqls

@@ -1,4 +1,4 @@
-mutation updateTaskName($taskID: String!, $name: String!) {
+mutation updateTaskName($taskID: UUID!, $name: String!) {
   updateTaskName(input: { taskID: $taskID, name: $name }) {
     id
     name

frontend/src/shared/graphql/user/createUser.ts

@@ -24,6 +24,7 @@ export const CREATE_USER_MUTATION = gql`
       fullName
       initials
       username
+      bio
       profileIcon {
         url
         initials

frontend/src/shared/graphql/user/deleteInvitedUser.ts

@@ -0,0 +1,13 @@
+import gql from 'graphql-tag';
+
+export const DELETE_INVITED_USER_MUTATION = gql`
+  mutation deleteInvitedUserAccount($invitedUserID: UUID!) {
+    deleteInvitedUserAccount(input: { invitedUserID: $invitedUserID }) {
+      invitedUser {
+        id
+      }
+    }
+  }
+`;
+
+export default DELETE_INVITED_USER_MUTATION;

frontend/src/shared/graphql/user/updateUserInfo.ts

@@ -0,0 +1,19 @@
+import gql from 'graphql-tag';
+
+export const UPDATE_USER_INFO_MUTATION = gql`
+  mutation updateUserInfo($name: String!, $initials: String!, $email: String!, $bio: String!) {
+    updateUserInfo(input: { name: $name, initials: $initials, email: $email, bio: $bio }) {
+      user {
+        id
+        email
+        fullName
+        bio
+        profileIcon {
+          initials
+        }
+      }
+    }
+  }
+`;
+
+export default UPDATE_USER_INFO_MUTATION;

frontend/src/shared/graphql/users.graphqls

@@ -1,4 +1,9 @@
 query users {
+  invitedUsers {
+    id
+    email
+    invitedOn
+  }
   users {
     id
     email

frontend/src/shared/icons/ArrowDown.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const ArrowDown: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 448 512">
+      <path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z" />
+    </Icon>
+  );
+};
+
+export default ArrowDown;

frontend/src/shared/icons/CaretDown.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const CaretDown: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 320 512">
+      <path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" />
+    </Icon>
+  );
+};
+
+export default CaretDown;

frontend/src/shared/icons/CaretRight.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const CaretRight: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 192 512">
+      <path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" />
+    </Icon>
+  );
+};
+
+export default CaretRight;

frontend/src/shared/icons/Dot.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Dot: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 18 18">
+      <circle cx="9" cy="9" r="3.5" />
+    </Icon>
+  );
+};
+
+export default Dot;

frontend/src/shared/icons/DotCircle.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const DotCircle: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm80 248c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80z" />
+    </Icon>
+  );
+};
+
+export default DotCircle;

frontend/src/shared/icons/Eye.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const Eye: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 576 512">
+      <path d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z" />
+    </Icon>
+  );
+};
+
+export default Eye;

frontend/src/shared/icons/EyeSlash.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const EyeSlash: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 640 512">
+      <path d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z" />
+    </Icon>
+  );
+};
+
+export default EyeSlash;

frontend/src/shared/icons/List.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const List: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" />
+    </Icon>
+  );
+};
+
+export default List;

frontend/src/shared/icons/ListUnordered.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Icon, { IconProps } from './Icon';
+
+const ListUnordered: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
+  return (
+    <Icon width={width} height={height} className={className} viewBox="0 0 512 512">
+      <path d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" />
+    </Icon>
+  );
+};
+
+export default ListUnordered;

frontend/src/shared/icons/index.ts

@@ -1,7 +1,16 @@
 import Cross from './Cross';
 import Cog from './Cog';
+import ArrowDown from './ArrowDown';
+import ListUnordered from './ListUnordered';
+import Dot from './Dot';
+import CaretDown from './CaretDown';
+import Eye from './Eye';
+import EyeSlash from './EyeSlash';
+import CaretRight from './CaretRight';
+import List from './List';
 import At from './At';
 import Task from './Task';
+import DotCircle from './DotCircle';
 import Smile from './Smile';
 import Paperclip from './Paperclip';
 import Calendar from './Calendar';
@@ -85,4 +94,13 @@ export {
   Clone,
   Paperclip,
   Share,
+  Eye,
+  ListUnordered,
+  EyeSlash,
+  List,
+  CaretDown,
+  Dot,
+  ArrowDown,
+  CaretRight,
+  DotCircle,
 };

frontend/src/shared/utils/accessToken.ts

@@ -1,6 +1,7 @@
 let accessToken = '';
 
 export function setAccessToken(newToken: string) {
+  console.log(newToken);
   accessToken = newToken;
 }
 export function getAccessToken() {

frontend/src/shared/utils/sorting.ts

@@ -0,0 +1,132 @@
+import dayjs from 'dayjs';
+
+export enum TaskSortingType {
+  NONE,
+  COMPLETE,
+  DUE_DATE,
+  MEMBERS,
+  LABELS,
+  TASK_TITLE,
+}
+
+export enum TaskSortingDirection {
+  ASC,
+  DESC,
+}
+
+export type TaskSorting = {
+  type: TaskSortingType;
+  direction: TaskSortingDirection;
+};
+
+export function sortString(a: string, b: string) {
+  if (a < b) {
+    return -1;
+  }
+  if (a > b) {
+    return 1;
+  }
+  return 0;
+}
+
+export function sortTasks(a: Task, b: Task, taskSorting: TaskSorting) {
+  if (taskSorting.type === TaskSortingType.TASK_TITLE) {
+    if (a.name < b.name) {
+      return -1;
+    }
+    if (a.name > b.name) {
+      return 1;
+    }
+    return 0;
+  }
+  if (taskSorting.type === TaskSortingType.DUE_DATE) {
+    if (a.dueDate && !b.dueDate) {
+      return -1;
+    }
+    if (b.dueDate && !a.dueDate) {
+      return 1;
+    }
+    return dayjs(a.dueDate).diff(dayjs(b.dueDate));
+  }
+  if (taskSorting.type === TaskSortingType.COMPLETE) {
+    if (a.complete && !b.complete) {
+      return -1;
+    }
+    if (b.complete && !a.complete) {
+      return 1;
+    }
+    return 0;
+  }
+  if (taskSorting.type === TaskSortingType.LABELS) {
+    // sorts non-empty labels by name, then by empty label color name
+    let aLabels = [];
+    let bLabels = [];
+    let aLabelsEmpty = [];
+    let bLabelsEmpty = [];
+    if (a.labels) {
+      for (const aLabel of a.labels) {
+        if (aLabel.projectLabel.name && aLabel.projectLabel.name !== '') {
+          aLabels.push(aLabel.projectLabel.name);
+        } else {
+          aLabelsEmpty.push(aLabel.projectLabel.labelColor.name);
+        }
+      }
+    }
+    if (b.labels) {
+      for (const bLabel of b.labels) {
+        if (bLabel.projectLabel.name && bLabel.projectLabel.name !== '') {
+          bLabels.push(bLabel.projectLabel.name);
+        } else {
+          bLabelsEmpty.push(bLabel.projectLabel.labelColor.name);
+        }
+      }
+    }
+    aLabels = aLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    bLabels = bLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    aLabelsEmpty = aLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    bLabelsEmpty = bLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
+    if (aLabelsEmpty.length !== 0 || bLabelsEmpty.length !== 0) {
+      if (aLabelsEmpty.length > bLabelsEmpty.length) {
+        if (bLabels.length !== 0) {
+          return 1;
+        }
+        return -1;
+      }
+    }
+    if (aLabels.length < bLabels.length) {
+      return 1;
+    }
+    if (aLabels.length > bLabels.length) {
+      return -1;
+    }
+    return 0;
+  }
+  if (taskSorting.type === TaskSortingType.MEMBERS) {
+    let aMembers = [];
+    let bMembers = [];
+    if (a.assigned) {
+      for (const aMember of a.assigned) {
+        if (aMember.fullName) {
+          aMembers.push(aMember.fullName);
+        }
+      }
+    }
+    if (b.assigned) {
+      for (const bMember of b.assigned) {
+        if (bMember.fullName) {
+          bMembers.push(bMember.fullName);
+        }
+      }
+    }
+    aMembers = aMembers.sort((aMember, bMember) => sortString(aMember, bMember));
+    bMembers = bMembers.sort((aMember, bMember) => sortString(aMember, bMember));
+    if (aMembers.length < bMembers.length) {
+      return 1;
+    }
+    if (aMembers.length > bMembers.length) {
+      return -1;
+    }
+    return 0;
+  }
+  return 0;
+}

frontend/src/taskcafe.d.ts

@@ -46,6 +46,8 @@ type OwnedList = {
 type TaskUser = {
   id: string;
   fullName: string;
+  email?: string;
+  bio?: string;
   profileIcon: ProfileIcon;
   username?: string;
   role?: Role;
@@ -125,3 +127,141 @@ type ElementBounds = {
 };
 
 type CardLabelVariant = 'large' | 'small';
+
+type InvitedUser = {
+  email: string;
+  invitedOn: string;
+};
+
+type InvitedUserAccount = {
+  id: string;
+  email: string;
+  invitedOn: string;
+};
+
+type NodeDimensions = {
+  entry: React.RefObject<HTMLElement>;
+  children: React.RefObject<HTMLElement> | null;
+};
+
+type OutlineNode = {
+  id: string;
+  parent: string;
+  depth: number;
+  position: number;
+  ancestors: Array<string>;
+  collapsed: boolean;
+  children: number;
+};
+
+type RelationshipChild = {
+  position: number;
+  id: string;
+  depth: number;
+  children: number;
+};
+
+type NodeRelationships = {
+  self: { id: string; depth: number };
+  children: Array<RelationshipChild>;
+  numberOfSubChildren: number;
+};
+
+type OutlineData = {
+  published: Map<string, string>;
+  nodes: Map<number, Map<string, OutlineNode>>;
+  relationships: Map<string, NodeRelationships>;
+  dimensions: Map<string, NodeDimensions>;
+};
+
+type ImpactZoneData = {
+  node: OutlineNode;
+  dimensions: NodeDimensions;
+};
+
+type ImpactZone = {
+  above: ImpactZoneData | null;
+  below: ImpactZoneData | null;
+};
+
+type ImpactData = {
+  zone: ImpactZone;
+  depth: number;
+};
+
+type ImpactPosition = 'before' | 'after' | 'beforeChildren' | 'afterChildren';
+
+type ImpactAction = {
+  on: 'children' | 'entry';
+  position: ImpactPosition;
+};
+
+type ItemElement = {
+  id: string;
+  parent: null | string;
+  position: number;
+  collapsed: boolean;
+  children?: Array<ItemElement>;
+};
+type NodeDimensions = {
+  entry: React.RefObject<HTMLElement>;
+  children: React.RefObject<HTMLElement> | null;
+};
+
+type OutlineNode = {
+  id: string;
+  parent: string;
+  depth: number;
+  position: number;
+  ancestors: Array<string>;
+  children: number;
+};
+
+type RelationshipChild = {
+  position: number;
+  id: string;
+  depth: number;
+  children: number;
+};
+
+type NodeRelationships = {
+  self: { id: string; depth: number };
+  children: Array<RelationshipChild>;
+  numberOfSubChildren: number;
+};
+
+type OutlineData = {
+  published: Map<string, string>;
+  nodes: Map<number, Map<string, OutlineNode>>;
+  relationships: Map<string, NodeRelationships>;
+  dimensions: Map<string, NodeDimensions>;
+};
+
+type ImpactZoneData = {
+  node: OutlineNode;
+  dimensions: NodeDimensions;
+};
+
+type ImpactZone = {
+  above: ImpactZoneData | null;
+  below: ImpactZoneData | null;
+};
+
+type ImpactData = {
+  zone: ImpactZone;
+  depth: number;
+};
+
+type ImpactPosition = 'before' | 'after' | 'beforeChildren' | 'afterChildren';
+
+type ImpactAction = {
+  on: 'children' | 'entry';
+  position: ImpactPosition;
+};
+
+type ItemElement = {
+  id: string;
+  parent: null | string;
+  position: number;
+  children?: Array<ItemElement>;
+};

frontend/yarn.lock

@@ -1342,7 +1342,7 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
-"@babel/runtime@7.8.4", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
+"@babel/runtime@7.8.4", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
   integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
@@ -1610,46 +1610,6 @@
     ts-node "^8"
     tslib "^1"
 
-"@fortawesome/fontawesome-common-types@^0.2.27":
-  version "0.2.27"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.27.tgz#19706345859fc46adf3684ed01d11b40903b87e9"
-  integrity sha512-97GaByGaXDGMkzcJX7VmR/jRJd8h1mfhtA7RsxDBN61GnWE/PPCZhOdwG/8OZYktiRUF0CvFOr+VgRkJrt6TWg==
-
-"@fortawesome/fontawesome-svg-core@^1.2.27":
-  version "1.2.27"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.27.tgz#e4db8e3be81a40988213507c3e3d0c158a6641a3"
-  integrity sha512-sOD3DKynocnHYpuw2sLPnTunDj7rLk91LYhi2axUYwuGe9cPCw7Bsu9EWtVdNJP+IYgTCZIbyARKXuy5K/nv+Q==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.27"
-
-"@fortawesome/free-brands-svg-icons@^5.12.1":
-  version "5.12.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.12.1.tgz#67977addd15e21e57aa1ed71cd2ddecdfaa88647"
-  integrity sha512-IYUYcgGsQuwiIHjRGfeSTCIQKUSZMb6FsV6mDj78K0D+YzGJkM4cvEBBUMHtnla5D2HCxncMI/9JX5YIk2GHeQ==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.27"
-
-"@fortawesome/free-regular-svg-icons@^5.12.1":
-  version "5.12.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.12.1.tgz#4b378d93655acc5e432d5ed7ee127768dd351a99"
-  integrity sha512-bGda18seHXb+24K6DPUFzqn4kG7B+JViP/BscMcNUXvT00M86xNhdgP2TXSdflQXn53QWqymKjx/8rhaDOJyhA==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.27"
-
-"@fortawesome/free-solid-svg-icons@^5.12.1":
-  version "5.12.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.12.1.tgz#76b6f958a3471821ff146f8f955e6d7cfe87147c"
-  integrity sha512-k3MwRFFUhyL4cuCJSaHDA0YNYMELDXX0h8JKtWYxO5XD3Dn+maXOMrVAAiNGooUyM2v/wz/TOaM0jxYVKeXX7g==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.27"
-
-"@fortawesome/react-fontawesome@^0.1.8":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.8.tgz#cb6d4dd3aeec45b6ff2d48c812317a6627618511"
-  integrity sha512-I5h9YQg/ePA3Br9ISS18fcwOYmzQYDSM1ftH03/8nHkiqIVHtUyQBw482+60dnzvlr82gHt3mGm+nDUp159FCw==
-  dependencies:
-    prop-types "^15.5.10"
-
 "@graphql-codegen/cli@^1.13.2":
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/cli/-/cli-1.13.2.tgz#4cfb3a4d766e3177ff727ea1b93429fd0f93cfcd"
@@ -2181,11 +2141,6 @@
   dependencies:
     any-observable "^0.3.0"
 
-"@sheerun/mutationobserver-shim@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b"
-  integrity sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==
-
 "@storybook/addon-actions@^5.3.13":
   version "5.3.13"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-5.3.13.tgz#faf57ca14a46ce0c69168c631fbfc3d79d294b38"
@@ -2947,47 +2902,6 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
-"@testing-library/dom@^6.11.0":
-  version "6.12.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.12.2.tgz#5d549acf43f2e0c23b2abfd4e36d65594c3b2741"
-  integrity sha512-KCnvHra5fV+wDxg3wJObGvZFxq7v1DJt829GNFLuRDjKxVNc/B5AdsylNF5PMHFbWMXDsHwM26d2NZcZO9KjbQ==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@sheerun/mutationobserver-shim" "^0.3.2"
-    "@types/testing-library__dom" "^6.0.0"
-    aria-query "3.0.0"
-    pretty-format "^24.9.0"
-    wait-for-expect "^3.0.0"
-
-"@testing-library/jest-dom@^4.2.4":
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz#00dfa0cbdd837d9a3c2a7f3f0a248ea6e7b89742"
-  integrity sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==
-  dependencies:
-    "@babel/runtime" "^7.5.1"
-    chalk "^2.4.1"
-    css "^2.2.3"
-    css.escape "^1.5.1"
-    jest-diff "^24.0.0"
-    jest-matcher-utils "^24.0.0"
-    lodash "^4.17.11"
-    pretty-format "^24.0.0"
-    redent "^3.0.0"
-
-"@testing-library/react@^9.3.2":
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.4.0.tgz#b021ac8cb987c8dc54c6841875f745bf9b2e88e5"
-  integrity sha512-XdhDWkI4GktUPsz0AYyeQ8M9qS/JFie06kcSnUVcpgOwFjAu9vhwR83qBl+lw9yZWkbECjL8Hd+n5hH6C0oWqg==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-    "@testing-library/dom" "^6.11.0"
-    "@types/testing-library__react" "^9.1.2"
-
-"@testing-library/user-event@^7.1.2":
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-7.2.1.tgz#2ad4e844175a3738cb9e7064be5ea070b8863a1c"
-  integrity sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==
-
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -3337,21 +3251,6 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.5.tgz#9adbc12950582aa65ead76bffdf39fe0c27a3c02"
   integrity sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==
 
-"@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0":
-  version "6.12.1"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.12.1.tgz#37af28fae051f9e3feed5684535b1540c97ae28b"
-  integrity sha512-cgqnEjxKk31tQt29j4baSWaZPNjQf3bHalj2gcHQTpW5SuHRal76gOpF0vypeEo6o+sS5inOvvNdzLY0B3FB2A==
-  dependencies:
-    pretty-format "^24.3.0"
-
-"@types/testing-library__react@^9.1.2":
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-9.1.2.tgz#e33af9124c60a010fc03a34eff8f8a34a75c4351"
-  integrity sha512-CYaMqrswQ+cJACy268jsLAw355DZtPZGt3Jwmmotlcu8O/tkoXBI6AeZ84oZBJsIsesozPKzWzmv/0TIU+1E9Q==
-  dependencies:
-    "@types/react-dom" "*"
-    "@types/testing-library__dom" "*"
-
 "@types/uglify-js@*":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
@@ -4193,7 +4092,7 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-aria-query@3.0.0, aria-query@^3.0.0:
+aria-query@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
   integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=
@@ -6255,12 +6154,7 @@ css-what@^3.2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
   integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
 
-css.escape@^1.5.1:
+css@^2.0.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
-
-css@^2.0.0, css@^2.2.3:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
   integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
@@ -6426,6 +6320,11 @@ date-fns@^2.0.1:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.12.0.tgz#01754c8a2f3368fc1119cf4625c3dad8c1845ee6"
   integrity sha512-qJgn99xxKnFgB1qL4jpxU7Q2t0LOn1p8KMIveef3UZD7kqjT3tpFNNdXJelEHhE+rUgffriXriw/sOSU+cS1Hw==
 
+dayjs@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.9.1.tgz#201a755f7db5103ed6de63ba93a984141c754541"
+  integrity sha512-01NCTBg8cuMJG1OQc6PR7T66+AFYiPwgDvdJmvJBn29NGzIG+DIFxPLNjHzwz3cpFIvG+NcwIjP9hSaPVoOaDg==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -9720,7 +9619,7 @@ jest-config@^24.9.0:
     pretty-format "^24.9.0"
     realpath-native "^1.1.0"
 
-jest-diff@^24.0.0, jest-diff@^24.3.0, jest-diff@^24.9.0:
+jest-diff@^24.3.0, jest-diff@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
   integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
@@ -9837,7 +9736,7 @@ jest-leak-detector@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
-jest-matcher-utils@^24.0.0, jest-matcher-utils@^24.9.0:
+jest-matcher-utils@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
   integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
@@ -10701,6 +10600,11 @@ lodash@4.17.15, "lodash@>=3.5 <5", lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
+lodash@^4.17.20:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
 log-symbols@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
@@ -12965,7 +12869,7 @@ pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0:
+pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
   integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
@@ -14183,14 +14087,6 @@ recursive-readdir@2.2.2:
   dependencies:
     minimatch "3.0.4"
 
-redent@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
-  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
-  dependencies:
-    indent-string "^4.0.0"
-    strip-indent "^3.0.0"
-
 redux@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
@@ -16820,11 +16716,6 @@ w3c-xmlserializer@^1.1.2:
     webidl-conversions "^4.0.2"
     xml-name-validator "^3.0.0"
 
-wait-for-expect@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.2.tgz#d2f14b2f7b778c9b82144109c8fa89ceaadaa463"
-  integrity sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag==
-
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"

go.mod

@@ -11,6 +11,7 @@ require (
 	github.com/google/uuid v1.1.1
 	github.com/jmoiron/sqlx v1.2.0
 	github.com/lib/pq v1.3.0
+	github.com/lithammer/fuzzysearch v1.1.0
 	github.com/magefile/mage v1.9.0
 	github.com/pelletier/go-toml v1.8.0 // indirect
 	github.com/pkg/errors v0.9.1

go.sum

@@ -109,6 +109,7 @@ github.com/cpuguy83/go-md2man/v2 v2.0.0-20190314233015-f79a8a8ca69d h1:U+s90UTSY
 github.com/cpuguy83/go-md2man/v2 v2.0.0-20190314233015-f79a8a8ca69d/go.mod h1:maD7wRr/U5Z6m/iR4s+kqSMx2CaBsrgA7czyZG/E6dU=
 github.com/cpuguy83/go-md2man/v2 v2.0.0/go.mod h1:maD7wRr/U5Z6m/iR4s+kqSMx2CaBsrgA7czyZG/E6dU=
 github.com/creack/pty v1.1.7/go.mod h1:lj5s0c3V2DBrqTV7llrYr5NG6My20zk30Fl46Y7DoTY=
+github.com/cznic/mathutil v0.0.0-20180504122225-ca4c9f2c1369 h1:XNT/Zf5l++1Pyg08/HV04ppB0gKxAqtZQBRYiYrUuYk=
 github.com/cznic/mathutil v0.0.0-20180504122225-ca4c9f2c1369/go.mod h1:e6NPNENfs9mPDVNRekM7lKScauxd5kXTr1Mfyig6TDM=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
@@ -357,6 +358,8 @@ github.com/lib/pq v1.1.0/go.mod h1:5WUZQaWbwv1U+lTReE5YruASi9Al49XbQIvNi/34Woo=
 github.com/lib/pq v1.2.0/go.mod h1:5WUZQaWbwv1U+lTReE5YruASi9Al49XbQIvNi/34Woo=
 github.com/lib/pq v1.3.0 h1:/qkRGz8zljWiDcFvgpwUpwIAPu3r07TDvs3Rws+o/pU=
 github.com/lib/pq v1.3.0/go.mod h1:5WUZQaWbwv1U+lTReE5YruASi9Al49XbQIvNi/34Woo=
+github.com/lithammer/fuzzysearch v1.1.0 h1:go9v8tLCrNTTlH42OAaq4eHFe81TDHEnlrMEb6R4f+A=
+github.com/lithammer/fuzzysearch v1.1.0/go.mod h1:Bqx4wo8lTOFcJr3ckpY6HA9lEIOO0H5HrkJ5CsN56HQ=
 github.com/logrusorgru/aurora v0.0.0-20200102142835-e9ef32dff381/go.mod h1:7rIyQOR62GCctdiQpZ/zOJlFyk6y+94wXzv6RNZgaR4=
 github.com/magefile/mage v1.9.0 h1:t3AU2wNwehMCW97vuqQLtw6puppWXHO+O2MHo5a50XE=
 github.com/magefile/mage v1.9.0/go.mod h1:z5UZb/iS3GoOSn0JgWuiw7dxlurVYTu+/jHXqQg881A=

internal/auth/auth.go

@@ -7,8 +7,6 @@ import (
 	log "github.com/sirupsen/logrus"
 )
 
-var jwtKey = []byte("taskcafe_test_key")
-
 // RestrictedMode is used restrict JWT access to just the install route
 type RestrictedMode string
 
@@ -54,7 +52,7 @@ func (r *ErrMalformedToken) Error() string {
 }
 
 // NewAccessToken generates a new JWT access token with the correct claims
-func NewAccessToken(userID string, restrictedMode RestrictedMode, orgRole string) (string, error) {
+func NewAccessToken(userID string, restrictedMode RestrictedMode, orgRole string, jwtKey []byte) (string, error) {
 	role := RoleMember
 	if orgRole == "admin" {
 		role = RoleAdmin
@@ -76,7 +74,7 @@ func NewAccessToken(userID string, restrictedMode RestrictedMode, orgRole string
 }
 
 // NewAccessTokenCustomExpiration creates an access token with a custom duration
-func NewAccessTokenCustomExpiration(userID string, dur time.Duration) (string, error) {
+func NewAccessTokenCustomExpiration(userID string, dur time.Duration, jwtKey []byte) (string, error) {
 	accessExpirationTime := time.Now().Add(dur)
 	accessClaims := &AccessTokenClaims{
 		UserID:         userID,
@@ -94,7 +92,7 @@ func NewAccessTokenCustomExpiration(userID string, dur time.Duration) (string, e
 }
 
 // ValidateAccessToken validates a JWT access token and returns the contained claims or an error if it's invalid
-func ValidateAccessToken(accessTokenString string) (AccessTokenClaims, error) {
+func ValidateAccessToken(accessTokenString string, jwtKey []byte) (AccessTokenClaims, error) {
 	accessClaims := &AccessTokenClaims{}
 	accessToken, err := jwt.ParseWithClaims(accessTokenString, accessClaims, func(token *jwt.Token) (interface{}, error) {
 		return jwtKey, nil