Create Plan from Session. Top bar rounded

specs/gymflow-test-plan.md

@@ -204,6 +204,22 @@ Comprehensive test plan for the GymFlow web application, covering authentication
   - The session starts with the selected plan's exercises.
   - The timer starts running.
 
+#### 2.5a. A. Workout Plans - Create Plan from Session
+
+**File:** `tests/plan-from-session.spec.ts`
+
+**Steps:**
+  1. User completes a session with multiple sets (e.g., 2 sets of Pushups, 1 set of Squats).
+  2. Navigate to 'History'.
+  3. Click 'Create Plan' from the session menu.
+  4. Verify the Plan Editor opens.
+  5. **Verify Steps**: The plan should contain exactly 3 steps (Pushups, Pushups, Squats).
+
+**Expected Results:**
+  - The Plan Editor is pre-filled.
+  - Plan steps mirror the session sets 1:1.
+
+
 #### 2.6. B. Exercise Library - Create Custom Exercise (Strength)
 
 **File:** `tests/workout-management.spec.ts`

specs/requirements.md

@@ -64,7 +64,17 @@ Users can structure their training via Plans.
     *   **Logic**: Supports reordering capabilities via drag-and-drop in UI.
 *   **3.2.2 Plan Deletion**
     *   Standard soft or hard delete (Cascades to PlanExercises).
-*   **3.2.3 AI Plan Creation**
+*   **3.2.3 Create Plan from Session**
+    *   **Trigger**: Action menu in History session.
+    *   **Logic**:
+        *   Creates a new Plan pre-filled with data from the selected session.
+        *   **Step Generation**: Mirrors sets 1:1. Every recorded set in the session becomes a distinct step in the plan (no collapsing).
+        *   **Attributes**: 
+            *   `startWeight`: inherited from set. 
+            *   `restTime`: uses User's default rest timer setting.
+            *   `isWeighted`: true if the specific set had weight > 0.
+
+*   **3.2.4 AI Plan Creation**
     *   **Trigger**: "Create with AI" option in Plans FAB Menu, or "Ask your AI coach" link from Tracker (when no plans exist).
     *   **UI Flow**:
         *   Opens a dedicated Side Sheet in the Plans view.

src/components/History.tsx

@@ -1,6 +1,8 @@
 
 import React, { useState } from 'react';
-import { Trash2, Calendar, Clock, ChevronDown, ChevronUp, History as HistoryIcon, Dumbbell, Ruler, Timer, Weight, Edit2, Gauge, Pencil, Save } from 'lucide-react';
+import { createPortal } from 'react-dom';
+import { useNavigate } from 'react-router-dom';
+import { Trash2, Calendar, Clock, ChevronDown, ChevronUp, History as HistoryIcon, Dumbbell, Ruler, Timer, Weight, Edit2, Gauge, Pencil, Save, MoreVertical, ClipboardList } from 'lucide-react';
 import { TopBar } from './ui/TopBar';
 import { WorkoutSession, ExerciseType, WorkoutSet, Language } from '../types';
 import { t } from '../services/i18n';
@@ -9,6 +11,7 @@ import { useSession } from '../context/SessionContext';
 import { useAuth } from '../context/AuthContext';
 import { getExercises } from '../services/storage';
 import { Button } from './ui/Button';
+import { Ripple } from './ui/Ripple';
 import { Card } from './ui/Card';
 import { Modal } from './ui/Modal';
 import { SideSheet } from './ui/SideSheet';
@@ -23,9 +26,11 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
     const { sessions, updateSession, deleteSession } = useSession();
     const { currentUser } = useAuth();
     const userId = currentUser?.id || '';
+    const navigate = useNavigate();
     const [exercises, setExercises] = useState<import('../types').ExerciseDef[]>([]);
 
     const [editingSession, setEditingSession] = useState<WorkoutSession | null>(null);
+    const [menuState, setMenuState] = useState<{ id: string, x: number, y: number } | null>(null);
 
     const [deletingId, setDeletingId] = useState<string | null>(null);
     const [deletingSetInfo, setDeletingSetInfo] = useState<{ sessionId: string, setId: string } | null>(null);
@@ -221,28 +226,23 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
                                         </div>
                                     </div>
 
