Add new button back

components/Header/index.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import { subscribe, useSnapshot } from 'valtio'
-import { subscribeKey } from 'valtio/utils'
 import { deleteCookie } from 'cookies-next'
 import { useRouter } from 'next/router'
 import { Trans, useTranslation } from 'next-i18next'
@@ -31,6 +30,7 @@ import ArrowIcon from '~public/icons/Arrow.svg'
 import LinkIcon from '~public/icons/Link.svg'
 import MenuIcon from '~public/icons/Menu.svg'
 import RemixIcon from '~public/icons/Remix.svg'
+import PlusIcon from '~public/icons/Add.svg'
 import SaveIcon from '~public/icons/Save.svg'
 
 import './index.scss'
@@ -114,19 +114,9 @@ const Header = () => {
   }
 
   // Methods: Actions
-  function handleNewParty(event: React.MouseEvent, path: string) {
+  function handleNewTeam(event: React.MouseEvent) {
     event.preventDefault()
-
+    newTeam()
-    // Clean state
-    const resetState = clonedeep(initialAppState)
-    Object.keys(resetState).forEach((key) => {
-      appState[key] = resetState[key]
-    })
-
-    // Push the root URL
-    router.push(path)
-
-    // Close right menu
     closeRightMenu()
   }
 
@@ -165,6 +155,17 @@ const Header = () => {
     return false
   }
 
+  function newTeam() {
+    // Clean state
+    const resetState = clonedeep(initialAppState)
+    Object.keys(resetState).forEach((key) => {
+      appState[key] = resetState[key]
+    })
+
+    // Push the root URL
+    router.push('/new')
+  }
+
   function remixTeam() {
     setOriginalName(partySnapshot.name ? partySnapshot.name : t('no_title'))
 
@@ -281,6 +282,20 @@ const Header = () => {
     )
   }
 
+  const newButton = () => {
+    return (
+      <Tooltip content={t('tooltips.new')}>
+        <Button
+          leftAccessoryIcon={<PlusIcon />}
+          className="New"
+          blended={true}
+          text={t('buttons.new')}
+          onClick={newTeam}
+        />
+      </Tooltip>
+    )
+  }
+
   const remixButton = () => {
     return (
       <Tooltip content={t('tooltips.remix')}>
@@ -396,6 +411,7 @@ const Header = () => {
         {router.route === '/p/[party]' && !appState.errorCode
           ? remixButton()
           : ''}
+        {newButton()}
         <DropdownMenu
           open={rightMenuOpen}
           onOpenChange={handleRightMenuOpenChange}
@@ -483,13 +499,6 @@ const Header = () => {
             <DropdownMenuLabel className="MenuLabel">
               {account.user ? `@${account.user.username}` : t('no_user')}
             </DropdownMenuLabel>
-            <DropdownMenuItem className="MenuItem">
-              <Link href="/new">
-                <a onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}>
-                  {t('menu.new')}
-                </a>
-              </Link>
-            </DropdownMenuItem>
             <DropdownMenuItem className="MenuItem">
               <Link href={`/${account.user.username}` || ''} passHref>
                 <span>{t('menu.profile')}</span>
@@ -513,16 +522,6 @@ const Header = () => {
     } else {
       items = (
         <>
-          <DropdownMenuGroup className="MenuGroup">
-            <DropdownMenuItem className="MenuItem">
-              <Link href="/new">
-                <a onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}>
-                  {t('menu.new')}
-                </a>
-              </Link>
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-          <DropdownMenuSeparator />
           <DropdownMenuGroup className="MenuGroup">
             <DropdownMenuItem
               className="MenuItem"

public/locales/en/common.json

@@ -408,6 +408,7 @@
   },
   "tooltips": {
     "copy_url": "Copy the URL to this team",
+    "new": "Create a new team",
     "remix": "Make a copy of this team",
     "save": "Save this team to your account",
     "source": "Go to original team"

public/locales/ja/common.json

@@ -409,6 +409,7 @@
   },
   "tooltips": {
     "copy_url": "この編成のURLをコピーする",
+    "new": "新しい編成を作成する",
     "remix": "この編成の複製を作成する",
     "save": "この編成をアカウントに保存する",
     "source": "オリジナルの編成へ"