feat: add room likes feature

- Users can like/unlike rooms
- Like count displayed on room cards
- LikeButton component with heart icon
- room_likes table with unique constraint

src/app/api/rooms/[id]/likes/route.ts

@@ -1,53 +1,89 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { db } from '@/lib/db';
+import { getSession } from '@/lib/auth';
 
-export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
+// GET - check if user liked a room and get total likes
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
   try {
     const roomId = parseInt(params.id, 10);
-    if (isNaN(roomId)) {
+    const session = await getSession();
-      return NextResponse.json({ error: 'Invalid room ID' }, { status: 400 });
+
+    // Get total likes
+    const { rows: countRows } = await db.query(
+      'SELECT COUNT(*) as count FROM room_likes WHERE room_id = $1',
+      [roomId]
+    );
+    const totalLikes = parseInt(countRows[0].count) || 0;
+
+    // Check if current user liked this room
+    let likedByUser = false;
+    if (session) {
+      const { rows: likeRows } = await db.query(
+        'SELECT 1 FROM room_likes WHERE room_id = $1 AND user_id = $2',
+        [roomId, session.id]
+      );
+      likedByUser = likeRows.length > 0;
     }
 
-    const [countResult, userLikeResult] = await Promise.all([
+    return NextResponse.json({ totalLikes, likedByUser });
-      db.query('SELECT COUNT(*) AS count FROM room_likes WHERE room_id = $1', [roomId]),
-      db.query('SELECT 1 FROM room_likes WHERE room_id = $1 AND user_id = $2', [roomId, 1]),
-    ]);
-
-    return NextResponse.json({
-      count: parseInt(countResult.rows[0].count, 10),
-      user_liked: userLikeResult.rows.length > 0,
-    });
   } catch (err: any) {
-    // Table may not exist yet — return safe defaults
+    return NextResponse.json({ error: err.message || 'Failed to get likes' }, { status: 500 });
-    return NextResponse.json({ count: 0, user_liked: false });
   }
 }
 
-export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
+// POST - toggle like (add if not liked, remove if already liked)
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
   try {
-    const roomId = parseInt(params.id, 10);
+    const session = await getSession();
-    if (isNaN(roomId)) {
+    if (!session) {
-      return NextResponse.json({ error: 'Invalid room ID' }, { status: 400 });
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
     }
 
-    // TODO: get user_id from session/auth instead of hardcoded
+    const roomId = parseInt(params.id, 10);
-    const userId = 1;
 
-    // Toggle: if already liked, unlike; otherwise like
+    // Check if already liked
-    const existing = await db.query(
+    const { rows: existing } = await db.query(
-      'SELECT id FROM room_likes WHERE room_id = $1 AND user_id = $2',
+      'SELECT 1 FROM room_likes WHERE room_id = $1 AND user_id = $2',
-      [roomId, userId]
+      [roomId, session.id]
     );
 
-    if (existing.rows.length > 0) {
+    let liked: boolean;
-      await db.query('DELETE FROM room_likes WHERE id = $1', [existing.rows[0].id]);
+    if (existing.length > 0) {
+      // Unlike - remove the like
+      await db.query(
+        'DELETE FROM room_likes WHERE room_id = $1 AND user_id = $2',
+        [roomId, session.id]
+      );
+      liked = false;
     } else {
-      await db.query('INSERT INTO room_likes (room_id, user_id) VALUES ($1, $2)', [roomId, userId]);
+      // Like - add the like
+      await db.query(
+        'INSERT INTO room_likes (room_id, user_id) VALUES ($1, $2)',
+        [roomId, session.id]
+      );
+      liked = true;
     }
 
-    const countResult = await db.query('SELECT COUNT(*) AS count FROM room_likes WHERE room_id = $1', [roomId]);
+    // Get updated count
+    const { rows: countRows } = await db.query(
+      'SELECT COUNT(*) as count FROM room_likes WHERE room_id = $1',
+      [roomId]
+    );
+    const totalLikes = parseInt(countRows[0].count) || 0;
 
-    return NextResponse.json({ count: parseInt(countResult.rows[0].count, 10) });
+    // Update the rooms table for quick access
+    await db.query(
+      'UPDATE rooms SET likes_count = $1 WHERE id = $2',
+      [totalLikes, roomId]
+    );
+
+    return NextResponse.json({ liked, totalLikes });
   } catch (err: any) {
     return NextResponse.json({ error: err.message || 'Failed to toggle like' }, { status: 500 });
   }

src/app/rooms/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState, useRef } from 'react';
 import { formatDisplayDate } from '@/lib/date';
 import RoomCalendar from '@/components/RoomCalendar';
+import LikeButton from '@/components/LikeButton';
 
 interface Room {
   id: number;
@@ -420,8 +421,11 @@ export default function RoomsPage() {
 
               {/* ─── Room Info ─── */}
               <div style={{ padding: '1.5rem', flex: 1, display: 'flex', flexDirection: 'column' }}>
-                <h2 style={{ margin: '0 0 0.5rem', color: navy, fontSize: '24px' }}>{room.name}</h2>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-                <p style={{ color: '#555', lineHeight: 1.5, flex: 1 }}>{room.description}</p>
+                  <h2 style={{ margin: 0, color: navy, fontSize: '24px' }}>{room.name}</h2>
+                  <LikeButton roomId={room.id} />
+                </div>
+                <p style={{ color: '#555', lineHeight: 1.5, flex: 1, marginTop: '0.5rem' }}>{room.description}</p>
                 
                 {/* ─── Amenity Icons ─── */}
                 {room.amenities && room.amenities.length > 0 && (

src/components/LikeButton.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface LikeButtonProps {
+  roomId: number;
+}
+
+export default function LikeButton({ roomId }: LikeButtonProps) {
+  const [liked, setLiked] = useState(false);
+  const [totalLikes, setTotalLikes] = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(`/api/rooms/${roomId}/likes`)
+      .then(res => res.json())
+      .then(data => {
+        setLiked(data.likedByUser);
+        setTotalLikes(data.totalLikes);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [roomId]);
+
+  const toggleLike = async () => {
+    try {
+      const res = await fetch(`/api/rooms/${roomId}/likes`, { method: 'POST' });
+      if (res.ok) {
+        const data = await res.json();
+        setLiked(data.liked);
+        setTotalLikes(data.totalLikes);
+      }
+    } catch (err) {
+      console.error('Failed to toggle like:', err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div style={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        gap: '0.35rem',
+        padding: '0.4rem 0.75rem',
+        background: 'rgba(0,0,0,0.04)',
+        borderRadius: '999px',
+        fontSize: '13px',
+        color: '#666'
+      }}>
+        ...
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={toggleLike}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.35rem',
+        padding: '0.4rem 0.75rem',
+        background: liked ? '#fee2e2' : 'rgba(0,0,0,0.04)',
+        border: 'none',
+        borderRadius: '999px',
+        cursor: 'pointer',
+        fontSize: '13px',
+        fontWeight: 500,
+        color: liked ? '#dc2626' : '#666',
+        transition: 'all 0.2s ease',
+      }}
+      title={liked ? 'Unlike this room' : 'Like this room'}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill={liked ? 'currentColor' : 'none'}
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+      </svg>
+      {totalLikes > 0 && <span>{totalLikes}</span>}
+    </button>
+  );
+}