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/wrappers/settings-scroll.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
+import { cn } from '@/lib/utils';
+import type * as React from 'react';
 
-interface ScrollableContentWrapperProps {
-  children: React.ReactNode;
+interface ScrollableSettingsWrapperProps {
   className?: string;
+  children: React.ReactNode;
 }
 
-export const ScrollableSettingsWrapper: React.FC<
-  ScrollableContentWrapperProps
-> = ({ children, className = '' }) => {
+export function ScrollableSettingsWrapper({
+  className,
+  children,
+}: ScrollableSettingsWrapperProps) {
   return (
-    <div className={`h-[500px] overflow-y-auto space-y-2 ${className}`}>
-      {children}
-    </div>
+    <div className={cn('overflow-y-auto h-full', className)}>{children}</div>
   );
-};
+}