From 99ac5f8846eb15ec282a76a5c45ede7f8148e8ab Mon Sep 17 00:00:00 2001
From: Tony Vi <winogradovaa@gmail.com>
Date: Thu, 12 Jan 2023 20:51:06 +0300
Subject: [PATCH] feat: global create button

---
 i18n/en.json                       |   8 ++-
 i18n/ru.json                       |  11 +--
 src/components/Dropdown.tsx        |   2 +-
 src/components/Header.tsx          |  69 ++++++++++++++++++-
 src/components/HeaderMenu.tsx      | 104 +----------------------------
 src/pages/goals/[id].tsx           |  10 ---
 src/pages/goals/index.tsx          |  11 +--
 src/pages/projects/[key]/index.tsx |  10 +--
 src/pages/teams/[slug]/goals.tsx   |  11 +--
 src/pages/users/settings.tsx       |  13 ++++
 10 files changed, 101 insertions(+), 148 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index 033dbf8dc..5543d5cc0 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -116,6 +116,8 @@
             "Name": "Name",
             "Nickname": "Nickname",
             "Appearance": "Appearance",
+            "Danger zone": "Danger zone",
+            "Sign out": "Sign out",
             "User name is required": "User name is required",
             "User name must be a string": "User name must be a string",
             "User name must be longer than 3 symbols": "User name must be longer than 3 symbol",
@@ -252,7 +254,11 @@
         "Goals": "Goals",
         "Issues": "Issues",
         "Explore": "Explore",
