feat: enhance header with notification buttons and user dropdown

- Updated header component to include notification buttons with icons.
- Introduced a new NavUser component for user-related actions in the sidebar.
- Added NotificationDot component for visual notification indicators.
- Created UserCard component to display user information.
- Implemented UserDropdown for user settings and logout functionality.
- Added Avatar component for user images with fallback support.
- Refactored Sheet and Tooltip components for consistency and improved styling.
- Introduced QueryProvider for managing React Query context.
- Updated SidebarProvider to use custom sidebar implementation.
- Enhanced mobile detection hook for better responsiveness.
- Updated dependencies in yarn.lock for new features and fixes.

feat: remove dot

src/components/buttons/notification-button.tsx

@@ -0,0 +1,40 @@
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  // DropdownMenuGroup,
+  // DropdownMenuItem,
+  // DropdownMenuLabel,
+  // DropdownMenuPortal,
+  // DropdownMenuSeparator,
+  // DropdownMenuShortcut,
+  // DropdownMenuSub,
+  // DropdownMenuSubContent,
+  // DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { NDot, NotificationDot } from '@/components/misc/notification-dot';
+
+export function NotificationButton({
+  dotVariant,
+  children,
+  ...props
+}: {
+  dotVariant?: NDot;
+  children: React.ReactNode;
+} & React.ComponentProps<typeof Button>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type='button' variant='outline_primary' {...props}>
+          {children}
+          <NotificationDot
+            dotVariant={dotVariant}
+            className='absolute ml-[30px] mt-[30px]'
+          />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end'></DropdownMenuContent>
+    </DropdownMenu>
+  );
+}