feat(web): publish completed game portfolios

src/GmRelay.Web/Components/Pages/PublicClub.razor

@@ -1,7 +1,10 @@
 @page "/club/{Slug}"
 @layout PublicLayout
 @inject ISessionStore SessionStore
+@inject IPortfolioStore PortfolioStore
 @inject NavigationManager Navigation
+@using GmRelay.Web.Components.Portfolio
+@using GmRelay.Web.Services.Portfolio
 
 <PageTitle>@PageTitleText</PageTitle>
 
@@ -75,12 +78,22 @@ else if (club is not null)
             }
         </div>
     }
+
+    @if (portfolioGames.Count > 0)
+    {
+        <section class="glass-card portfolio-section">
+            <h2>Завершённые игры клуба</h2>
+            <p>Публичные портфолио, опубликованные мастерами этого клуба.</p>
+            <PortfolioCardGrid Games="portfolioGames" />
+        </section>
+    }
 }
 
 @code {
     [Parameter] public string? Slug { get; set; }
 
     private WebPublicClub? club;
+    private IReadOnlyList<PublicPortfolioCard> portfolioGames = [];
     private bool loaded;
 
     private string PageTitleText => club is null ? "Публичный клуб — GM-Relay" : $"{club.Name} — GM-Relay";
@@ -93,9 +106,13 @@ else if (club is not null)
     protected override async Task OnParametersSetAsync()
     {
         loaded = false;
-        club = string.IsNullOrWhiteSpace(Slug)
+        var trimmedSlug = string.IsNullOrWhiteSpace(Slug) ? null : Slug.Trim();
+        club = trimmedSlug is null
             ? null
-            : await SessionStore.GetPublicClubBySlugAsync(Slug.Trim());
+            : await SessionStore.GetPublicClubBySlugAsync(trimmedSlug);
+        portfolioGames = trimmedSlug is null
+            ? []
+            : await PortfolioStore.GetPublicPortfolioGamesForClubAsync(trimmedSlug);
         loaded = true;
     }
 

src/GmRelay.Web/Components/Pages/PublicMasterProfile.razor

@@ -1,7 +1,10 @@
 @page "/gm/{Slug}"
 @layout PublicLayout
 @inject ISessionStore SessionStore
+@inject IPortfolioStore PortfolioStore
 @inject NavigationManager Navigation
+@using GmRelay.Web.Components.Portfolio
+@using GmRelay.Web.Services.Portfolio
 
 <PageTitle>@PageTitleText</PageTitle>
 
@@ -83,12 +86,22 @@ else if (profile is not null)
             }
         </div>
     }
