added sample settings page

src/components/input/InputText/index.tsx

@@ -18,6 +18,7 @@ const InputText: FC<IInputTextProps> = ({
   error,
   value = '',
   suffix,
+  prefix,
   ...props
 }) => {
   const { focused, onFocus, onBlur } = useFocusEvent();
@@ -43,6 +44,8 @@ const InputText: FC<IInputTextProps> = ({
   return (
     <InputWrapper title={title} error={translatedError} focused={focused} notEmpty={!!value}>
       <div className={classNames(styles.input, { [styles.has_error]: !!error })}>
+        {!!prefix && <div className={styles.prefix}>{prefix}</div>}
+
         <input
           {...props}
           onFocus={onFocus}

src/components/input/InputText/styles.module.scss

@@ -23,7 +23,7 @@
   }
 }
 
-.suffix {
+.suffix, .prefix{
   fill: currentColor;
   stroke: currentColor;
 

src/components/lab/LabHead/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { Group } from '~/components/containers/Group';
-import { LabHeadItem } from '~/components/lab/LabHeadItem';
+import { HorizontalMenu } from '~/components/menu/HorizontalMenu';
 import { LabNodesSort } from '~/types/lab';
 import { useLabContext } from '~/utils/context/LabContextProvider';
 
@@ -16,8 +16,8 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
 
   return (
     <Group className={styles.wrap} horizontal>
-      <div className={styles.group}>
-        <LabHeadItem
+      <HorizontalMenu>
+        <HorizontalMenu.Item
           color="green"
           icon="recent"
           active={sort === LabNodesSort.New}
@@ -25,9 +25,9 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
           onClick={() => setSort(LabNodesSort.New)}
         >
           Свежие
-        </LabHeadItem>
+        </HorizontalMenu.Item>
 
-        <LabHeadItem
+        <HorizontalMenu.Item
           color="orange"
           icon="hot"
           active={sort === LabNodesSort.Hot}
@@ -35,9 +35,9 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
           onClick={() => setSort(LabNodesSort.Hot)}
         >
           Популярные
-        </LabHeadItem>
+        </HorizontalMenu.Item>
 
-        <LabHeadItem
+        <HorizontalMenu.Item
           color="yellow"
           icon="star_full"
           isLoading={isLoading}
@@ -45,8 +45,8 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
           onClick={() => setSort(LabNodesSort.Heroic)}
         >
           Важные
-        </LabHeadItem>
-      </div>
+        </HorizontalMenu.Item>
+      </HorizontalMenu>
     </Group>
   );
 };

src/components/lab/LabHead/styles.module.scss

@@ -3,21 +3,3 @@
 .wrap {
   border-radius: $radius;
 }
-
-.group {
-  @include inner_shadow;
-  display: flex;
-  background-color: $content_bg;
-  border-radius: $radius;
-
-  @include tablet {
-    flex-wrap: wrap;
-    align-items: stretch;
-    justify-content: center;
-    flex: 1;
-  }
-
-  & > * {
-    padding: $gap;
-  }
-}

src/components/menu/HorizontalMenu/index.tsx

@@ -1,22 +1,38 @@
-import React, { FC } from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import classNames from 'classnames';
 
-import { Group } from '~/components/containers/Group';
 import { Icon } from '~/components/input/Icon';
 import { Placeholder } from '~/components/placeholders/Placeholder';
+import { DivProps } from '~/utils/types';
 
 import styles from './styles.module.scss';
 
-interface IProps {
-  icon: string;
-  color: 'green' | 'orange' | 'yellow';
+interface HorizontalMenuProps extends DivProps {}
+interface HorizontalMenuItemProps {
   isLoading?: boolean;
+  icon?: string;
+  color?: 'green' | 'orange' | 'yellow';
   active?: boolean;
   onClick?: () => void;
 }
 
-const LabHeadItem: FC<IProps> = ({ icon, color, children, isLoading, active, onClick }) => {
+function HorizontalMenu({ children, ...props }: HorizontalMenuProps) {
+  return (
+    <div {...props} className={classNames(styles.menu, props.className)}>
+      {children}
+    </div>
+  );
+}
+
+HorizontalMenu.Item = ({
+  icon,
+  color = 'green',
+  children,
+  isLoading,
+  active,
+  onClick,
+}: PropsWithChildren<HorizontalMenuItemProps>) => {
   if (isLoading) {
     return (
       <div className={styles.item} key="loading">
@@ -31,10 +47,9 @@ const LabHeadItem: FC<IProps> = ({ icon, color, children, isLoading, active, onC
       className={classNames(styles.item, { [styles.active]: active }, styles[color])}
       onClick={onClick}
     >
-      <Icon icon={icon} size={24} />
+      {!!icon && <Icon icon={icon} size={24} />}
       <span className={styles.text}>{children}</span>
     </div>
   );
 };
-
-export { LabHeadItem };
+export { HorizontalMenu };

src/components/menu/HorizontalMenu/styles.module.scss

@@ -1,8 +1,27 @@
 @import "src/styles/variables.scss";
 
+.menu {
+  @include inner_shadow;
+
+  display: flex;
+  background-color: $content_bg;
+  border-radius: $radius;
+
+  @include tablet {
+    flex-wrap: wrap;
+    align-items: stretch;
+    justify-content: center;
+    flex: 1;
+  }
+
+  & > * {
+    padding: $gap;
+  }
+}
+
 .item {
   flex: 0 0 auto;
-  padding: $gap * 0.5 $gap * 4 $gap * 0.5 $gap;
+  padding: $gap * 0.5 $gap  $gap * 0.5 $gap;
   fill: currentColor;
   color: darken(white, 50%);
   transition: color 0.25s;
@@ -43,7 +62,6 @@
 .text {
   font: $font_14_semibold;
   text-transform: uppercase;
-  padding-bottom: 1px;
   padding-left: $gap * 0.75;
   padding-right: $gap * 0.35;
 

src/components/menu/VerticalMenu/index.tsx

@@ -0,0 +1,32 @@
+import React, { PropsWithChildren } from 'react';
+
+import classNames from 'classnames';
+
+import { Card } from '~/components/containers/Card';
+import { DivProps, LinkProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface VerticalMenuProps extends DivProps {
+  appearance?: 'inset' | 'flat' | 'default';
+}
+
+interface VerticalMenuItemProps extends Omit<LinkProps, 'href'> {}
+
+function VerticalMenu({
+  children,
+  appearance = 'default',
+  ...props
+}: PropsWithChildren<VerticalMenuProps>) {
+  return (
+    <Card {...props} className={classNames(styles.menu, styles[appearance], props.className)}>
+      {children}
+    </Card>
+  );
+}
+
+VerticalMenu.Item = ({ ...props }: VerticalMenuItemProps) => (
+  <a {...props} className={classNames(styles.item, props.className)} />
+);
+
+export { VerticalMenu };

src/components/menu/VerticalMenu/styles.module.scss

@@ -0,0 +1,47 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+.menu {
+  border-radius: $radius;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+
+  &.flat {
+    box-shadow: none;
+  }
+
+  &.default {
+    @include outer_shadow;
+  }
+
+  &.inset {
+    @include inner_shadow;
+  }
+}
+
+a.item {
+  @include row_shadow;
+
+  color: inherit;
+  text-decoration: none;
+  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/components/settings/SettingsMenu/index.tsx

@@ -0,0 +1,53 @@
+import React, { VFC } from 'react';
+
+import classNames from 'classnames';
+import Link from 'next/link';
+
+import { Filler } from '~/components/containers/Filler';
+import { Group } from '~/components/containers/Group';
+import { Button } from '~/components/input/Button';
+import { VerticalMenu } from '~/components/menu/VerticalMenu';
+import { URLS } from '~/constants/urls';
+import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
+import styles from '~/containers/profile/ProfileSidebarMenu/styles.module.scss';
+import { ProfileStats } from '~/containers/profile/ProfileStats';
+
+interface SettingsMenuProps {}
+
+const SettingsMenu: VFC<SettingsMenuProps> = () => (
+  <Group>
+    <ProfileSidebarHead />
+
+    <br />
+
+    <Group>
+      <VerticalMenu className={styles.menu}>
+        <Link href={URLS.SETTINGS.BASE} passHref>
+          <VerticalMenu.Item onClick={console.log}>Настройки</VerticalMenu.Item>
+        </Link>
+
+        <Link href={URLS.SETTINGS.NOTES} passHref>
+          <VerticalMenu.Item onClick={console.log}>Заметки</VerticalMenu.Item>
+        </Link>
+
+        <Link href={URLS.SETTINGS.TRASH} passHref>
+          <VerticalMenu.Item onClick={console.log}>Удалённые посты</VerticalMenu.Item>
+        </Link>
+      </VerticalMenu>
+
+      <br />
+
+      <ProfileStats />
+
+      <Group horizontal>
+        <Filler />
+
+        <Button color="outline" iconLeft="enter">
+          Выйти
+        </Button>
+      </Group>
+    </Group>
+  </Group>
+);
+
+export { SettingsMenu };

src/constants/urls.ts

@@ -16,11 +16,12 @@ export const URLS = {
     BACKEND_DOWN: '/oopsie',
   },
   NODE_URL: (id: INode['id'] | string) => `/post${id}`,
-  NODE_EDIT_URL: (id: INode['id'] | string) => `/post${id}/edit`,
-  NODE_CREATE_URL: (type: string) => `/`,
-  NODE_TAG_URL: (id: number, tagName: string) => `/post${id}/tag/${tagName}`,
-  PROFILE: (username: string) => `/~${username}`,
   PROFILE_PAGE: (username: string) => `/profile/${username}`,
+  SETTINGS: {
+    BASE: '/settings',
+    NOTES: '/settings/notes',
+    TRASH: '/settings/trash',
+  },
 };
 
 export const ImagePresets = {

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/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;
+  }
+}

src/layouts/BorisLayout/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
 
+import { useRouter } from 'next/router';
+
 import { BorisSidebar } from '~/components/boris/BorisSidebar';
 import { Superpower } from '~/components/boris/Superpower';
 import { Card } from '~/components/containers/Card';
@@ -8,6 +10,7 @@ import { Padder } from '~/components/containers/Padder';
 import { Sticky } from '~/components/containers/Sticky';
 import { Button } from '~/components/input/Button';
 import { Dialog } from '~/constants/modal';
+import { URLS } from '~/constants/urls';
 import { BorisComments } from '~/containers/boris/BorisComments';
 import { Container } from '~/containers/main/Container';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
@@ -28,6 +31,7 @@ type IProps = {
 const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLoadingStats }) => {
   const { isUser } = useAuthProvider();
   const openProfileSidebar = useShowModal(Dialog.ProfileSidebar);
+  const { push } = useRouter();
 
   return (
     <Container>
@@ -46,10 +50,19 @@ const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLo
           <Card className={styles.content}>
             <Superpower>
               <Padder>
+                <Group>
                   <h2>Тестовые фичи</h2>
+                  <div>
                     <Button onClick={() => openProfileSidebar({})}>Профиль в сайдбаре</Button>
+                  </div>
+
+                  <div>
+                    <Button onClick={() => push(URLS.SETTINGS.BASE)}>
+                      Профиль на отдельной странице
+                    </Button>
+                  </div>
+                </Group>
               </Padder>
-              <Padder />
             </Superpower>
 
             <BorisComments />

src/layouts/SettingsLayout/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+import { Card } from '~/components/containers/Card';
+import { Sticky } from '~/components/containers/Sticky';
+import { SettingsMenu } from '~/components/settings/SettingsMenu';
+import { Container } from '~/containers/main/Container';
+
+import styles from './styles.module.scss';
+
+interface SettingsLayoutProps {}
+
+const SettingsLayout: FC<SettingsLayoutProps> = ({ children }) => {
+  return (
+    <Container className={styles.container}>
+      <Card className={styles.card}>
+        <div className={styles.menu}>
+          <Sticky>
+            <SettingsMenu />
+          </Sticky>
+        </div>
+
+        <div className={styles.content}>{children}</div>
+      </Card>
+    </Container>
+  );
+};
+
+export { SettingsLayout };

src/layouts/SettingsLayout/styles.module.scss

@@ -0,0 +1,26 @@
+@import "src/styles/variables";
+
+.menu {
+  flex: 1 0;
+  padding: $gap;
+}
+
+.content {
+  @include outer_shadow;
+
+  border-radius: $radius;
+  flex: 3;
+  background: $content_bg;
+}
+
+.card {
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  margin-top: $page_top_offset;
+  background: darken($content_bg, 2%);
+
+  @include tablet {
+    margin-top: 0;
+  }
+}

src/pages/_app.tsx

@@ -6,8 +6,8 @@ import Head from 'next/head';
 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 { DragDetectorProvider } from '~/hooks/dom/useDragDetector';
+import { MainLayout } from '~/layouts/MainLayout';
 import { Sprites } from '~/sprites/Sprites';
 import { getMOBXStore } from '~/store';
 import { CONFIG } from '~/utils/config';

src/pages/settings/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { PageTitle } from '~/components/common/PageTitle';
+import { ProfileSettings } from '~/components/profile/ProfileSettings';
+import { SettingsLayout } from '~/layouts/SettingsLayout';
+import { getPageTitle } from '~/utils/ssr/getPageTitle';
+
+const SettingsPage = () => (
+  <div>
+    <PageTitle title={getPageTitle('Лаборатория')} />
+
+    <SettingsLayout>
+      <ProfileSettings />
+    </SettingsLayout>
+  </div>
+);
+
+export default SettingsPage;

src/pages/settings/notes.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { PageTitle } from '~/components/common/PageTitle';
+import { SettingsLayout } from '~/layouts/SettingsLayout';
+import { getPageTitle } from '~/utils/ssr/getPageTitle';
+import { SettingsNotes } from '~/containers/settings/SettingsNotes';
+
+const SettingsNotesPage = () => (
+  <div>
+    <PageTitle title={getPageTitle('Лаборатория')} />
+
+    <SettingsLayout>
+      <SettingsNotes />
+    </SettingsLayout>
+  </div>
+);
+
+export default SettingsNotesPage;

src/pages/settings/trash.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { PageTitle } from '~/components/common/PageTitle';
+import { SettingsDeleted } from '~/containers/settings/SettingsDeleted';
+import { SettingsLayout } from '~/layouts/SettingsLayout';
+import { getPageTitle } from '~/utils/ssr/getPageTitle';
+
+const SettingsDeletedPage = () => (
+  <div>
+    <PageTitle title={getPageTitle('Лаборатория')} />
+
+    <SettingsLayout>
+      <SettingsDeleted />
+    </SettingsLayout>
+  </div>
+);
+
+export default SettingsDeletedPage;

src/types/index.ts

@@ -23,6 +23,7 @@ export type IInputTextProps = DetailedHTMLProps<
   title?: string;
   error?: string;
   suffix?: ReactElement;
+  prefix?: ReactElement;
 };
 
 export type IIcon = string;