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

keep-notes/app/(main)/trash/page.tsx

@@ -1,28 +1,21 @@
-import { Trash2 } from 'lucide-react'
-import { useLanguage } from '@/lib/i18n'
+import { getTrashedNotes } from '@/app/actions/notes'
+import { MasonryGrid } from '@/components/masonry-grid'
+import { TrashHeader } from '@/components/trash-header'
+import { TrashEmptyState } from './trash-empty-state'
 
 export const dynamic = 'force-dynamic'
 
-export default function TrashPage() {
-    return (
-        <main className="container mx-auto px-4 py-8 max-w-7xl">
-            <TrashContent />
-        </main>
-    )
-}
+export default async function TrashPage() {
+  const notes = await getTrashedNotes()
 
-function TrashContent() {
-    const { t } = useLanguage()
-    
-    return (
-        <div className="flex flex-col items-center justify-center min-h-[60vh] text-center text-gray-500">
-            <div className="bg-gray-100 dark:bg-gray-800 p-6 rounded-full mb-4">
-                <Trash2 className="w-12 h-12 text-gray-400" />
-            </div>
-            <h2 className="text-xl font-medium mb-2">{t('trash.empty')}</h2>
-            <p className="max-w-md text-sm opacity-80">
-                {t('trash.restore')}
-            </p>
-        </div>
-    )
+  return (
+    <main className="container mx-auto px-4 py-8 max-w-7xl">
+      <TrashHeader noteCount={notes.length} />
+      {notes.length > 0 ? (
+        <MasonryGrid notes={notes} isTrashView />
+      ) : (
+        <TrashEmptyState />
+      )}
+    </main>
+  )
 }

keep-notes/app/(main)/trash/trash-empty-state.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { Trash2 } from 'lucide-react'
+import { useLanguage } from '@/lib/i18n'
+
+export function TrashEmptyState() {
+  const { t } = useLanguage()
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh] text-center text-gray-500">
+      <div className="bg-gray-100 dark:bg-gray-800 p-6 rounded-full mb-4">
+        <Trash2 className="w-12 h-12 text-gray-400" />
+      </div>
+      <h2 className="text-xl font-medium mb-2">{t('trash.empty')}</h2>
+      <p className="max-w-md text-sm opacity-80">
+        {t('trash.emptyDescription')}
+      </p>
+    </div>
+  )
+}