Добавили заметки в сайдбар (#126)

* added notes sidebar

* added note dropping and editing

* added sidebar navigation

* handling sidebarchanges over time

* using router back for closing sidebar

* fixed tripping inside single sidebar

* added superpowers toggle to sidebar

* user button opens sidebar now

* added profile cover for profile sidebar

* removed profile sidebar completely

* ran prettier over project

* added note not found error literal

src/components/flow/FlowCell/index.tsx

@@ -39,10 +39,12 @@ const FlowCell: FC<Props> = ({
   canEdit = false,
   onChangeCellView,
 }) => {
-  const { isMobile } = useWindowSize();
+  const { isTablet } = useWindowSize();
 
   const withText =
-    ((!!flow.display && flow.display !== 'single') || !image) && flow.show_description && !!text;
+    ((!!flow.display && flow.display !== 'single') || !image) &&
+    flow.show_description &&
+    !!text;
   const {
     hasDescription,
     setViewHorizontal,
@@ -51,14 +53,19 @@ const FlowCell: FC<Props> = ({
     setViewSingle,
     toggleViewDescription,
   } = useFlowCellControls(id, text, flow, onChangeCellView);
-  const { isActive: isMenuActive, activate, ref, deactivate } = useClickOutsideFocus();
+  const {
+    isActive: isMenuActive,
+    activate,
+    ref,
+    deactivate,
+  } = useClickOutsideFocus();
 
   const shadeSize = useMemo(() => {
-    const min = isMobile ? 10 : 15;
-    const max = isMobile ? 20 : 40;
+    const min = isTablet ? 10 : 15;
+    const max = isTablet ? 20 : 40;
 
     return withText ? min : max;
-  }, [withText, isMobile]);
+  }, [withText, isTablet]);
 
   const shadeAngle = useMemo(() => {
     if (flow.display === 'vertical') {
@@ -73,7 +80,10 @@ const FlowCell: FC<Props> = ({
   }, [flow.display]);
 
   return (
-    <div className={classNames(styles.cell, styles[flow.display || 'single'])} ref={ref as any}>
+    <div
+      className={classNames(styles.cell, styles[flow.display || 'single'])}
+      ref={ref as any}
+    >
       {canEdit && !isMenuActive && (
         <div className={styles.menu}>
           <MenuDots onClick={activate} />
@@ -98,7 +108,10 @@ const FlowCell: FC<Props> = ({
 
       <Anchor className={styles.link} href={to}>
         {withText && (
-          <FlowCellText className={styles.text} heading={<h4 className={styles.title}>{title}</h4>}>
+          <FlowCellText
+            className={styles.text}
+            heading={<h4 className={styles.title}>{title}</h4>}
+          >
             {text!}
           </FlowCellText>
         )}
@@ -113,7 +126,12 @@ const FlowCell: FC<Props> = ({
         )}
 
         {!!title && (
-          <CellShade color={color} className={styles.shade} size={shadeSize} angle={shadeAngle} />
+          <CellShade
+            color={color}
+            className={styles.shade}
+            size={shadeSize}
+            angle={shadeAngle}
+          />
         )}
 
         {!withText && (

src/components/flow/FlowCellText/index.tsx

@@ -8,7 +8,6 @@ import { DivProps } from '~/utils/types';
 
 import styles from './styles.module.scss';
 
-
 interface Props extends DivProps {
   children: string;
   heading: string | ReactElement;
@@ -17,10 +16,7 @@ interface Props extends DivProps {
 const FlowCellText: FC<Props> = ({ children, heading, ...rest }) => (
   <div {...rest} className={classNames(styles.text, rest.className)}>
     {heading && <div className={styles.heading}>{heading}</div>}
-    <Markdown
-      className={styles.description}
-      dangerouslySetInnerHTML={{ __html: formatText(children) }}
-    />
+    <Markdown className={styles.description}>{formatText(children)}</Markdown>
   </div>
 );
 

src/components/flow/FlowSwiperHero/index.tsx

@@ -34,14 +34,17 @@ const lazy = {
 };
 
 export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
-  const { isMobile } = useWindowSize();
+  const { isTablet } = useWindowSize();
   const { push } = useNavigation();
 
-  const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
+  const [controlledSwiper, setControlledSwiper] = useState<
+    SwiperClass | undefined
+  >(undefined);
   const [currentIndex, setCurrentIndex] = useState(heroes.length);
-  const preset = useMemo(() => (isMobile ? ImagePresets.cover : ImagePresets.small_hero), [
-    isMobile,
-  ]);
+  const preset = useMemo(
+    () => (isTablet ? ImagePresets.cover : ImagePresets.small_hero),
+    [isTablet],
+  );
 
   const onNext = useCallback(() => {
     controlledSwiper?.slideNext(1);
@@ -79,7 +82,7 @@ export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
     (sw: SwiperClass) => {
       push(URLS.NODE_URL(heroes[sw.realIndex]?.id));
     },
-    [push, heroes]
+    [push, heroes],
   );
 
   if (!heroes.length) {