refactor (alarm ) : create off alarm button when time out

Author: hoanghaoz

src/lib/features/note/model/note_model.dart

@@ -1,3 +1,5 @@
+import 'dart:convert';
+
 class NoteModel {
   final String id;
   final String content;
@@ -10,4 +12,30 @@ class NoteModel {
     this.pinned = false,
     this.imagePath,
   });
-}
+
+  // --- LOCAL STORAGE HELPERS ---
+
+  // Convert Object to Map for local storage
+  Map<String, dynamic> toMap() {
+    return {
+      'id': id,
+      'content': content,
+      'pinned': pinned,
+      'imagePath': imagePath,
+    };
+  }
+
+  // Create Object from Map
+  factory NoteModel.fromMap(Map<String, dynamic> map) {
+    return NoteModel(
+      id: map['id'],
+      content: map['content'],
+      pinned: map['pinned'] ?? false,
+      imagePath: map['imagePath'],
+    );
+  }
+
+  // JSON Helpers for SharedPreferences
+  String toJson() => json.encode(toMap());
+  factory NoteModel.fromJson(String source) => NoteModel.fromMap(json.decode(source));
+}

src/lib/features/note/view/focus_screen.dart

@@ -30,6 +30,7 @@ class FocusScreen extends StatelessWidget {
                   mainAxisSize: MainAxisSize.min,
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
+                    // --- Time Settings ---
                     Row(
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [
@@ -48,6 +49,8 @@ class FocusScreen extends StatelessWidget {
                     ),
                     Slider(value: currentBreak, min: 1, max: 30, divisions: 29, activeColor: Colors.orange, onChanged: (val) => setStateDialog(() => currentBreak = val)),
                     const Divider(height: 30),
+
+                    // --- Hardware Settings ---
                     SwitchListTile(
                       title: const Text('Rung', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14)),
                       value: currentVibrate, activeColor: AppColors.primaryBlue, contentPadding: EdgeInsets.zero,
@@ -81,6 +84,7 @@ class FocusScreen extends StatelessWidget {
                 TextButton(onPressed: () => Navigator.pop(context), child: const Text('Hủy', style: TextStyle(color: Colors.grey))),
                 ElevatedButton(
                   onPressed: () {
+                    // Update settings in ViewModel
                     vm.updateSettings(newPomodoroMinutes: currentPomodoro.toInt(), newBreakMinutes: currentBreak.toInt(), vibrate: currentVibrate, ringtone: currentRingtone);
                     Navigator.pop(context);
                   },
@@ -105,6 +109,7 @@ class FocusScreen extends StatelessWidget {
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
+              // --- Header ---
               Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
@@ -115,25 +120,28 @@ class FocusScreen extends StatelessWidget {
                       Text('Tập trung', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Color(0xFF2C3E50))),
                     ],
                   ),
+                  // Settings Icon
                   GestureDetector(
                     onTap: () => _showSettingsDialog(context),
                     child: Container(padding: const EdgeInsets.all(10), decoration: const BoxDecoration(color: Colors.white, shape: BoxShape.circle), child: const Icon(Icons.settings_outlined, color: AppColors.primaryBlue)),
                   ),
                 ],
               ),
               const SizedBox(height: 30),
+
+              // --- Main Content Widgets ---
               const FocusTabSelector(),
               const SizedBox(height: 30),
               const TimerDisplayWidget(),
               const SizedBox(height: 40),
               const TimerControlsWidget(),
               const SizedBox(height: 40),
               const QuickNoteCard(),
-              const SizedBox(height: 80),
+              const SizedBox(height: 80), // Padding for bottom nav bar
             ],
           ),
         ),
       ),
     );
   }
-}
+}

src/lib/features/note/view/focus_widget.dart

@@ -124,14 +124,19 @@ class TimerControlsWidget extends StatelessWidget {
           onTap: vm.resetTimer,
         ),
         const SizedBox(width: 30),
+
+        // MAIN BUTTON: CHANGES TO RED WHEN RINGING TO STOP ALARM
         _buildControlBtn(
-          icon: vm.isRunning ? Icons.pause_rounded : Icons.play_arrow_rounded,
-          bgColor: AppColors.primaryBlue,
+          icon: vm.isRinging
+              ? Icons.notifications_off_rounded // Muted bell icon
+              : (vm.isRunning ? Icons.pause_rounded : Icons.play_arrow_rounded),
+          bgColor: vm.isRinging ? Colors.redAccent : AppColors.primaryBlue,
           iconColor: Colors.white,
           size: 85,
           hasShadow: true,
-          onTap: vm.toggleTimer,
+          onTap: vm.toggleTimer, // Stops alarm if ringing, otherwise toggles timer
         ),
+
         const SizedBox(width: 30),
         _buildControlBtn(
           icon: Icons.skip_next_rounded,
@@ -159,7 +164,7 @@ class TimerControlsWidget extends StatelessWidget {
         color: bgColor,
         shape: BoxShape.circle,
         boxShadow: [
-          if (hasShadow) BoxShadow(color: AppColors.primaryBlue.withOpacity(0.4), blurRadius: 20, offset: const Offset(0, 10)),
+          if (hasShadow) BoxShadow(color: bgColor.withOpacity(0.4), blurRadius: 20, offset: const Offset(0, 10)),
           if (!hasShadow) BoxShadow(color: Colors.black.withOpacity(0.03), blurRadius: 10, offset: const Offset(0, 5)),
         ],
       ),
@@ -222,7 +227,7 @@ class QuickNoteCard extends StatelessWidget {
                   style: const TextStyle(fontSize: 14, color: Color(0xFF2C3E50)),
                 ),
 
-                // SHOW IMAGE PREVIEW IF ANY
+                // SHOW IMAGE PREVIEW IF SELECTED
                 if (vm.selectedImagePath != null) ...[
                   const SizedBox(height: 10),
                   Stack(
@@ -263,7 +268,7 @@ class QuickNoteCard extends StatelessWidget {
               ),
               ElevatedButton(
                 onPressed: () {
-                  FocusScope.of(context).unfocus();
+                  FocusScope.of(context).unfocus(); // Dismiss keyboard
                   context.read<FocusViewModel>().addNote();
                 },
                 style: ElevatedButton.styleFrom(
@@ -297,7 +302,7 @@ class QuickNoteCard extends StatelessWidget {
                   child: Row(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
-                      // CLICK TO REMOVE
+                      // CLICK TO REMOVE BUTTON
                       GestureDetector(
                         onTap: () => vm.removeNote(note.id),
                         child: Container(
@@ -315,7 +320,7 @@ class QuickNoteCard extends StatelessWidget {
                             if (note.content.isNotEmpty)
                               Text(note.content, style: const TextStyle(fontSize: 14, color: Color(0xFF2C3E50), height: 1.4)),
 
-                            // DISPLAY IMAGE IN NOTE
+                            // DISPLAY ATTACHED IMAGE IN NOTE
                             if (note.imagePath != null) ...[
                               const SizedBox(height: 8),
                               ClipRRect(
@@ -353,4 +358,4 @@ class QuickNoteCard extends StatelessWidget {
       ),
     );
   }
-}
+}