+
+    @if (portfolioGames.Count > 0)
+    {
+        <section class="glass-card portfolio-section">
+            <h2>Портфолио</h2>
+            <p>Завершённые игры мастера, открытые для публичного просмотра.</p>
+            <PortfolioCardGrid Games="portfolioGames" />
+        </section>
+    }
 }
 
 @code {
     [Parameter] public string? Slug { get; set; }
 
     private GmRelay.Web.Services.PublicMasterProfile? profile;
+    private IReadOnlyList<PublicPortfolioCard> portfolioGames = [];
     private bool loaded;
 
     private string PageTitleText => profile is null ? "Профиль мастера — GM-Relay" : $"{profile.DisplayName} — GM-Relay";
@@ -101,9 +114,13 @@ else if (profile is not null)
     protected override async Task OnParametersSetAsync()
     {
         loaded = false;
-        profile = string.IsNullOrWhiteSpace(Slug)
+        var trimmedSlug = string.IsNullOrWhiteSpace(Slug) ? null : Slug.Trim();
+        profile = trimmedSlug is null
             ? null
-            : await SessionStore.GetPublicMasterProfileBySlugAsync(Slug.Trim());
+            : await SessionStore.GetPublicMasterProfileBySlugAsync(trimmedSlug);
+        portfolioGames = trimmedSlug is null
+            ? []
+            : await PortfolioStore.GetPublicPortfolioGamesForMasterAsync(trimmedSlug);
         loaded = true;
     }
 

src/GmRelay.Web/Components/Pages/PublicPortfolio.razor

@@ -0,0 +1,266 @@
+@page "/portfolio/{Slug}"
+@layout PublicLayout
+@inject IPortfolioStore PortfolioStore
+@inject AuthorizedPortfolioService AuthorizedPortfolio
+@inject NavigationManager Navigation
+@inject AuthenticationStateProvider AuthStateProvider
+@using GmRelay.Shared.Domain
+@using GmRelay.Web.Services.Portfolio
+
+<PageTitle>@PageTitleText</PageTitle>
+
+@if (loaded && game is null)
+{
+    <HeadContent>
+        <meta name="robots" content="noindex, nofollow" />
+    </HeadContent>
+
+    <section class="public-hero public-hero-compact">
+        <span class="status-badge status-neutral">Недоступно</span>
+        <h1>Портфолио не найдено</h1>
+        <p>Эта игра скрыта, ещё не опубликована или короткий адрес больше не используется.</p>
+    </section>
+}
+else if (!loaded)
+{
+    <section class="public-hero public-hero-compact">
+        <div class="skeleton skeleton-text" style="width: 55%; height: 2rem;"></div>
+        <div class="skeleton skeleton-text" style="width: 75%;"></div>
+    </section>
+}
+else if (game is not null)
+{
+    <HeadContent>
+        <meta name="description" content="@($"Портфолио {game.Title} — завершённая игра в GM-Relay.")" />
+    </HeadContent>
+
+    @if (!string.IsNullOrWhiteSpace(game.CoverPath))
+    {
+        <div class="portfolio-cover-hero" style="background-image: url('@game.CoverPath')"></div>
+    }
+
+    <section class="public-hero public-hero-compact">
+        <span class="status-badge status-success">Завершено</span>
+        <h1>@game.Title</h1>
+        <p>Завершено @game.CompletedAt.ToLocalTime().FormatMoscow()</p>
+        <div class="session-badges">
+            @if (!string.IsNullOrWhiteSpace(game.System))
+            {
+                <span class="status-badge status-info">@GetSystemDisplayName(game.System)</span>
+            }
+            @if (!string.IsNullOrWhiteSpace(game.Format))
+            {
+                <span class="status-badge status-neutral">@TranslateFormat(game.Format)</span>
+            }
+        </div>
+    </section>
+
+    <article class="glass-card public-session-detail">
+        @if (!string.IsNullOrWhiteSpace(game.Description))
+        {
+            <div class="session-description">
+                <h3>Описание</h3>
+                <p>@game.Description</p>
+            </div>
+        }
+
+        @if (game.Masters.Count > 0)
+        {
+            <div class="public-master-link">
+                <span>Мастера</span>
+                @foreach (var master in game.Masters)
+                {
+                    <a href="@($"/gm/{master.Slug}")">@master.DisplayName</a>
+                }
+            </div>
+        }
+
+        @if (!string.IsNullOrWhiteSpace(game.ClubSlug) && !string.IsNullOrWhiteSpace(game.ClubName))
+        {
+            <div class="public-master-link">
+                <span>Клуб</span>
+                <a href="@($"/club/{game.ClubSlug}")">@game.ClubName</a>
+            </div>
+        }
+
+        <div class="public-settings-actions">
+            <a class="btn-gm btn-gm-outline" href="@PublicPortfolioUrl" target="_blank" rel="noopener noreferrer">Ссылка на портфолио</a>
+        </div>
+    </article>
+
+    <section class="glass-card portfolio-section">
+        <h2>Отзывы игроков</h2>
+        @if (game.Reviews.Count == 0)
+        {
+            <p>Пока нет одобренных отзывов.</p>
+        }
+        else
+        {
+            <ul class="portfolio-review-list">
+                @foreach (var review in game.Reviews)
+                {
+                    <li class="portfolio-review-card">
+                        <div class="portfolio-review-meta">
+                            <span class="portfolio-review-author">@review.AuthorDisplayName</span>
+                            <span class="portfolio-review-date">@review.CreatedAt.ToLocalTime().FormatMoscowShort()</span>
+                        </div>
+                        <p class="portfolio-review-body">@review.Body</p>
+                    </li>
+                }
+            </ul>
+        }
+    </section>
+
+    <section class="glass-card portfolio-section">
+        <h2>Оставить отзыв</h2>
+        @switch (submissionState)
+        {
+            case PortfolioReviewSubmissionState.RequiresAuthentication:
+                <p>Войдите, чтобы оставить отзыв об этом приключении.</p>
+                <div class="public-settings-actions">
+                    <a class="btn-gm btn-gm-primary" href="@GetLoginUrl()">Войти</a>
+                </div>
+                break;
+            case PortfolioReviewSubmissionState.Ineligible:
+                <p>Отзыв могут оставить только игроки, участвовавшие в этом приключении.</p>
+                break;
+            case PortfolioReviewSubmissionState.AlreadySubmitted:
+                <p>Отзыв отправлен на модерацию.</p>
+                break;
+            case PortfolioReviewSubmissionState.Eligible:
+                <EditForm Model="reviewModel" OnValidSubmit="SubmitReviewAsync" FormName="portfolio-review">
+                    <div class="portfolio-editor-fields">
+                        <label>
+                            <span>Текст отзыва</span>
+                            <textarea class="portfolio-review-textarea"
+                                      @bind="reviewModel.Body"
+                                      @bind:event="oninput"
+                                      maxlength="2000"
+                                      minlength="10"
+                                      rows="5"
+                                      placeholder="Что вам запомнилось в этой игре?"
+                                      required></textarea>
+                        </label>
+                        <label class="portfolio-review-consent">
+                            <input type="checkbox"
+                                   name="publicationConsent"
+                                   @bind="reviewModel.PublicationConsent"
+                                   required />
+                            <span>Я даю согласие на публикацию этого отзыва</span>
+                        </label>
+                        @if (!string.IsNullOrWhiteSpace(submissionError))
+                        {
+                            <p class="portfolio-review-error">@submissionError</p>
+                        }
+                        <div class="public-settings-actions">
+                            <button type="submit" class="btn-gm btn-gm-primary" disabled="@isSubmitting">
+                                @(isSubmitting ? "Отправка..." : "Отправить отзыв")
+                            </button>
+                        </div>
+                    </div>
+                </EditForm>
+                break;
+        }
+    </section>
+}
+
+@code {
+    [Parameter] public string? Slug { get; set; }
+
+    private PublicPortfolioGame? game;
+    private PortfolioReviewSubmissionState submissionState = PortfolioReviewSubmissionState.RequiresAuthentication;
+    private ReviewFormModel reviewModel = new();
+    private string? submissionError;
+    private bool isSubmitting;
+    private bool loaded;
+
+    private string PageTitleText => game is null ? "Портфолио — GM-Relay" : $"{game.Title} — GM-Relay";
+
+    private string PublicPortfolioUrl => Navigation.ToAbsoluteUri($"/portfolio/{Slug}").ToString();
+
+    private string GetLoginUrl() => $"/login?returnUrl={Uri.EscapeDataString($"/portfolio/{Slug}")}";
+
+    protected override async Task OnParametersSetAsync()
+    {
+        loaded = false;
+        var trimmedSlug = string.IsNullOrWhiteSpace(Slug) ? null : Slug.Trim();
+        game = trimmedSlug is null
+            ? null
+            : await PortfolioStore.GetPublicPortfolioGameBySlugAsync(trimmedSlug);
+
+        if (game is not null)
+        {
+            submissionState = await AuthorizedPortfolio.GetReviewSubmissionStateForCurrentUserAsync(game.Slug);
+        }
+
+        reviewModel = new ReviewFormModel();
+        submissionError = null;
+        isSubmitting = false;
+        loaded = true;
+    }
+
+    private async Task SubmitReviewAsync()
+    {
+        if (game is null)
+        {
+            return;
+        }
+
+        if (!reviewModel.PublicationConsent)
+        {
+            submissionError = "Нужно подтвердить согласие на публикацию.";
+            return;
+        }
+
+        if (string.IsNullOrWhiteSpace(reviewModel.Body) || reviewModel.Body.Trim().Length < 10)
+        {
+            submissionError = "Отзыв должен содержать не меньше 10 символов.";
+            return;
+        }
+
+        isSubmitting = true;
+        submissionError = null;
+        try
+        {
+            await AuthorizedPortfolio.SubmitReviewForCurrentUserAsync(
+                game.Slug,
+                reviewModel.Body,
+                reviewModel.PublicationConsent);
+            submissionState = PortfolioReviewSubmissionState.AlreadySubmitted;
+            reviewModel = new ReviewFormModel();
+        }
+        catch (Exception ex)
+        {
+            submissionError = ex.Message;
+        }
+        finally
+        {
+            isSubmitting = false;
+        }
+    }
+
+    private static string GetSystemDisplayName(string? system)
+    {
+        if (string.IsNullOrWhiteSpace(system))
+            return system ?? string.Empty;
+
+        if (Enum.TryParse<GameSystem>(system, out var gs))
+            return gs.ToDisplayName();
+
+        return system;
+    }
+
+    private static string TranslateFormat(string format) => format switch
+    {
+        "Online" => "Онлайн",
+        "Offline" => "Офлайн",
+        "Hybrid" => "Гибрид",
+        _ => format
+    };
+
+    private sealed class ReviewFormModel
+    {
+        public string Body { get; set; } = string.Empty;
+        public bool PublicationConsent { get; set; }
+    }
+}

src/GmRelay.Web/Components/Portfolio/PortfolioCardGrid.razor

@@ -0,0 +1,64 @@
+@using GmRelay.Shared.Domain
+@using GmRelay.Web.Services.Portfolio
+
+<div class="portfolio-grid">
+    @foreach (var game in Games)
+    {
+        <a class="portfolio-card" href="@($"/portfolio/{game.Slug}")">
+            @if (!string.IsNullOrWhiteSpace(game.CoverPath))
+            {
+                <div class="portfolio-card-cover" style="background-image: url('@game.CoverPath')"></div>
+            }
+            else
+            {
+                <div class="portfolio-card-cover portfolio-card-cover-empty">
+                    <span>Без обложки</span>
+                </div>
+            }
+            <div class="portfolio-card-body">
+                <h3>@game.Title</h3>
+                <div class="portfolio-card-meta">
+                    <span class="status-badge status-success">Завершено</span>
+                    <span class="portfolio-card-date">@game.CompletedAt.ToLocalTime().FormatMoscowShort()</span>
+                </div>
+                @if (!string.IsNullOrWhiteSpace(game.System) || !string.IsNullOrWhiteSpace(game.Format))
+                {
+                    <div class="portfolio-card-badges">
+                        @if (!string.IsNullOrWhiteSpace(game.System))
+                        {
+                            <span class="status-badge status-info">@GetSystemDisplayName(game.System)</span>
+                        }
+                        @if (!string.IsNullOrWhiteSpace(game.Format))
+                        {
+                            <span class="status-badge status-neutral">@TranslateFormat(game.Format)</span>
+                        }
+                    </div>
+                }
+            </div>
+        </a>
+    }
+</div>
+
+@code {
+    [Parameter, EditorRequired]
+    public IReadOnlyList<PublicPortfolioCard> Games { get; set; } = [];
+
+    private static string GetSystemDisplayName(string? system)
+    {
+        if (string.IsNullOrWhiteSpace(system))
+            return system ?? string.Empty;
+
+        if (Enum.TryParse<GameSystem>(system, out var gs))
+            return gs.ToDisplayName();
+
+        return system;
+    }
+
+    private static string TranslateFormat(string format) => format switch
+    {
+        "Online" => "Онлайн",
+        "Offline" => "Офлайн",
+        "Hybrid" => "Гибрид",
+        _ => format
+    };
+}

src/GmRelay.Web/wwwroot/app.css

@@ -2288,3 +2288,160 @@ body.telegram-mini-app .session-card-mobile {
     }
 }
 
