refactor(ux): consolidate BMAD skills, update design system, and clean up Prisma generated client

keep-notes/components/trash-header.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useState } from 'react'
+import { Trash2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { useLanguage } from '@/lib/i18n'
+import { emptyTrash } from '@/app/actions/notes'
+import { useRouter } from 'next/navigation'
+import { toast } from 'sonner'
+
+interface TrashHeaderProps {
+  noteCount?: number
+}
+
+export function TrashHeader({ noteCount = 0 }: TrashHeaderProps) {
+  const { t } = useLanguage()
+  const router = useRouter()
+  const [showEmptyDialog, setShowEmptyDialog] = useState(false)
+  const [isEmptying, setIsEmptying] = useState(false)
+
+  const handleEmptyTrash = async () => {
+    setIsEmptying(true)
+    try {
+      await emptyTrash()
+      toast.success(t('trash.emptyTrashSuccess'))
+      router.refresh()
+    } catch (error) {
+      console.error('Error emptying trash:', error)
+    } finally {
+      setIsEmptying(false)
+      setShowEmptyDialog(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-between mb-8">
+      <h1 className="text-3xl font-bold">{t('nav.trash')}</h1>
+      {noteCount > 0 && (
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={() => setShowEmptyDialog(true)}
+          disabled={isEmptying}
+        >
+          <Trash2 className="h-4 w-4 mr-2" />
+          {t('trash.emptyTrash')}
+        </Button>
+      )}
+
+      <AlertDialog open={showEmptyDialog} onOpenChange={setShowEmptyDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('trash.emptyTrash')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('trash.emptyTrashConfirm')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" onClick={handleEmptyTrash}>
+              {t('trash.emptyTrash')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}