feat: more changes

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

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

@@ -39,7 +39,7 @@
     "history": "^4.10.1",
     "immer": "^6.0.3",
     "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.20",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-autosize-textarea": "^7.0.0",

frontend/src/Admin/index.tsx

@@ -5,6 +5,7 @@ import GlobalTopNavbar from 'App/TopNavbar';
 import {
   useUsersQuery,
   useDeleteUserAccountMutation,
+  useDeleteInvitedUserAccountMutation,
   useCreateUserAccountMutation,
   UsersDocument,
   UsersQuery,
@@ -176,6 +177,17 @@ const AdminRoute = () => {
   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

@@ -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/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/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" />
-      <MemberList>
-        {users
-          .filter(u => u.id !== projectMembers.find(p => p.id === u.id)?.id)
-          .map(user => (
-            <UserMember
-              key={user.id}
-              onCardMemberClick={() => onAddProjectMember(user.id)}
-              showName
-              member={user}
-              taskID=""
+      <InviteContainer>
+        <AsyncSelect
+          getOptionValue={option => option.value.id}
+          placeholder="Email address or username"
+          noOptionsMessage={() => null}
+          onChange={(e: any) => {
+            setInvitedUsers(e);
+          }}
+          isMulti
+          autoFocus
+          cacheOptions
+          styles={colourStyles}
+          defaultOption
+          components={{
+            MultiValue: OptionValue,
+            Option: UserOption,
+            IndicatorSeparator: null,
+            DropdownIndicator: null,
+          }}
+          loadOptions={(i, cb) => fetchMembers(client, projectID, {}, i, cb)}
         />
-          ))}
-      </MemberList>
+      </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>
   );
 };
@@ -176,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 },
       );
@@ -243,6 +545,10 @@ const Project = () => {
             deleteProjectMember({ variables: { userID, projectID } });
             hidePopup();
           }}
+          onRemoveInvitedFromBoard={email => {
+            deleteInvitedProjectMember({ variables: { projectID, email } });
+            hidePopup();
+          }}
           onSaveProjectName={projectName => {
             updateProjectName({ variables: { projectID, name: projectName } });
           }}
