From 7e41a0167dd91db48b47425cca2f75a39e15361b Mon Sep 17 00:00:00 2001
From: Samar Khajuria <130741241+SUMMERxKx@users.noreply.github.com>
Date: Mon, 24 Nov 2025 06:45:50 -0800
Subject: [PATCH] feat: Add create-board button to open-board screen (#1438)

Closes #1435
---
 .../AddBoardStep.jsx}                          | 16 ++++++++--------
 .../AddBoardStep.module.scss}                  |  0
 .../AddStep => AddBoardStep}/ImportStep.jsx    |  2 +-
 .../ImportStep.module.scss                     |  0
 .../{Boards/AddStep => AddBoardStep}/index.js  |  4 ++--
 client/src/components/boards/Boards/Boards.jsx |  8 ++++----
 client/src/components/common/Static/Static.jsx | 18 +++++++++++++++++-
 .../common/Static/Static.module.scss           |  5 +++++
 8 files changed, 37 insertions(+), 16 deletions(-)
 rename client/src/components/boards/{Boards/AddStep/AddStep.jsx => AddBoardStep/AddBoardStep.jsx} (88%)
 rename client/src/components/boards/{Boards/AddStep/AddStep.module.scss => AddBoardStep/AddBoardStep.module.scss} (100%)
 rename client/src/components/boards/{Boards/AddStep => AddBoardStep}/ImportStep.jsx (94%)
 rename client/src/components/boards/{Boards/AddStep => AddBoardStep}/ImportStep.module.scss (100%)
 rename client/src/components/boards/{Boards/AddStep => AddBoardStep}/index.js (68%)

diff --git a/client/src/components/boards/Boards/AddStep/AddStep.jsx b/client/src/components/boards/AddBoardStep/AddBoardStep.jsx
similarity index 88%
rename from client/src/components/boards/Boards/AddStep/AddStep.jsx
rename to client/src/components/boards/AddBoardStep/AddBoardStep.jsx
index 77878e77..de859a9b 100755
--- a/client/src/components/boards/Boards/AddStep/AddStep.jsx
+++ b/client/src/components/boards/AddBoardStep/AddBoardStep.jsx
@@ -9,20 +9,20 @@ import classNames from 'classnames';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Icon } from 'semantic-ui-react';
-import { useDidUpdate, useToggle } from '../../../../lib/hooks';
-import { Input, Popup } from '../../../../lib/custom-ui';
+import { useDidUpdate, useToggle } from '../../../lib/hooks';
+import { Input, Popup } from '../../../lib/custom-ui';
 
-import entryActions from '../../../../entry-actions';
-import { useForm, useNestedRef, useSteps } from '../../../../hooks';
+import entryActions from '../../../entry-actions';
+import { useForm, useNestedRef, useSteps } from '../../../hooks';
 import ImportStep from './ImportStep';
 
-import styles from './AddStep.module.scss';
+import styles from './AddBoardStep.module.scss';
 
 const StepTypes = {
   IMPORT: 'IMPORT',
 };
 
