Toutsu/GmRelayBot
1
1
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases 86 Wiki Activity

feat(web): redesign profile page to match design system
PR Checks / test-and-build (pull_request) Successful in 12m8s
Details

Browse Source 
- Rewrite Profile.razor to use .page-container, .glass-card, .gm-alert,

  .btn-gm, .status-badge, .empty-state and other standard design system classes

- Replace custom unstyled markup with breadcrumb, page-header, skeleton loaders

- Add .identity-list styles to app.css for linked accounts section

- Unify visual language with Home, Templates and GroupDetails pages
This commit is contained in:
Toutsu
2026-05-29 15:15:48 +03:00
parent 394bd19b95
commit d54950698a
2 changed files with 134 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/GmRelay.Web/Components/Pages/Profile.razor
+78 -39
View File
@@ -10,18 +10,50 @@
<PageTitle>Профиль — GM-Relay</PageTitle>
<div class="profile-container">
<h1 class="page-title">Профиль</h1>
<div class="page-container">
<ul class="gm-breadcrumb animate-fade-in">
<li><a href="/">Главная</a></li>
<li class="active">Профиль</li>
</ul>
@if (masterProfile is not null)
<div class="page-header animate-fade-in">
<h2>Профиль</h2>
<p>Управление публичным профилем мастера и связанными аккаунтами.</p>
</div>
@if (!string.IsNullOrWhiteSpace(errorMessage))
{
<div class="profile-card master-profile-card">
<div class="gm-alert gm-alert-danger animate-fade-in" style="margin-bottom: 1rem;">
@errorMessage
</div>
}
@if (!string.IsNullOrWhiteSpace(successMessage))
{
<div class="gm-alert gm-alert-success animate-fade-in" style="margin-bottom: 1rem;">
@successMessage
</div>
}
@if (masterProfile is null)
{
<div class="glass-card animate-fade-in" style="padding: 2rem; margin-bottom: 1rem;">
<div class="skeleton skeleton-text" style="width: 60%; margin-bottom: 1rem;"></div>
<div class="skeleton skeleton-text" style="width: 80%; margin-bottom: 0.75rem;"></div>
<div class="skeleton skeleton-text" style="width: 40%;"></div>
</div>
}
else
{
<div class="glass-card animate-slide-up" style="margin-bottom: 1rem;">
<div class="profile-card-header">
<div>
<h2 class="section-title">Публичный профиль мастера</h2>
<p class="muted-text">Показывается в каталоге, опубликованных играх и публичных страницах клуба.</p>
<h3>Публичный профиль мастера</h3>
<p>Показывается в каталоге, опубликованных играх и публичных страницах клуба.</p>
</div>
<span class="identity-badge">@(masterProfile.IsPublic ? "Публичный" : "Скрыт")</span>
<span class="status-badge @(masterProfile.IsPublic ? "status-success" : "status-neutral")">
@(masterProfile.IsPublic ? "Публичный" : "Скрыт")
</span>
</div>
<EditForm Model="@masterProfileModel" OnValidSubmit="SaveMasterProfile">
@@ -40,7 +72,7 @@
<div class="gm-form-group">
<label class="gm-form-label">Короткий адрес</label>
<InputText @bind-Value="masterProfileModel.PublicSlug" class="gm-form-control" />
<div class="gm-form-hint">Латиница, цифры и дефисы, например `night-city-gm`.</div>
<div class="gm-form-hint">Латиница, цифры и дефисы, например "night-city-gm".</div>
</div>
</div>
@@ -72,20 +104,28 @@
</div>
}
@if (identities is null)
{
<p class="loading-text">Загрузка...</p>
}
else if (identities.Count == 0)
{
<div class="profile-card">
<p>Связанные аккаунты не найдены.</p>
<div class="glass-card animate-slide-up" style="margin-bottom: 1rem;">
<div class="batch-bulk-header">
<div>
<h3>Связанные аккаунты</h3>
<p>Аккаунты Telegram и Discord, привязанные к вашему профилю.</p>
</div>
</div>
}
else
{
<div class="profile-card">
<h2 class="section-title">Связанные аккаунты</h2>
@if (identities is null)
{
<div class="skeleton skeleton-text" style="width: 70%; margin-bottom: 0.75rem;"></div>
<div class="skeleton skeleton-text" style="width: 50%;"></div>
}
else if (identities.Count == 0)
{
<div class="empty-state empty-state-compact">
<div class="empty-state-title">Аккаунты не найдены</div>
<p class="empty-state-text">Привяжите Telegram или Discord, чтобы управлять профилем.</p>
</div>
}
else
{
<ul class="identity-list">
@foreach (var id in identities)
{
@@ -96,7 +136,7 @@
</div>
@if (id.Platform != currentPlatform || id.ExternalUserId != currentExternalUserId)
{
<button class="btn btn-secondary btn-small"
<button class="btn-gm btn-gm-danger"
@onclick="() => Unlink(id.Platform, id.ExternalUserId)"
disabled="@isUnlinking">
Отвязать
@@ -104,25 +144,34 @@
}
else
{
<span class="identity-badge">Текущий</span>
<span class="status-badge status-success">Текущий</span>
}
</li>
}
</ul>
</div>
}
}
</div>
<div class="glass-card animate-slide-up">
<div class="batch-bulk-header">
<div>
<h3>Добавить аккаунт</h3>
<p>Привяжите дополнительные платформы для входа.</p>
</div>
</div>
<div class="profile-card">
<h2 class="section-title">Добавить аккаунт</h2>
@if (!HasLinkedPlatform("Discord"))
{
<a href="/auth/discord" class="btn btn-primary">
<a href="/auth/discord" class="login-btn-discord" style="margin-bottom: 0.75rem;">
<svg class="login-btn-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
</svg>
Привязать Discord
</a>
}
else
{
<p class="muted-text">Discord уже привязан.</p>
<p style="color: var(--text-muted); margin-bottom: 0.75rem;">Discord уже привязан.</p>
}
@if (currentPlatform == "Discord" && !HasLinkedPlatform("Telegram"))
@@ -138,16 +187,6 @@
}
}
</div>
@if (!string.IsNullOrWhiteSpace(errorMessage))
{
<div class="alert alert-error">@errorMessage</div>
}
@if (!string.IsNullOrWhiteSpace(successMessage))
{
<div class="alert alert-success">@successMessage</div>
}
</div>
@code {
src/GmRelay.Web/wwwroot/app.css
+56
View File
@@ -1449,6 +1449,62 @@ body.telegram-mini-app .session-card-mobile {
color: var(--accent-secondary);
}
/* === Identity list (profile page) === */
.identity-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
}
.identity-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
gap: 1rem;
transition: background var(--transition-fast);
}
.identity-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.identity-info {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
flex: 1;
}
.identity-platform {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
background: var(--bg-primary);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
}
.identity-name {
font-weight: 600;
color: var(--text-primary);
font-family: 'Jura', sans-serif;
}
.telegram-widget-wrapper {
margin-top: 0.5rem;
}
/* === Sidebar refinements (MainLayout & NavMenu) === */
.page {
display: flex;