Merge pull request #116: feat(web): redesign profile page to match design system

2026-05-29 15:19:45 +03:00
parent 394bd19b95 d54950698a
commit 0d9df29f58
2 changed files with 134 additions and 39 deletions
@@ -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 {
@@ -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;