From a8df420f3659d07abb3ecf7d05d5318d4d2d08b1 Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Tue, 30 Jun 2026 23:41:37 -0500
Subject: [PATCH] fix: consolidate hearts to single like button with count

- Remove duplicate LikeButton component from room info section
- Remove separate like count badge from bottom-right
- Single unified like button (top-left) shows heart + count
- Cleaner UI: one heart, one tap, clear feedback
---
 src/app/rooms/page.tsx | 46 +++++++++++++-----------------------------
 1 file changed, 14 insertions(+), 32 deletions(-)

diff --git a/src/app/rooms/page.tsx b/src/app/rooms/page.tsx
index 907bf75..82b433b 100644
--- a/src/app/rooms/page.tsx
+++ b/src/app/rooms/page.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useState, useRef } from 'react';
 import { formatDisplayDate } from '@/lib/date';
 import RoomCalendar from '@/components/RoomCalendar';
-import LikeButton from '@/components/LikeButton';
 import OptimizedImage from '@/components/OptimizedImage';
 
 interface Room {
@@ -331,47 +330,33 @@ export default function RoomsPage() {
                   </div>
                 )}
 
-                {/* Like button overlay */}
+                {/* Like button with count */}
                 <button
                   onClick={() => toggleLike(room.id)}
                   style={{
                     position: 'absolute',
                     top: 12,
                     left: 12,
-                    width: 40,
-                    height: 40,
-                    borderRadius: '50%',
-                    border: 'none',
-                    background: hasLiked ? 'rgba(231,76,60,0.9)' : 'rgba(0,0,0,0.4)',
-                    color: '#fff',
-                    fontSize: '20px',
-                    cursor: 'pointer',
                     display: 'flex',
                     alignItems: 'center',
-                    justifyContent: 'center',
+                    gap: '6px',
+                    padding: '6px 12px',
+                    borderRadius: '999px',
+                    border: 'none',
+                    background: hasLiked ? 'rgba(231,76,60,0.9)' : 'rgba(0,0,0,0.5)',
+                    color: '#fff',
+                    fontSize: '14px',
+                    fontWeight: 600,
+                    cursor: 'pointer',
                     transition: 'all 0.2s ease',
                   }}
-                  onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.15)'; }}
+                  onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.05)'; }}
                   onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
                   aria-label="Like this room"
                 >
-                  {hasLiked ? '\u2764\uFE0F' : '\u2661'}
+                  <span style={{ fontSize: '16px' }}>{hasLiked ? '❤️' : '♡'}</span>
+                  <span>{totalLikes}</span>
                 </button>
-
-                {/* Like count */}
-                <div style={{
-                  position: 'absolute',
-                  bottom: 8,
-                  right: 12,
-                  background: hasLiked ? 'rgba(231,76,60,0.85)' : 'rgba(0,0,0,0.5)',
-                  color: '#fff',
-                  fontSize: '13px',
-                  fontWeight: 600,
-                  padding: '4px 10px',
-                  borderRadius: '999px',
-                }}>
-                  {'\u2764\uFE0F'} {totalLikes}
-                </div>
               </div>
 
               {/* ─── Thumbnail Strip ─── */}
@@ -425,10 +410,7 @@ export default function RoomsPage() {
 
               {/* ─── Room Info ─── */}
               <div style={{ padding: '1.5rem', flex: 1, display: 'flex', flexDirection: 'column' }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-                  <h2 style={{ margin: 0, color: navy, fontSize: '24px' }}>{room.name}</h2>
-                  <LikeButton roomId={room.id} />
-                </div>
+                <h2 style={{ margin: 0, color: navy, fontSize: '24px' }}>{room.name}</h2>
                 <p style={{ color: '#555', lineHeight: 1.5, flex: 1, marginTop: '0.5rem' }}>{room.description}</p>
                 
                 {/* ─── Amenity Icons ─── */}