Revert "Unify workspace dropdowns; Update layouts (#458)"

This reverts commit 4bc8448a1d.

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

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useState } from 'react';
 
 import { Bell, CircleAlert, Info, TriangleAlert, XIcon } from 'lucide-react';
-import { useLocale, useTranslations } from 'next-intl';
+import { useTranslation } from 'react-i18next';
 
 import { Button } from '@kit/ui/button';
 import { If } from '@kit/ui/if';
@@ -19,8 +19,7 @@ export function NotificationsPopover(params: {
   accountIds: string[];
   onClick?: (notification: Notification) => void;
 }) {
-  const t = useTranslations();
-  const locale = useLocale();
+  const { i18n, t } = useTranslation();
 
   const [open, setOpen] = useState(false);
   const [notifications, setNotifications] = useState<Notification[]>([]);
@@ -54,7 +53,7 @@ export function NotificationsPopover(params: {
       (new Date().getTime() - date.getTime()) / (1000 * 60 * 60 * 24),
     );
 
-    const formatter = new Intl.RelativeTimeFormat(locale, {
+    const formatter = new Intl.RelativeTimeFormat(i18n.language, {
       numeric: 'auto',
     });
 
@@ -62,7 +61,7 @@ export function NotificationsPopover(params: {
       time = Math.floor((new Date().getTime() - date.getTime()) / (1000 * 60));
 
       if (time < 5) {
-        return t('common.justNow');
+        return t('common:justNow');
       }
 
       if (time < 60) {
@@ -111,42 +110,39 @@ export function NotificationsPopover(params: {
 
   return (
     <Popover modal open={open} onOpenChange={setOpen}>
-      <PopoverTrigger
-        render={
-          <Button
-            size="sm"
-            className="text-secondary-foreground text-muted-foreground relative hover:bg-transparent"
-            variant="ghost"
-          />
-        }
-      >
-        <Bell className={'size-4 min-h-3 min-w-3'} />
+      <PopoverTrigger asChild>
+        <Button className={'relative h-9 w-9'} variant={'ghost'}>
+          <Bell className={'min-h-4 min-w-4'} />
 
-        <span
-          className={cn(
-            `fade-in animate-in zoom-in absolute top-1 right-1 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
-            {
-              hidden: !notifications.length,
-            },
-          )}
-        >
-          {notifications.length}
-        </span>
+          <span
+            className={cn(
+              `fade-in animate-in zoom-in absolute top-1 right-1 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
+              {
+                hidden: !notifications.length,
+              },
+            )}
+          >
+            {notifications.length}
+          </span>
+        </Button>
       </PopoverTrigger>
 
       <PopoverContent
-        className={'flex w-full max-w-96 flex-col lg:min-w-64'}
+        className={'flex w-full max-w-96 flex-col p-0 lg:min-w-64'}
         align={'start'}
+        collisionPadding={20}
         sideOffset={10}
       >
-        <div className={'flex items-center text-sm font-semibold'}>
-          {t('common.notifications')}
+        <div className={'flex items-center px-3 py-2 text-sm font-semibold'}>
+          {t('common:notifications')}
         </div>
 
         <Separator />
 
         <If condition={!notifications.length}>
-          <div className={'text-sm'}>{t('common.noNotifications')}</div>
+          <div className={'px-3 py-2 text-sm'}>
+            {t('common:noNotifications')}
+          </div>
         </If>
 
         <div