-        "Boards": "Boards"
+        "Boards": "Boards",
+        "Create": "Create",
+        "Create goal": "Goal",
+        "Create project": "Project",
+        "Create team": "Team"
     },
     "HeaderMenu": {
         "New goal": "New goal",
diff --git a/i18n/ru.json b/i18n/ru.json
index 0ff7017a5..f8da63206 100644
--- a/i18n/ru.json
+++ b/i18n/ru.json
@@ -116,6 +116,8 @@
             "Name": "Имя",
             "Nickname": "Логин",
             "Appearance": "Интерфейс",
+            "Danger zone": "Опасная зона",
+            "Sign out": "Выйти",
             "User name is required": "Указание имени обязательно",
             "User name must be a string": "Имя должно быть строкой",
             "User name must be longer than 3 symbols": "Имя не может быть короче 3х символов",
@@ -252,12 +254,13 @@
         "Goals": "Цели",
         "Issues": "Задачи",
         "Explore": "Обзор",
-        "Boards": "Доски"
+        "Boards": "Доски",
+        "Create": "Создать",
+        "Create goal": "Цель",
+        "Create project": "Проект",
+        "Create team": "Команду"
     },
     "HeaderMenu": {
-        "New goal": "Новая цель",
-        "New project": "Новый проект",
-        "Invite users": "Пригласить",
         "Sign out": "Выйти"
     },
     "TagCompletion": {
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 6ed0a1e4b..4ed346aa0 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -151,7 +151,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
                     reference={popupRef}
                     interactive
                     arrow={false}
-                    minWidth={150}
+                    minWidth={100}
                     maxWidth={250}
                     offset={[-4, 8]}
                 >
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 44c55f333..7bf037ac9 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,17 +1,24 @@
+import { useCallback } from 'react';
 import NextLink from 'next/link';
 import styled from 'styled-components';
 import { useTranslations } from 'next-intl';
+import dynamic from 'next/dynamic';
 
 import { routes } from '../hooks/router';
 import { textColor, gray7, colorPrimary, gray3 } from '../design/@generated/themes';
+import { dispatchModalEvent, ModalEvent } from '../utils/dispatchModal';
 
 import { HeaderLogo } from './HeaderLogo';
 import { HeaderMenu } from './HeaderMenu';
 import { Icon } from './Icon';
+import { Button } from './Button';
+import { MenuItem } from './MenuItem';
+
+const Dropdown = dynamic(() => import('./Dropdown'));
 
 const StyledHeader = styled.header`
     display: grid;
-    grid-template-columns: 20px 11fr 100px;
+    grid-template-columns: 20px 10fr 150px 55px;
     align-items: center;
     padding: 20px 40px;
 
@@ -59,9 +66,18 @@ const StyledHeaderNavLink = styled.a<{ disabled?: boolean }>`
     }
 `;
 
+const StyledCreateButton = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
 export const Header: React.FC = () => {
     const t = useTranslations('Header');
 
+    const onMenuItemClick = useCallback(({ event }: { event: ModalEvent }) => {
+        dispatchModalEvent(event)();
+    }, []);
+
     return (
         <StyledHeader>
             <HeaderLogo />
@@ -81,7 +97,56 @@ export const Header: React.FC = () => {
                 </StyledSearch>
             </StyledNav>
 
-            <HeaderMenu notifications />
+            <StyledCreateButton>
+                <Button
+                    text={t('Create')}
+                    view="primary"
+                    outline
+                    brick="right"
+                    onClick={dispatchModalEvent(ModalEvent.GoalCreateModal)}
+                />
+                <Dropdown
+                    onChange={onMenuItemClick}
+                    items={[
+                        {
+                            title: t('Create goal'),
+                            event: ModalEvent.GoalCreateModal,
+                        },
+                        {
+                            title: t('Create project'),
+                            event: ModalEvent.ProjectCreateModal,
+                        },
+                        {
+                            title: t('Create team'),
+                            event: ModalEvent.TeamCreateModal,
+                        },
+                    ]}
+                    renderTrigger={(props) => (
+                        <Button
+                            view="primary"
+                            outline
+                            brick="left"
+                            iconRight={
+                                <Icon size="s" noWrap type={props.visible ? 'arrowUpSmall' : 'arrowDownSmall'} />
+                            }
+                            ref={props.ref}
+                            onClick={props.onClick}
+                        />
+                    )}
+                    renderItem={(props) => (
+                        <MenuItem
+                            key={props.item.title}
+                            focused={props.cursor === props.index}
+                            onClick={props.onClick}
+                            view="primary"
+                            ghost
+                        >
+                            {props.item.title}
+                        </MenuItem>
+                    )}
+                />
+            </StyledCreateButton>
+            <HeaderMenu />
         </StyledHeader>
     );
 };
diff --git a/src/components/HeaderMenu.tsx b/src/components/HeaderMenu.tsx
index 4e3bb0630..91dbf7630 100644
--- a/src/components/HeaderMenu.tsx
+++ b/src/components/HeaderMenu.tsx
@@ -1,21 +1,15 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
-import { signOut, signIn } from 'next-auth/react';
-import { useTranslations } from 'next-intl';
+import { signIn } from 'next-auth/react';
 import NextLink from 'next/link';
-import dynamic from 'next/dynamic';
 
 import { nullable } from '../utils/nullable';
-import { dispatchModalEvent, ModalEvent } from '../utils/dispatchModal';
 import { routes } from '../hooks/router';
-import { backgroundColor, brandColor, gapM, gray3, textColor, gray8, gapXs, link10 } from '../design/@generated/themes';
+import { gray3, textColor, link10 } from '../design/@generated/themes';
 import { usePageContext } from '../hooks/usePageContext';
 
 import { UserPic } from './UserPic';
 import { Link } from './Link';
-import { Text } from './Text';
-
-const Popup = dynamic(() => import('./Popup'));
 
 interface HeaderMenuProps {
     notifications?: boolean;
@@ -26,42 +20,6 @@ const StyledHeaderMenu = styled.div`
     justify-self: end;
 `;
 
-const StyledPopupContent = styled.div`
-    min-width: 120px;
-`;
-
-const StyledPlus = styled.div`
-    position: absolute;
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    top: 14px;
-    left: -10px;
-    box-sizing: border-box;
-    width: 18px;
-    height: 18px;
-
-    font-size: 14px;
-    font-weight: 400;
-
-    box-shadow: 0 0 0 2px ${gray3};
-    color: ${backgroundColor};
-    background-color: ${brandColor};
-
-    border-radius: 100%;
-
-    cursor: pointer;
-    user-select: none;
-
-    transition: box-shadow 150ms ease-in-out;
-
-    &:hover {
-        font-weight: 600;
-
-        box-shadow: 0px 0px 0px 2px ${brandColor}, 1px 1px 2px 0px ${textColor};
-    }
-`;
-
 const StyledNotifier = styled.div`
     position: absolute;
     top: 0px;
@@ -83,67 +41,11 @@ const StyledNotifier = styled.div`
     }
 `;
 
