feat(purchase-list): refactor purchase list item structure and styles for improved layout

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.scss

@@ -4,14 +4,12 @@
   align-items: center;
   padding:  16px;
   padding-left:0;
-  border-bottom: 1px solid #e0e0e0;
   transition: background-color 0.2s, border-radius 0.2s;
   cursor: pointer;
 }
 .purchase-item:hover {
   background-color: #f0f0f0;
   border-radius: 8px;
-  border-bottom-color: transparent;
 }
 .purchase-item:hover .arrow-icon {
   color: #5b75ff; /* Blue on hover */

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts

@@ -10,3 +10,4 @@ import { Component, Input } from '@angular/core';
 export class PurchaseListItem {
   @Input() purchase!: { id: string; date: string };
 }
+

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.html

@@ -1,6 +1,8 @@
     <div class="purchase-list-container">
-      <app-purchase-list-item 
+      <ng-container *ngFor="let purchase of purchases; let last = last">
-        *ngFor="let purchase of purchases" 
+        <app-purchase-list-item 
-        [purchase]="purchase">
+          [purchase]="purchase">
-      </app-purchase-list-item>
+        </app-purchase-list-item>
+        <div class="purchase-divider" *ngIf="!last"></div>
+      </ng-container>
     </div>

src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss

@@ -3,3 +3,9 @@
   flex-direction: column;
   width: 100%;
 }
+
+.purchase-divider {
+  height: 1px;
+  background-color: #DDDDDD;
+  width: 100%;
+}