New Layout (#22)

New layout

packages/features/notifications/src/components/notifications-popover.tsx

@@ -111,12 +111,12 @@ export function NotificationsPopover(params: {
   return (
     <Popover modal open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button className={'h-8 w-8'} variant={'ghost'}>
+        <Button className={'h-9 w-9'} variant={'ghost'}>
           <Bell className={'min-h-5 min-w-5'} />
 
           <span
             className={cn(
-              `fade-in animate-in zoom-in absolute right-5 top-5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
+              `fade-in animate-in zoom-in absolute right-5 top-5 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
               {
                 hidden: !unread.length,
               },
@@ -128,8 +128,10 @@ export function NotificationsPopover(params: {
       </PopoverTrigger>
 
       <PopoverContent
-        className={'flex flex-col p-0'}
-        collisionPadding={{ right: 20 }}
+        className={'flex w-full flex-col p-0 lg:min-w-64'}
+        align={'start'}
+        collisionPadding={20}
+        sideOffset={10}
       >
         <div className={'flex items-center px-3 py-2 text-sm font-semibold'}>
           {t('common:notifications')}

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

@@ -1,4 +1,6 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
+
+import { useQuery } from '@tanstack/react-query';
 
 import { useSupabase } from '@kit/supabase/hooks/use-supabase';
 
@@ -20,8 +22,8 @@ export function useFetchNotifications({
   accountIds: string[];
   realtime: boolean;
 }) {
+  const { data: notifications } = useFetchInitialNotifications({ accountIds });
   const client = useSupabase();
-  const didFetchInitialData = useRef(false);
 
   useEffect(() => {
     let realtimeSubscription: { unsubscribe: () => void } | null = null;
@@ -45,10 +47,26 @@ export function useFetchNotifications({
         .subscribe();
     }
 
-    if (!didFetchInitialData.current) {
-      const now = new Date().toISOString();
+    if (notifications) {
+      onNotifications(notifications);
+    }
 
-      const initialFetch = client
+    return () => {
+      if (realtimeSubscription) {
+        realtimeSubscription.unsubscribe();
+      }
+    };
+  }, [client, onNotifications, accountIds, realtime, notifications]);
+}
+
+function useFetchInitialNotifications(props: { accountIds: string[] }) {
+  const client = useSupabase();
+  const now = new Date().toISOString();
+
+  return useQuery({
+    queryKey: ['notifications', ...props.accountIds],
+    queryFn: async () => {
+      const { data } = await client
         .from('notifications')
         .select(
           `id, 
@@ -59,29 +77,14 @@ export function useFetchNotifications({
            link
            `,
         )
-        .in('account_id', accountIds)
+        .in('account_id', props.accountIds)
         .eq('dismissed', false)
         .gt('expires_at', now)
         .order('created_at', { ascending: false })
         .limit(10);
 
-      didFetchInitialData.current = true;
-
-      void initialFetch.then(({ data, error }) => {
-        if (error) {
-          throw error;
-        }
-
-        if (data) {
-          onNotifications(data);
-        }
-      });
-    }
-
-    return () => {
-      if (realtimeSubscription) {
-        realtimeSubscription.unsubscribe();
-      }
-    };
-  }, [client, onNotifications, accountIds, realtime]);
+      return data;
+    },
+    refetchOnMount: false,
+  });
 }