update src/ tutorial & data management

src/components/FocusPageLocal.jsx

@@ -564,7 +564,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
     },
     {
       title: 'Sync across devices',
-      text: 'Your progress is automatically saved to this browser. You can migrate your data anytime via the Data Management section at the bottom of My Records.'
+      text: 'Your progress is automatically saved to this browser. You can migrate your data anytime via the Data Management section at the top of My Records.'
     }
   ];
 

src/components/Records.jsx

@@ -14,7 +14,6 @@ function Records() {
   
   const fileInputRef = useRef(null);
 
-  // Format a session duration.
   const formatDuration = (seconds) => {
     const safeSeconds = Math.max(0, Number(seconds) || 0);
     const mins = Math.floor(safeSeconds / 60);
@@ -22,7 +21,6 @@ function Records() {
     return `${mins}m ${secs}s`;
   };
 
-  // Format a session timestamp for table display.
   const formatDate = (dateString) => {
     const date = new Date(dateString);
     return date.toLocaleDateString('en-US', {
@@ -159,7 +157,6 @@ function Records() {
     });
   };
 
-  // Load session rows for the selected filter.
   const loadSessions = async (filterType) => {
     setLoading(true);
     try {
@@ -174,7 +171,6 @@ function Records() {
     }
   };
 
-  // Draw the session score chart.
   const drawChart = (data) => {
     const canvas = chartRef.current;
     if (!canvas) return;
@@ -183,7 +179,6 @@ function Records() {
     const width = canvas.width = canvas.offsetWidth;
     const height = canvas.height = 300;
 
-    // Clear the canvas before each redraw.
     ctx.clearRect(0, 0, width, height);
 
     if (data.length === 0) {
@@ -194,17 +189,14 @@ function Records() {
       return;
     }
 
-    // Use at most the latest 20 sessions in the chart.
     const displayData = data.slice(0, 20).reverse();
     const padding = 50;
     const chartWidth = width - padding * 2;
     const chartHeight = height - padding * 2;
     const barWidth = chartWidth / displayData.length;
 
-    // Use a normalized max score for chart scaling.
     const maxScore = 1.0;
 
-    // Draw the chart axes.
     ctx.strokeStyle = '#E0E0E0';
     ctx.lineWidth = 2;
     ctx.beginPath();
@@ -213,7 +205,6 @@ function Records() {
     ctx.lineTo(width - padding, height - padding);
     ctx.stroke();
 
-    // Draw Y-axis labels.
     ctx.fillStyle = '#666';
     ctx.font = '12px Nunito';
     ctx.textAlign = 'right';
@@ -222,7 +213,6 @@ function Records() {
       const value = (maxScore * i / 4 * 100).toFixed(0);
       ctx.fillText(value + '%', padding - 10, y + 4);
 
-      // Draw horizontal grid lines.
       ctx.strokeStyle = '#F0F0F0';
       ctx.lineWidth = 1;
       ctx.beginPath();
@@ -231,14 +221,12 @@ function Records() {
       ctx.stroke();
     }
 
-    // Draw the bar chart.
     displayData.forEach((session, index) => {
       const barHeight = (session.focus_score / maxScore) * chartHeight;
       const x = padding + index * barWidth + barWidth * 0.1;
       const y = height - padding - barHeight;
       const barActualWidth = barWidth * 0.8;
 
-      // Map each score to a blue-toned color band.
       const score = session.focus_score;
       let color;
       if (score >= 0.8) color = '#4A90E2';
@@ -249,20 +237,17 @@ function Records() {
       ctx.fillStyle = color;
       ctx.fillRect(x, y, barActualWidth, barHeight);
 
-      // Draw a matching outline around each bar.
       ctx.strokeStyle = color;
       ctx.lineWidth = 1;
       ctx.strokeRect(x, y, barActualWidth, barHeight);
     });
 
-    // Draw the chart title.
     ctx.textAlign = 'left';
     ctx.font = 'bold 14px Nunito';
     ctx.fillStyle = '#4A90E2';
     ctx.fillText('Focus Score by Session', padding, 30);
   };
 
-  // Initial load.
   useEffect(() => {
     loadSessions(filter);
   }, [filter]);
@@ -287,12 +272,10 @@ function Records() {
     };
   }, [detailState.open]);
 
-  // Filter button handler.
   const handleFilterClick = (filterType) => {
     setFilter(filterType);
   };
 
-  // Open the detail modal for one session.
   const handleViewDetails = async (sessionId) => {
     setDetailState({
       open: true,
@@ -324,6 +307,7 @@ function Records() {
     }
   };
 
+  // Data Management core function
   const handleExport = async () => {
     try {
       const response = await fetch('/api/sessions?filter=all');
@@ -411,7 +395,41 @@ function Records() {
 
   return (
     <main id="page-d" className="page">
-      <h1 className="page-title">My Records</h1>
+      <h1 className="page-title" style={{ marginBottom: '10px' }}>My Records</h1>
+
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '15px', marginBottom: '25px' }}>
+        <input 
+          type="file" 
+          ref={fileInputRef} 
+          style={{ display: 'none' }} 
+          accept=".json" 
+          onChange={handleFileChange} 
+        />
+        <button 
+          onClick={handleExport} 
+          style={{ background: '#eef3f8', border: '1px solid #d9eaff', color: '#4b5a6b', padding: '6px 16px', borderRadius: '20px', fontSize: '12px', fontWeight: '700', cursor: 'pointer', transition: 'all 0.2s' }}
+          onMouseOver={(e) => { e.target.style.background = '#e2eaf3'; }}
+          onMouseOut={(e) => { e.target.style.background = '#eef3f8'; }}
+        >
+          ⬇️ Export
+        </button>
+        <button 
+          onClick={triggerImport} 
+          style={{ background: '#eef3f8', border: '1px solid #d9eaff', color: '#4b5a6b', padding: '6px 16px', borderRadius: '20px', fontSize: '12px', fontWeight: '700', cursor: 'pointer', transition: 'all 0.2s' }}
+          onMouseOver={(e) => { e.target.style.background = '#e2eaf3'; }}
+          onMouseOut={(e) => { e.target.style.background = '#eef3f8'; }}
+        >
+          ⬆️ Import
+        </button>
+        <button 
+          onClick={handleClearHistory} 
+          style={{ background: '#fff1ee', border: '1px solid #f3c7c7', color: '#b54028', padding: '6px 16px', borderRadius: '20px', fontSize: '12px', fontWeight: '700', cursor: 'pointer', transition: 'all 0.2s' }}
+          onMouseOver={(e) => { e.target.style.background = '#fbe5e1'; }}
+          onMouseOut={(e) => { e.target.style.background = '#fff1ee'; }}
+        >
+          🗑️ Clear
+        </button>
+      </div>
 
       <div className="records-controls" style={{ display: 'flex', justifyContent: 'center', gap: '10px', marginBottom: '30px' }}>
         <button id="filter-today" onClick={() => handleFilterClick('today')} style={{ padding: '10px 30px', borderRadius: '8px', border: filter === 'today' ? 'none' : '2px solid #4A90E2', background: filter === 'today' ? '#4A90E2' : 'transparent', color: filter === 'today' ? 'white' : '#4A90E2', fontSize: '14px', fontWeight: '500', cursor: 'pointer', transition: 'all 0.3s' }}>Today</button>
@@ -460,41 +478,6 @@ function Records() {
         )}
       </div>
 
-      <div className="data-management-section" style={{
-        background: 'white',
-        padding: '25px',
-        borderRadius: '10px',
-        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-        width: '80%',
-        margin: '0 auto',
-        textAlign: 'center'
-      }}>
-        <h2 style={{ color: '#333', marginBottom: '10px', fontSize: '18px', fontWeight: '600', textAlign: 'left' }}>Data Management</h2>
-        <p style={{ color: '#666', fontSize: '14px', marginBottom: '20px', textAlign: 'left' }}>
-          Export your focus history to a file, import previously saved history, or permanently clear all data.
-        </p>
-
-        <input 
-          type="file" 
-          ref={fileInputRef} 
-          style={{ display: 'none' }} 
-          accept=".json" 
-          onChange={handleFileChange} 
-        />
-
-        <div style={{ display: 'flex', gap: '15px', justifyContent: 'center', flexWrap: 'wrap' }}>
-          <button className="action-btn blue" onClick={handleExport} style={{ width: '30%', minWidth: '140px', padding: '12px', borderRadius: '8px' }}>
-              Export Data
-          </button>
-          <button className="action-btn yellow" onClick={triggerImport} style={{ width: '30%', minWidth: '140px', padding: '12px', borderRadius: '8px', color: '#333' }}>
-              Import Data
-          </button>
-          <button className="action-btn red" onClick={handleClearHistory} style={{ width: '30%', minWidth: '140px', padding: '12px', borderRadius: '8px' }}>
-              Clear History
-          </button>
-        </div>
-      </div>
-
       {detailState.open ? (
         <div className="modal-overlay" onClick={closeDetails}>
           <div className="modal-content records-detail-modal" onClick={(event) => event.stopPropagation()}>