+/* === Public Portfolio === */
+.portfolio-section {
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.portfolio-section h2 {
+    font-size: 1.25rem;
+    margin: 0;
+}
+
+.portfolio-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 1rem;
+    margin-top: 0.25rem;
+}
+
+.portfolio-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 0;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    color: inherit;
+    text-decoration: none;
+    transition: transform 0.15s ease, border-color 0.15s ease;
+}
+
+.portfolio-card:hover {
+    transform: translateY(-2px);
+    border-color: var(--accent-primary);
+}
+
+.portfolio-card-cover {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    background-color: var(--bg-secondary);
+    background-size: cover;
+    background-position: center;
+}
+
+.portfolio-card-cover-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+}
+
+.portfolio-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.875rem 1rem 1rem;
+}
+
+.portfolio-card-body h3 {
+    margin: 0;
+    font-size: 1rem;
+    color: var(--text-primary);
+    overflow-wrap: anywhere;
+}
+
+.portfolio-card-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.portfolio-card-date {
+    color: var(--text-muted);
+    font-size: 0.8125rem;
+}
+
+.portfolio-card-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+}
+
+.portfolio-cover-hero {
+    width: 100%;
+    aspect-ratio: 16 / 7;
+    background-color: var(--bg-secondary);
+    background-size: cover;
+    background-position: center;
+    border-radius: var(--radius-md);
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--border-color);
+}
+
+.portfolio-review-list {
+    list-style: none;
+    padding: 0;
+    margin: 0.5rem 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.portfolio-review-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.875rem 1rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+}
+
+.portfolio-review-textarea {
+    width: 100%;
+    min-height: 7rem;
+    resize: vertical;
+    padding: 0.75rem;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    font: inherit;
+}
+
+.portfolio-review-textarea:focus {
+    outline: 2px solid var(--accent-primary);
+    outline-offset: 1px;
+}
+
+.portfolio-review-consent {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    color: var(--text-secondary);
+}
+
+.portfolio-review-error {
+    margin: 0;
+    color: var(--status-error, #ff6b6b);
+    font-size: 0.875rem;
+}
+
+@media (max-width: 768px) {
+    .portfolio-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .portfolio-cover-hero {
+        aspect-ratio: 16 / 9;
+    }
+}
+

tests/GmRelay.Bot.Tests/Web/PortfolioPagesTests.cs

@@ -54,6 +54,52 @@ public sealed class PortfolioPagesTests
         Assert.Contains(".portfolio-review-moderation", css, StringComparison.Ordinal);
     }
 
