refactor: Replace legacy UI components with new App components across various files for improved consistency and maintainability

apps/web/src/components/app-alert.tsx

@@ -0,0 +1,27 @@
+import type { ComponentProps } from 'react'
+import { Alert, AlertAction, AlertDescription, AlertTitle } from '@cfdm/ui/components/alert'
+import { cn } from '@cfdm/ui/lib/utils'
+
+export type AppAlertProps = ComponentProps<typeof Alert>
+export type AppAlertTitleProps = ComponentProps<typeof AlertTitle>
+export type AppAlertDescriptionProps = ComponentProps<typeof AlertDescription>
+export type AppAlertActionProps = ComponentProps<typeof AlertAction>
+
+export function AppAlert({ className, ...props }: AppAlertProps) {
+  return <Alert className={cn(className)} {...props} />
+}
+
+export function AppAlertTitle({ className, ...props }: AppAlertTitleProps) {
+  return <AlertTitle className={cn(className)} {...props} />
+}
+
+export function AppAlertDescription({
+  className,
+  ...props
+}: AppAlertDescriptionProps) {
+  return <AlertDescription className={cn(className)} {...props} />
+}
+
+export function AppAlertAction({ className, ...props }: AppAlertActionProps) {
+  return <AlertAction className={cn(className)} {...props} />
+}