Update configuration settings and improve notifications

This commit updates the configuration settings and improves the notification functionality by filtering out duplicate notifications. It also includes changes to feature flag data types and removed dependencies in `package.json`, alongside updates to `pnpm-lock.yaml`.

packages/features/notifications/src/hooks/use-fetch-notifications.ts

@@ -4,6 +4,8 @@ import { useQuery } from '@tanstack/react-query';
 
 import { useSupabase } from '@kit/supabase/hooks/use-supabase';
 
+import { useNotificationsStream } from './use-notifications-stream';
+
 type Notification = {
   id: number;
   body: string;
@@ -22,41 +24,21 @@ export function useFetchNotifications({
   accountIds: string[];
   realtime: boolean;
 }) {
-  const { data: notifications } = useFetchInitialNotifications({ accountIds });
-  const client = useSupabase();
+  const { data: initialNotifications } = useFetchInitialNotifications({
+    accountIds,
+  });
+
+  useNotificationsStream({
+    onNotifications,
+    accountIds,
+    enabled: realtime,
+  });
 
   useEffect(() => {
-    let realtimeSubscription: { unsubscribe: () => void } | null = null;
-
-    if (realtime) {
-      const channel = client.channel('notifications-channel');
-
-      realtimeSubscription = channel
-        .on(
-          'postgres_changes',
-          {
-            event: 'INSERT',
-            schema: 'public',
-            filter: `account_id=in.(${accountIds.join(', ')})`,
-            table: 'notifications',
-          },
-          (payload) => {
-            onNotifications([payload.new as Notification]);
-          },
-        )
-        .subscribe();
+    if (initialNotifications) {
+      onNotifications(initialNotifications);
     }
-
-    if (notifications) {
-      onNotifications(notifications);
-    }
-
-    return () => {
-      if (realtimeSubscription) {
-        realtimeSubscription.unsubscribe();
-      }
-    };
-  }, [client, onNotifications, accountIds, realtime, notifications]);
+  }, [initialNotifications, onNotifications]);
 }
 
 function useFetchInitialNotifications(props: { accountIds: string[] }) {
@@ -86,5 +68,6 @@ function useFetchInitialNotifications(props: { accountIds: string[] }) {
       return data;
     },
     refetchOnMount: false,
+    refetchOnWindowFocus: false,
   });
 }

packages/features/notifications/src/hooks/use-notifications-stream.ts

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { useSupabase } from '@kit/supabase/hooks/use-supabase';
+
+type Notification = {
+  id: number;
+  body: string;
+  dismissed: boolean;
+  type: 'info' | 'warning' | 'error';
+  created_at: string;
+  link: string | null;
+};
+
+export function useNotificationsStream(params: {
+  onNotifications: (notifications: Notification[]) => void;
+  accountIds: string[];
+  enabled: boolean;
+}) {
+  const client = useSupabase();
+
+  const { data: subscription } = useQuery({
+    enabled: params.enabled,
+    queryKey: ['realtime-notifications', ...params.accountIds],
+    queryFn: () => {
+      const channel = client.channel('notifications-channel');
+
+      return channel
+        .on(
+          'postgres_changes',
+          {
+            event: 'INSERT',
+            schema: 'public',
+            filter: `account_id=in.(${params.accountIds.join(', ')})`,
+            table: 'notifications',
+          },
+          (payload) => {
+            params.onNotifications([payload.new as Notification]);
+          },
+        )
+        .subscribe();
+    },
+  });
+
+  useEffect(() => {
+    return () => {
+      void subscription?.unsubscribe();
+    };
+  }, [subscription]);
+}