From 63dbfe5610251ee0a0bd1b3c483518429714a92f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Fri, 4 Jul 2025 23:51:24 +0200
Subject: [PATCH] ?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/columns/notifications.tsx  | 12 ++++-
 .../src/pages/notifications/notifications.tsx | 54 +------------------
 2 files changed, 12 insertions(+), 54 deletions(-)

diff --git a/packages/pl-fe/src/columns/notifications.tsx b/packages/pl-fe/src/columns/notifications.tsx
index 666edcc0f..0c2f449f7 100644
--- a/packages/pl-fe/src/columns/notifications.tsx
+++ b/packages/pl-fe/src/columns/notifications.tsx
@@ -12,8 +12,10 @@ import {
   setFilter,
 } from 'pl-fe/actions/notifications';
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
+import ScrollTopButton from 'pl-fe/components/scroll-top-button';
 import ScrollableList from 'pl-fe/components/scrollable-list';
 import Icon from 'pl-fe/components/ui/icon';
+import Portal from 'pl-fe/components/ui/portal';
 import Tabs from 'pl-fe/components/ui/tabs';
 import Notification from 'pl-fe/features/notifications/components/notification';
 import PlaceholderNotification from 'pl-fe/features/placeholder/components/placeholder-notification';
@@ -148,7 +150,7 @@ const NotificationsColumn = () => {
   const showFilterBar = (features.notificationsExcludeTypes || features.notificationsIncludeTypes) && settings.notifications.quickFilter.show;
   const activeFilter = settings.notifications.quickFilter.active;
   const [topNotification, setTopNotification] = useState<string>();
-  const { displayedNotifications } = useAppSelector(state => getNotifications(state, topNotification));
+  const { queuedNotificationCount, displayedNotifications } = useAppSelector(state => getNotifications(state, topNotification));
   const isLoading = useAppSelector(state => state.notifications.isLoading);
   // const isUnread = useAppSelector(state => state.notifications.unread > 0);
   const hasMore = useAppSelector(state => state.notifications.hasMore);
@@ -279,6 +281,14 @@ const NotificationsColumn = () => {
     <>
       {filterBarContainer}
 
+      <Portal>
+        <ScrollTopButton
+          onClick={handleDequeueNotifications}
+          count={queuedNotificationCount}
+          message={messages.queue}
+        />
+      </Portal>
+
       <PullToRefresh onRefresh={handleRefresh}>
         {scrollContainer}
       </PullToRefresh>
diff --git a/packages/pl-fe/src/pages/notifications/notifications.tsx b/packages/pl-fe/src/pages/notifications/notifications.tsx
index eeaa81405..0bc414875 100644
--- a/packages/pl-fe/src/pages/notifications/notifications.tsx
+++ b/packages/pl-fe/src/pages/notifications/notifications.tsx
@@ -1,76 +1,24 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { createSelector } from 'reselect';
 
-import { markReadNotifications } from 'pl-fe/actions/notifications';
 import NotificationsColumn from 'pl-fe/columns/notifications';
-import ScrollTopButton from 'pl-fe/components/scroll-top-button';
 import Column from 'pl-fe/components/ui/column';
-import Portal from 'pl-fe/components/ui/portal';
-import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
-import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { useFeatures } from 'pl-fe/hooks/use-features';
 import { useSettings } from 'pl-fe/hooks/use-settings';
 
-import type { RootState } from 'pl-fe/store';
-
 const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' },
-  queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
-});
-
-const getNotifications = createSelector([
-  (state: RootState) => state.notifications.items,
-  (_, topNotification?: string) => topNotification,
-], (notifications, topNotificationId) => {
-  if (topNotificationId) {
-    const queuedNotificationCount = notifications.findIndex((notification) =>
-      notification.most_recent_notification_id <= topNotificationId,
-    );
-    const displayedNotifications = notifications.slice(queuedNotificationCount);
-
-    return {
-      queuedNotificationCount,
-      displayedNotifications,
-    };
-  }
-
-  return {
-    queuedNotificationCount: 0,
-    displayedNotifications: notifications,
-  };
 });
 
 const NotificationsPage = () => {
-  const dispatch = useAppDispatch();
   const features = useFeatures();
   const intl = useIntl();
   const settings = useSettings();
 
   const showFilterBar = (features.notificationsExcludeTypes || features.notificationsIncludeTypes) && settings.notifications.quickFilter.show;
-  const [topNotification, setTopNotification] = useState<string>();
-  const { queuedNotificationCount, displayedNotifications } = useAppSelector(state => getNotifications(state, topNotification));
-
-  const handleDequeueNotifications = useCallback(() => {
-    setTopNotification(undefined);
-    dispatch(markReadNotifications());
-  }, []);
-
-  useEffect(() => {
-    if (topNotification || displayedNotifications.length === 0) return;
-    setTopNotification(displayedNotifications[0].most_recent_notification_id);
-  }, [displayedNotifications.length]);
 
   return (
     <Column label={intl.formatMessage(messages.title)} withHeader={!showFilterBar}>
-      <Portal>
-        <ScrollTopButton
-          onClick={handleDequeueNotifications}
-          count={queuedNotificationCount}
-          message={messages.queue}
-        />
-      </Portal>
-
       <NotificationsColumn />
     </Column>
   );