feat: Version 2

Closes #627, closes #1047

client/src/components/common/Static/Static.jsx

@@ -0,0 +1,126 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+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 { useTransitioning } from '../../../lib/hooks';
+
+import selectors from '../../../selectors';
+import { BoardViews } from '../../../constants/Enums';
+import Home from '../Home';
+import Board from '../../boards/Board';
+
+import styles from './Static.module.scss';
+
+const Static = React.memo(() => {
+  const { cardId, projectId } = useSelector(selectors.selectPath);
+  const board = useSelector(selectors.selectCurrentBoard);
+  const isFetching = useSelector(selectors.selectIsContentFetching);
+  const isFavoritesActive = useSelector(selectors.selectIsFavoritesActiveForCurrentUser);
+
+  const [t] = useTranslation();
+
+  const wrapperRef = useRef(null);
+
+  const handleTransitionEnd = useTransitioning(wrapperRef, styles.wrapperTransitioning, [
+    isFavoritesActive,
+  ]);
+
+  let wrapperClassNames;
+  let contentNode;
+
+  if (isFetching) {
+    wrapperClassNames = [styles.wrapperLoader];
+    contentNode = <Loader active size="huge" />;
+  } else if (projectId === undefined) {
+    wrapperClassNames = [isFavoritesActive && styles.wrapperWithFavorites, styles.wrapperVertical];
+    contentNode = <Home />;
+  } else if (cardId === null) {
+    wrapperClassNames = [isFavoritesActive && styles.wrapperWithFavorites, styles.wrapperFlex];
+
+    contentNode = (
+      <div className={styles.message}>
+        <h1>
+          {t('common.cardNotFound', {
+            context: 'title',
+          })}
+        </h1>
+      </div>
+    );
+  } else if (board === null) {
+    wrapperClassNames = [isFavoritesActive && styles.wrapperWithFavorites, styles.wrapperFlex];
+
+    contentNode = (
+      <div className={styles.message}>
+        <h1>
+          {t('common.boardNotFound', {
+            context: 'title',
+          })}
+        </h1>
+      </div>
+    );
+  } else if (projectId === null) {
+    wrapperClassNames = [isFavoritesActive && styles.wrapperWithFavorites, styles.wrapperFlex];
+
+    contentNode = (
+      <div className={styles.message}>
+        <h1>
+          {t('common.projectNotFound', {
+            context: 'title',
+          })}
+        </h1>
+      </div>
+    );
+  } else if (board === undefined) {
+    wrapperClassNames = [
+      isFavoritesActive ? styles.wrapperProjectWithFavorites : styles.wrapperProject,
+      styles.wrapperFlex,
+    ];
+
+    contentNode = (
+      <div className={styles.message}>
+        <Icon inverted name="hand point up outline" size="huge" className={styles.messageIcon} />
+        <h1 className={styles.messageTitle}>
+          {t('common.openBoard', {
+            context: 'title',
+          })}
+        </h1>
+        <div className={styles.messageContent}>
+          <Trans i18nKey="common.createNewOneOrSelectExistingOne" />
+        </div>
+      </div>
+    );
+  } else if (board.isFetching) {
+    wrapperClassNames = [
+      styles.wrapperLoader,
+      isFavoritesActive ? styles.wrapperProjectWithFavorites : styles.wrapperProject,
+    ];
+
+    contentNode = <Loader active size="big" />;
+  } else {
+    wrapperClassNames = [
+      isFavoritesActive ? styles.wrapperBoardWithFavorites : styles.wrapperBoard,
+      [BoardViews.GRID, BoardViews.LIST].includes(board.view) && styles.wrapperVertical,
+      styles.wrapperFlex,
+    ];
+
+    contentNode = <Board />;
+  }
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={classNames(styles.wrapper, ...wrapperClassNames)}
+      onTransitionEnd={handleTransitionEnd}
+    >
+      {contentNode}
+    </div>
+  );
+});
+
+export default Static;

client/src/components/common/Static/Static.module.scss

@@ -0,0 +1,73 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .message {
+    align-content: space-between;
+    align-items: center;
+    color: #fff;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .messageIcon {
+    margin-top: -84px;
+  }
+
+  .messageTitle {
+    font-size: 32px;
+    margin: 24px 0 8px;
+  }
+
+  .messageContent {
+    font-size: 18px;
+    line-height: 1.4;
+    margin: 4px 0 0;
+    text-align: center;
+  }
+
+  .wrapper {
+    height: 100%;
+    margin-top: 116px;
+  }
+
+  .wrapperBoard {
+    margin-top: 174px;
+  }
+
+  .wrapperBoardWithFavorites {
+    margin-top: 264px;
+  }
+
+  .wrapperFlex {
+    display: flex;
+  }
+
+  .wrapperLoader {
+    position: relative;
+  }
+
+  .wrapperProject {
+    margin-top: 98px;
+  }
+
+  .wrapperProjectWithFavorites {
+    margin-top: 188px;
+  }
+
+  .wrapperTransitioning {
+    transition: margin-top 0.2s ease;
+  }
+
+  .wrapperVertical {
+    overflow: hidden;
+  }
+
+  .wrapperWithFavorites {
+    margin-top: 206px;
+  }
+}

client/src/components/common/Static/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import Static from './Static';
+
+export default Static;