| | | 1 | | @using Pomodoro.Web.Models |
| | | 2 | | @using Pomodoro.Web.Pages |
| | | 3 | | |
| | | 4 | | <div class="timeline-section" id="timeline-section"> |
| | | 5 | | <div class="section-header"> |
| | 103 | 6 | | <h2>@Constants.Layout.TimelineTitle</h2> |
| | 103 | 7 | | <span class="activity-count">@(Activities?.Count ?? 0) activities</span> |
| | | 8 | | </div> |
| | | 9 | | <div class="timeline-scroll-container" id="@Constants.UI.TimelineScrollContainerId"> |
| | | 10 | | <ActivityTimeline Activities="Activities ?? new()" /> |
| | | 11 | | |
| | | 12 | | @* Sentinel element for infinite scroll *@ |
| | 103 | 13 | | @if (HasMoreActivities) |
| | 10 | 14 | | { |
| | | 15 | | <div id="@Constants.UI.InfiniteScrollSentinelId" class="scroll-sentinel"> |
| | 10 | 16 | | @if (IsLoadingMore) |
| | 3 | 17 | | { |
| | | 18 | | <div class="loading-indicator"> |
| | | 19 | | <div class="pomodoro-loader"> |
| | | 20 | | <div class="tomato-body"> |
| | | 21 | | <div class="tomato-leaf tomato-leaf-left"></div> |
| | | 22 | | <div class="tomato-leaf tomato-leaf-right"></div> |
| | | 23 | | </div> |
| | | 24 | | <div class="tomato-shadow"></div> |
| | | 25 | | </div> |
| | | 26 | | <span>Loading more activities...</span> |
| | | 27 | | </div> |
| | 3 | 28 | | } |
| | | 29 | | </div> |
| | 10 | 30 | | } |
| | 93 | 31 | | else if (Activities?.Count > 0) |
| | 41 | 32 | | { |
| | | 33 | | <div class="end-of-list"> |
| | | 34 | | <span>No more activities</span> |
| | | 35 | | </div> |
| | 41 | 36 | | } |
| | | 37 | | </div> |
| | | 38 | | </div> |
| | | 39 | | |
| | | 40 | | @code { |
| | | 41 | | [Parameter] |
| | 402 | 42 | | public List<ActivityRecord>? Activities { get; set; } |
| | | 43 | | |
| | | 44 | | [Parameter] |
| | 206 | 45 | | public bool HasMoreActivities { get; set; } |
| | | 46 | | |
| | | 47 | | [Parameter] |
| | 113 | 48 | | public bool IsLoadingMore { get; set; } |
| | | 49 | | |
| | | 50 | | [Parameter] |
| | 95 | 51 | | public EventCallback OnLoadMore { get; set; } |
| | | 52 | | } |