Redesign restaurant list with card UI

Rounded corners, shadows, hover lift effect, rating display,
and color-coded cuisine/price tags for better visual hierarchy.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/RestaurantList.tsx

@@ -30,30 +30,45 @@ export default function RestaurantList({
   }
 
   return (
-    <div className="divide-y divide-gray-100">
+    <div className="p-3 space-y-2">
       {restaurants.map((r) => (
         <button
           key={r.id}
           onClick={() => onSelect(r)}
-          className={`w-full text-left px-4 py-3 hover:bg-gray-50 transition-colors ${
-            selectedId === r.id ? "bg-blue-50 border-l-2 border-blue-500" : ""
+          className={`w-full text-left p-3 rounded-xl shadow-sm border transition-all hover:shadow-md hover:-translate-y-0.5 ${
+            selectedId === r.id
+              ? "bg-blue-50 border-blue-300 shadow-blue-100"
+              : "bg-white border-gray-100 hover:bg-gray-50"
           }`}
         >
-          <h4 className="font-medium text-sm">
-            <span className="mr-1">{getCuisineIcon(r.cuisine_type)}</span>
-            {r.name}
-          </h4>
-          <div className="flex gap-2 mt-1 text-xs text-gray-500">
-            {r.cuisine_type && <span>{r.cuisine_type}</span>}
-            {r.region && <span>{r.region}</span>}
-            {r.price_range && <span>{r.price_range}</span>}
+          <div className="flex items-start justify-between gap-2">
+            <h4 className="font-semibold text-sm">
+              <span className="mr-1">{getCuisineIcon(r.cuisine_type)}</span>
+              {r.name}
+            </h4>
+            {r.rating && (
+              <span className="text-xs text-yellow-600 font-medium whitespace-nowrap shrink-0">
+                ★ {r.rating}
+              </span>
+            )}
           </div>
+          <div className="flex flex-wrap gap-x-2 gap-y-0.5 mt-1.5 text-xs text-gray-500">
+            {r.cuisine_type && (
+              <span className="px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">{r.cuisine_type}</span>
+            )}
+            {r.price_range && (
+              <span className="px-1.5 py-0.5 bg-green-50 rounded text-green-700">{r.price_range}</span>
+            )}
+          </div>
+          {r.region && (
+            <p className="mt-1 text-xs text-gray-400 truncate">{r.region}</p>
+          )}
           {r.channels && r.channels.length > 0 && (
-            <div className="flex flex-wrap gap-1 mt-1">
+            <div className="flex flex-wrap gap-1 mt-1.5">
               {r.channels.map((ch) => (
                 <span
                   key={ch}
-                  className="px-1.5 py-0.5 bg-red-50 text-red-600 rounded text-[10px] font-medium"
+                  className="px-1.5 py-0.5 bg-red-50 text-red-600 rounded-full text-[10px] font-medium"
                 >
                   {ch}
                 </span>