feat: Add visual feedback and polish (Task 15)

- Implement toast notification system for success/error messages
- Add loading states with skeleton loaders for async operations
- Create smooth CSS transitions and animations
- Enhance empty states with EmptyState component
- Add loading.tsx files for Next.js loading states
- Integrate toast notifications across all CRUD operations
- Add fade-in and scale-in animations for better UX
- Improve visual feedback for user actions

app/page.tsx

@@ -2,6 +2,7 @@ import { getLists } from '@/lib/actions'
 import ListCard from '@/components/ListCard'
 import NewListButton from '@/components/NewListButton'
 import GlobalSearch from '@/components/GlobalSearch'
+import EmptyState from '@/components/EmptyState'
 
 export default async function Home() {
   const lists = await getLists()
@@ -18,16 +19,18 @@ export default async function Home() {
         <GlobalSearch />
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
-        {lists.map((list) => (
-          <ListCard key={list.id} list={list} />
-        ))}
-      </div>
-
-      {lists.length === 0 && (
-        <div className="text-center py-12 sm:py-16">
-          <p className="text-gray-500 text-base sm:text-lg mb-3 sm:mb-4">No lists yet</p>
-          <p className="text-gray-400 text-sm sm:text-base">Create your first list to get started</p>
+      {lists.length === 0 ? (
+        <EmptyState
+          icon="list"
+          title="No lists yet"
+          description="Create your first list to start organizing your tasks"
+          action={<NewListButton />}
+        />
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 animate-fade-in">
+          {lists.map((list) => (
+            <ListCard key={list.id} list={list} />
+          ))}
         </div>
       )}
     </main>