-const StyledMenuItem = styled.div`
-    padding: ${gapXs} ${gapM};
-`;
-
 export const HeaderMenu = ({ notifications }: HeaderMenuProps) => {
-    const t = useTranslations('HeaderMenu');
-    const popupRef = useRef<HTMLDivElement>(null);
-    const buttonRef = useRef<HTMLDivElement>(null);
-    const [popupVisible, setPopupVisibility] = useState(false);
     const { user } = usePageContext();
 
-    const onClickOutside = useCallback(() => {
-        setPopupVisibility(false);
-    }, []);
-
-    const togglePopup = useCallback(() => {
-        setPopupVisibility(!popupVisible);
-    }, [popupVisible]);
-
     return (
         <StyledHeaderMenu>
-            <span ref={popupRef}>
-                <StyledPlus ref={buttonRef} onClick={togglePopup}>
-                    +
-                </StyledPlus>
-            </span>
-
-            <Popup
-                visible={popupVisible}
-                onClickOutside={onClickOutside}
-                reference={popupRef}
-                interactive
-                minWidth={150}
-                maxWidth={250}
-            >
-                <StyledPopupContent>
-                    <StyledMenuItem>
-                        <Link inline onClick={dispatchModalEvent(ModalEvent.GoalCreateModal)}>
-                            {t('New goal')}
-                        </Link>
-                    </StyledMenuItem>
-                    <StyledMenuItem>
-                        <Link inline onClick={dispatchModalEvent(ModalEvent.ProjectCreateModal)}>
-                            {t('New project')}
-                        </Link>
-                    </StyledMenuItem>
-                    <StyledMenuItem>
-                        <Link inline onClick={dispatchModalEvent(ModalEvent.UserInviteModal)}>
-                            {t('Invite users')}
-                        </Link>
-                    </StyledMenuItem>
-                    <StyledMenuItem>
-                        <Text color={gray8}>
-                            <Link inline onClick={() => signOut()}>
-                                {t('Sign out')}
-                            </Link>
-                        </Text>
-                    </StyledMenuItem>
-                </StyledPopupContent>
-            </Popup>
-
             {nullable(notifications, () => (
                 <StyledNotifier />
             ))}
diff --git a/src/pages/goals/[id].tsx b/src/pages/goals/[id].tsx
index 4f9cdbcb7..57d313f16 100644
--- a/src/pages/goals/[id].tsx
+++ b/src/pages/goals/[id].tsx
@@ -75,8 +75,6 @@ const StyledIssueInfo = styled.div<{ align: 'left' | 'right' }>`
         `}
 `;
 
-const StyledIssueInfoRow = styled.div``;
-
 const IssueBaseActions = styled.div`
     display: flex;
     align-items: center;
@@ -267,14 +265,6 @@ const GoalPage = ({
                             onToggle={toggleGoalStar(onStarToggle, t, stargizer)}
                         />
                     </PageActions>
-
-                    <StyledIssueInfoRow>
-                        <Button
-                            view="primary"
-                            text={t('New goal')}
-                            onClick={dispatchModalEvent(ModalEvent.GoalCreateModal)}
-                        />
-                    </StyledIssueInfoRow>
                 </StyledIssueInfo>
             </IssueHeader>
 
diff --git a/src/pages/goals/index.tsx b/src/pages/goals/index.tsx
index 05c985e99..9957cb410 100644
--- a/src/pages/goals/index.tsx
+++ b/src/pages/goals/index.tsx
@@ -5,7 +5,6 @@ import styled from 'styled-components';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
 
-import { dispatchModalEvent, ModalEvent } from '../../utils/dispatchModal';
 import { Goal, Project } from '../../../graphql/@generated/genql';
 import { createFetcher } from '../../utils/createFetcher';
 import { declareSsrProps, ExternalPageProps } from '../../utils/declareSsrProps';
@@ -18,7 +17,6 @@ import { useMounted } from '../../hooks/useMounted';
 import { useUrlParams } from '../../hooks/useUrlParams';
 import { Text } from '../../components/Text';
 import { PageSep } from '../../components/PageSep';
-import { Button } from '../../components/Button';
 import { defaultLimit } from '../../components/LimitFilterDropdown';
 
 const GoalPreview = dynamic(() => import('../../components/GoalPreview'));
@@ -214,14 +212,7 @@ const GoalsPage = ({ user, ssrTime, locale, ssrData }: ExternalPageProps<{ userG
                 onUserChange={setOwnerFilter}
                 onTagChange={setTagsFilter}
                 onLimitChange={setLimitFilter}
-            >
-                <Button
-                    view="primary"
-                    size="m"
-                    text={t('New goal')}
-                    onClick={dispatchModalEvent(ModalEvent.GoalCreateModal)}
-                />
-            </FiltersPanel>
+            />
 
             <PageContent>
                 {projects?.map((project) => {
diff --git a/src/pages/projects/[key]/index.tsx b/src/pages/projects/[key]/index.tsx
index 57462ee7a..c2430760e 100644
--- a/src/pages/projects/[key]/index.tsx
+++ b/src/pages/projects/[key]/index.tsx
@@ -17,7 +17,6 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
 import { useLocalStorage } from '../../../hooks/useLocalStorage';
 import { useWillUnmount } from '../../../hooks/useWillUnmount';
 import { ProjectPageLayout } from '../../../components/ProjectPageLayout';
-import { dispatchModalEvent, ModalEvent } from '../../../utils/dispatchModal';
 import { Page } from '../../../components/Page';
 
 const GoalPreview = dynamic(() => import('../../../components/GoalPreview'));
@@ -298,14 +297,7 @@ const ProjectPage = ({
                     onUserChange={setOwnerFilter}
                     onTagChange={setTagsFilter}
                     onLimitChange={setLimitFilter}
-                >
-                    <Button
-                        view="primary"
-                        size="m"
-                        text={t('index.New goal')}
-                        onClick={dispatchModalEvent(ModalEvent.GoalCreateModal)}
-                    />
-                </FiltersPanel>
+                />
 
                 <StyledGoalsList>
                     {goals?.map((goal) =>
diff --git a/src/pages/teams/[slug]/goals.tsx b/src/pages/teams/[slug]/goals.tsx
index d97b21c42..295e0c639 100644
--- a/src/pages/teams/[slug]/goals.tsx
+++ b/src/pages/teams/[slug]/goals.tsx
@@ -7,7 +7,6 @@ import { useRouter } from 'next/router';
 
 import { createFetcher } from '../../../utils/createFetcher';
 import { Goal, Project, Team } from '../../../../graphql/@generated/genql';
-import { Button } from '../../../components/Button';
 import { GoalListItem } from '../../../components/GoalListItem';
 import { declareSsrProps, ExternalPageProps } from '../../../utils/declareSsrProps';
 import { nullable } from '../../../utils/nullable';
@@ -15,7 +14,6 @@ import { FiltersPanel } from '../../../components/FiltersPanel';
 import { defaultLimit } from '../../../components/LimitFilterDropdown';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { TeamPageLayout } from '../../../components/TeamPageLayout';
-import { dispatchModalEvent, ModalEvent } from '../../../utils/dispatchModal';
 import { Page, PageContent } from '../../../components/Page';
 import { Text } from '../../../components/Text';
 import { PageSep } from '../../../components/PageSep';
@@ -285,14 +283,7 @@ const TeamGoalsPage = ({
                     onUserChange={setOwnerFilter}
                     onTagChange={setTagsFilter}
                     onLimitChange={setLimitFilter}
-                >
-                    <Button
-                        view="primary"
-                        size="m"
-                        text={t('New goal')}
-                        onClick={dispatchModalEvent(ModalEvent.GoalCreateModal)}
-                    />
-                </FiltersPanel>
+                />
 
                 <PageContent>
                     {projects?.map((project) => {
diff --git a/src/pages/users/settings.tsx b/src/pages/users/settings.tsx
index 308fe99e9..6889a9c77 100644
--- a/src/pages/users/settings.tsx
+++ b/src/pages/users/settings.tsx
@@ -6,6 +6,7 @@ import z from 'zod';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 import { useTheme } from 'next-themes';
+import { signOut } from 'next-auth/react';
 
 import { gql } from '../../utils/gql';
 import { shallowEqual } from '../../utils/shallowEqual';
@@ -238,6 +239,18 @@ const UserSettingsPage = ({ user, locale, ssrTime, ssrData }: ExternalPageProps<
                     </Form>
                 </SettingsCard>
 
+                <SettingsCard view="warning">
+                    <Form>
+                        <Fieldset title={t('Danger zone')} view="warning">
+                            <FormActions>
+                                <FormAction left>
+                                    <Button view="warning" text={t('Sign out')} onClick={() => signOut()} />
+                                </FormAction>
+                            </FormActions>
+                        </Fieldset>
+                    </Form>
+                </SettingsCard>
+
                 <Tip title={t('Pro tip!')} icon={<Icon type="bulbOn" size="s" color={star10} />}>
                     {t.rich('Press key to save settings', {
                         key: () => <Keyboard command enter />,