+    [Fact]
+    public async Task PublicPortfolioPage_ShouldExposeSanitizedDetailAndReviewForm()
+    {
+        var publicPortfolio = await ReadRepositoryFileAsync("src/GmRelay.Web/Components/Pages/PublicPortfolio.razor");
+
+        Assert.Contains("@page \"/portfolio/{Slug}\"", publicPortfolio, StringComparison.Ordinal);
+        Assert.Contains("@layout PublicLayout", publicPortfolio, StringComparison.Ordinal);
+        Assert.DoesNotContain("@attribute [Authorize]", publicPortfolio, StringComparison.Ordinal);
+        Assert.Contains("GetPublicPortfolioGameBySlugAsync", publicPortfolio, StringComparison.Ordinal);
+        Assert.Contains("SubmitReviewForCurrentUserAsync", publicPortfolio, StringComparison.Ordinal);
+        Assert.Contains("publicationConsent", publicPortfolio, StringComparison.Ordinal);
+        Assert.DoesNotContain("PlayerId", publicPortfolio, StringComparison.Ordinal);
+        Assert.DoesNotContain("StorageKey", publicPortfolio, StringComparison.Ordinal);
+    }
+
+    [Fact]
+    public async Task PublicMasterProfilePage_ShouldIncludePortfolioCardGrid()
+    {
+        var publicMaster = await ReadRepositoryFileAsync("src/GmRelay.Web/Components/Pages/PublicMasterProfile.razor");
+
+        Assert.Contains("PortfolioCardGrid", publicMaster, StringComparison.Ordinal);
+        Assert.Contains("GetPublicPortfolioGamesForMasterAsync", publicMaster, StringComparison.Ordinal);
+    }
+
+    [Fact]
+    public async Task PublicClubPage_ShouldIncludePortfolioCardGrid()
+    {
+        var publicClub = await ReadRepositoryFileAsync("src/GmRelay.Web/Components/Pages/PublicClub.razor");
+
+        Assert.Contains("PortfolioCardGrid", publicClub, StringComparison.Ordinal);
+        Assert.Contains("GetPublicPortfolioGamesForClubAsync", publicClub, StringComparison.Ordinal);
+    }
+
+    [Fact]
+    public async Task AppCss_ShouldStylePublicPortfolioComponents()
+    {
+        var css = await ReadRepositoryFileAsync("src/GmRelay.Web/wwwroot/app.css");
+
+        Assert.Contains(".portfolio-grid", css, StringComparison.Ordinal);
+        Assert.Contains(".portfolio-card", css, StringComparison.Ordinal);
+        Assert.Contains(".portfolio-card-cover", css, StringComparison.Ordinal);
+        Assert.Contains(".portfolio-cover-hero", css, StringComparison.Ordinal);
+        Assert.Contains(".portfolio-review-list", css, StringComparison.Ordinal);
+        Assert.Contains(".portfolio-review-card", css, StringComparison.Ordinal);
+    }
+
     private static async Task<string> ReadRepositoryFileAsync(string relativePath)
     {
         var directory = new DirectoryInfo(AppContext.BaseDirectory);