6.1.0: Редизайн карточек желаний на экране прогресса

play-life-web/src/components/CurrentWeek.jsx

@@ -140,6 +140,55 @@ function MiniWishCard({ wish, onClick, pendingScoresByProject = {} }) {
   )
 }
 
+// Компонент карточки желания в виде строки (для отображения 1-2 желаний)
+function WishRowCard({ wish, onClick, pendingScoresByProject = {}, position }) {
+  const handleClick = (e) => {
+    e.stopPropagation()
+    if (onClick) {
+      onClick(wish)
+    }
+  }
+
+  const cond = wish.first_locked_condition
+  const isPointsCondition = cond?.type === 'project_points'
+  const required = cond?.required_points ?? 0
+  const current = cond?.current_points ?? 0
+  const projectId = cond?.project_id
+  const pending = (projectId != null && pendingScoresByProject[projectId] != null) ? Number(pendingScoresByProject[projectId]) : 0
+  const remaining = isPointsCondition ? (required - current - pending) : 0
+  const weeksText = cond?.weeks_text || ''
+
+  const getUnlockText = () => {
+    if (remaining <= 0) {
+      return 'скоро'
+    }
+    const pointsText = `${Math.round(remaining)} баллов`
+    if (weeksText) {
+      return `${pointsText} (${weeksText})`
+    }
+    return pointsText
+  }
+
+  const positionClass = position === 'last' ? 'wish-row-card-last' : 'wish-row-card-middle'
+
+  return (
+    <div className={`wish-row-card ${positionClass}`} onClick={handleClick}>
+      <div className="wish-row-image">
+        {wish.image_url ? (
+          <img src={wish.image_url} alt={wish.name} />
+        ) : (
+          <div className="wish-row-placeholder">🎁</div>
+        )}
+        <div className="wish-row-overlay" aria-hidden="true" />
+      </div>
+      <div className="wish-row-info">
+        <div className="wish-row-title">{wish.name}</div>
+        <div className="wish-row-unlock">{getUnlockText()}</div>
+      </div>
+    </div>
+  )
+}
+
 // Компонент карточки проекта с круглым прогрессбаром
 function ProjectCard({ project, projectColor, onProjectClick, wishes = [], onWishClick, pendingScoresByProject = {} }) {
   const { project_name, total_score, min_goal_score, max_goal_score, priority, today_change } = project
@@ -267,20 +316,38 @@ function ProjectCard({ project, projectColor, onProjectClick, wishes = [], onWis
         </div>
       </div>
 
-      {/* Горизонтальный список желаний в отдельном белом блоке */}
+      {/* Список желаний: горизонтальный скролл для 3+, вертикальный список для 1-2 */}
       {hasWishes && (
-        <div className="project-wishes-block">
-          <div className="project-wishes-scroll">
-            {wishes.map((wish) => (
-              <MiniWishCard
-                key={wish.id}
-                wish={wish}
-                onClick={onWishClick}
-                pendingScoresByProject={pendingScoresByProject || {}}
-              />
-            ))}
+        wishes.length >= 3 ? (
+          <div className="project-wishes-block">
+            <div className="project-wishes-scroll">
+              {wishes.map((wish) => (
+                <MiniWishCard
+                  key={wish.id}
+                  wish={wish}
+                  onClick={onWishClick}
+                  pendingScoresByProject={pendingScoresByProject || {}}
+                />
+              ))}
+            </div>
           </div>
-        </div>
+        ) : (
+          <div className="project-wishes-vertical">
+            {wishes.map((wish, index) => {
+              const isLast = index === wishes.length - 1
+              const position = isLast ? 'last' : 'middle'
+              return (
+                <WishRowCard
+                  key={wish.id}
+                  wish={wish}
+                  onClick={onWishClick}
+                  pendingScoresByProject={pendingScoresByProject || {}}
+                  position={position}
+                />
+              )
+            })}
+          </div>
+        )
       )}
     </div>
   )