Huge updates

This commit is contained in:
MarcWieland
2026-06-24 22:29:05 +02:00
parent 94c10aebdd
commit 0d59d521dc
12 changed files with 559 additions and 40 deletions
@@ -1,3 +1,4 @@
@inject IJSRuntime JSRuntime
<div class="nav-container onboarding-nav-menu">
@* --- Brand / Logo Section --- *@
<div class="nav-header">
@@ -50,18 +51,20 @@
<div class="nav-footer">
<AuthorizeView>
<Authorized>
<div class="user-profile-card">
<div class="avatar-container">
<MudAvatar Class="user-avatar">
@GetInitials(context.User.Identity?.Name)
</MudAvatar>
<span class="status-dot"></span>
<NavLink href="/profile" class="user-profile-link">
<div class="user-profile-card">
<div class="avatar-container">
<MudAvatar Class="user-avatar">
@GetInitials(context.User.Identity?.Name)
</MudAvatar>
<span class="status-dot"></span>
</div>
<div class="user-info">
<span class="user-name">@context.User.Identity?.Name</span>
<span class="user-status">Online</span>
</div>
</div>
<div class="user-info">
<span class="user-name">@context.User.Identity?.Name</span>
<span class="user-status">Online</span>
</div>
</div>
</NavLink>
</Authorized>
</AuthorizeView>
@@ -74,8 +77,12 @@
</Authorized>
</AuthorizeView>
<MudTooltip Text="Changelog anzeigen" Placement="Placement.Right">
<MudNavLink Href="/changelog" Icon="@Icons.Material.Filled.NewReleases" Class="custom-nav-link version-link">
<span class="version-text">Version 1.4</span>
<MudNavLink Href="/changelog" Icon="@Icons.Material.Filled.NewReleases" Class="custom-nav-link version-link" OnClick="ClearBadge">
<span class="version-text">Version @timetracker.Client.Components.Pages.Changelog.LatestVersion</span>
@if (_showVersionBadge)
{
<span class="version-badge">1</span>
}
</MudNavLink>
</MudTooltip>
</MudNavMenu>
@@ -85,6 +92,33 @@
@code {
[Parameter] public EventCallback OnToggleDrawer { get; set; }
private bool _showVersionBadge;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
try
{
var lastSeen = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "lastSeenVersion");
var latest = timetracker.Client.Components.Pages.Changelog.LatestVersion;
var isHighlighted = timetracker.Client.Components.Pages.Changelog.IsLatestHighlighted;
_showVersionBadge = isHighlighted && lastSeen != latest;
StateHasChanged();
}
catch
{
// Ignored in SSR
}
}
}
private void ClearBadge()
{
_showVersionBadge = false;
}
private string GetInitials(string? name)
{
if (string.IsNullOrWhiteSpace(name))
@@ -177,7 +177,19 @@
background: rgba(15, 23, 42, 0.2);
}
/* User profile card */
/* User profile link */
.user-profile-link {
text-decoration: none !important;
color: inherit !important;
display: block;
cursor: pointer;
}
.user-profile-link:hover .user-profile-card {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 12px;
}
.user-profile-card {
display: flex;
align-items: center;
@@ -248,6 +260,37 @@
}
::deep .version-link .mud-nav-link-text {
font-size: 0.75rem !important;
display: flex !important;
align-items: center;
gap: 8px;
}
::deep .version-badge {
background-color: #EF4444;
color: white;
font-size: 0.65rem;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
0% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}
70% {
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
}
}
/* --- COLLAPSED DRAWER (MINI STATE) STYLES --- */