feat: Implement settings dropdown and page components

- Added `SettingsDropdown` component for selecting settings sections with icons and descriptions.
- Created `SettingsPage` component to manage user settings, including account details, notifications, calendar availability, privacy, and appearance.
- Introduced `SettingsSwitcher` for selecting options within settings.
- Integrated command and dialog components for improved user interaction.
- Updated `UserDropdown` to include links for settings and logout.
- Refactored button styles and card footer layout for consistency.
- Added popover functionality for dropdown menus.
- Updated dependencies in `yarn.lock` for new components.

src/components/buttons/icon-button.tsx

@@ -1,19 +1,20 @@
 import { Button } from '@/components/ui/button';
-
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { LucideProps } from 'lucide-react';
+import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 export function IconButton({
   icon,
   children,
   ...props
 }: {
-  icon: IconProp;
-  children: React.ReactNode;
+  icon?: ForwardRefExoticComponent<
+    Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>
+  >;
+  children?: React.ReactNode;
 } & React.ComponentProps<typeof Button>) {
   return (
     <Button type='button' variant='secondary' {...props}>
-      <FontAwesomeIcon icon={icon} className='mr-2' />
+      {icon && React.createElement(icon, { className: 'mr-2' })}
       {children}
     </Button>
   );