-                                    <div className="flex gap-1">
+                                    <div className="relative">
                                         <Button
                                             onClick={(e) => {
                                                 e.stopPropagation();
-                                                setEditingSession(JSON.parse(JSON.stringify(session)));
+                                                const rect = e.currentTarget.getBoundingClientRect();
+                                                setMenuState({
+                                                    id: session.id,
+                                                    x: rect.right + window.scrollX,
+                                                    y: rect.bottom + window.scrollY
+                                                });
                                             }}
                                             variant="ghost"
                                             size="icon"
+                                            aria-label="Session Actions"
                                             className="text-on-surface-variant hover:text-primary"
                                         >
-                                            <Pencil size={24} />
+                                            <MoreVertical size={24} />
-                                        </Button>
-                                        <Button
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                setDeletingId(session.id);
-                                            }}
-                                            variant="ghost"
-                                            size="icon"
-                                            className="text-on-surface-variant hover:text-error"
-                                        >
-                                            <Trash2 size={24} />
                                         </Button>
                                     </div>
                                 </div>
@@ -328,6 +328,70 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
                 </div>
             </div>
 
+            {/* MENU PORTAL */}
+            {menuState && typeof document !== 'undefined' && createPortal(
+                <>
+                    <div
+                        className="fixed inset-0 z-50"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setMenuState(null);
+                        }}
+                    />
+                    <div
+                        className="absolute bg-surface-container-high rounded-xl shadow-elevation-2 z-50 min-w-[160px] py-1 flex flex-col overflow-hidden animate-menu-enter origin-top-right"
+                        style={{
+                            top: menuState.y,
+                            left: menuState.x,
+                        }}
+                    >
+                        <button
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                const session = sessions.find(s => s.id === menuState.id);
+                                if (session) {
+                                    navigate(`/plans?createFromSessionId=${session.id}`);
+                                }
+                                setMenuState(null);
+                            }}
+                            className="w-full relative overflow-hidden text-left px-4 py-3 hover:bg-on-surface/10 text-on-surface flex items-center gap-3 transition-colors text-sm font-medium"
+                        >
+                            <Ripple />
+                            <ClipboardList size={18} />
+                            {t('create_plan', lang) || 'Create Plan'}
+                        </button>
+                        <button
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                const session = sessions.find(s => s.id === menuState.id);
+                                if (session) {
+                                    setEditingSession(JSON.parse(JSON.stringify(session)));
+                                }
+                                setMenuState(null);
+                            }}
+                            className="w-full relative overflow-hidden text-left px-4 py-3 hover:bg-on-surface/10 text-on-surface flex items-center gap-3 transition-colors text-sm font-medium"
+                        >
+                            <Ripple />
+                            <Pencil size={18} />
+                            {t('edit', lang)}
+                        </button>
+                        <button
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setDeletingId(menuState.id);
+                                setMenuState(null);
+                            }}
+                            className="w-full relative overflow-hidden text-left px-4 py-3 hover:bg-error-container/10 text-error flex items-center gap-3 transition-colors text-sm font-medium"
+                        >
+                            <Ripple color="rgba(242, 184, 181, 0.2)" />
+                            <Trash2 size={18} />
+                            {t('delete', lang)}
+                        </button>
+                    </div>
+                </>,
+                document.body
+            )}
+
             {/* DELETE CONFIRMATION MODAL */}
             <Modal
                 isOpen={!!(deletingId || deletingSetInfo)}

src/components/Plans.tsx

@@ -254,7 +254,44 @@ const Plans: React.FC<PlansProps> = ({ lang }) => {
       setShowAISheet(true);
       setSearchParams({});
     }
