fixed dots on lab and flow

src/containers/main/Header/index.tsx

@@ -26,12 +26,10 @@ import styles from './styles.module.scss';
 export interface HeaderProps {}
 
 const Header: FC<HeaderProps> = observer(() => {
-  const labStats = useGetLabStats();
-
   const [isScrolled, setIsScrolled] = useState(false);
   const { showModal } = useModal();
   const { isUser, user } = useAuth();
-  const { updates: flowUpdates } = useFlow();
+  const { hasFlowUpdates, hasLabUpdates } = useFlow();
   const { borisCommentedAt } = useUpdates();
   const { open } = useSidebar();
 
@@ -52,12 +50,6 @@ const Header: FC<HeaderProps> = observer(() => {
     [borisCommentedAt, isUser, user.last_seen_boris],
   );
 
-  const hasLabUpdates = useMemo(
-    () => labStats.updates.length > 0,
-    [labStats.updates],
-  );
-  const hasFlowUpdates = useMemo(() => flowUpdates.length > 0, [flowUpdates]);
-
   // Needed for SSR
   useEffect(() => {
     setIsScrolled(top > 10);

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

@@ -114,6 +114,11 @@
     top: 6px;
     transition: opacity 0.5s;
     opacity: 0;
+
+    @include tablet {
+      top: -4px;
+      right: 14px;
+    }
   }
 
   &.has_dot {
@@ -139,10 +144,6 @@
       align-items: center;
       margin-right: $gap;
     }
-
-    &::after {
-      right: 0;
-    }
   }
 }
 

src/hooks/flow/useFlow.ts

@@ -8,15 +8,26 @@ import { useFlowStore } from '~/store/flow/useFlowStore';
 
 export const useFlow = () => {
   const { loadMore, isSyncing } = useFlowLoader();
+  const labStats = useGetLabStats();
 
   const { nodes, heroes, recent, updated } = useFlowStore();
   const { isFluid, toggleLayout } = useFlowLayout();
   const lab = useGetLabStats();
 
-  const updates = useMemo(() => [...updated, ...lab.updates].slice(0, 10), [lab.updates, updated]);
+  const updates = useMemo(
+    () => [...updated, ...lab.updates].slice(0, 10),
+    [lab.updates, updated],
+  );
 
   const onChangeCellView = useFlowSetCellView();
 
+  const hasLabUpdates = useMemo(
+    () => labStats.updates.length > 0,
+    [labStats.updates],
+  );
+
+  const hasFlowUpdates = useMemo(() => updated.length > 0, [updated]);
+
   return {
     nodes,
     heroes,
@@ -27,5 +38,7 @@ export const useFlow = () => {
     onChangeCellView,
     loadMore,
     isSyncing,
+    hasLabUpdates,
+    hasFlowUpdates,
   };
 };