add experimental room

src/constants/urls.ts

@@ -3,6 +3,7 @@ import { FlowDisplayVariant, INode } from '~/types';
 export const URLS = {
   BASE: '/',
   LAB: '/lab',
+  ROOM: '/room',
   BORIS: '/boris',
   AUTH: {
     LOGIN: '/auth/login',

src/containers/boris/BorisSuperpowers/index.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 
+import { Card } from '~/components/containers/Card';
 import { Group } from '~/components/containers/Group';
 import { Markdown } from '~/components/containers/Markdown';
 
@@ -7,13 +8,18 @@ export interface BorisSuperpowersProps {}
 
 const BorisSuperpowers: FC<BorisSuperpowersProps> = () => {
   return (
-    <Group>
-      <h2>Штучки, находящиеся в разработке</h2>
+    <Card elevation={0}>
+      <Group>
+        <h3>Сейчас в разработке</h3>
 
-      <Markdown>
-        {`> На данный момент в разработке нет вещей, которые можно показать.\n\n// Приходите завтра`}
-      </Markdown>
-    </Group>
+        <Markdown>
+          - Раздел [рум](/room) в начальной стадии, смотрю как будет работать
+          концепт. Суть идеи можно посмотреть на
+          [гитхабе](https://github.com/muerwre/vault-frontend/issues/158).
+          Предложения можно оставлять здесь.
+        </Markdown>
+      </Group>
+    </Card>
   );
 };
 

src/containers/main/Header/index.tsx

@@ -27,7 +27,7 @@ export interface HeaderProps {}
 const Header: FC<HeaderProps> = observer(() => {
   const [isScrolled, setIsScrolled] = useState(false);
   const { showModal } = useModal();
-  const { isUser, user, fetched } = useAuth();
+  const { isUser, user, fetched, isTester } = useAuth();
   const { hasFlowUpdates, hasLabUpdates } = useFlow();
   const { borisCommentedAt } = useUpdates();
   const { indicatorEnabled } = useNotifications();
@@ -86,6 +86,17 @@ const Header: FC<HeaderProps> = observer(() => {
               ЛАБ
             </Anchor>
 
+            {isTester && (
+              <Anchor
+                className={classNames(styles.item, styles.lab, {
+                  [styles.has_dot]: hasLabUpdates && !indicatorEnabled,
+                })}
+                href={URLS.ROOM}
+              >
+                РУМ
+              </Anchor>
+            )}
+
             <Anchor
               className={classNames(styles.item, styles.boris, {
                 [styles.has_dot]: hasBorisUpdates && !indicatorEnabled,

src/layouts/RoomLayout/index.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+
+import { Container } from '~/containers/main/Container';
+import markdown from '~/styles/common/markdown.module.scss';
+
+import styles from './styles.module.scss';
+interface RoomLayoutProps {}
+
+const RoomLayout: FC<RoomLayoutProps> = () => (
+  <div className={styles.container}>
+    <div className={styles.room}>
+      <Container>
+        <div className={styles.info}>
+          <div className={markdown.wrapper}>
+            <h1>Рум</h1>
+
+            <p>
+              Пока ещё концепт, над которым я размышляю, ты видишь его, потому
+              что включил суперсилы в <a href="/boris">Борисе</a>.
+            </p>
+
+            <p>
+              Все идеи насчёт этого раздела можно посмотреть{' '}
+              <a
+                href="https://github.com/muerwre/vault-frontend/issues/158"
+                target="_blank"
+                rel="noreferrer"
+              >
+                на гитхабе
+              </a>
+              .
+            </p>
+
+            <p>
+              Здесь, скорее всего, будет возможность добавить несколько песен и
+              картинок для слайдшоу.
+            </p>
+
+            <p>
+              Если помните einsam.ru или раздел Nowhere на старой версии сайта,
+              то будет что-то такое.
+            </p>
+          </div>
+        </div>
+      </Container>
+    </div>
+    <div className={styles.items}></div>
+  </div>
+);
+
+export { RoomLayout };

src/layouts/RoomLayout/styles.module.scss

@@ -0,0 +1,22 @@
+@import 'src/styles/variables';
+
+.container {
+  height: 100vh;
+  width: 100%;
+  margin-top: -$header_height;
+}
+
+.room {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: url('/images/room.svg') 50% 50%;
+  background-size: cover;
+}
+
+.info {
+  max-width: 400px;
+  min-height: 40vh;
+}

src/pages/room/index.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+import { InferGetStaticPropsType } from 'next';
+import { RouteComponentProps } from 'react-router';
+
+import { RoomLayout } from '~/layouts/RoomLayout';
+
+import { getStaticProps } from '../node/[id]';
+
+type Props = RouteComponentProps<{ id: string }> &
+  InferGetStaticPropsType<typeof getStaticProps>;
+
+const RoomPage: FC<Props> = () => <RoomLayout />;
+
+export default RoomPage;