-  }, [searchParams, setSearchParams]);
+
+    const sourceSessionId = searchParams.get('createFromSessionId');
+    if (sourceSessionId && sessions.length > 0) {
+      const sourceSession = sessions.find(s => s.id === sourceSessionId);
+      if (sourceSession) {
+        handleCreateNew();
+
+        // Generate name
+        const dateStr = new Date(sourceSession.startTime).toLocaleDateString();
+        setName(sourceSession.planName || (lang === 'ru' ? `План от ${dateStr}` : `Plan from ${dateStr}`));
+        if (sourceSession.note) setDescription(sourceSession.note);
+
+        // Generate steps from sets
+        const newSteps: PlannedSet[] = [];
+        let lastExerciseId: string | null = null;
+
+        // Use default rest timer or 60s
+        const defaultRest = currentUser?.profile?.restTimerDefault || 60;
+
+        sourceSession.sets.forEach(set => {
+          // Mirror every set from the session to the plan
+          newSteps.push({
+            id: generateId(),
+            exerciseId: set.exerciseId,
+            exerciseName: set.exerciseName,
+            exerciseType: set.type,
+            isWeighted: (set.weight || 0) > 0,
+            restTimeSeconds: defaultRest
+          });
+        });
+
+        setSteps(newSteps);
+
+        // Clear param so we don't re-run
+        setSearchParams({});
+      }
+    }
+  }, [searchParams, setSearchParams, sessions, currentUser]);
 
   const handleStart = (plan: WorkoutPlan) => {
     if (plan.description && plan.description.trim().length > 0) {

src/components/ui/TopBar.tsx

@@ -9,7 +9,7 @@ interface TopBarProps {
 
 export const TopBar: React.FC<TopBarProps> = ({ title, icon: Icon, actions }) => {
     return (
-        <div className="p-4 bg-surface-container shadow-elevation-1 flex items-center gap-3 z-10 shrink-0">
+        <div className="p-4 bg-surface-container shadow-elevation-1 flex items-center gap-3 z-10 shrink-0 rounded-b-[24px]">
             {Icon && (
                 <div className="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center">
                     <Icon size={20} className="text-on-secondary-container" />

src/services/i18n.ts

@@ -111,6 +111,7 @@ const translations = {
     max: 'Max',
     upto: 'Up to',
     no_plan: 'No plan',
+    create_plan: 'Create Plan',
 
     // Plans
     plans_empty: 'No plans created',
@@ -325,6 +326,7 @@ const translations = {
     max: 'Макс',
     upto: 'До',
     no_plan: 'Без плана',
+    create_plan: 'Создать план',
 
     // Plans
     plans_empty: 'Нет созданных планов',

tailwind.config.js

@@ -63,15 +63,20 @@ export default {
                 'elevation-4': '0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)',
                 'elevation-5': '0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)',
             },
+            animation: {
+                ripple: 'ripple 600ms linear',
+                'menu-enter': 'menu-enter 200ms ease-out forwards',
+            },
             keyframes: {
                 ripple: {
                     '0%': { transform: 'scale(0)', opacity: '0.4' },
                     '100%': { transform: 'scale(4)', opacity: '0' },
+                },
+                'menu-enter': {
+                    '0%': { opacity: '0', transform: 'scale(0.95) translateX(-100%)' }, // maintain the translate relative to position
+                    '100%': { opacity: '1', transform: 'scale(1) translateX(-100%)' },
                 }
             },
-            animation: {
-                ripple: 'ripple 600ms linear',
-            }
         },
     },
     plugins: [],

tests/plan-from-session.spec.ts

@@ -0,0 +1,158 @@
+import { test, expect } from './fixtures';
+import { generateId } from '../src/utils/uuid';
+import { ExerciseType } from '../src/types';
+
+test('Create Plan from Session mirrors all sets 1:1', async ({ page, request, createUniqueUser }) => {
+    // 1. Setup User
+    const user = await createUniqueUser();
+
+    // 2. Create Exercises
+    const pushupsId = generateId();
+    const squatsId = generateId();
+
+    // Directly seed exercises via API (assuming a helper or just DB seed if possible, 
+    // but here we might need to use the app or just mock the session data if we can inject it? 
+    // Actually, createUniqueUser returns a token. We can use it to POST /exercises if that endpoint exists, 
+    // or just rely on 'default' exercises if they are seeded. 
+    // Let's use the 'saveSession' endpoint directly logic if we can, or just mock the DB state.
+    // Wait, the app uses local storage mostly or sync? 
+    // Based on other tests (which I can't read right now but recall structure), they usually use UI or API helpers.
+    // I will assume I can just Login and then use UI or API. 
+    // Let's use UI to just ensure clean state, or API `POST /sessions` if available.
+    // Based on `server/src/routes/sessions.ts` existing, I can POST session.
+
+    // Let's rely on standard UI flows or API. 
+    // API is faster.
+
+    const token = user.token;
+
+    // Create Custom Exercises via API
+    await request.post('http://localhost:3000/api/exercises', {
+        headers: { Authorization: `Bearer ${token}` },
+        data: {
+            id: pushupsId,
+            name: 'Test Pushups',
+            type: 'BODYWEIGHT',
+            isUnilateral: false
+        }
+    });
+
+    await request.post('http://localhost:3000/api/exercises', {
+        headers: { Authorization: `Bearer ${token}` },
+        data: {
+            id: squatsId,
+            name: 'Test Squats',
+            type: 'STRENGTH',
+            isUnilateral: false
+        }
+    });
+
+    // 3. Create Session with 3 sets (A, A, B)
+    const sessionId = generateId();
+    const sessionData = {
+        id: sessionId,
+        startTime: Date.now() - 3600000, // 1 hour ago
+        endTime: Date.now(),
+        note: 'Killer workout',
+        type: 'STANDARD',
+        sets: [
+            {
+                id: generateId(),
+                exerciseId: pushupsId,
+                exerciseName: 'Test Pushups',
+                type: 'BODYWEIGHT',
+                reps: 10,
+                timestamp: Date.now() - 3000000,
+                completed: true
+            },
+            {
+                id: generateId(),
+                exerciseId: pushupsId,
+                exerciseName: 'Test Pushups',
+                type: 'BODYWEIGHT',
+                reps: 12,
+                weight: 10, // Weighted
+                timestamp: Date.now() - 2000000,
+                completed: true
+            },
+            {
+                id: generateId(),
+                exerciseId: squatsId,
+                exerciseName: 'Test Squats',
+                type: 'STRENGTH',
+                reps: 5,
+                weight: 100,
+                timestamp: Date.now() - 1000000,
+                completed: true
+            }
+        ]
+    };
+
+    await request.post('http://localhost:3000/api/sessions', {
+        headers: { Authorization: `Bearer ${token}` },
+        data: sessionData
+    });
+
+    // 4. Login and Navigate
+    await page.goto('http://localhost:3000/');
+    await page.fill('input[type="email"]', user.email);
+    await page.fill('input[type="password"]', user.password);
+    await page.click('button:has-text("Login")');
+    await page.waitForURL('**/tracker');
+
+    // 5. Go to History
+    await page.click('text=History');
+
+    // 6. Click Create Plan
+    const sessionCard = page.locator('div.bg-surface-container').first(); // Assuming it's the first card
+    await sessionCard.waitFor();
+
+    // Open Menu
+    await sessionCard.locator('button[aria-label="Session Actions"]').click();
+    // Click 'Create Plan'
+    await page.click('text=Create Plan');
+
+    // 7. Verify Redirection
+    await expect(page).toHaveURL(/.*plans\?createFromSessionId=.*/);
+
+    // 8. Verify Plan Editor Content
+    await expect(page.locator('h2')).toContainText('Plan Editor');
+
+    // Name should be "Plan from [Date]" or Session Name
+    // Note: Session had no planName, so it defaults to date. 
+    // But we can check the Description matches 'Killer workout'
+    await expect(page.locator('textarea')).toHaveValue('Killer workout');
+
+    // 9. Verify 3 Steps (1:1 mapping)
+    // We expect 3 cards in the sortable list
+    const steps = page.locator('.dnd-sortable-item_content, div[class*="items-center"] > div.flex-1');
+    // Finding a robust selector for steps is tricky without specific test ids.
+    // The SortablePlanStep component has `div.text-base.font-medium.text-on-surface` for exercise name.
+
+    const stepNames = page.locator('div.text-base.font-medium.text-on-surface');
+    await expect(stepNames).toHaveCount(3);
+
+    await expect(stepNames.nth(0)).toHaveText('Test Pushups');
+    await expect(stepNames.nth(1)).toHaveText('Test Pushups');
+    await expect(stepNames.nth(2)).toHaveText('Test Squats');
+
+    // 10. Verify Weighted Flag Logic
+    // Set 1 (index 0): Unweighted
+    // Set 2 (index 1): Weighted (weight: 10)
+    // Set 3 (index 2): Weighted (weight: 100)
+
+    const checkboxes = page.locator('input[type="checkbox"]');
+    // Warning: there might be other checkboxes. 
+    // SortablePlanStep has a checkbox for 'weighted'.
+    // Better to look for checked state within the step card.
+
+    // Step 1: Unchecked
+    await expect(page.locator('input[type="checkbox"]').nth(0)).not.toBeChecked();
+
+    // Step 2: Checked
+    await expect(page.locator('input[type="checkbox"]').nth(1)).toBeChecked();
+
+    // Step 3: Checked
+    await expect(page.locator('input[type="checkbox"]').nth(2)).toBeChecked();
+
+});