added sample settings page

src/containers/App.tsx

@@ -6,10 +6,10 @@ import { BrowserRouter } from 'react-router-dom';
 import { PageCoverProvider } from '~/components/containers/PageCoverProvider';
 import { Modal } from '~/containers/dialogs/Modal';
 import { BottomContainer } from '~/containers/main/BottomContainer';
-import { MainLayout } from '~/containers/main/MainLayout';
 import { MainRouter } from '~/containers/main/MainRouter';
 import { DragDetectorProvider } from '~/hooks/dom/useDragDetector';
 import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader';
+import { MainLayout } from '~/layouts/MainLayout';
 import { Sprites } from '~/sprites/Sprites';
 import { UserContextProvider } from '~/utils/context/UserContextProvider';
 import { AudioPlayerProvider } from '~/utils/providers/AudioPlayerProvider';

src/containers/main/MainLayout/index.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-import { LoadingProgress } from '~/components/common/LoadingProgress';
-import { Header } from '~/containers/main/Header';
-import { SidebarRouter } from '~/containers/main/SidebarRouter';
-
-import styles from './styles.module.scss';
-
-export const MainLayout = ({ children }) => (
-  <div className={styles.wrapper}>
-    <div className={styles.content}>
-      <Header />
-      {children}
-      <LoadingProgress />
-      <SidebarRouter />
-    </div>
-  </div>
-);

src/containers/main/MainLayout/styles.module.scss

@@ -1,21 +0,0 @@
-@import "src/styles/variables";
-
-.wrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: flex-start;
-  flex: 1;
-}
-
-.content {
-  flex: 1;
-  position: relative;
-  width: 100%;
-  display: flex;
-  padding-bottom: 29px;
-  flex-direction: column;
-  align-items: center;
-}

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -8,8 +8,10 @@ import { Filler } from '~/components/containers/Filler';
 import { Grid } from '~/components/containers/Grid';
 import { Group } from '~/components/containers/Group';
 import { Button } from '~/components/input/Button';
+import { VerticalMenu } from '~/components/menu/VerticalMenu';
 import { useStackContext } from '~/components/sidebar/SidebarStack';
 import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
+import { ProfileStats } from '~/containers/profile/ProfileStats';
 import markdown from '~/styles/common/markdown.module.scss';
 
 import styles from './styles.module.scss';
@@ -29,39 +31,13 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
 
       <Filler className={classNames(markdown.wrapper, styles.text)}>
         <Group>
-          <ul className={styles.menu}>
-            <li onClick={() => setActiveTab(0)}>Настройки</li>
-            <li onClick={() => setActiveTab(1)}>Заметки</li>
-            <li onClick={() => setActiveTab(2)}>Удалённые посты</li>
-          </ul>
+          <VerticalMenu className={styles.menu}>
+            <VerticalMenu.Item onClick={() => setActiveTab(0)}>Настройки</VerticalMenu.Item>
+            <VerticalMenu.Item onClick={() => setActiveTab(1)}>Заметки</VerticalMenu.Item>
+            <VerticalMenu.Item onClick={() => setActiveTab(2)}>Удалённые посты</VerticalMenu.Item>
+          </VerticalMenu>
 
-          <Grid columns="2fr 1fr">
-            <Card>
-              <h4>1 год 2 месяца</h4>
-              <small>в убежище</small>
-            </Card>
-
-            <Card>
-              <Square>
-                <h4>24 поста</h4>
-                <small>Создано</small>
-              </Square>
-            </Card>
-          </Grid>
-
-          <Grid columns="1fr 2fr">
-            <Card>
-              <Square>
-                <h4>16545 лайка</h4>
-                <small>получено</small>
-              </Square>
-            </Card>
-
-            <Card>
-              <h4>123123 комментария</h4>
-              <small>под постами</small>
-            </Card>
-          </Grid>
+          <ProfileStats />
         </Group>
       </Filler>
 

src/containers/profile/ProfileSidebarMenu/styles.module.scss

@@ -11,35 +11,3 @@
 .text {
   margin-top: $gap * 2;
 }
-
-.menu {
-  @include outer_shadow;
-
-  list-style: none;
-  border-radius: $radius;
-  padding: 0 !important;
-
-  & > li {
-    @include row_shadow;
-
-    list-style: none;
-    margin: 0 !important;
-    padding: $gap;
-    font: $font_16_semibold;
-    cursor: pointer;
-    background-color: transparentize($secondary, 1);
-    transition: background-color 0.25s;
-
-    &:hover {
-      background-color: transparentize($secondary, 0.5);
-    }
-
-    &:first-child {
-      border-radius: $radius $radius 0 0;
-    }
-
-    &:last-child {
-      border-radius: 0 0 $radius $radius;
-    }
-  }
-}

src/containers/profile/ProfileStats/index.tsx