@@ -250,8 +556,10 @@ const Project = () => {
             showPopup(
               $target,
               <UserManagementPopup
-                onAddProjectMember={userID => {
-                  createProjectMember({ variables: { userID, projectID } });
+                projectID={projectID}
+                onInviteProjectMembers={members => {
+                  inviteProjectMembers({ variables: { projectID, members } });
+                  hidePopup();
                 }}
                 users={data.users}
                 projectMembers={data.findProject.members}
@@ -262,6 +570,7 @@ const Project = () => {
           menuType={[{ name: 'Board', link: location.pathname }]}
           currentTab={0}
           projectMembers={data.findProject.members}
+          projectInvitedMembers={data.findProject.invitedMembers}
           projectID={projectID}
           teamID={data.findProject.team ? data.findProject.team.id : null}
           name={data.findProject.name}

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;
-  onChangeRole: (roleCode: RoleCode) => void;
+  canChangeRole?: boolean;
+  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 =
@@ -577,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.
@@ -635,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]});
+  ${props =>
+    props.hoverVariant === 'boxShadow' &&
+    css`
       &:hover {
-    box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
+        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/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/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/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/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;
+  ${props =>
+    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();
+        if (onMemberProfile) {
           onMemberProfile($memberRef, member.id);
+        }
       }}
       key={member.id}
     >
-      <Wrapper backgroundURL={member.profileIcon.url ?? null} bgColor={member.profileIcon.bgColor ?? null} size={size}>
-        {(!member.profileIcon.url && member.profileIcon.initials) ?? ''}
+      <Wrapper
+        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/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/generated/graphql.tsx

@@ -113,6 +113,14 @@ export type UserAccount = {
   member: MemberList;
 };
 
+export type InvitedUserAccount = {
+   __typename?: 'InvitedUserAccount';
+  id: Scalars['ID'];
+  email: Scalars['String'];
+  invitedOn: Scalars['Time'];
+  member: MemberList;
+};
+
 export type Team = {
    __typename?: 'Team';
   id: Scalars['ID'];
@@ -121,6 +129,12 @@ export type Team = {
   members: Array<Member>;
 };
 
+export type InvitedMember = {
+   __typename?: 'InvitedMember';
+  email: Scalars['String'];
+  invitedOn: Scalars['Time'];
+};
+
 export type Project = {
    __typename?: 'Project';
   id: Scalars['ID'];
@@ -129,6 +143,7 @@ export type Project = {
   team?: Maybe<Team>;
   taskGroups: Array<TaskGroup>;
   members: Array<Member>;
+  invitedMembers: Array<InvitedMember>;
   labels: Array<ProjectLabel>;
 };
 
@@ -221,11 +236,13 @@ export type Query = {
   findTask: Task;
   findTeam: Team;
   findUser: UserAccount;
+  invitedUsers: Array<InvitedUserAccount>;
   labelColors: Array<LabelColor>;
   me: MePayload;
   notifications: Array<Notification>;
   organizations: Array<Organization>;
   projects: Array<Project>;
+  searchMembers: Array<MemberSearchResult>;
   taskGroups: Array<TaskGroup>;
   teams: Array<Team>;
   users: Array<UserAccount>;
@@ -256,6 +273,11 @@ export type QueryProjectsArgs = {
   input?: Maybe<ProjectsFilter>;
 };
 
+
+export type QuerySearchMembersArgs = {
+  input: MemberSearchFilter;
+};
+
 export type Mutation = {
    __typename?: 'Mutation';
   addTaskLabel: Task;
@@ -263,7 +285,6 @@ export type Mutation = {
   clearProfileAvatar: UserAccount;
   createProject: Project;
   createProjectLabel: ProjectLabel;
-  createProjectMember: CreateProjectMemberPayload;
   createRefreshToken: RefreshToken;
   createTask: Task;
   createTaskChecklist: TaskChecklist;
@@ -272,6 +293,8 @@ export type Mutation = {
   createTeam: Team;
   createTeamMember: CreateTeamMemberPayload;
   createUserAccount: UserAccount;
+  deleteInvitedProjectMember: DeleteInvitedProjectMemberPayload;
+  deleteInvitedUserAccount: DeleteInvitedUserAccountPayload;
   deleteProject: DeleteProjectPayload;
   deleteProjectLabel: ProjectLabel;
   deleteProjectMember: DeleteProjectMemberPayload;
@@ -284,6 +307,7 @@ export type Mutation = {
   deleteTeamMember: DeleteTeamMemberPayload;
   deleteUserAccount: DeleteUserAccountPayload;
   duplicateTaskGroup: DuplicateTaskGroupPayload;
+  inviteProjectMembers: InviteProjectMembersPayload;
   logoutUser: Scalars['Boolean'];
   removeTaskLabel: Task;
   setTaskChecklistItemComplete: TaskChecklistItem;
@@ -333,11 +357,6 @@ export type MutationCreateProjectLabelArgs = {
 };
 
 
-export type MutationCreateProjectMemberArgs = {
-  input: CreateProjectMember;
-};
-
-
 export type MutationCreateRefreshTokenArgs = {
   input: NewRefreshToken;
 };
@@ -378,6 +397,16 @@ export type MutationCreateUserAccountArgs = {
 };
 
 
+export type MutationDeleteInvitedProjectMemberArgs = {
+  input: DeleteInvitedProjectMember;
+};
+
+
+export type MutationDeleteInvitedUserAccountArgs = {
+  input: DeleteInvitedUserAccount;
+};
+
+
 export type MutationDeleteProjectArgs = {
   input: DeleteProject;
 };
@@ -438,6 +467,11 @@ export type MutationDuplicateTaskGroupArgs = {
 };
 
 
+export type MutationInviteProjectMembersArgs = {
+  input: InviteProjectMembers;
+};
+
+
 export type MutationLogoutUserArgs = {
   input: LogoutUser;
 };
@@ -688,15 +722,32 @@ export type UpdateProjectLabelColor = {
   labelColorID: Scalars['UUID'];
 };
 
-export type CreateProjectMember = {
+export type DeleteInvitedProjectMember = {
   projectID: Scalars['UUID'];
-  userID: Scalars['UUID'];
+  email: Scalars['String'];
 };
 
-export type CreateProjectMemberPayload = {
-   __typename?: 'CreateProjectMemberPayload';
+export type DeleteInvitedProjectMemberPayload = {
+   __typename?: 'DeleteInvitedProjectMemberPayload';
+  invitedMember: InvitedMember;
+};
+
+export type MemberInvite = {
+  userID?: Maybe<Scalars['UUID']>;
+  email?: Maybe<Scalars['String']>;
+};
+
+export type InviteProjectMembers = {
+  projectID: Scalars['UUID'];
+  members: Array<MemberInvite>;
+};
+
+export type InviteProjectMembersPayload = {
+   __typename?: 'InviteProjectMembersPayload';
   ok: Scalars['Boolean'];
-  member: Member;
+  projectID: Scalars['UUID'];
+  members: Array<Member>;
+  invitedMembers: Array<InvitedMember>;
 };
 
 export type DeleteProjectMember = {
@@ -989,6 +1040,29 @@ export type UpdateTeamMemberRolePayload = {
   member: Member;
 };
 
+export type DeleteInvitedUserAccount = {
+  invitedUserID: Scalars['UUID'];
+};
+
+export type DeleteInvitedUserAccountPayload = {
+   __typename?: 'DeleteInvitedUserAccountPayload';
+  invitedUser: InvitedUserAccount;
+};
+
+export type MemberSearchFilter = {
+  SearchFilter: Scalars['String'];
+  projectID?: Maybe<Scalars['UUID']>;
+};
+
+export type MemberSearchResult = {
+   __typename?: 'MemberSearchResult';
+  similarity: Scalars['Int'];
+  user: UserAccount;
+  confirmed: Scalars['Boolean'];
+  invited: Scalars['Boolean'];
+  joined: Scalars['Boolean'];
+};
+
 export type UpdateUserInfoPayload = {
    __typename?: 'UpdateUserInfoPayload';
   user: UserAccount;
@@ -1205,6 +1279,9 @@ export type FindProjectQuery = (
         { __typename?: 'ProfileIcon' }
         & Pick<ProfileIcon, 'url' | 'initials' | 'bgColor'>
       ) }
+    )>, invitedMembers: Array<(
+      { __typename?: 'InvitedMember' }
+      & Pick<InvitedMember, 'email' | 'invitedOn'>
     )>, labels: Array<(
       { __typename?: 'ProjectLabel' }
       & Pick<ProjectLabel, 'id' | 'createdDate' | 'name'>
@@ -1390,31 +1467,6 @@ export type MeQuery = (
   ) }
 );
 
-export type CreateProjectMemberMutationVariables = {
-  projectID: Scalars['UUID'];
-  userID: Scalars['UUID'];
-};
-
-
-export type CreateProjectMemberMutation = (
-  { __typename?: 'Mutation' }
-  & { createProjectMember: (
-    { __typename?: 'CreateProjectMemberPayload' }
-    & Pick<CreateProjectMemberPayload, 'ok'>
-    & { member: (
-      { __typename?: 'Member' }
-      & Pick<Member, 'id' | 'fullName' | 'username'>
-      & { profileIcon: (
-        { __typename?: 'ProfileIcon' }
-        & Pick<ProfileIcon, 'url' | 'initials' | 'bgColor'>
-      ), role: (
-        { __typename?: 'Role' }
-        & Pick<Role, 'code' | 'name'>
-      ) }
-    ) }
-  ) }
-);
-
 export type DeleteProjectMutationVariables = {
   projectID: Scalars['UUID'];
 };
@@ -1432,6 +1484,23 @@ export type DeleteProjectMutation = (
   ) }
 );
 
+export type DeleteInvitedProjectMemberMutationVariables = {
+  projectID: Scalars['UUID'];
+  email: Scalars['String'];
+};
+
+
+export type DeleteInvitedProjectMemberMutation = (
+  { __typename?: 'Mutation' }
+  & { deleteInvitedProjectMember: (
+    { __typename?: 'DeleteInvitedProjectMemberPayload' }
+    & { invitedMember: (
+      { __typename?: 'InvitedMember' }
+      & Pick<InvitedMember, 'email'>
+    ) }
+  ) }
+);
+
 export type DeleteProjectMemberMutationVariables = {
   projectID: Scalars['UUID'];
   userID: Scalars['UUID'];
@@ -1450,6 +1519,34 @@ export type DeleteProjectMemberMutation = (
   ) }
 );
 
+export type InviteProjectMembersMutationVariables = {
+  projectID: Scalars['UUID'];
+  members: Array<MemberInvite>;
+};
+
+
+export type InviteProjectMembersMutation = (
+  { __typename?: 'Mutation' }
+  & { inviteProjectMembers: (
+    { __typename?: 'InviteProjectMembersPayload' }
+    & Pick<InviteProjectMembersPayload, 'ok'>
+    & { invitedMembers: Array<(
+      { __typename?: 'InvitedMember' }
+      & Pick<InvitedMember, 'email' | 'invitedOn'>
+    )>, members: Array<(
+      { __typename?: 'Member' }
+      & Pick<Member, 'id' | 'fullName' | 'username'>
+      & { profileIcon: (
+        { __typename?: 'ProfileIcon' }
+        & Pick<ProfileIcon, 'url' | 'initials' | 'bgColor'>
+      ), role: (
+        { __typename?: 'Role' }
+        & Pick<Role, 'code' | 'name'>
+      ) }
+    )> }
+  ) }
+);
+
 export type UpdateProjectMemberRoleMutationVariables = {
   projectID: Scalars['UUID'];
   userID: Scalars['UUID'];
@@ -2130,6 +2227,22 @@ export type CreateUserAccountMutation = (
   ) }
 );
 
+export type DeleteInvitedUserAccountMutationVariables = {
+  invitedUserID: Scalars['UUID'];
+};
+
+
+export type DeleteInvitedUserAccountMutation = (
+  { __typename?: 'Mutation' }
+  & { deleteInvitedUserAccount: (
+    { __typename?: 'DeleteInvitedUserAccountPayload' }
+    & { invitedUser: (
+      { __typename?: 'InvitedUserAccount' }
+      & Pick<InvitedUserAccount, 'id'>
+    ) }
+  ) }
+);
+
 export type DeleteUserAccountMutationVariables = {
   userID: Scalars['UUID'];
   newOwnerID?: Maybe<Scalars['UUID']>;
@@ -2211,7 +2324,10 @@ export type UsersQueryVariables = {};
 
 export type UsersQuery = (
   { __typename?: 'Query' }
-  & { users: Array<(
+  & { invitedUsers: Array<(
+    { __typename?: 'InvitedUserAccount' }
+    & Pick<InvitedUserAccount, 'id' | 'email' | 'invitedOn'>
+  )>, users: Array<(
     { __typename?: 'UserAccount' }
     & Pick<UserAccount, 'id' | 'email' | 'fullName' | 'username'>
     & { role: (
@@ -2603,6 +2719,10 @@ export const FindProjectDocument = gql`
         bgColor
       }
     }
+    invitedMembers {
+      email
+      invitedOn
+    }
     labels {
       id
       createdDate
@@ -2884,53 +3004,6 @@ export function useMeLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptio
 export type MeQueryHookResult = ReturnType<typeof useMeQuery>;
 export type MeLazyQueryHookResult = ReturnType<typeof useMeLazyQuery>;
 export type MeQueryResult = ApolloReactCommon.QueryResult<MeQuery, MeQueryVariables>;
-export const CreateProjectMemberDocument = 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 type CreateProjectMemberMutationFn = ApolloReactCommon.MutationFunction<CreateProjectMemberMutation, CreateProjectMemberMutationVariables>;
-
-/**
- * __useCreateProjectMemberMutation__
- *
- * To run a mutation, you first call `useCreateProjectMemberMutation` within a React component and pass it any options that fit your needs.
- * When your component renders, `useCreateProjectMemberMutation` returns a tuple that includes:
- * - A mutate function that you can call at any time to execute the mutation
- * - An object with fields that represent the current status of the mutation's execution
- *
- * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
- *
- * @example
- * const [createProjectMemberMutation, { data, loading, error }] = useCreateProjectMemberMutation({
- *   variables: {
- *      projectID: // value for 'projectID'
- *      userID: // value for 'userID'
- *   },
- * });
- */
-export function useCreateProjectMemberMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<CreateProjectMemberMutation, CreateProjectMemberMutationVariables>) {
-        return ApolloReactHooks.useMutation<CreateProjectMemberMutation, CreateProjectMemberMutationVariables>(CreateProjectMemberDocument, baseOptions);
-      }
-export type CreateProjectMemberMutationHookResult = ReturnType<typeof useCreateProjectMemberMutation>;
-export type CreateProjectMemberMutationResult = ApolloReactCommon.MutationResult<CreateProjectMemberMutation>;
-export type CreateProjectMemberMutationOptions = ApolloReactCommon.BaseMutationOptions<CreateProjectMemberMutation, CreateProjectMemberMutationVariables>;
 export const DeleteProjectDocument = gql`
     mutation deleteProject($projectID: UUID!) {
   deleteProject(input: {projectID: $projectID}) {
@@ -2966,6 +3039,41 @@ export function useDeleteProjectMutation(baseOptions?: ApolloReactHooks.Mutation
 export type DeleteProjectMutationHookResult = ReturnType<typeof useDeleteProjectMutation>;
 export type DeleteProjectMutationResult = ApolloReactCommon.MutationResult<DeleteProjectMutation>;
 export type DeleteProjectMutationOptions = ApolloReactCommon.BaseMutationOptions<DeleteProjectMutation, DeleteProjectMutationVariables>;
+export const DeleteInvitedProjectMemberDocument = gql`
+    mutation deleteInvitedProjectMember($projectID: UUID!, $email: String!) {
+  deleteInvitedProjectMember(input: {projectID: $projectID, email: $email}) {
+    invitedMember {
+      email
+    }
+  }
+}
+    `;
+export type DeleteInvitedProjectMemberMutationFn = ApolloReactCommon.MutationFunction<DeleteInvitedProjectMemberMutation, DeleteInvitedProjectMemberMutationVariables>;
+
+/**
+ * __useDeleteInvitedProjectMemberMutation__
+ *
+ * To run a mutation, you first call `useDeleteInvitedProjectMemberMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteInvitedProjectMemberMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteInvitedProjectMemberMutation, { data, loading, error }] = useDeleteInvitedProjectMemberMutation({
+ *   variables: {
+ *      projectID: // value for 'projectID'
+ *      email: // value for 'email'
+ *   },
+ * });
+ */
+export function useDeleteInvitedProjectMemberMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<DeleteInvitedProjectMemberMutation, DeleteInvitedProjectMemberMutationVariables>) {
+        return ApolloReactHooks.useMutation<DeleteInvitedProjectMemberMutation, DeleteInvitedProjectMemberMutationVariables>(DeleteInvitedProjectMemberDocument, baseOptions);
+      }
+export type DeleteInvitedProjectMemberMutationHookResult = ReturnType<typeof useDeleteInvitedProjectMemberMutation>;
+export type DeleteInvitedProjectMemberMutationResult = ApolloReactCommon.MutationResult<DeleteInvitedProjectMemberMutation>;
+export type DeleteInvitedProjectMemberMutationOptions = ApolloReactCommon.BaseMutationOptions<DeleteInvitedProjectMemberMutation, DeleteInvitedProjectMemberMutationVariables>;
 export const DeleteProjectMemberDocument = gql`
     mutation deleteProjectMember($projectID: UUID!, $userID: UUID!) {
   deleteProjectMember(input: {projectID: $projectID, userID: $userID}) {
@@ -3003,6 +3111,57 @@ export function useDeleteProjectMemberMutation(baseOptions?: ApolloReactHooks.Mu
 export type DeleteProjectMemberMutationHookResult = ReturnType<typeof useDeleteProjectMemberMutation>;
 export type DeleteProjectMemberMutationResult = ApolloReactCommon.MutationResult<DeleteProjectMemberMutation>;
 export type DeleteProjectMemberMutationOptions = ApolloReactCommon.BaseMutationOptions<DeleteProjectMemberMutation, DeleteProjectMemberMutationVariables>;
+export const InviteProjectMembersDocument = 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 type InviteProjectMembersMutationFn = ApolloReactCommon.MutationFunction<InviteProjectMembersMutation, InviteProjectMembersMutationVariables>;
+
+/**
+ * __useInviteProjectMembersMutation__
+ *
+ * To run a mutation, you first call `useInviteProjectMembersMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useInviteProjectMembersMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [inviteProjectMembersMutation, { data, loading, error }] = useInviteProjectMembersMutation({
+ *   variables: {
+ *      projectID: // value for 'projectID'
+ *      members: // value for 'members'
+ *   },
+ * });
+ */
+export function useInviteProjectMembersMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<InviteProjectMembersMutation, InviteProjectMembersMutationVariables>) {
+        return ApolloReactHooks.useMutation<InviteProjectMembersMutation, InviteProjectMembersMutationVariables>(InviteProjectMembersDocument, baseOptions);
+      }
+export type InviteProjectMembersMutationHookResult = ReturnType<typeof useInviteProjectMembersMutation>;
+export type InviteProjectMembersMutationResult = ApolloReactCommon.MutationResult<InviteProjectMembersMutation>;
+export type InviteProjectMembersMutationOptions = ApolloReactCommon.BaseMutationOptions<InviteProjectMembersMutation, InviteProjectMembersMutationVariables>;
 export const UpdateProjectMemberRoleDocument = gql`
     mutation updateProjectMemberRole($projectID: UUID!, $userID: UUID!, $roleCode: RoleCode!) {
   updateProjectMemberRole(input: {projectID: $projectID, userID: $userID, roleCode: $roleCode}) {
@@ -4381,6 +4540,40 @@ export function useCreateUserAccountMutation(baseOptions?: ApolloReactHooks.Muta
 export type CreateUserAccountMutationHookResult = ReturnType<typeof useCreateUserAccountMutation>;
 export type CreateUserAccountMutationResult = ApolloReactCommon.MutationResult<CreateUserAccountMutation>;
 export type CreateUserAccountMutationOptions = ApolloReactCommon.BaseMutationOptions<CreateUserAccountMutation, CreateUserAccountMutationVariables>;
+export const DeleteInvitedUserAccountDocument = gql`
+    mutation deleteInvitedUserAccount($invitedUserID: UUID!) {
+  deleteInvitedUserAccount(input: {invitedUserID: $invitedUserID}) {
+    invitedUser {
+      id
+    }
+  }
+}
+    `;
+export type DeleteInvitedUserAccountMutationFn = ApolloReactCommon.MutationFunction<DeleteInvitedUserAccountMutation, DeleteInvitedUserAccountMutationVariables>;
+
+/**
+ * __useDeleteInvitedUserAccountMutation__
+ *
+ * To run a mutation, you first call `useDeleteInvitedUserAccountMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteInvitedUserAccountMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteInvitedUserAccountMutation, { data, loading, error }] = useDeleteInvitedUserAccountMutation({
+ *   variables: {
+ *      invitedUserID: // value for 'invitedUserID'
+ *   },
+ * });
+ */
+export function useDeleteInvitedUserAccountMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<DeleteInvitedUserAccountMutation, DeleteInvitedUserAccountMutationVariables>) {
+        return ApolloReactHooks.useMutation<DeleteInvitedUserAccountMutation, DeleteInvitedUserAccountMutationVariables>(DeleteInvitedUserAccountDocument, baseOptions);
+      }
+export type DeleteInvitedUserAccountMutationHookResult = ReturnType<typeof useDeleteInvitedUserAccountMutation>;
+export type DeleteInvitedUserAccountMutationResult = ApolloReactCommon.MutationResult<DeleteInvitedUserAccountMutation>;
+export type DeleteInvitedUserAccountMutationOptions = ApolloReactCommon.BaseMutationOptions<DeleteInvitedUserAccountMutation, DeleteInvitedUserAccountMutationVariables>;
 export const DeleteUserAccountDocument = gql`
     mutation deleteUserAccount($userID: UUID!, $newOwnerID: UUID) {
   deleteUserAccount(input: {userID: $userID, newOwnerID: $newOwnerID}) {
@@ -4534,6 +4727,11 @@ export type UpdateUserRoleMutationResult = ApolloReactCommon.MutationResult<Upda
 export type UpdateUserRoleMutationOptions = ApolloReactCommon.BaseMutationOptions<UpdateUserRoleMutation, UpdateUserRoleMutationVariables>;
 export const UsersDocument = gql`
     query users {
+  invitedUsers {
+    id
+    email
+    invitedOn
+  }
   users {
     id
     email

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/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/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/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/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/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,9 +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';
@@ -88,5 +95,12 @@ export {
   Paperclip,
   Share,
   Eye,
+  ListUnordered,
+  EyeSlash,
   List,
+  CaretDown,
+  Dot,
+  ArrowDown,
+  CaretRight,
+  DotCircle,
 };

frontend/src/taskcafe.d.ts

@@ -127,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

@@ -10600,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"

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/commands/commands.go

@@ -62,10 +62,7 @@ func initConfig() {
 	if _, ok := err.(viper.ConfigFileNotFoundError); !ok {
 		panic(err)
 	}
-}
 
-// Execute the root cobra command
-func Execute() {
 	viper.SetDefault("server.hostname", "0.0.0.0:3333")
 	viper.SetDefault("database.host", "127.0.0.1")
 	viper.SetDefault("database.name", "taskcafe")
@@ -75,6 +72,20 @@ func Execute() {
 	viper.SetDefault("queue.broker", "amqp://guest:guest@localhost:5672/")
 	viper.SetDefault("queue.store", "memcache://localhost:11211")
 
+}
+
+// Execute the root cobra command
+func Execute() {
+	viper.SetDefault("server.hostname", "0.0.0.0:3333")
+	viper.SetDefault("database.host", "127.0.0.1")
+	viper.SetDefault("database.name", "taskcafe")
+	viper.SetDefault("database.user", "taskcafe")
+	viper.SetDefault("database.password", "taskcafe_test")
+	viper.SetDefault("database.port", "5432")
+
+	viper.SetDefault("queue.broker", "amqp://guest:guest@localhost:5672/")
+	viper.SetDefault("queue.store", "memcache://localhost:11211")
+
 	rootCmd.SetVersionTemplate(versionTemplate)
 	rootCmd.AddCommand(newWebCmd(), newMigrateCmd(), newTokenCmd(), newWorkerCmd(), newResetPasswordCmd())
 	rootCmd.Execute()

internal/commands/web.go

@@ -32,11 +32,12 @@ func newWebCmd() *cobra.Command {
 			log.SetFormatter(Formatter)
 			log.SetLevel(log.InfoLevel)
 
-			connection := fmt.Sprintf("user=%s password=%s host=%s dbname=%s sslmode=disable",
+			connection := fmt.Sprintf("user=%s password=%s host=%s dbname=%s port=%s sslmode=disable",
 				viper.GetString("database.user"),
 				viper.GetString("database.password"),
 				viper.GetString("database.host"),
 				viper.GetString("database.name"),
+				viper.GetString("database.port"),
 			)
 			var db *sqlx.DB
 			var err error
@@ -78,8 +79,11 @@ func newWebCmd() *cobra.Command {
 			return http.ListenAndServe(viper.GetString("server.hostname"), r)
 		},
 	}
+
 	cc.Flags().Bool("migrate", false, "if true, auto run's schema migrations before starting the web server")
+
 	viper.BindPFlag("migrate", cc.Flags().Lookup("migrate"))
+
 	viper.SetDefault("migrate", false)
 	return cc
 }

internal/db/models.go

@@ -67,6 +67,12 @@ type ProjectMember struct {
 	RoleCode        string    `json:"role_code"`
 }
 
+type ProjectMemberInvited struct {
+	ProjectMemberInvitedID uuid.UUID `json:"project_member_invited_id"`
+	ProjectID              uuid.UUID `json:"project_id"`
+	UserAccountInvitedID   uuid.UUID `json:"user_account_invited_id"`
+}
+
 type RefreshToken struct {
 	TokenID   uuid.UUID `json:"token_id"`
 	UserID    uuid.UUID `json:"user_id"`
@@ -165,3 +171,10 @@ type UserAccount struct {
 	RoleCode         string         `json:"role_code"`
 	Bio              string         `json:"bio"`
 }
+
+type UserAccountInvited struct {
+	UserAccountInvitedID uuid.UUID `json:"user_account_invited_id"`
+	Email                string    `json:"email"`
+	InvitedOn            time.Time `json:"invited_on"`
+	HasJoined            bool      `json:"has_joined"`
+}

internal/db/project.sql.go

@@ -99,6 +99,15 @@ func (q *Queries) CreateTeamProject(ctx context.Context, arg CreateTeamProjectPa
 	return i, err
 }
 
+const deleteInvitedProjectMemberByID = `-- name: DeleteInvitedProjectMemberByID :exec
+DELETE FROM project_member_invited WHERE project_member_invited_id = $1
+`
+
+func (q *Queries) DeleteInvitedProjectMemberByID(ctx context.Context, projectMemberInvitedID uuid.UUID) error {
+	_, err := q.db.ExecContext(ctx, deleteInvitedProjectMemberByID, projectMemberInvitedID)
+	return err
+}
+
 const deleteProjectByID = `-- name: DeleteProjectByID :exec
 DELETE FROM project WHERE project_id = $1
 `
@@ -122,12 +131,12 @@ func (q *Queries) DeleteProjectMember(ctx context.Context, arg DeleteProjectMemb
 	return err
 }
 
-const getAllProjects = `-- name: GetAllProjects :many
-SELECT project_id, team_id, created_at, name FROM project
+const getAllProjectsForTeam = `-- name: GetAllProjectsForTeam :many
+SELECT project_id, team_id, created_at, name FROM project WHERE team_id = $1
 `
 
-func (q *Queries) GetAllProjects(ctx context.Context) ([]Project, error) {
-	rows, err := q.db.QueryContext(ctx, getAllProjects)
+func (q *Queries) GetAllProjectsForTeam(ctx context.Context, teamID uuid.UUID) ([]Project, error) {
+	rows, err := q.db.QueryContext(ctx, getAllProjectsForTeam, teamID)
 	if err != nil {
 		return nil, err
 	}
@@ -154,12 +163,12 @@ func (q *Queries) GetAllProjects(ctx context.Context) ([]Project, error) {
 	return items, nil
 }
 
-const getAllProjectsForTeam = `-- name: GetAllProjectsForTeam :many
-SELECT project_id, team_id, created_at, name FROM project WHERE team_id = $1
+const getAllTeamProjects = `-- name: GetAllTeamProjects :many
+SELECT project_id, team_id, created_at, name FROM project WHERE team_id IS NOT null
 `
 
-func (q *Queries) GetAllProjectsForTeam(ctx context.Context, teamID uuid.UUID) ([]Project, error) {
-	rows, err := q.db.QueryContext(ctx, getAllProjectsForTeam, teamID)
+func (q *Queries) GetAllTeamProjects(ctx context.Context) ([]Project, error) {
+	rows, err := q.db.QueryContext(ctx, getAllTeamProjects)
 	if err != nil {
 		return nil, err
 	}
@@ -219,6 +228,42 @@ func (q *Queries) GetAllVisibleProjectsForUserID(ctx context.Context, userID uui
 	return items, nil
 }
 
+const getInvitedMembersForProjectID = `-- name: GetInvitedMembersForProjectID :many
+SELECT uai.user_account_invited_id, email, invited_on FROM project_member_invited AS pmi
+     INNER JOIN user_account_invited AS uai
+    ON uai.user_account_invited_id = pmi.user_account_invited_id
+     WHERE project_id = $1
+`
+
+type GetInvitedMembersForProjectIDRow struct {
+	UserAccountInvitedID uuid.UUID `json:"user_account_invited_id"`
+	Email                string    `json:"email"`
+	InvitedOn            time.Time `json:"invited_on"`
+}
+
+func (q *Queries) GetInvitedMembersForProjectID(ctx context.Context, projectID uuid.UUID) ([]GetInvitedMembersForProjectIDRow, error) {
+	rows, err := q.db.QueryContext(ctx, getInvitedMembersForProjectID, projectID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var items []GetInvitedMembersForProjectIDRow
+	for rows.Next() {
+		var i GetInvitedMembersForProjectIDRow
+		if err := rows.Scan(&i.UserAccountInvitedID, &i.Email, &i.InvitedOn); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
 const getMemberProjectIDsForUserID = `-- name: GetMemberProjectIDsForUserID :many
 SELECT project_id FROM project_member WHERE user_id = $1
 `
@@ -296,6 +341,26 @@ func (q *Queries) GetProjectByID(ctx context.Context, projectID uuid.UUID) (Proj
 	return i, err
 }
 
+const getProjectMemberInvitedIDByEmail = `-- name: GetProjectMemberInvitedIDByEmail :one
+SELECT email, invited_on, project_member_invited_id FROM user_account_invited AS uai
+ inner join project_member_invited AS pmi
+  ON pmi.user_account_invited_id = uai.user_account_invited_id
+  WHERE email = $1
+`
+
+type GetProjectMemberInvitedIDByEmailRow struct {
+	Email                  string    `json:"email"`
+	InvitedOn              time.Time `json:"invited_on"`
+	ProjectMemberInvitedID uuid.UUID `json:"project_member_invited_id"`
+}
+
+func (q *Queries) GetProjectMemberInvitedIDByEmail(ctx context.Context, email string) (GetProjectMemberInvitedIDByEmailRow, error) {
+	row := q.db.QueryRowContext(ctx, getProjectMemberInvitedIDByEmail, email)
+	var i GetProjectMemberInvitedIDByEmailRow
+	err := row.Scan(&i.Email, &i.InvitedOn, &i.ProjectMemberInvitedID)
+	return i, err
+}
+
 const getProjectMembersForProjectID = `-- name: GetProjectMembersForProjectID :many
 SELECT project_member_id, project_id, user_id, added_at, role_code FROM project_member WHERE project_id = $1
 `

internal/db/querier.go

@@ -9,6 +9,8 @@ import (
 )
 
 type Querier interface {
+	CreateInvitedProjectMember(ctx context.Context, arg CreateInvitedProjectMemberParams) (ProjectMemberInvited, error)
+	CreateInvitedUser(ctx context.Context, email string) (UserAccountInvited, error)
 	CreateLabelColor(ctx context.Context, arg CreateLabelColorParams) (LabelColor, error)
 	CreateNotification(ctx context.Context, arg CreateNotificationParams) (Notification, error)
 	CreateNotificationObject(ctx context.Context, arg CreateNotificationObjectParams) (NotificationObject, error)
@@ -31,6 +33,8 @@ type Querier interface {
 	CreateTeamProject(ctx context.Context, arg CreateTeamProjectParams) (Project, error)
 	CreateUserAccount(ctx context.Context, arg CreateUserAccountParams) (UserAccount, error)
 	DeleteExpiredTokens(ctx context.Context) error
+	DeleteInvitedProjectMemberByID(ctx context.Context, projectMemberInvitedID uuid.UUID) error
+	DeleteInvitedUserAccount(ctx context.Context, userAccountInvitedID uuid.UUID) (UserAccountInvited, error)
 	DeleteProjectByID(ctx context.Context, projectID uuid.UUID) error
 	DeleteProjectLabelByID(ctx context.Context, projectLabelID uuid.UUID) error
 	DeleteProjectMember(ctx context.Context, arg DeleteProjectMemberParams) error
@@ -49,18 +53,22 @@ type Querier interface {
 	DeleteUserAccountByID(ctx context.Context, userID uuid.UUID) error
 	GetAllNotificationsForUserID(ctx context.Context, notifierID uuid.UUID) ([]Notification, error)
 	GetAllOrganizations(ctx context.Context) ([]Organization, error)
-	GetAllProjects(ctx context.Context) ([]Project, error)
 	GetAllProjectsForTeam(ctx context.Context, teamID uuid.UUID) ([]Project, error)
 	GetAllTaskGroups(ctx context.Context) ([]TaskGroup, error)
 	GetAllTasks(ctx context.Context) ([]Task, error)
+	GetAllTeamProjects(ctx context.Context) ([]Project, error)
 	GetAllTeams(ctx context.Context) ([]Team, error)
 	GetAllUserAccounts(ctx context.Context) ([]UserAccount, error)
 	GetAllVisibleProjectsForUserID(ctx context.Context, userID uuid.UUID) ([]Project, error)
 	GetAssignedMembersForTask(ctx context.Context, taskID uuid.UUID) ([]TaskAssigned, error)
 	GetEntityForNotificationID(ctx context.Context, notificationID uuid.UUID) (GetEntityForNotificationIDRow, error)
 	GetEntityIDForNotificationID(ctx context.Context, notificationID uuid.UUID) (uuid.UUID, error)
+	GetInvitedMembersForProjectID(ctx context.Context, projectID uuid.UUID) ([]GetInvitedMembersForProjectIDRow, error)
+	GetInvitedUserAccounts(ctx context.Context) ([]UserAccountInvited, error)
+	GetInvitedUserByEmail(ctx context.Context, email string) (UserAccountInvited, error)
 	GetLabelColorByID(ctx context.Context, labelColorID uuid.UUID) (LabelColor, error)
 	GetLabelColors(ctx context.Context) ([]LabelColor, error)
+	GetMemberData(ctx context.Context, projectID uuid.UUID) ([]UserAccount, error)
 	GetMemberProjectIDsForUserID(ctx context.Context, userID uuid.UUID) ([]uuid.UUID, error)
 	GetMemberTeamIDsForUserID(ctx context.Context, userID uuid.UUID) ([]uuid.UUID, error)
 	GetNotificationForNotificationID(ctx context.Context, notificationID uuid.UUID) (GetNotificationForNotificationIDRow, error)
@@ -72,6 +80,7 @@ type Querier interface {
 	GetProjectIDForTaskGroup(ctx context.Context, taskGroupID uuid.UUID) (uuid.UUID, error)
 	GetProjectLabelByID(ctx context.Context, projectLabelID uuid.UUID) (ProjectLabel, error)
 	GetProjectLabelsForProject(ctx context.Context, projectID uuid.UUID) ([]ProjectLabel, error)
+	GetProjectMemberInvitedIDByEmail(ctx context.Context, email string) (GetProjectMemberInvitedIDByEmailRow, error)
 	GetProjectMembersForProjectID(ctx context.Context, projectID uuid.UUID) ([]ProjectMember, error)
 	GetProjectRolesForUserID(ctx context.Context, userID uuid.UUID) ([]GetProjectRolesForUserIDRow, error)
 	GetRefreshTokenByID(ctx context.Context, tokenID uuid.UUID) (RefreshToken, error)

internal/db/query/project.sql

@@ -43,6 +43,21 @@ SELECT project_id, role_code FROM project_member WHERE user_id = $1;
 -- name: GetMemberProjectIDsForUserID :many
 SELECT project_id FROM project_member WHERE user_id = $1;
 
+-- name: GetInvitedMembersForProjectID :many
+SELECT uai.user_account_invited_id, email, invited_on FROM project_member_invited AS pmi
+     INNER JOIN user_account_invited AS uai
+    ON uai.user_account_invited_id = pmi.user_account_invited_id
+     WHERE project_id = $1;
+
+-- name: GetProjectMemberInvitedIDByEmail :one
+SELECT email, invited_on, project_member_invited_id FROM user_account_invited AS uai
+ inner join project_member_invited AS pmi
+  ON pmi.user_account_invited_id = uai.user_account_invited_id
+  WHERE email = $1;
+
+-- name: DeleteInvitedProjectMemberByID :exec
+DELETE FROM project_member_invited WHERE project_member_invited_id = $1;
+
 -- name: GetAllVisibleProjectsForUserID :many
 SELECT project.* FROM project LEFT JOIN
  project_member ON project_member.project_id = project.project_id WHERE project_member.user_id = $1;

internal/db/query/user_accounts.sql

@@ -15,6 +15,11 @@ INSERT INTO user_account(full_name, initials, email, username, created_at, passw
 UPDATE user_account SET profile_avatar_url = $2 WHERE user_id = $1
   RETURNING *;
 
+-- name: GetMemberData :many
+SELECT * FROM user_account
+  WHERE username != 'system'
+  AND user_id NOT IN (SELECT user_id FROM project_member WHERE project_id = $1);
+
 -- name: UpdateUserAccountInfo :one
 UPDATE user_account SET bio = $2, full_name = $3, initials = $4, email = $5
   WHERE user_id = $1 RETURNING *;
@@ -32,3 +37,19 @@ UPDATE user_account SET role_code = $2 WHERE user_id = $1 RETURNING *;
 
 -- name: SetUserPassword :one
 UPDATE user_account SET password_hash = $2 WHERE user_id = $1 RETURNING *;
+
+-- name: CreateInvitedUser :one
+INSERT INTO user_account_invited (email) VALUES ($1) RETURNING *;
+
+-- name: GetInvitedUserByEmail :one
+SELECT * FROM user_account_invited WHERE email = $1;
+
+-- name: CreateInvitedProjectMember :one
+INSERT INTO project_member_invited (project_id, user_account_invited_id) VALUES ($1, $2)
+  RETURNING *;
+
+-- name: GetInvitedUserAccounts :many
+SELECT * FROM user_account_invited;
+
+-- name: DeleteInvitedUserAccount :one
+DELETE FROM user_account_invited WHERE user_account_invited_id = $1 RETURNING *;

internal/db/user_accounts.sql.go

@@ -11,6 +11,39 @@ import (
 	"github.com/google/uuid"
 )
 
+const createInvitedProjectMember = `-- name: CreateInvitedProjectMember :one
+INSERT INTO project_member_invited (project_id, user_account_invited_id) VALUES ($1, $2)
+  RETURNING project_member_invited_id, project_id, user_account_invited_id
+`
+
+type CreateInvitedProjectMemberParams struct {
+	ProjectID            uuid.UUID `json:"project_id"`
+	UserAccountInvitedID uuid.UUID `json:"user_account_invited_id"`
+}
+
+func (q *Queries) CreateInvitedProjectMember(ctx context.Context, arg CreateInvitedProjectMemberParams) (ProjectMemberInvited, error) {
+	row := q.db.QueryRowContext(ctx, createInvitedProjectMember, arg.ProjectID, arg.UserAccountInvitedID)
+	var i ProjectMemberInvited
+	err := row.Scan(&i.ProjectMemberInvitedID, &i.ProjectID, &i.UserAccountInvitedID)
+	return i, err
+}
+
+const createInvitedUser = `-- name: CreateInvitedUser :one
+INSERT INTO user_account_invited (email) VALUES ($1) RETURNING user_account_invited_id, email, invited_on, has_joined
+`
+
+func (q *Queries) CreateInvitedUser(ctx context.Context, email string) (UserAccountInvited, error) {
+	row := q.db.QueryRowContext(ctx, createInvitedUser, email)
+	var i UserAccountInvited
+	err := row.Scan(
+		&i.UserAccountInvitedID,
+		&i.Email,
+		&i.InvitedOn,
+		&i.HasJoined,
+	)
+	return i, err
+}
+
 const createUserAccount = `-- name: CreateUserAccount :one
 INSERT INTO user_account(full_name, initials, email, username, created_at, password_hash, role_code)
   VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING user_id, created_at, email, username, password_hash, profile_bg_color, full_name, initials, profile_avatar_url, role_code, bio
@@ -53,6 +86,22 @@ func (q *Queries) CreateUserAccount(ctx context.Context, arg CreateUserAccountPa
 	return i, err
 }
 
+const deleteInvitedUserAccount = `-- name: DeleteInvitedUserAccount :one
+DELETE FROM user_account_invited WHERE user_account_invited_id = $1 RETURNING user_account_invited_id, email, invited_on, has_joined
+`
+
+func (q *Queries) DeleteInvitedUserAccount(ctx context.Context, userAccountInvitedID uuid.UUID) (UserAccountInvited, error) {
+	row := q.db.QueryRowContext(ctx, deleteInvitedUserAccount, userAccountInvitedID)
+	var i UserAccountInvited
+	err := row.Scan(
+		&i.UserAccountInvitedID,
+		&i.Email,
+		&i.InvitedOn,
+		&i.HasJoined,
+	)
+	return i, err
+}
+
 const deleteUserAccountByID = `-- name: DeleteUserAccountByID :exec
 DELETE FROM user_account WHERE user_id = $1
 `
@@ -101,6 +150,95 @@ func (q *Queries) GetAllUserAccounts(ctx context.Context) ([]UserAccount, error)
 	return items, nil
 }
 
+const getInvitedUserAccounts = `-- name: GetInvitedUserAccounts :many
+SELECT user_account_invited_id, email, invited_on, has_joined FROM user_account_invited
+`
+
+func (q *Queries) GetInvitedUserAccounts(ctx context.Context) ([]UserAccountInvited, error) {
+	rows, err := q.db.QueryContext(ctx, getInvitedUserAccounts)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var items []UserAccountInvited
+	for rows.Next() {
+		var i UserAccountInvited
+		if err := rows.Scan(
+			&i.UserAccountInvitedID,
+			&i.Email,
+			&i.InvitedOn,
+			&i.HasJoined,
+		); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
+const getInvitedUserByEmail = `-- name: GetInvitedUserByEmail :one
+SELECT user_account_invited_id, email, invited_on, has_joined FROM user_account_invited WHERE email = $1
+`
+
+func (q *Queries) GetInvitedUserByEmail(ctx context.Context, email string) (UserAccountInvited, error) {
+	row := q.db.QueryRowContext(ctx, getInvitedUserByEmail, email)
+	var i UserAccountInvited
+	err := row.Scan(
+		&i.UserAccountInvitedID,
+		&i.Email,
+		&i.InvitedOn,
+		&i.HasJoined,
+	)
+	return i, err
+}
+
+const getMemberData = `-- name: GetMemberData :many
+SELECT user_id, created_at, email, username, password_hash, profile_bg_color, full_name, initials, profile_avatar_url, role_code, bio FROM user_account
+  WHERE username != 'system'
+  AND user_id NOT IN (SELECT user_id FROM project_member WHERE project_id = $1)
+`
+
+func (q *Queries) GetMemberData(ctx context.Context, projectID uuid.UUID) ([]UserAccount, error) {
+	rows, err := q.db.QueryContext(ctx, getMemberData, projectID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var items []UserAccount
+	for rows.Next() {
+		var i UserAccount
+		if err := rows.Scan(
+			&i.UserID,
+			&i.CreatedAt,
+			&i.Email,
+			&i.Username,
+			&i.PasswordHash,
+			&i.ProfileBgColor,
+			&i.FullName,
+			&i.Initials,
+			&i.ProfileAvatarUrl,
+			&i.RoleCode,
+			&i.Bio,
+		); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
 const getRoleForUserID = `-- name: GetRoleForUserID :one
 SELECT username, role.code, role.name FROM user_account
   INNER JOIN role ON role.code = user_account.role_code

internal/graph/graph.go

@@ -19,6 +19,7 @@ import (
 	"github.com/google/uuid"
 	"github.com/jordanknott/taskcafe/internal/auth"
 	"github.com/jordanknott/taskcafe/internal/db"
+	"github.com/jordanknott/taskcafe/internal/logger"
 	"github.com/jordanknott/taskcafe/internal/utils"
 	log "github.com/sirupsen/logrus"
 	"github.com/vektah/gqlparser/v2/gqlerror"
@@ -63,10 +64,10 @@ func NewHandler(repo db.Repository) http.Handler {
 		default:
 			fieldName = "ProjectID"
 		}
-		log.WithFields(log.Fields{"typeArg": typeArg, "fieldName": fieldName}).Info("getting field by name")
+		logger.New(ctx).WithFields(log.Fields{"typeArg": typeArg, "fieldName": fieldName}).Info("getting field by name")
 		subjectField := val.FieldByName(fieldName)
 		if !subjectField.IsValid() {
-			log.Error("subject field name does not exist on input type")
+			logger.New(ctx).Error("subject field name does not exist on input type")
 			return nil, errors.New("subject field name does not exist on input type")
 		}
 		if fieldName == "TeamID" && subjectField.IsNil() {
@@ -76,13 +77,13 @@ func NewHandler(repo db.Repository) http.Handler {
 		}
 		subjectID, ok = subjectField.Interface().(uuid.UUID)
 		if !ok {
-			log.Error("error while casting subject UUID")
+			logger.New(ctx).Error("error while casting subject UUID")
 			return nil, errors.New("error while casting subject uuid")
 		}
 
 		var err error
 		if level == ActionLevelProject {
-			log.WithFields(log.Fields{"subjectID": subjectID}).Info("fetching subject ID by typeArg")
+			logger.New(ctx).WithFields(log.Fields{"subjectID": subjectID}).Info("fetching subject ID by typeArg")
 			if typeArg == ObjectTypeTask {
 				subjectID, err = repo.GetProjectIDForTask(ctx, subjectID)
 			}
@@ -96,7 +97,7 @@ func NewHandler(repo db.Repository) http.Handler {
 				subjectID, err = repo.GetProjectIDForTaskChecklistItem(ctx, subjectID)
 			}
 			if err != nil {
-				log.WithError(err).Error("error while getting subject ID")
+				logger.New(ctx).WithError(err).Error("error while getting subject ID")
 				return nil, err
 			}
 			projectRoles, err := GetProjectRoles(ctx, repo, subjectID)
@@ -109,13 +110,13 @@ func NewHandler(repo db.Repository) http.Handler {
 						},
 					}
 				}
-				log.WithError(err).Error("error while getting project roles")
+				logger.New(ctx).WithError(err).Error("error while getting project roles")
 				return nil, err
 			}
 			for _, validRole := range roles {
-				log.WithFields(log.Fields{"validRole": validRole}).Info("checking role")
+				logger.New(ctx).WithFields(log.Fields{"validRole": validRole}).Info("checking role")
 				if CompareRoleLevel(projectRoles.TeamRole, validRole) || CompareRoleLevel(projectRoles.ProjectRole, validRole) {
-					log.WithFields(log.Fields{"teamRole": projectRoles.TeamRole, "projectRole": projectRoles.ProjectRole}).Info("is team or project role")
+					logger.New(ctx).WithFields(log.Fields{"teamRole": projectRoles.TeamRole, "projectRole": projectRoles.ProjectRole}).Info("is team or project role")
 					return next(ctx)
 				}
 			}
@@ -132,7 +133,7 @@ func NewHandler(repo db.Repository) http.Handler {
 			}
 			role, err := repo.GetTeamRoleForUserID(ctx, db.GetTeamRoleForUserIDParams{UserID: userID, TeamID: subjectID})
 			if err != nil {
-				log.WithError(err).Error("error while getting team roles for user ID")
+				logger.New(ctx).WithError(err).Error("error while getting team roles for user ID")
 				return nil, err
 			}
 			for _, validRole := range roles {

internal/graph/models_gen.go

@@ -27,16 +27,6 @@ type ChecklistBadge struct {
 	Total    int `json:"total"`
 }
 
-type CreateProjectMember struct {
-	ProjectID uuid.UUID `json:"projectID"`
-	UserID    uuid.UUID `json:"userID"`
-}
-
-type CreateProjectMemberPayload struct {
-	Ok     bool    `json:"ok"`
-	Member *Member `json:"member"`
-}
-
 type CreateTaskChecklist struct {
 	TaskID   uuid.UUID `json:"taskID"`
 	Name     string    `json:"name"`
@@ -59,6 +49,23 @@ type CreateTeamMemberPayload struct {
 	TeamMember *Member  `json:"teamMember"`
 }
 
+type DeleteInvitedProjectMember struct {
+	ProjectID uuid.UUID `json:"projectID"`
+	Email     string    `json:"email"`
+}
+
+type DeleteInvitedProjectMemberPayload struct {
+	InvitedMember *InvitedMember `json:"invitedMember"`
+}
+
+type DeleteInvitedUserAccount struct {
+	InvitedUserID uuid.UUID `json:"invitedUserID"`
+}
+
+type DeleteInvitedUserAccountPayload struct {
+	InvitedUser *InvitedUserAccount `json:"invitedUser"`
+}
+
 type DeleteProject struct {
 	ProjectID uuid.UUID `json:"projectID"`
 }
@@ -187,6 +194,30 @@ type FindUser struct {
 	UserID uuid.UUID `json:"userID"`
 }
 
+type InviteProjectMembers struct {
+	ProjectID uuid.UUID      `json:"projectID"`
+	Members   []MemberInvite `json:"members"`
+}
+
+type InviteProjectMembersPayload struct {
+	Ok             bool            `json:"ok"`
+	ProjectID      uuid.UUID       `json:"projectID"`
+	Members        []Member        `json:"members"`
+	InvitedMembers []InvitedMember `json:"invitedMembers"`
+}
+
+type InvitedMember struct {
+	Email     string    `json:"email"`
+	InvitedOn time.Time `json:"invitedOn"`
+}
+
+type InvitedUserAccount struct {
+	ID        uuid.UUID   `json:"id"`
+	Email     string      `json:"email"`
+	InvitedOn time.Time   `json:"invitedOn"`
+	Member    *MemberList `json:"member"`
+}
+
 type LogoutUser struct {
 	UserID uuid.UUID `json:"userID"`
 }
@@ -207,11 +238,28 @@ type Member struct {
 	Member      *MemberList  `json:"member"`
 }
 
+type MemberInvite struct {
+	UserID *uuid.UUID `json:"userID"`
+	Email  *string    `json:"email"`
+}
+
 type MemberList struct {
 	Teams    []db.Team    `json:"teams"`
 	Projects []db.Project `json:"projects"`
 }
 
+type MemberSearchFilter struct {
+	SearchFilter string     `json:"searchFilter"`
+	ProjectID    *uuid.UUID `json:"projectID"`
+}
+
+type MemberSearchResult struct {
+	Similarity int             `json:"similarity"`
+	ID         string          `json:"id"`
+	User       *db.UserAccount `json:"user"`
+	Status     ShareStatus     `json:"status"`
+}
+
 type NewProject struct {
 	TeamID *uuid.UUID `json:"teamID"`
 	Name   string     `json:"name"`
@@ -781,3 +829,44 @@ func (e *RoleLevel) UnmarshalGQL(v interface{}) error {
 func (e RoleLevel) MarshalGQL(w io.Writer) {
 	fmt.Fprint(w, strconv.Quote(e.String()))
 }
+
+type ShareStatus string
+
+const (
+	ShareStatusInvited ShareStatus = "INVITED"
+	ShareStatusJoined  ShareStatus = "JOINED"
+)
+
+var AllShareStatus = []ShareStatus{
+	ShareStatusInvited,
+	ShareStatusJoined,
+}
+
+func (e ShareStatus) IsValid() bool {
+	switch e {
+	case ShareStatusInvited, ShareStatusJoined:
+		return true
+	}
+	return false
+}
+
+func (e ShareStatus) String() string {
+	return string(e)
+}
+
+func (e *ShareStatus) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = ShareStatus(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid ShareStatus", str)
+	}
+	return nil
+}
+
+func (e ShareStatus) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}

internal/graph/schema.graphqls

@@ -86,6 +86,13 @@ type UserAccount {
   member: MemberList!
 }
 
+type InvitedUserAccount {
+  id: ID!
+  email: String!
+  invitedOn: Time!
+  member: MemberList!
+}
+
 type Team {
   id: ID!
   createdAt: Time!
@@ -93,6 +100,12 @@ type Team {
   members: [Member!]!
 }
 
+
+type InvitedMember {
+  email: String!
+  invitedOn: Time!
+}
+
 type Project {
   id: ID!
   createdAt: Time!
@@ -100,6 +113,7 @@ type Project {
   team: Team
   taskGroups: [TaskGroup!]!
   members: [Member!]!
+  invitedMembers: [InvitedMember!]!
   labels: [ProjectLabel!]!
 }
 
@@ -158,6 +172,11 @@ type TaskChecklist {
   items: [TaskChecklistItem!]!
 }
 
+enum ShareStatus {
+  INVITED
+  JOINED
+}
+
 enum RoleLevel {
   ADMIN
   MEMBER
@@ -184,6 +203,7 @@ directive @hasRole(roles: [RoleLevel!]!, level: ActionLevel!, type: ObjectType!)
 type Query {
   organizations: [Organization!]!
   users: [UserAccount!]!
+  invitedUsers: [InvitedUserAccount!]!
   findUser(input: FindUser!): UserAccount!
   findProject(input: FindProject!):
     Project! @hasRole(roles: [ADMIN, MEMBER], level: PROJECT, type: PROJECT)
@@ -338,22 +358,41 @@ input UpdateProjectLabelColor {
 }
 
 extend type Mutation {
-  createProjectMember(input: CreateProjectMember!):
-    CreateProjectMemberPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  inviteProjectMembers(input: InviteProjectMembers!):
+    InviteProjectMembersPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
   deleteProjectMember(input: DeleteProjectMember!):
     DeleteProjectMemberPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
   updateProjectMemberRole(input: UpdateProjectMemberRole!):
     UpdateProjectMemberRolePayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+
+deleteInvitedProjectMember(input: DeleteInvitedProjectMember!):
+  DeleteInvitedProjectMemberPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
 }
 
-input CreateProjectMember {
+input DeleteInvitedProjectMember {
   projectID: UUID!
-  userID: UUID!
+  email: String!
 }
 
-type CreateProjectMemberPayload {
+type DeleteInvitedProjectMemberPayload {
+  invitedMember: InvitedMember!
+}
+
+input MemberInvite {
+  userID: UUID
+  email: String
+}
+
+input InviteProjectMembers {
+  projectID: UUID!
+  members: [MemberInvite!]!
+}
+
+type InviteProjectMembersPayload {
   ok: Boolean!
-  member: Member!
+  projectID: UUID!
+  members: [Member!]!
+  invitedMembers: [InvitedMember!]!
 }
 
 input DeleteProjectMember {
@@ -723,6 +762,8 @@ extend type Mutation {
     UserAccount! @hasRole(roles: [ADMIN], level: ORG, type: ORG)
   deleteUserAccount(input: DeleteUserAccount!):
     DeleteUserAccountPayload! @hasRole(roles: [ADMIN], level: ORG, type: ORG)
+  deleteInvitedUserAccount(input: DeleteInvitedUserAccount!):
+    DeleteInvitedUserAccountPayload! @hasRole(roles: [ADMIN], level: ORG, type: ORG)
 
   logoutUser(input: LogoutUser!): Boolean!
   clearProfileAvatar:  UserAccount!
@@ -734,6 +775,31 @@ extend type Mutation {
     UpdateUserInfoPayload! @hasRole(roles: [ADMIN], level: ORG, type: ORG)
 }
 
+extend type Query {
+  searchMembers(input: MemberSearchFilter!): [MemberSearchResult!]!
+}
+
+input DeleteInvitedUserAccount {
+  invitedUserID: UUID!
+}
+
+type DeleteInvitedUserAccountPayload {
+  invitedUser: InvitedUserAccount!
+}
+
+input MemberSearchFilter {
+  searchFilter: String!
+  projectID: UUID
+}
+
+
+type MemberSearchResult {
+  similarity: Int!
+  id: String!
+  user: UserAccount
+  status: ShareStatus!
+}
+
 type UpdateUserInfoPayload {
   user: UserAccount!
 }
@@ -790,3 +856,4 @@ type DeleteUserAccountPayload {
   ok: Boolean!
   userAccount: UserAccount!
 }
+

internal/graph/schema.resolvers.go

@@ -13,6 +13,8 @@ import (
 	"github.com/google/uuid"
 	"github.com/jordanknott/taskcafe/internal/auth"
 	"github.com/jordanknott/taskcafe/internal/db"
+	"github.com/jordanknott/taskcafe/internal/logger"
+	"github.com/lithammer/fuzzysearch/fuzzy"
 	log "github.com/sirupsen/logrus"
 	"github.com/vektah/gqlparser/v2/gqlerror"
 	"golang.org/x/crypto/bcrypt"
@@ -28,7 +30,7 @@ func (r *mutationResolver) CreateProject(ctx context.Context, input NewProject)
 		return &db.Project{}, errors.New("user id is missing")
 	}
 	createdAt := time.Now().UTC()
-	log.WithFields(log.Fields{"name": input.Name, "teamID": input.TeamID}).Info("creating new project")
+	logger.New(ctx).WithFields(log.Fields{"name": input.Name, "teamID": input.TeamID}).Info("creating new project")
 	var project db.Project
 	var err error
 	if input.TeamID == nil {
@@ -37,10 +39,10 @@ func (r *mutationResolver) CreateProject(ctx context.Context, input NewProject)
 			Name:      input.Name,
 		})
 		if err != nil {
-			log.WithError(err).Error("error while creating project")
+			logger.New(ctx).WithError(err).Error("error while creating project")
 			return &db.Project{}, err
 		}
-		log.WithFields(log.Fields{"userID": userID, "projectID": project.ProjectID}).Info("creating personal project link")
+		logger.New(ctx).WithField("projectID", project.ProjectID).Info("creating personal project link")
 	} else {
 		project, err = r.Repository.CreateTeamProject(ctx, db.CreateTeamProjectParams{
 			CreatedAt: createdAt,
@@ -48,13 +50,13 @@ func (r *mutationResolver) CreateProject(ctx context.Context, input NewProject)
 			TeamID:    *input.TeamID,
 		})
 		if err != nil {
-			log.WithError(err).Error("error while creating project")
+			logger.New(ctx).WithError(err).Error("error while creating project")
 			return &db.Project{}, err
 		}
 	}
 	_, err = r.Repository.CreateProjectMember(ctx, db.CreateProjectMemberParams{ProjectID: project.ProjectID, UserID: userID, AddedAt: createdAt, RoleCode: "admin"})
 	if err != nil {
-		log.WithError(err).Error("error while creating initial project member")
+		logger.New(ctx).WithError(err).Error("error while creating initial project member")
 		return &db.Project{}, err
 	}
 	return &project, nil
@@ -123,15 +125,36 @@ func (r *mutationResolver) UpdateProjectLabelColor(ctx context.Context, input Up
 	return &label, err
 }
 
-func (r *mutationResolver) CreateProjectMember(ctx context.Context, input CreateProjectMember) (*CreateProjectMemberPayload, error) {
-	addedAt := time.Now().UTC()
-	_, err := r.Repository.CreateProjectMember(ctx, db.CreateProjectMemberParams{ProjectID: input.ProjectID, UserID: input.UserID, AddedAt: addedAt, RoleCode: "member"})
-	if err != nil {
-		return &CreateProjectMemberPayload{Ok: false}, err
+func (r *mutationResolver) InviteProjectMembers(ctx context.Context, input InviteProjectMembers) (*InviteProjectMembersPayload, error) {
+	members := []Member{}
+	invitedMembers := []InvitedMember{}
+	for _, invitedMember := range input.Members {
+		if invitedMember.Email != nil && invitedMember.UserID != nil {
+			return &InviteProjectMembersPayload{Ok: false}, &gqlerror.Error{
+				Message: "Both email and userID can not be used to invite a project member",
+				Extensions: map[string]interface{}{
+					"code": "403",
+				},
 			}
-	user, err := r.Repository.GetUserAccountByID(ctx, input.UserID)
+		} else if invitedMember.Email == nil && invitedMember.UserID == nil {
+			return &InviteProjectMembersPayload{Ok: false}, &gqlerror.Error{
+				Message: "Either email or userID must be set to invite a project member",
+				Extensions: map[string]interface{}{
+					"code": "403",
+				},
+			}
+		}
+		if invitedMember.UserID != nil {
+			// Invite by user ID
+			addedAt := time.Now().UTC()
+			_, err := r.Repository.CreateProjectMember(ctx, db.CreateProjectMemberParams{ProjectID: input.ProjectID, UserID: *invitedMember.UserID, AddedAt: addedAt, RoleCode: "member"})
 			if err != nil {
-		return &CreateProjectMemberPayload{Ok: false}, err
+				return &InviteProjectMembersPayload{Ok: false}, err
+			}
+			user, err := r.Repository.GetUserAccountByID(ctx, *invitedMember.UserID)
+			if err != nil && err != sql.ErrNoRows {
+				return &InviteProjectMembersPayload{Ok: false}, err
+
 			}
 			var url *string
 			if user.ProfileAvatarUrl.Valid {
@@ -139,17 +162,50 @@ func (r *mutationResolver) CreateProjectMember(ctx context.Context, input Create
 			}
 			profileIcon := &ProfileIcon{url, &user.Initials, &user.ProfileBgColor}
 
-	role, err := r.Repository.GetRoleForProjectMemberByUserID(ctx, db.GetRoleForProjectMemberByUserIDParams{UserID: input.UserID, ProjectID: input.ProjectID})
+			role, err := r.Repository.GetRoleForProjectMemberByUserID(ctx, db.GetRoleForProjectMemberByUserIDParams{UserID: *invitedMember.UserID, ProjectID: input.ProjectID})
 			if err != nil {
-		return &CreateProjectMemberPayload{Ok: false}, err
+				return &InviteProjectMembersPayload{Ok: false}, err
 			}
-	return &CreateProjectMemberPayload{Ok: true, Member: &Member{
-		ID:          input.UserID,
+			members = append(members, Member{
+				ID:          *invitedMember.UserID,
 				FullName:    user.FullName,
 				Username:    user.Username,
 				ProfileIcon: profileIcon,
 				Role:        &db.Role{Code: role.Code, Name: role.Name},
-	}}, nil
+			})
+		} else {
+			// Invite by email
+
+			// if invited user does not exist, create entry
+			invitedUser, err := r.Repository.GetInvitedUserByEmail(ctx, *invitedMember.Email)
+			now := time.Now().UTC()
+			if err != nil {
+				if err == sql.ErrNoRows {
+					invitedUser, err = r.Repository.CreateInvitedUser(ctx, *invitedMember.Email)
+					if err != nil {
+						return &InviteProjectMembersPayload{Ok: false}, err
+					}
+				} else {
+					return &InviteProjectMembersPayload{Ok: false}, err
+				}
+			}
+
+			_, err = r.Repository.CreateInvitedProjectMember(ctx, db.CreateInvitedProjectMemberParams{
+				ProjectID:            input.ProjectID,
+				UserAccountInvitedID: invitedUser.UserAccountInvitedID,
+			})
+			if err != nil {
+				return &InviteProjectMembersPayload{Ok: false}, err
+			}
+			logger.New(ctx).Info("adding invited member")
+			invitedMembers = append(invitedMembers, InvitedMember{Email: *invitedMember.Email, InvitedOn: now})
+			// send out invitation
+			// add project invite entry
+			// send out notification?
+
+		}
+	}
+	return &InviteProjectMembersPayload{Ok: false, ProjectID: input.ProjectID, Members: members, InvitedMembers: invitedMembers}, nil
 }
 
 func (r *mutationResolver) DeleteProjectMember(ctx context.Context, input DeleteProjectMember) (*DeleteProjectMemberPayload, error) {
@@ -181,18 +237,18 @@ func (r *mutationResolver) DeleteProjectMember(ctx context.Context, input Delete
 func (r *mutationResolver) UpdateProjectMemberRole(ctx context.Context, input UpdateProjectMemberRole) (*UpdateProjectMemberRolePayload, error) {
 	user, err := r.Repository.GetUserAccountByID(ctx, input.UserID)
 	if err != nil {
-		log.WithError(err).Error("get user account")
+		logger.New(ctx).WithError(err).Error("get user account")
 		return &UpdateProjectMemberRolePayload{Ok: false}, err
 	}
 	_, err = r.Repository.UpdateProjectMemberRole(ctx, db.UpdateProjectMemberRoleParams{ProjectID: input.ProjectID,
 		UserID: input.UserID, RoleCode: input.RoleCode.String()})
 	if err != nil {
-		log.WithError(err).Error("update project member role")
+		logger.New(ctx).WithError(err).Error("update project member role")
 		return &UpdateProjectMemberRolePayload{Ok: false}, err
 	}
 	role, err := r.Repository.GetRoleForProjectMemberByUserID(ctx, db.GetRoleForProjectMemberByUserIDParams{UserID: user.UserID, ProjectID: input.ProjectID})
 	if err != nil {
-		log.WithError(err).Error("get role for project member")
+		logger.New(ctx).WithError(err).Error("get role for project member")
 		return &UpdateProjectMemberRolePayload{Ok: false}, err
 	}
 	var url *string
@@ -209,19 +265,33 @@ func (r *mutationResolver) UpdateProjectMemberRole(ctx context.Context, input Up
 	return &UpdateProjectMemberRolePayload{Ok: true, Member: &member}, err
 }
 
+func (r *mutationResolver) DeleteInvitedProjectMember(ctx context.Context, input DeleteInvitedProjectMember) (*DeleteInvitedProjectMemberPayload, error) {
+	member, err := r.Repository.GetProjectMemberInvitedIDByEmail(ctx, input.Email)
+	if err != nil {
+		return &DeleteInvitedProjectMemberPayload{}, err
+	}
+	err = r.Repository.DeleteInvitedProjectMemberByID(ctx, member.ProjectMemberInvitedID)
+	if err != nil {
+		return &DeleteInvitedProjectMemberPayload{}, err
+	}
+	return &DeleteInvitedProjectMemberPayload{
+		InvitedMember: &InvitedMember{Email: member.Email, InvitedOn: member.InvitedOn},
+	}, nil
+}
+
 func (r *mutationResolver) CreateTask(ctx context.Context, input NewTask) (*db.Task, error) {
 	createdAt := time.Now().UTC()
-	log.WithFields(log.Fields{"positon": input.Position, "taskGroupID": input.TaskGroupID}).Info("creating task")
+	logger.New(ctx).WithFields(log.Fields{"positon": input.Position, "taskGroupID": input.TaskGroupID}).Info("creating task")
 	task, err := r.Repository.CreateTask(ctx, db.CreateTaskParams{input.TaskGroupID, createdAt, input.Name, input.Position})
 	if err != nil {
-		log.WithError(err).Error("issue while creating task")
+		logger.New(ctx).WithError(err).Error("issue while creating task")
 		return &db.Task{}, err
 	}
 	return &task, nil
 }
 
 func (r *mutationResolver) DeleteTask(ctx context.Context, input DeleteTaskInput) (*DeleteTaskPayload, error) {
-	log.WithFields(log.Fields{
+	logger.New(ctx).WithFields(log.Fields{
 		"taskID": input.TaskID,
 	}).Info("deleting task")
 	err := r.Repository.DeleteTaskByID(ctx, input.TaskID)
@@ -278,8 +348,8 @@ func (r *mutationResolver) UpdateTaskDueDate(ctx context.Context, input UpdateTa
 func (r *mutationResolver) AssignTask(ctx context.Context, input *AssignTaskInput) (*db.Task, error) {
 	assignedDate := time.Now().UTC()
 	assignedTask, err := r.Repository.CreateTaskAssigned(ctx, db.CreateTaskAssignedParams{input.TaskID, input.UserID, assignedDate})
-	log.WithFields(log.Fields{
-		"userID":         assignedTask.UserID,
+	logger.New(ctx).WithFields(log.Fields{
+		"assignedUserID": assignedTask.UserID,
 		"taskID":         assignedTask.TaskID,
 		"assignedTaskID": assignedTask.TaskAssignedID,
 	}).Info("assigned task")
@@ -589,7 +659,7 @@ func (r *mutationResolver) ToggleTaskLabel(ctx context.Context, input ToggleTask
 	createdAt := time.Now().UTC()
 
 	if err == sql.ErrNoRows {
-		log.WithFields(log.Fields{"err": err}).Warning("no rows")
+		logger.New(ctx).WithFields(log.Fields{"err": err}).Warning("no rows")
 		_, err := r.Repository.CreateTaskLabelForTask(ctx, db.CreateTaskLabelForTaskParams{
 			TaskID:         input.TaskID,
 			ProjectLabelID: input.ProjectLabelID,
@@ -622,17 +692,17 @@ func (r *mutationResolver) ToggleTaskLabel(ctx context.Context, input ToggleTask
 func (r *mutationResolver) DeleteTeam(ctx context.Context, input DeleteTeam) (*DeleteTeamPayload, error) {
 	team, err := r.Repository.GetTeamByID(ctx, input.TeamID)
 	if err != nil {
-		log.Error(err)
+		logger.New(ctx).Error(err)
 		return &DeleteTeamPayload{Ok: false}, err
 	}
 	projects, err := r.Repository.GetAllProjectsForTeam(ctx, input.TeamID)
 	if err != nil {
-		log.Error(err)
+		logger.New(ctx).Error(err)
 		return &DeleteTeamPayload{Ok: false}, err
 	}
 	err = r.Repository.DeleteTeamByID(ctx, input.TeamID)
 	if err != nil {
-		log.Error(err)
+		logger.New(ctx).Error(err)
 		return &DeleteTeamPayload{Ok: false}, err
 	}
 
@@ -687,18 +757,18 @@ func (r *mutationResolver) CreateTeamMember(ctx context.Context, input CreateTea
 func (r *mutationResolver) UpdateTeamMemberRole(ctx context.Context, input UpdateTeamMemberRole) (*UpdateTeamMemberRolePayload, error) {
 	user, err := r.Repository.GetUserAccountByID(ctx, input.UserID)
 	if err != nil {
-		log.WithError(err).Error("get user account")
+		logger.New(ctx).WithError(err).Error("get user account")
 		return &UpdateTeamMemberRolePayload{Ok: false}, err
 	}
 	_, err = r.Repository.UpdateTeamMemberRole(ctx, db.UpdateTeamMemberRoleParams{TeamID: input.TeamID,
 		UserID: input.UserID, RoleCode: input.RoleCode.String()})
 	if err != nil {
-		log.WithError(err).Error("update project member role")
+		logger.New(ctx).WithError(err).Error("update project member role")
 		return &UpdateTeamMemberRolePayload{Ok: false}, err
 	}
 	role, err := r.Repository.GetRoleForTeamMember(ctx, db.GetRoleForTeamMemberParams{UserID: user.UserID, TeamID: input.TeamID})
 	if err != nil {
-		log.WithError(err).Error("get role for project member")
+		logger.New(ctx).WithError(err).Error("get role for project member")
 		return &UpdateTeamMemberRolePayload{Ok: false}, err
 	}
 	var url *string
@@ -785,6 +855,20 @@ func (r *mutationResolver) DeleteUserAccount(ctx context.Context, input DeleteUs
 	return &DeleteUserAccountPayload{UserAccount: &user, Ok: true}, nil
 }
 
+func (r *mutationResolver) DeleteInvitedUserAccount(ctx context.Context, input DeleteInvitedUserAccount) (*DeleteInvitedUserAccountPayload, error) {
+	user, err := r.Repository.DeleteInvitedUserAccount(ctx, input.InvitedUserID)
+	if err != nil {
+		return &DeleteInvitedUserAccountPayload{}, err
+	}
+	return &DeleteInvitedUserAccountPayload{
+		InvitedUser: &InvitedUserAccount{
+			Email:     user.Email,
+			ID:        user.UserAccountInvitedID,
+			InvitedOn: user.InvitedOn,
+		},
+	}, err
+}
+
 func (r *mutationResolver) LogoutUser(ctx context.Context, input LogoutUser) (bool, error) {
 	err := r.Repository.DeleteRefreshTokenByUserID(ctx, input.UserID)
 	return true, err
@@ -850,9 +934,9 @@ func (r *notificationResolver) ID(ctx context.Context, obj *db.Notification) (uu
 }
 
 func (r *notificationResolver) Entity(ctx context.Context, obj *db.Notification) (*NotificationEntity, error) {
-	log.WithFields(log.Fields{"notificationID": obj.NotificationID}).Info("fetching entity for notification")
+	logger.New(ctx).WithFields(log.Fields{"notificationID": obj.NotificationID}).Info("fetching entity for notification")
 	entity, err := r.Repository.GetEntityForNotificationID(ctx, obj.NotificationID)
-	log.WithFields(log.Fields{"entityID": entity.EntityID}).Info("fetched entity")
+	logger.New(ctx).WithFields(log.Fields{"entityID": entity.EntityID}).Info("fetched entity")
 	if err != nil {
 		return &NotificationEntity{}, err
 	}
@@ -884,7 +968,7 @@ func (r *notificationResolver) Actor(ctx context.Context, obj *db.Notification)
 	if err != nil {
 		return &NotificationActor{}, err
 	}
-	log.WithFields(log.Fields{"entityID": entity.ActorID}).Info("fetching actor")
+	logger.New(ctx).WithFields(log.Fields{"entityID": entity.ActorID}).Info("fetching actor")
 	user, err := r.Repository.GetUserAccountByID(ctx, entity.ActorID)
 	if err != nil {
 		return &NotificationActor{}, err
@@ -914,7 +998,7 @@ func (r *projectResolver) Team(ctx context.Context, obj *db.Project) (*db.Team,
 		if err == sql.ErrNoRows {
 			return nil, nil
 		}
-		log.WithFields(log.Fields{"teamID": obj.TeamID, "projectID": obj.ProjectID}).WithError(err).Error("issue while getting team for project")
+		logger.New(ctx).WithFields(log.Fields{"teamID": obj.TeamID, "projectID": obj.ProjectID}).WithError(err).Error("issue while getting team for project")
 		return &team, err
 	}
 	return &team, nil
@@ -928,14 +1012,14 @@ func (r *projectResolver) Members(ctx context.Context, obj *db.Project) ([]Membe
 	members := []Member{}
 	projectMembers, err := r.Repository.GetProjectMembersForProjectID(ctx, obj.ProjectID)
 	if err != nil {
-		log.WithError(err).Error("get project members for project id")
+		logger.New(ctx).WithError(err).Error("get project members for project id")
 		return members, err
 	}
 
 	for _, projectMember := range projectMembers {
 		user, err := r.Repository.GetUserAccountByID(ctx, projectMember.UserID)
 		if err != nil {
-			log.WithError(err).Error("get user account by ID")
+			logger.New(ctx).WithError(err).Error("get user account by ID")
 			return members, err
 		}
 		var url *string
@@ -944,7 +1028,7 @@ func (r *projectResolver) Members(ctx context.Context, obj *db.Project) ([]Membe
 		}
 		role, err := r.Repository.GetRoleForProjectMemberByUserID(ctx, db.GetRoleForProjectMemberByUserIDParams{UserID: user.UserID, ProjectID: obj.ProjectID})
 		if err != nil {
-			log.WithError(err).Error("get role for projet member by user ID")
+			logger.New(ctx).WithError(err).Error("get role for projet member by user ID")
 			return members, err
 		}
 		profileIcon := &ProfileIcon{url, &user.Initials, &user.ProfileBgColor}
@@ -955,6 +1039,18 @@ func (r *projectResolver) Members(ctx context.Context, obj *db.Project) ([]Membe
 	return members, nil
 }
 
+func (r *projectResolver) InvitedMembers(ctx context.Context, obj *db.Project) ([]InvitedMember, error) {
+	members, err := r.Repository.GetInvitedMembersForProjectID(ctx, obj.ProjectID)
+	if err != nil && err == sql.ErrNoRows {
+		return []InvitedMember{}, nil
+	}
+	invited := []InvitedMember{}
+	for _, member := range members {
+		invited = append(invited, InvitedMember{Email: member.Email, InvitedOn: member.InvitedOn})
+	}
+	return invited, err
+}
+
 func (r *projectResolver) Labels(ctx context.Context, obj *db.Project) ([]db.ProjectLabel, error) {
 	labels, err := r.Repository.GetProjectLabelsForProject(ctx, obj.ProjectID)
 	return labels, err
@@ -988,6 +1084,25 @@ func (r *queryResolver) Users(ctx context.Context) ([]db.UserAccount, error) {
 	return r.Repository.GetAllUserAccounts(ctx)
 }
 
+func (r *queryResolver) InvitedUsers(ctx context.Context) ([]InvitedUserAccount, error) {
+	invitedMembers, err := r.Repository.GetInvitedUserAccounts(ctx)
+	if err != nil {
+		if err == sql.ErrNoRows {
+			return []InvitedUserAccount{}, nil
+		}
+		return []InvitedUserAccount{}, err
+	}
+	members := []InvitedUserAccount{}
+	for _, invitedMember := range invitedMembers {
+		members = append(members, InvitedUserAccount{
+			ID:        invitedMember.UserAccountInvitedID,
+			Email:     invitedMember.Email,
+			InvitedOn: invitedMember.InvitedOn,
+		})
+	}
+	return members, nil
+}
+
 func (r *queryResolver) FindUser(ctx context.Context, input FindUser) (*db.UserAccount, error) {
 	account, err := r.Repository.GetUserAccountByID(ctx, input.UserID)
 	if err == sql.ErrNoRows {
@@ -1002,11 +1117,7 @@ func (r *queryResolver) FindUser(ctx context.Context, input FindUser) (*db.UserA
 }
 
 func (r *queryResolver) FindProject(ctx context.Context, input FindProject) (*db.Project, error) {
-	userID, role, ok := GetUser(ctx)
-	log.WithFields(log.Fields{"userID": userID, "role": role}).Info("find project user")
-	if !ok {
-		return &db.Project{}, nil
-	}
+	logger.New(ctx).Info("finding project user")
 	project, err := r.Repository.GetProjectByID(ctx, input.ProjectID)
 	if err == sql.ErrNoRows {
 		return &db.Project{}, &gqlerror.Error{
@@ -1027,10 +1138,10 @@ func (r *queryResolver) FindTask(ctx context.Context, input FindTask) (*db.Task,
 func (r *queryResolver) Projects(ctx context.Context, input *ProjectsFilter) ([]db.Project, error) {
 	userID, orgRole, ok := GetUser(ctx)
 	if !ok {
-		log.Info("user id was not found from middleware")
+		logger.New(ctx).Info("user id was not found from middleware")
 		return []db.Project{}, nil
 	}
-	log.WithFields(log.Fields{"userID": userID}).Info("fetching projects")
+	logger.New(ctx).Info("fetching projects")
 
 	if input != nil {
 		return r.Repository.GetAllProjectsForTeam(ctx, *input.TeamID)
@@ -1046,37 +1157,36 @@ func (r *queryResolver) Projects(ctx context.Context, input *ProjectsFilter) ([]
 
 	projects := make(map[string]db.Project)
 	for _, team := range teams {
-		log.WithFields(log.Fields{"teamID": team.TeamID}).Info("found team")
+		logger.New(ctx).WithField("teamID", team.TeamID).Info("found team")
 		teamProjects, err := r.Repository.GetAllProjectsForTeam(ctx, team.TeamID)
 		if err != sql.ErrNoRows && err != nil {
 			log.Info("issue getting team projects")
 			return []db.Project{}, nil
 		}
 		for _, project := range teamProjects {
-			log.WithFields(log.Fields{"projectID": project.ProjectID.String()}).Info("adding team project")
+			logger.New(ctx).WithField("projectID", project.ProjectID).Info("adding team project")
 			projects[project.ProjectID.String()] = project
 		}
 	}
 
 	visibleProjects, err := r.Repository.GetAllVisibleProjectsForUserID(ctx, userID)
 	if err != nil {
-		log.WithField("userID", userID).Info("error getting visible projects for user")
+		logger.New(ctx).Info("error getting visible projects for user")
 		return []db.Project{}, nil
 	}
 	for _, project := range visibleProjects {
-		log.WithFields(log.Fields{"projectID": project.ProjectID.String()}).Info("found visible project")
+		logger.New(ctx).WithField("projectID", project.ProjectID).Info("found visible project")
 		if _, ok := projects[project.ProjectID.String()]; !ok {
-			log.WithFields(log.Fields{"projectID": project.ProjectID.String()}).Info("adding visible project")
+			logger.New(ctx).WithField("projectID", project.ProjectID).Info("adding visible project")
 			projects[project.ProjectID.String()] = project
 		}
 	}
-	log.WithFields(log.Fields{"projectLength": len(projects)}).Info("making projects")
+	logger.New(ctx).WithField("projectLength", len(projects)).Info("making projects")
 	allProjects := make([]db.Project, 0, len(projects))
 	for _, project := range projects {
-		log.WithFields(log.Fields{"projectID": project.ProjectID.String()}).Info("add project to final list")
+		logger.New(ctx).WithField("projectID", project.ProjectID).Info("adding project to final list")
 		allProjects = append(allProjects, project)
 	}
-	log.Info(allProjects)
 	return allProjects, nil
 }
 
@@ -1091,7 +1201,7 @@ func (r *queryResolver) FindTeam(ctx context.Context, input FindTeam) (*db.Team,
 func (r *queryResolver) Teams(ctx context.Context) ([]db.Team, error) {
 	userID, orgRole, ok := GetUser(ctx)
 	if !ok {
-		log.Error("userID or orgRole does not exist!")
+		logger.New(ctx).Error("userID or org role does not exist")
 		return []db.Team{}, errors.New("internal error")
 	}
 	if orgRole == "admin" {
@@ -1102,7 +1212,7 @@ func (r *queryResolver) Teams(ctx context.Context) ([]db.Team, error) {
 	teams := make(map[string]db.Team)
 	adminTeams, err := r.Repository.GetTeamsForUserIDWhereAdmin(ctx, userID)
 	if err != nil {
-		log.WithError(err).Error("error while getting teams for user ID")
+		logger.New(ctx).WithError(err).Error("error while getting teams for user ID")
 		return []db.Team{}, err
 	}
 
@@ -1112,19 +1222,19 @@ func (r *queryResolver) Teams(ctx context.Context) ([]db.Team, error) {
 
 	visibleProjects, err := r.Repository.GetAllVisibleProjectsForUserID(ctx, userID)
 	if err != nil {
-		log.WithField("userID", userID).WithError(err).Error("error while getting visible projects for user ID")
+		logger.New(ctx).WithError(err).Error("error while getting visible projects for user ID")
 		return []db.Team{}, err
 	}
 	for _, project := range visibleProjects {
-		log.WithFields(log.Fields{"projectID": project.ProjectID.String()}).Info("found visible project")
+		logger.New(ctx).WithField("projectID", project.ProjectID).Info("found visible project")
 		if _, ok := teams[project.ProjectID.String()]; !ok {
-			log.WithFields(log.Fields{"projectID": project.ProjectID.String()}).Info("adding visible project")
+			logger.New(ctx).WithField("projectID", project.ProjectID).Info("adding visible project")
 			team, err := r.Repository.GetTeamByID(ctx, project.TeamID)
 			if err != nil {
 				if err == sql.ErrNoRows {
 					continue
 				}
-				log.WithField("teamID", project.TeamID).WithError(err).Error("error getting team by id")
+				logger.New(ctx).WithField("teamID", project.TeamID).WithError(err).Error("error getting team by id")
 				return []db.Team{}, err
 			}
 			teams[project.TeamID.String()] = team
@@ -1152,7 +1262,7 @@ func (r *queryResolver) Me(ctx context.Context) (*MePayload, error) {
 	}
 	user, err := r.Repository.GetUserAccountByID(ctx, userID)
 	if err == sql.ErrNoRows {
-		log.WithFields(log.Fields{"userID": userID}).Warning("can not find user for me query")
+		logger.New(ctx).Warning("can not find user for me query")
 		return &MePayload{}, nil
 	} else if err != nil {
 		return &MePayload{}, err
@@ -1180,7 +1290,7 @@ func (r *queryResolver) Me(ctx context.Context) (*MePayload, error) {
 
 func (r *queryResolver) Notifications(ctx context.Context) ([]db.Notification, error) {
 	userID, ok := GetUserID(ctx)
-	log.WithFields(log.Fields{"userID": userID}).Info("fetching notifications")
+	logger.New(ctx).Info("fetching notifications")
 	if !ok {
 		return []db.Notification{}, errors.New("user id is missing")
 	}
@@ -1193,6 +1303,64 @@ func (r *queryResolver) Notifications(ctx context.Context) ([]db.Notification, e
 	return notifications, nil
 }
 
+func (r *queryResolver) SearchMembers(ctx context.Context, input MemberSearchFilter) ([]MemberSearchResult, error) {
+	availableMembers, err := r.Repository.GetMemberData(ctx, *input.ProjectID)
+	if err != nil {
+		logger.New(ctx).WithField("projectID", input.ProjectID).WithError(err).Error("error while getting member data")
+		return []MemberSearchResult{}, err
+	}
+
+	invitedMembers, err := r.Repository.GetInvitedMembersForProjectID(ctx, *input.ProjectID)
+	if err != nil {
+		logger.New(ctx).WithField("projectID", input.ProjectID).WithError(err).Error("error while getting member data")
+		return []MemberSearchResult{}, err
+	}
+
+	sortList := []string{}
+	masterList := map[string]MasterEntry{}
+	for _, member := range availableMembers {
+		sortList = append(sortList, member.Username)
+		sortList = append(sortList, member.Email)
+		masterList[member.Username] = MasterEntry{ID: member.UserID, MemberType: MemberTypeJoined}
+		masterList[member.Email] = MasterEntry{ID: member.UserID, MemberType: MemberTypeJoined}
+	}
+	for _, member := range invitedMembers {
+		sortList = append(sortList, member.Email)
+		logger.New(ctx).WithField("Email", member.Email).Info("adding member")
+		masterList[member.Email] = MasterEntry{ID: member.UserAccountInvitedID, MemberType: MemberTypeInvited}
+	}
+
+	logger.New(ctx).WithField("searchFilter", input.SearchFilter).Info(sortList)
+	rankedList := fuzzy.RankFind(input.SearchFilter, sortList)
+	logger.New(ctx).Info(rankedList)
+	results := []MemberSearchResult{}
+	memberList := map[uuid.UUID]bool{}
+	for _, rank := range rankedList {
+		entry, _ := masterList[rank.Target]
+		_, ok := memberList[entry.ID]
+		logger.New(ctx).WithField("ok", ok).WithField("target", rank.Target).Info("checking rank")
+		if !ok {
+			if entry.MemberType == MemberTypeJoined {
+				logger.New(ctx).WithFields(log.Fields{"source": rank.Source, "target": rank.Target}).Info("searching")
+				entry := masterList[rank.Target]
+				user, err := r.Repository.GetUserAccountByID(ctx, entry.ID)
+				if err != nil {
+					if err == sql.ErrNoRows {
+						continue
+					}
+					return []MemberSearchResult{}, err
+				}
+				results = append(results, MemberSearchResult{ID: user.UserID.String(), User: &user, Status: ShareStatusJoined, Similarity: rank.Distance})
+			} else {
+				logger.New(ctx).WithField("id", rank.Target).Info("adding target")
+				results = append(results, MemberSearchResult{ID: rank.Target, Status: ShareStatusInvited, Similarity: rank.Distance})
+			}
+			memberList[entry.ID] = true
+		}
+	}
+	return results, nil
+}
+
 func (r *refreshTokenResolver) ID(ctx context.Context, obj *db.RefreshToken) (uuid.UUID, error) {
 	return obj.TokenID, nil
 }
@@ -1257,7 +1425,7 @@ func (r *taskResolver) Assigned(ctx context.Context, obj *db.Task) ([]Member, er
 			if err == sql.ErrNoRows {
 				role = db.Role{Code: "owner", Name: "Owner"}
 			} else {
-				log.WithFields(log.Fields{"userID": user.UserID}).WithError(err).Error("get role for project member")
+				logger.New(ctx).WithError(err).Error("get role for project member")
 				return taskMembers, err
 			}
 		}
@@ -1351,14 +1519,14 @@ func (r *teamResolver) Members(ctx context.Context, obj *db.Team) ([]Member, err
 
 	teamMembers, err := r.Repository.GetTeamMembersForTeamID(ctx, obj.TeamID)
 	if err != nil {
-		log.WithError(err).Error("get project members for project id")
+		logger.New(ctx).Error("get project members for project id")
 		return members, err
 	}
 
 	for _, teamMember := range teamMembers {
 		user, err := r.Repository.GetUserAccountByID(ctx, teamMember.UserID)
 		if err != nil {
-			log.WithError(err).Error("get user account by ID")
+			logger.New(ctx).WithError(err).Error("get user account by ID")
 			return members, err
 		}
 		var url *string
@@ -1367,7 +1535,7 @@ func (r *teamResolver) Members(ctx context.Context, obj *db.Team) ([]Member, err
 		}
 		role, err := r.Repository.GetRoleForTeamMember(ctx, db.GetRoleForTeamMemberParams{UserID: user.UserID, TeamID: obj.TeamID})
 		if err != nil {
-			log.WithError(err).Error("get role for projet member by user ID")
+			logger.New(ctx).WithError(err).Error("get role for projet member by user ID")
 			return members, err
 		}
 
@@ -1395,8 +1563,7 @@ func (r *userAccountResolver) ID(ctx context.Context, obj *db.UserAccount) (uuid
 func (r *userAccountResolver) Role(ctx context.Context, obj *db.UserAccount) (*db.Role, error) {
 	role, err := r.Repository.GetRoleForUserID(ctx, obj.UserID)
 	if err != nil {
-		log.Info("beep!")
-		log.WithError(err).Error("get role for user id")
+		logger.New(ctx).WithError(err).Error("get role for user id")
 		return &db.Role{}, err
 	}
 	return &db.Role{Code: role.Code, Name: role.Name}, nil
@@ -1475,9 +1642,7 @@ func (r *Resolver) Task() TaskResolver { return &taskResolver{r} }
 func (r *Resolver) TaskChecklist() TaskChecklistResolver { return &taskChecklistResolver{r} }
 
 // TaskChecklistItem returns TaskChecklistItemResolver implementation.
-func (r *Resolver) TaskChecklistItem() TaskChecklistItemResolver {
-	return &taskChecklistItemResolver{r}
-}
+func (r *Resolver) TaskChecklistItem() TaskChecklistItemResolver { return &taskChecklistItemResolver{r} }
 
 // TaskGroup returns TaskGroupResolver implementation.
 func (r *Resolver) TaskGroup() TaskGroupResolver { return &taskGroupResolver{r} }
@@ -1506,3 +1671,21 @@ type taskGroupResolver struct{ *Resolver }
 type taskLabelResolver struct{ *Resolver }
 type teamResolver struct{ *Resolver }
 type userAccountResolver struct{ *Resolver }
+
+// !!! WARNING !!!
+// The code below was going to be deleted when updating resolvers. It has been copied here so you have
+// one last chance to move it out of harms way if you want. There are two reasons this happens:
+//  - When renaming or deleting a resolver the old code will be put in here. You can safely delete
+//    it when you're done.
+//  - You have helper methods in this file. Move them out to keep these resolver files clean.
+type MemberType string
+
+const (
+	MemberTypeInvited MemberType = "INVITED"
+	MemberTypeJoined  MemberType = "JOINED"
+)
+
+type MasterEntry struct {
+	MemberType MemberType
+	ID         uuid.UUID
+}

internal/graph/schema/_models.gql

@@ -86,6 +86,13 @@ type UserAccount {
   member: MemberList!
 }
 
+type InvitedUserAccount {
+  id: ID!
+  email: String!
+  invitedOn: Time!
+  member: MemberList!
+}
+
 type Team {
   id: ID!
   createdAt: Time!
@@ -93,6 +100,12 @@ type Team {
   members: [Member!]!
 }
 
+
+type InvitedMember {
+  email: String!
+  invitedOn: Time!
+}
+
 type Project {
   id: ID!
   createdAt: Time!
@@ -100,6 +113,7 @@ type Project {
   team: Team
   taskGroups: [TaskGroup!]!
   members: [Member!]!
+  invitedMembers: [InvitedMember!]!
   labels: [ProjectLabel!]!
 }
 

internal/graph/schema/_root.gql

@@ -1,3 +1,8 @@
+enum ShareStatus {
+  INVITED
+  JOINED
+}
+
 enum RoleLevel {
   ADMIN
   MEMBER
@@ -24,6 +29,7 @@ directive @hasRole(roles: [RoleLevel!]!, level: ActionLevel!, type: ObjectType!)
 type Query {
   organizations: [Organization!]!
   users: [UserAccount!]!
+  invitedUsers: [InvitedUserAccount!]!
   findUser(input: FindUser!): UserAccount!
   findProject(input: FindProject!):
     Project! @hasRole(roles: [ADMIN, MEMBER], level: PROJECT, type: PROJECT)

internal/graph/schema/project_member.gql

@@ -1,20 +1,39 @@
 extend type Mutation {
-  createProjectMember(input: CreateProjectMember!):
-    CreateProjectMemberPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+  inviteProjectMembers(input: InviteProjectMembers!):
+    InviteProjectMembersPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
   deleteProjectMember(input: DeleteProjectMember!):
     DeleteProjectMemberPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
   updateProjectMemberRole(input: UpdateProjectMemberRole!):
     UpdateProjectMemberRolePayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
+
+deleteInvitedProjectMember(input: DeleteInvitedProjectMember!):
+  DeleteInvitedProjectMemberPayload! @hasRole(roles: [ADMIN], level: PROJECT, type: PROJECT)
 }
 
-input CreateProjectMember {
+input DeleteInvitedProjectMember {
   projectID: UUID!
-  userID: UUID!
+  email: String!
 }
 
-type CreateProjectMemberPayload {
+type DeleteInvitedProjectMemberPayload {
+  invitedMember: InvitedMember!
+}
+
+input MemberInvite {
+  userID: UUID
+  email: String
+}
+
+input InviteProjectMembers {
+  projectID: UUID!
+  members: [MemberInvite!]!
+}
+
+type InviteProjectMembersPayload {
   ok: Boolean!
-  member: Member!
+  projectID: UUID!
+  members: [Member!]!
+  invitedMembers: [InvitedMember!]!
 }
 
 input DeleteProjectMember {

internal/graph/schema/user.gql

@@ -4,6 +4,8 @@ extend type Mutation {
     UserAccount! @hasRole(roles: [ADMIN], level: ORG, type: ORG)
   deleteUserAccount(input: DeleteUserAccount!):
     DeleteUserAccountPayload! @hasRole(roles: [ADMIN], level: ORG, type: ORG)
+  deleteInvitedUserAccount(input: DeleteInvitedUserAccount!):
+    DeleteInvitedUserAccountPayload! @hasRole(roles: [ADMIN], level: ORG, type: ORG)
 
   logoutUser(input: LogoutUser!): Boolean!
   clearProfileAvatar:  UserAccount!
@@ -15,6 +17,31 @@ extend type Mutation {
     UpdateUserInfoPayload! @hasRole(roles: [ADMIN], level: ORG, type: ORG)
 }
 
+extend type Query {
+  searchMembers(input: MemberSearchFilter!): [MemberSearchResult!]!
+}
+
+input DeleteInvitedUserAccount {
+  invitedUserID: UUID!
+}
+
+type DeleteInvitedUserAccountPayload {
+  invitedUser: InvitedUserAccount!
+}
+
+input MemberSearchFilter {
+  searchFilter: String!
+  projectID: UUID
+}
+
+
+type MemberSearchResult {
+  similarity: Int!
+  id: String!
+  user: UserAccount
+  status: ShareStatus!
+}
+
 type UpdateUserInfoPayload {
   user: UserAccount!
 }

internal/logger/logger.go

@@ -1,89 +1,21 @@
 package logger
 
 import (
-	"fmt"
-	"net/http"
-	"time"
+	"context"
 
-	"github.com/go-chi/chi/middleware"
-	"github.com/sirupsen/logrus"
+	"github.com/google/uuid"
+	"github.com/jordanknott/taskcafe/internal/utils"
+	log "github.com/sirupsen/logrus"
 )
 
-// NewStructuredLogger creates a new logger for chi router
-func NewStructuredLogger(logger *logrus.Logger) func(next http.Handler) http.Handler {
-	return middleware.RequestLogger(&StructuredLogger{logger})
-}
-
-// StructuredLogger is a logger for chi router
-type StructuredLogger struct {
-	Logger *logrus.Logger
-}
-
-// NewLogEntry creates a new log entry for the given HTTP request
-func (l *StructuredLogger) NewLogEntry(r *http.Request) middleware.LogEntry {
-	entry := &StructuredLoggerEntry{Logger: logrus.NewEntry(l.Logger)}
-	logFields := logrus.Fields{}
-
-	if reqID := middleware.GetReqID(r.Context()); reqID != "" {
-		logFields["req_id"] = reqID
+// New returns a log entry with the reqID and userID fields populated if they exist
+func New(ctx context.Context) *log.Entry {
+	entry := log.NewEntry(log.StandardLogger())
+	if reqID, ok := ctx.Value(utils.ReqIDKey).(uuid.UUID); ok {
+		entry = entry.WithField("reqID", reqID)
 	}
-
-	scheme := "http"
-	if r.TLS != nil {
-		scheme = "https"
+	if userID, ok := ctx.Value(utils.UserIDKey).(uuid.UUID); ok {
+		entry = entry.WithField("userID", userID)
 	}
-	logFields["http_scheme"] = scheme
-	logFields["http_proto"] = r.Proto
-	logFields["http_method"] = r.Method
-
-	logFields["remote_addr"] = r.RemoteAddr
-	logFields["user_agent"] = r.UserAgent()
-
-	logFields["uri"] = fmt.Sprintf("%s://%s%s", scheme, r.Host, r.RequestURI)
-
-	entry.Logger = entry.Logger.WithFields(logFields)
-
 	return entry
 }
-
-// StructuredLoggerEntry is a log entry will all relevant information about a specific http request
-type StructuredLoggerEntry struct {
-	Logger logrus.FieldLogger
-}
-
-// Write logs information about http request response body
-func (l *StructuredLoggerEntry) Write(status, bytes int, elapsed time.Duration) {
-	l.Logger = l.Logger.WithFields(logrus.Fields{
-		"resp_status": status, "resp_bytes_length": bytes,
-		"resp_elapsed_ms": float64(elapsed.Nanoseconds()) / 1000000.0,
-	})
-	l.Logger.Debugln("request complete")
-}
-
-// Panic logs if the request panics
-func (l *StructuredLoggerEntry) Panic(v interface{}, stack []byte) {
-	l.Logger = l.Logger.WithFields(logrus.Fields{
-		"stack": string(stack),
-		"panic": fmt.Sprintf("%+v", v),
-	})
-}
-
-// GetLogEntry helper function for getting log entry for request
-func GetLogEntry(r *http.Request) logrus.FieldLogger {
-	entry := middleware.GetLogEntry(r).(*StructuredLoggerEntry)
-	return entry.Logger
-}
-
-// LogEntrySetField sets a key's value
-func LogEntrySetField(r *http.Request, key string, value interface{}) {
-	if entry, ok := r.Context().Value(middleware.LogEntryCtxKey).(*StructuredLoggerEntry); ok {
-		entry.Logger = entry.Logger.WithField(key, value)
-	}
-}
-
-// LogEntrySetFields sets the log entry's fields
-func LogEntrySetFields(r *http.Request, fields map[string]interface{}) {
-	if entry, ok := r.Context().Value(middleware.LogEntryCtxKey).(*StructuredLoggerEntry); ok {
-		entry.Logger = entry.Logger.WithFields(fields)
-	}
-}

internal/logger/route_logger.go

@@ -0,0 +1,89 @@
+package logger
+
+import (
+	"fmt"
+	"net/http"
+	"time"
+
+	"github.com/go-chi/chi/middleware"
+	"github.com/sirupsen/logrus"
+)
+
+// NewStructuredLogger creates a new logger for chi router
+func NewStructuredLogger(logger *logrus.Logger) func(next http.Handler) http.Handler {
+	return middleware.RequestLogger(&StructuredLogger{logger})
+}
+
+// StructuredLogger is a logger for chi router
+type StructuredLogger struct {
+	Logger *logrus.Logger
+}
+
+// NewLogEntry creates a new log entry for the given HTTP request
+func (l *StructuredLogger) NewLogEntry(r *http.Request) middleware.LogEntry {
+	entry := &StructuredLoggerEntry{Logger: logrus.NewEntry(l.Logger)}
+	logFields := logrus.Fields{}
+
+	if reqID := middleware.GetReqID(r.Context()); reqID != "" {
+		logFields["req_id"] = reqID
+	}
+
+	scheme := "http"
+	if r.TLS != nil {
+		scheme = "https"
+	}
+	logFields["http_scheme"] = scheme
+	logFields["http_proto"] = r.Proto
+	logFields["http_method"] = r.Method
+
+	logFields["remote_addr"] = r.RemoteAddr
+	logFields["user_agent"] = r.UserAgent()
+
+	logFields["uri"] = fmt.Sprintf("%s://%s%s", scheme, r.Host, r.RequestURI)
+
+	entry.Logger = entry.Logger.WithFields(logFields)
+
+	return entry
+}
+
+// StructuredLoggerEntry is a log entry will all relevant information about a specific http request
+type StructuredLoggerEntry struct {
+	Logger logrus.FieldLogger
+}
+
+// Write logs information about http request response body
+func (l *StructuredLoggerEntry) Write(status, bytes int, elapsed time.Duration) {
+	l.Logger = l.Logger.WithFields(logrus.Fields{
+		"resp_status": status, "resp_bytes_length": bytes,
+		"resp_elapsed_ms": float64(elapsed.Nanoseconds()) / 1000000.0,
+	})
+	l.Logger.Debugln("request complete")
+}
+
+// Panic logs if the request panics
+func (l *StructuredLoggerEntry) Panic(v interface{}, stack []byte) {
+	l.Logger = l.Logger.WithFields(logrus.Fields{
+		"stack": string(stack),
+		"panic": fmt.Sprintf("%+v", v),
+	})
+}
+
+// GetLogEntry helper function for getting log entry for request
+func GetLogEntry(r *http.Request) logrus.FieldLogger {
+	entry := middleware.GetLogEntry(r).(*StructuredLoggerEntry)
+	return entry.Logger
+}
+
+// LogEntrySetField sets a key's value
+func LogEntrySetField(r *http.Request, key string, value interface{}) {
+	if entry, ok := r.Context().Value(middleware.LogEntryCtxKey).(*StructuredLoggerEntry); ok {
+		entry.Logger = entry.Logger.WithField(key, value)
+	}
+}
+
+// LogEntrySetFields sets the log entry's fields
+func LogEntrySetFields(r *http.Request, fields map[string]interface{}) {
+	if entry, ok := r.Context().Value(middleware.LogEntryCtxKey).(*StructuredLoggerEntry); ok {
+		entry.Logger = entry.Logger.WithFields(fields)
+	}
+}

internal/route/middleware.go

@@ -19,6 +19,7 @@ type AuthenticationMiddleware struct {
 // Middleware returns the middleware handler
 func (m *AuthenticationMiddleware) Middleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		requestID := uuid.New()
 		bearerTokenRaw := r.Header.Get("Authorization")
 		splitToken := strings.Split(bearerTokenRaw, "Bearer")
 		if len(splitToken) != 2 {
@@ -61,6 +62,7 @@ func (m *AuthenticationMiddleware) Middleware(next http.Handler) http.Handler {
 		ctx := context.WithValue(r.Context(), utils.UserIDKey, userID)
 		ctx = context.WithValue(ctx, utils.RestrictedModeKey, accessClaims.Restricted)
 		ctx = context.WithValue(ctx, utils.OrgRoleKey, accessClaims.OrgRole)
+		ctx = context.WithValue(ctx, utils.ReqIDKey, requestID)
 
 		next.ServeHTTP(w, r.WithContext(ctx))
 	})

internal/utils/context.go

@@ -6,6 +6,8 @@ type ContextKey string
 const (
 	// UserIDKey is the key for the user id of the authenticated user
 	UserIDKey ContextKey = "userID"
+	// ReqIDKey is the unique ID key for current request
+	ReqIDKey ContextKey = "reqID"
 	//RestrictedModeKey is the key for whether the authenticated user only has access to install route
 	RestrictedModeKey ContextKey = "restricted_mode"
 	// OrgRoleKey is the key for the organization role code of the authenticated user

migrations/0056_add-user_account_invited-table.up.sql

@@ -0,0 +1,6 @@
+CREATE TABLE user_account_invited (
+  user_account_invited_id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
+  email text NOT NULL UNIQUE,
+  invited_on timestamptz NOT NULL DEFAULT NOW(),
+  has_joined boolean NOT NULL DEFAULT false
+);

migrations/0057_add-project_member_invited-table.up.sql

@@ -0,0 +1,7 @@
+CREATE TABLE project_member_invited (
+  project_member_invited_id uuid PRIMARY KEY DEFAULT uuid_generate_v4(),
+  project_id uuid NOT NULL
+    REFERENCES project(project_id) ON DELETE CASCADE,
+  user_account_invited_id uuid NOT NULL
+    REFERENCES user_account_invited(user_account_invited_id) ON DELETE CASCADE
+);