feat: challange request, accept, decline, page, added (not complete, polling issues, and not stable, and too much code for nothing)

src/app/components/challenge-create-dialog/challenge-create-dialog.component.html

@@ -14,14 +14,8 @@
             <!-- Target Username -->
             <div class="form-group">
                 <label for="targetUsername">Opponent Username</label>
-        <input
+                <input type="text" id="targetUsername" formControlName="targetUsername"
-          type="text"
+                    placeholder="Enter opponent's username" [disabled]="loading" required />
-          id="targetUsername"
-          formControlName="targetUsername"
-          placeholder="Enter opponent's username"
-          [disabled]="loading"
-          required
-        />
                 <small *ngIf="form.get('targetUsername')?.hasError('required') && form.get('targetUsername')?.touched">
                     Username is required
                 </small>
@@ -52,13 +46,8 @@
             <div class="form-group" *ngIf="selectedTimeMode !== 'unlimited'">
                 <label>Presets</label>
                 <div class="preset-buttons">
-          <button
+                    <button type="button" *ngFor="let preset of getAvailablePresets()" class="preset-btn"
-            type="button"
+                        (click)="selectPreset(preset)" [disabled]="loading">
-            *ngFor="let preset of getAvailablePresets()"
-            class="preset-btn"
-            (click)="selectPreset(preset)"
-            [disabled]="loading"
-          >
                         {{ preset.label }}
                     </button>
                 </div>
@@ -69,25 +58,13 @@
                 <div class="form-row">
                     <div class="form-col">
                         <label for="limitMinutes">Time (minutes)</label>
-            <input
+                        <input type="number" id="limitMinutes" formControlName="limitMinutes" min="1" max="1000"
-              type="number"
+                            [disabled]="loading" />
-              id="limitMinutes"
-              formControlName="limitMinutes"
-              min="1"
-              max="1000"
-              [disabled]="loading"
-            />
                     </div>
                     <div class="form-col">
                         <label for="incrementSeconds">Increment (seconds)</label>
-            <input
+                        <input type="number" id="incrementSeconds" formControlName="incrementSeconds" min="0" max="300"
-              type="number"
+                            [disabled]="loading" />
-              id="incrementSeconds"
-              formControlName="incrementSeconds"
-              min="0"
-              max="300"
-              [disabled]="loading"
-            />
                     </div>
                 </div>
             </div>
@@ -104,19 +81,10 @@
 
             <!-- Buttons -->
             <div class="dialog-buttons">
-        <button
+                <button type="button" class="btn btn-secondary" (click)="cancel()" [disabled]="loading">
-          type="button"
-          class="btn btn-secondary"
-          (click)="cancel()"
-          [disabled]="loading"
-        >
                     Cancel
                 </button>
-        <button
+                <button type="submit" class="btn btn-primary" [disabled]="form.invalid || loading">
-          type="submit"
-          class="btn btn-primary"
-          [disabled]="form.invalid || loading"
-        >
                     {{ loading ? 'Sending...' : 'Send Challenge' }}
                 </button>
             </div>

src/app/components/challenge-notification/challenge-notification.component.html

@@ -4,7 +4,8 @@
             <span class="badge">CHALLENGE</span>
             <span class="title">{{ getCreatedByDisplay() }} challenged you!</span>
         </div>
-    <button type="button" class="close-btn" (click)="onClose()" [disabled]="acceptingChallenge || decliningChallenge">
+        <button type="button" class="close-btn" (click)="onClose()"
+            [disabled]="acceptingChallenge || decliningChallenge">
             ×
         </button>
     </div>
@@ -24,20 +25,12 @@
         </div>
 
         <div class="notification-actions">
-      <button
+            <button type="button" class="btn btn-decline" (click)="onDecline()"
-        type="button"
+                [disabled]="acceptingChallenge || decliningChallenge">
-        class="btn btn-decline"
-        (click)="onDecline()"
-        [disabled]="acceptingChallenge || decliningChallenge"
-      >
                 {{ decliningChallenge ? 'Declining...' : 'Decline' }}
             </button>
-      <button
+            <button type="button" class="btn btn-accept" (click)="onAccept()"
-        type="button"
+                [disabled]="acceptingChallenge || decliningChallenge">
-        class="btn btn-accept"
-        (click)="onAccept()"
-        [disabled]="acceptingChallenge || decliningChallenge"
-      >
                 {{ acceptingChallenge ? 'Accepting...' : 'Accept' }}
             </button>
         </div>

src/app/components/toolbar/toolbar.component.html

@@ -5,13 +5,8 @@
       <div class="d-flex align-items-center gap-2">
         <!-- Challenge Notification Badge -->
         <div class="notification-container">
-          <button
+          <button type="button" class="notification-badge" (click)="toggleNotificationMenu()"
-            type="button"
+            [class.has-notifications]="incomingChallenges.length > 0" title="View challenges">
-            class="notification-badge"
-            (click)="toggleNotificationMenu()"
-            [class.has-notifications]="incomingChallenges.length > 0"
-            title="View challenges"
-          >
             🔔
             <span *ngIf="incomingChallenges.length > 0" class="badge">
               {{ incomingChallenges.length }}
@@ -67,12 +62,8 @@
 
 <!-- Challenge Notification Popup -->
 @if (displayedChallenge) {
-<app-challenge-notification
+<app-challenge-notification [challenge]="displayedChallenge" (accept)="onChallengeAccepted($event)"
-  [challenge]="displayedChallenge"
+  (decline)="onChallengeDeclined($event)" (close)="onNotificationClose()" />
-  (accept)="onChallengeAccepted($event)"
-  (decline)="onChallengeDeclined($event)"
-  (close)="onNotificationClose()"
-/>
 }
 
 @if (showLoginDialog) {

src/app/pages/challenges/challenges.component.html

@@ -39,18 +39,10 @@
                     </div>
 
                     <div class="challenge-actions" *ngIf="challenge.status === 'created'">
-            <button
+                        <button type="button" class="btn btn-decline" (click)="declineChallenge(challenge)">
-              type="button"
-              class="btn btn-decline"
-              (click)="declineChallenge(challenge)"
-            >
                             Decline
                         </button>
-            <button
+                        <button type="button" class="btn btn-accept" (click)="acceptChallenge(challenge)">
-              type="button"
-              class="btn btn-accept"
-              (click)="acceptChallenge(challenge)"
-            >
                             Accept
                         </button>
                     </div>
@@ -87,11 +79,7 @@
                     </div>
 
                     <div class="challenge-actions" *ngIf="challenge.status === 'created'">
-            <button
+                        <button type="button" class="btn btn-cancel" (click)="cancelChallenge(challenge)">
-              type="button"
-              class="btn btn-cancel"
-              (click)="cancelChallenge(challenge)"
-            >
                             Cancel
                         </button>
                     </div>