@@ -0,0 +1,42 @@
+import React, { VFC } from 'react';
+
+import { Square } from '~/components/common/Square';
+import { Card } from '~/components/containers/Card';
+import { Grid } from '~/components/containers/Grid';
+import { Group } from '~/components/containers/Group';
+
+interface ProfileStatsProps {}
+
+const ProfileStats: VFC<ProfileStatsProps> = () => (
+  <Group>
+    <Grid columns="2fr 1fr">
+      <Card>
+        <h4>1 год 2 месяца</h4>
+        <small>в убежище</small>
+      </Card>
+
+      <Card>
+        <Square>
+          <h4>24 поста</h4>
+          <small>Создано</small>
+        </Square>
+      </Card>
+    </Grid>
+
+    <Grid columns="1fr 2fr">
+      <Card>
+        <Square>
+          <h4>16545 лайка</h4>
+          <small>получено</small>
+        </Square>
+      </Card>
+
+      <Card>
+        <h4>123123 комментария</h4>
+        <small>под постами</small>
+      </Card>
+    </Grid>
+  </Group>
+);
+
+export { ProfileStats };

src/containers/settings/SettingsDeleted/index.tsx

@@ -0,0 +1,45 @@
+import React, { VFC } from 'react';
+
+import { Filler } from '~/components/containers/Filler';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
+import { Icon } from '~/components/input/Icon';
+import { InputText } from '~/components/input/InputText';
+import { HorizontalMenu } from '~/components/menu/HorizontalMenu';
+import { useFlowStore } from '~/store/flow/useFlowStore';
+
+import styles from './styles.module.scss';
+
+interface SettingsDeletedProps {}
+
+const SettingsDeleted: VFC<SettingsDeletedProps> = () => {
+  const { nodes } = useFlowStore();
+
+  return (
+    <Padder>
+      <Group horizontal>
+        <HorizontalMenu>
+          <HorizontalMenu.Item active>Новые</HorizontalMenu.Item>
+          <HorizontalMenu.Item>Старые</HorizontalMenu.Item>
+        </HorizontalMenu>
+
+        <Filler />
+
+        <InputText suffix={<Icon icon="search" size={24} />} />
+      </Group>
+
+      <br />
+
+      <div className={styles.grid}>
+        {nodes.map(node => (
+          <div className={styles.item} key={node.id}>
+            <FlowRecentItem node={node} key={node.id} />
+          </div>
+        ))}
+      </div>
+    </Padder>
+  );
+};
+
+export { SettingsDeleted };

src/containers/settings/SettingsDeleted/styles.module.scss

@@ -0,0 +1,13 @@
+@import "src/styles/variables";
+
+.grid {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-column-gap: $gap;
+  grid-row-gap: $gap;
+}
+
+.item {
+  min-width: 0;
+}

src/containers/settings/SettingsNotes/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState, VFC } from 'react';
+
+import Masonry from 'react-masonry-css';
+
+import { Card } from '~/components/containers/Card';
+import { Filler } from '~/components/containers/Filler';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { Button } from '~/components/input/Button';
+import { Icon } from '~/components/input/Icon';
+import { InputText } from '~/components/input/InputText';
+import { Textarea } from '~/components/input/Textarea';
+import { HorizontalMenu } from '~/components/menu/HorizontalMenu';
+
+import styles from './styles.module.scss';
+
+interface SettingsNotesProps {}
+
+const breakpointCols = {
+  default: 2,
+  1280: 1,
+};
+
+const sampleNotes = [...new Array(40)].map((_, i) => (
+  <Card key={i} style={{ height: Math.random() * 400 + 50 }}>
+    {i}
+  </Card>
+));
+
+const SettingsNotes: VFC<SettingsNotesProps> = () => {
+  const [text, setText] = useState('');
+
+  return (
+    <div>
+      <Padder>
+        <Group horizontal>
+          <HorizontalMenu>
+            <HorizontalMenu.Item active>Новые</HorizontalMenu.Item>
+            <HorizontalMenu.Item>Старые</HorizontalMenu.Item>
+          </HorizontalMenu>
+
+          <Filler />
+
+          <InputText suffix={<Icon icon="search" size={24} />} />
+        </Group>
+      </Padder>
+
+      <Masonry
+        className={styles.wrap}
+        breakpointCols={breakpointCols}
+        columnClassName={styles.column}
+      >
+        <Card>
+          <Group>
+            <Textarea handler={setText} value={text} />
+
+            <Group horizontal>
+              <Filler />
+              <Button size="mini">Добавить</Button>
+            </Group>
+          </Group>
+        </Card>
+
+        {sampleNotes}
+      </Masonry>
+    </div>
+  );
+};
+
+export { SettingsNotes };

src/containers/settings/SettingsNotes/styles.module.scss

@@ -0,0 +1,27 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+div.wrap {
+  display: flex;
+  width: 100%;
+  margin-right: 0;
+  padding: $gap $gap * 0.5;
+
+  @include tablet {
+    padding: 0 $gap * 0.5;
+  }
+}
+
+.column {
+  background-clip: padding-box;
+  box-sizing: border-box;
+  padding: 0 $gap * 0.5;
+
+  @include tablet {
+    padding: 0;
+  }
+
+  & > div {
+    margin-bottom: $gap;
+  }
+}