-const AddStep = React.memo(({ onClose }) => {
+const AddBoardStep = React.memo(({ onClose }) => {
   const dispatch = useDispatch();
   const [t] = useTranslation();
 
@@ -123,8 +123,8 @@ const AddStep = React.memo(({ onClose }) => {
   );
 });
 
-AddStep.propTypes = {
+AddBoardStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default AddStep;
+export default AddBoardStep;
diff --git a/client/src/components/boards/Boards/AddStep/AddStep.module.scss b/client/src/components/boards/AddBoardStep/AddBoardStep.module.scss
similarity index 100%
rename from client/src/components/boards/Boards/AddStep/AddStep.module.scss
rename to client/src/components/boards/AddBoardStep/AddBoardStep.module.scss
diff --git a/client/src/components/boards/Boards/AddStep/ImportStep.jsx b/client/src/components/boards/AddBoardStep/ImportStep.jsx
similarity index 94%
rename from client/src/components/boards/Boards/AddStep/ImportStep.jsx
rename to client/src/components/boards/AddBoardStep/ImportStep.jsx
index a3ce194c..896d220e 100644
--- a/client/src/components/boards/Boards/AddStep/ImportStep.jsx
+++ b/client/src/components/boards/AddBoardStep/ImportStep.jsx
@@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
-import { FilePicker, Popup } from '../../../../lib/custom-ui';
+import { FilePicker, Popup } from '../../../lib/custom-ui';
 
 import styles from './ImportStep.module.scss';
 
diff --git a/client/src/components/boards/Boards/AddStep/ImportStep.module.scss b/client/src/components/boards/AddBoardStep/ImportStep.module.scss
similarity index 100%
rename from client/src/components/boards/Boards/AddStep/ImportStep.module.scss
rename to client/src/components/boards/AddBoardStep/ImportStep.module.scss
diff --git a/client/src/components/boards/Boards/AddStep/index.js b/client/src/components/boards/AddBoardStep/index.js
similarity index 68%
rename from client/src/components/boards/Boards/AddStep/index.js
rename to client/src/components/boards/AddBoardStep/index.js
index 16857579..e7dc76c5 100644
--- a/client/src/components/boards/Boards/AddStep/index.js
+++ b/client/src/components/boards/AddBoardStep/index.js
@@ -3,6 +3,6 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-import AddStep from './AddStep';
+import AddBoardStep from './AddBoardStep';
 
-export default AddStep;
+export default AddBoardStep;
diff --git a/client/src/components/boards/Boards/Boards.jsx b/client/src/components/boards/Boards/Boards.jsx
index 22f5dd47..24db0c9a 100755
--- a/client/src/components/boards/Boards/Boards.jsx
+++ b/client/src/components/boards/Boards/Boards.jsx
@@ -13,7 +13,7 @@ import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import DroppableTypes from '../../../constants/DroppableTypes';
 import Item from './Item';
-import AddStep from './AddStep';
+import AddBoardStep from '../AddBoardStep';
 
 import styles from './Boards.module.scss';
 import globalStyles from '../../../styles.module.scss';
@@ -59,7 +59,7 @@ const Boards = React.memo(() => {
     });
   }, []);
 
-  const AddPopup = usePopup(AddStep);
+  const AddBoardPopup = usePopup(AddBoardStep);
 
   return (
     <div className={styles.wrapper} onWheel={handleWheel}>
@@ -74,9 +74,9 @@ const Boards = React.memo(() => {
                 ))}
                 {placeholder}
                 {canAdd && (
-                  <AddPopup>
+                  <AddBoardPopup>
                     <Button icon="plus" className={styles.addButton} />
-                  </AddPopup>
+                  </AddBoardPopup>
                 )}
               </div>
             )}
diff --git a/client/src/components/common/Static/Static.jsx b/client/src/components/common/Static/Static.jsx
index 42429b1a..42c46553 100644
--- a/client/src/components/common/Static/Static.jsx
+++ b/client/src/components/common/Static/Static.jsx
@@ -7,14 +7,16 @@ import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import { useTranslation, Trans } from 'react-i18next';
-import { Icon, Loader } from 'semantic-ui-react';
+import { Button, Icon, Loader } from 'semantic-ui-react';
 import { useTransitioning } from '../../../lib/hooks';
+import { usePopup } from '../../../lib/popup';
 
 import selectors from '../../../selectors';
 import { BoardViews } from '../../../constants/Enums';
 import Home from '../Home';
 import GhostError from '../GhostError';
 import Board from '../../boards/Board';
+import AddBoardStep from '../../boards/AddBoardStep';
 
 import styles from './Static.module.scss';
 
@@ -24,6 +26,10 @@ const Static = React.memo(() => {
   const isFetching = useSelector(selectors.selectIsContentFetching);
   const isFavoritesActive = useSelector(selectors.selectIsFavoritesActiveForCurrentUser);
 
+  const canAddBoard = useSelector((state) =>
+    selectors.selectIsCurrentUserManagerForCurrentProject(state),
+  );
+
   const [t] = useTranslation();
 
   const wrapperRef = useRef(null);
@@ -32,6 +38,8 @@ const Static = React.memo(() => {
     isFavoritesActive,
   ]);
 
+  const AddBoardPopup = usePopup(AddBoardStep);
+
   let wrapperClassNames;
   let contentNode;
 
@@ -67,6 +75,14 @@ const Static = React.memo(() => {
         <div className={styles.messageContent}>
           <Trans i18nKey="common.createNewOneOrSelectExistingOne" />
         </div>
+        {canAddBoard && (
+          <AddBoardPopup>
+            <Button basic positive size="large" className={styles.button}>
+              <Icon name="plus" />
+              {t('action.createBoard')}
+            </Button>
+          </AddBoardPopup>
+        )}
       </div>
     );
   } else if (board.isFetching) {
diff --git a/client/src/components/common/Static/Static.module.scss b/client/src/components/common/Static/Static.module.scss
index bdeba857..a9fd9268 100644
--- a/client/src/components/common/Static/Static.module.scss
+++ b/client/src/components/common/Static/Static.module.scss
@@ -4,6 +4,11 @@
  */
 
 :global(#app) {
+  .button {
+    margin-top: 24px;
+    padding: 0.78571429em 1.5em 0.78571429em;
+  }
+
   .message {
     align-content: space-between;
     align-items: center;