6.5.0: Табы вместо селекта в форме цели

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

VERSION

@@ -1 +1 @@
-6.4.13
+6.5.0

play-life-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "play-life-web",
-  "version": "6.4.13",
+  "version": "6.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

play-life-web/src/components/WishlistForm.css

@@ -430,12 +430,52 @@
 }
 
 .condition-form form {
-  padding: 1.5rem 1.5rem 0.75rem 1.5rem;
+  padding: 0 1.5rem 0.75rem 1.5rem;
   flex: 1;
   display: flex;
   flex-direction: column;
 }
 
+.condition-tabs-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding-top: 0.5rem;
+}
+
+.condition-tabs-inner {
+  display: flex;
+  gap: 0.5rem;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.condition-tabs-close {
+  margin-left: auto;
+  margin-right: -0.5rem;
+}
+
+.condition-tab-button {
+  background: none;
+  border: none;
+  padding: 0.75rem 1.25rem;
+  font-size: 1rem;
+  color: #666;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  margin-bottom: -2px;
+  transition: color 0.2s, border-color 0.2s;
+}
+
+.condition-tab-button:hover {
+  color: #3498db;
+}
+
+.condition-tab-button.active {
+  color: #3498db;
+  border-bottom-color: #3498db;
+  font-weight: 600;
+}
+
 .form-actions {
   display: flex;
   gap: 1rem;
@@ -449,7 +489,6 @@
   text-align: left;
   color: #666;
   font-size: 0.85em;
-  min-height: 1.2em;
   line-height: 1.2em;
 }
 

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

@@ -1548,23 +1548,27 @@ function ConditionForm({ tasks, projects, onSubmit, onCancel, editingCondition,
   return (
     <div className="condition-form-overlay" onClick={onCancel}>
       <div className="condition-form" onClick={(e) => e.stopPropagation()}>
-        <div className="condition-form-header">
+        <form onSubmit={handleSubmit}>
-          <h3>{isEditing ? 'Редактировать цель' : 'Добавить цель'}</h3>
+          <div className="condition-tabs-container">
-          <button onClick={onCancel} className="condition-form-close-button">
+            <div className="condition-tabs-inner">
-            ✕
+              <button
+                type="button"
+                className={`condition-tab-button ${type === 'project_points' ? 'active' : ''}`}
+                onClick={() => setType('project_points')}
+              >
+                Баллы
+              </button>
+              <button
+                type="button"
+                className={`condition-tab-button ${type === 'task_completion' ? 'active' : ''}`}
+                onClick={() => setType('task_completion')}
+              >
+                Задача
               </button>
             </div>
-        <form onSubmit={handleSubmit}>
+            <button type="button" onClick={onCancel} className="condition-form-close-button condition-tabs-close">
-          <div className="form-group">
+              ✕
-            <label>Тип условия</label>
+            </button>
-            <select
-              value={type}
-              onChange={(e) => setType(e.target.value)}
-              className="form-input"
-            >
-              <option value="project_points">Баллы</option>
-              <option value="task_completion">Задача</option>
-            </select>
           </div>
 
           {type === 'task_completion' && (
@@ -1625,14 +1629,10 @@ function ConditionForm({ tasks, projects, onSubmit, onCancel, editingCondition,
               {isEditing ? 'Сохранить' : 'Добавить'}
             </button>
           </div>
-          {type === 'project_points' && (
+          {type === 'project_points' && calculatedWeeksText && (
             <div className="calculated-weeks-info">
-              {calculatedWeeksText && (
-                <>
               <span>Срок: </span>
               <span style={{ fontWeight: '600' }}>{calculatedWeeksText}</span>
-                </>
-              )}
             </div>
           )}
         </form>