Добавлен playlist shared

2026-04-11 15:41:24 +03:00
parent 8444fc5f8e
commit ba9d97239e
84 changed files with 61796 additions and 0 deletions
--- a/PlaylistShared/Components/App.razor
+++ b/PlaylistShared/Components/App.razor
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="/" />
+    <ResourcePreloader />
+    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
+    <link rel="stylesheet" href="@Assets["app.css"]" />
+    <link rel="stylesheet" href="@Assets["PlaylistShared.styles.css"]" />
+    <ImportMap />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <HeadOutlet />
+</head>
+
+<body>
+    <Routes />
+    <ReconnectModal />
+    <script src="@Assets["_framework/blazor.web.js"]"></script>
+</body>
+
+</html>
--- a/PlaylistShared/Components/Layout/MainLayout.razor
+++ b/PlaylistShared/Components/Layout/MainLayout.razor
@@ -0,0 +1,23 @@
+@inherits LayoutComponentBase
+
+<div class="page">
+    <div class="sidebar">
+        <NavMenu />
+    </div>
+
+    <main>
+        <div class="top-row px-4">
+            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+        </div>
+
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+</div>
+
+<div id="blazor-error-ui" data-nosnippet>
+    An unhandled error has occurred.
+    <a href="." class="reload">Reload</a>
+    <span class="dismiss">🗙</span>
+</div>
--- a/PlaylistShared/Components/Layout/MainLayout.razor.css
+++ b/PlaylistShared/Components/Layout/MainLayout.razor.css
@@ -0,0 +1,98 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+    }
+
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}
+
+#blazor-error-ui {
+    color-scheme: light only;
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+    #blazor-error-ui .dismiss {
+        cursor: pointer;
+        position: absolute;
+        right: 0.75rem;
+        top: 0.5rem;
+    }
--- a/PlaylistShared/Components/Layout/NavMenu.razor
+++ b/PlaylistShared/Components/Layout/NavMenu.razor
@@ -0,0 +1,51 @@
+@using Microsoft.AspNetCore.Components.Authorization
+<div class="top-row ps-3 navbar navbar-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="">PlaylistShared</a>
+    </div>
+</div>
+
+<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
+
+<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+    <nav class="nav flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Главная
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="myplaylists">
+                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Мои плейлисты
+            </NavLink>
+        </div>
+        @if (user?.Identity?.IsAuthenticated == true)
+        {
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="Logout">
+                    <span class="bi bi-box-arrow-right"></span> Выйти
+                </NavLink>
+            </div>
+        }
+        else
+        {
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="Login">
+                    <span class="bi bi-box-arrow-in-right"></span> Войти
+                </NavLink>
+            </div>
+        }
+    </nav>
+</div>
+
+@code {
+    private AuthenticationState? _authState;
+    private ClaimsPrincipal? user => _authState?.User;
+    [CascadingParameter] private Task<AuthenticationState>? AuthenticationStateTask { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (AuthenticationStateTask is not null)
+            _authState = await AuthenticationStateTask;
+    }
+}
--- a/PlaylistShared/Components/Layout/NavMenu.razor.css
+++ b/PlaylistShared/Components/Layout/NavMenu.razor.css
@@ -0,0 +1,108 @@
+.navbar-toggler {
+    appearance: none;
+    cursor: pointer;
+    width: 3.5rem;
+    height: 2.5rem;
+    color: white;
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
+}
+
+.navbar-toggler:checked {
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+.top-row {
+    min-height: 3.5rem;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.bi {
+    display: inline-block;
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    top: -1px;
+    background-size: cover;
+}
+
+.bi-house-door-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
+}
+
+.bi-plus-square-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
+}
+
+.bi-list-nested-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+    .nav-item:first-of-type {
+        padding-top: 1rem;
+    }
+
+    .nav-item:last-of-type {
+        padding-bottom: 1rem;
+    }
+
+    .nav-item ::deep .nav-link {
+        color: #d7d7d7;
+        background: none;
+        border: none;
+        border-radius: 4px;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        line-height: 3rem;
+        width: 100%;
+    }
+
+.nav-item ::deep a.active {
+    background-color: rgba(255,255,255,0.37);
+    color: white;
+}
+
+.nav-item ::deep .nav-link:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+.nav-scrollable {
+    display: none;
+}
+
+.navbar-toggler:checked ~ .nav-scrollable {
+    display: block;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .nav-scrollable {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+
+        /* Allow sidebar to scroll for tall menus */
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}
+.bi-box-arrow-right, .bi-box-arrow-in-right {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3E%3C/svg%3E");
+}
--- a/PlaylistShared/Components/Layout/ReconnectModal.razor
+++ b/PlaylistShared/Components/Layout/ReconnectModal.razor
@@ -0,0 +1,31 @@
+<script type="module" src="@Assets["Components/Layout/ReconnectModal.razor.js"]"></script>
+
+<dialog id="components-reconnect-modal" data-nosnippet>
+    <div class="components-reconnect-container">
+        <div class="components-rejoining-animation" aria-hidden="true">
+            <div></div>
+            <div></div>
+        </div>
+        <p class="components-reconnect-first-attempt-visible">
+            Rejoining the server...
+        </p>
+        <p class="components-reconnect-repeated-attempt-visible">
+            Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
+        </p>
+        <p class="components-reconnect-failed-visible">
+            Failed to rejoin.<br />Please retry or reload the page.
+        </p>
+        <button id="components-reconnect-button" class="components-reconnect-failed-visible">
+            Retry
+        </button>
+        <p class="components-pause-visible">
+            The session has been paused by the server.
+        </p>
+        <p class="components-resume-failed-visible">
+            Failed to resume the session.<br />Please retry or reload the page.
+        </p>
+        <button id="components-resume-button" class="components-pause-visible components-resume-failed-visible">
+            Resume
+        </button>
+    </div>
+</dialog>
--- a/PlaylistShared/Components/Layout/ReconnectModal.razor.css
+++ b/PlaylistShared/Components/Layout/ReconnectModal.razor.css
@@ -0,0 +1,157 @@
+.components-reconnect-first-attempt-visible,
+.components-reconnect-repeated-attempt-visible,
+.components-reconnect-failed-visible,
+.components-pause-visible,
+.components-resume-failed-visible,
+.components-rejoining-animation {
+    display: none;
+}
+
+#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
+#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
+#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
+#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
+#components-reconnect-modal.components-reconnect-retrying,
+#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
+#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
+#components-reconnect-modal.components-reconnect-failed,
+#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
+    display: block;
+}
+
+
+#components-reconnect-modal {
+    background-color: white;
+    width: 20rem;
+    margin: 20vh auto;
+    padding: 2rem;
+    border: 0;
+    border-radius: 0.5rem;
+    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
+    opacity: 0;
+    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
+    animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
+    &[open]
+
+{
+    animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
+    animation-fill-mode: both;
+}
+
+}
+
+#components-reconnect-modal::backdrop {
+    background-color: rgba(0, 0, 0, 0.4);
+    animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
+    opacity: 1;
+}
+
+@keyframes components-reconnect-modal-slideUp {
+    0% {
+        transform: translateY(30px) scale(0.95);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@keyframes components-reconnect-modal-fadeInOpacity {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes components-reconnect-modal-fadeOutOpacity {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.components-reconnect-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+#components-reconnect-modal p {
+    margin: 0;
+    text-align: center;
+}
+
+#components-reconnect-modal button {
+    border: 0;
+    background-color: #6b9ed2;
+    color: white;
+    padding: 4px 24px;
+    border-radius: 4px;
+}
+
+    #components-reconnect-modal button:hover {
+        background-color: #3b6ea2;
+    }
+
+    #components-reconnect-modal button:active {
+        background-color: #6b9ed2;
+    }
+
+.components-rejoining-animation {
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+    .components-rejoining-animation div {
+        position: absolute;
+        border: 3px solid #0087ff;
+        opacity: 1;
+        border-radius: 50%;
+        animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+    }
+
+        .components-rejoining-animation div:nth-child(2) {
+            animation-delay: -0.5s;
+        }
+
+@keyframes components-rejoining-animation {
+    0% {
+        top: 40px;
+        left: 40px;
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+
+    4.9% {
+        top: 40px;
+        left: 40px;
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+
+    5% {
+        top: 40px;
+        left: 40px;
+        width: 0;
+        height: 0;
+        opacity: 1;
+    }
+
+    100% {
+        top: 0px;
+        left: 0px;
+        width: 80px;
+        height: 80px;
+        opacity: 0;
+    }
+}
--- a/PlaylistShared/Components/Layout/ReconnectModal.razor.js
+++ b/PlaylistShared/Components/Layout/ReconnectModal.razor.js
@@ -0,0 +1,63 @@
+// Set up event handlers
+const reconnectModal = document.getElementById("components-reconnect-modal");
+reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
+
+const retryButton = document.getElementById("components-reconnect-button");
+retryButton.addEventListener("click", retry);
+
+const resumeButton = document.getElementById("components-resume-button");
+resumeButton.addEventListener("click", resume);
+
+function handleReconnectStateChanged(event) {
+    if (event.detail.state === "show") {
+        reconnectModal.showModal();
+    } else if (event.detail.state === "hide") {
+        reconnectModal.close();
+    } else if (event.detail.state === "failed") {
+        document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
+    } else if (event.detail.state === "rejected") {
+        location.reload();
+    }
+}
+
+async function retry() {
+    document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
+
+    try {
+        // Reconnect will asynchronously return:
+        // - true to mean success
+        // - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
+        // - exception to mean we didn't reach the server (this can be sync or async)
+        const successful = await Blazor.reconnect();
+        if (!successful) {
+            // We have been able to reach the server, but the circuit is no longer available.
+            // We'll reload the page so the user can continue using the app as quickly as possible.
+            const resumeSuccessful = await Blazor.resumeCircuit();
+            if (!resumeSuccessful) {
+                location.reload();
+            } else {
+                reconnectModal.close();
+            }
+        }
+    } catch (err) {
+        // We got an exception, server is currently unavailable
+        document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
+    }
+}
+
+async function resume() {
+    try {
+        const successful = await Blazor.resumeCircuit();
+        if (!successful) {
+            location.reload();
+        }
+    } catch {
+        reconnectModal.classList.replace("components-reconnect-paused", "components-reconnect-resume-failed");
+    }
+}
+
+async function retryWhenDocumentBecomesVisible() {
+    if (document.visibilityState === "visible") {
+        await retry();
+    }
+}
--- a/PlaylistShared/Components/Pages/CreatePlaylist.razor
+++ b/PlaylistShared/Components/Pages/CreatePlaylist.razor
@@ -0,0 +1,80 @@
+@page "/createplaylist"
+@attribute [Authorize]
+@using System.Security.Claims
+@using Microsoft.AspNetCore.Components.Authorization
+@inject AuthenticationStateProvider AuthenticationStateProvider
+@inject AppDbContext Db
+@inject IYandexMusicService YandexService
+@inject NavigationManager Navigation
+
+<h3>Создание общего плейлиста</h3>
+
+<EditForm Model="@model" OnValidSubmit="@HandleSubmit">
+    <div class="mb-3">
+        <label for="title">Название плейлиста</label>
+        <InputText id="title" class="form-control" @bind-Value="model.Title" />
+        <ValidationMessage For="@(() => model.Title)" />
+    </div>
+    <div class="mb-3">
+        <label for="description">Описание (необязательно)</label>
+        <InputText id="description" class="form-control" @bind-Value="model.Description" />
+    </div>
+    <button type="submit" class="btn btn-primary" disabled="@isLoading">@(isLoading ? "Создание..." : "Создать")</button>
+</EditForm>
+
+@code {
+    private CreateModel model = new();
+    private bool isLoading;
+    private string? userId;
+    
+    public class CreateModel
+    {
+        [Required]
+        public string Title { get; set; } = "";
+        public string? Description { get; set; }
+    }
+    
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
+        userId = authState.User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+    }
+    
+    private async Task HandleSubmit()
+    {
+        if (string.IsNullOrEmpty(userId))
+        {
+            // пользователь не авторизован
+            return;
+        }
+        
+        isLoading = true;
+        try
+        {
+            // 1. Создаём плейлист в Яндекс Музыке
+            var yandexId = await YandexService.CreatePlaylistAsync(userId, model.Title);
+            // 2. Сохраняем в БД
+            var playlist = new SharedPlaylist
+            {
+                Id = Guid.NewGuid(),
+                OwnerUserId = userId,
+                YandexPlaylistId = yandexId,
+                Title = model.Title,
+                Description = model.Description,
+                ShareSlug = Guid.NewGuid().ToString("N"),
+                CreatedAt = DateTime.UtcNow
+            };
+            Db.SharedPlaylists.Add(playlist);
+            await Db.SaveChangesAsync();
+            Navigation.NavigateTo("/myplaylists");
+        }
+        catch (Exception ex)
+        {
+            // показать ошибку (можно добавить переменную errorMessage)
+        }
+        finally
+        {
+            isLoading = false;
+        }
+    }
+}
--- a/PlaylistShared/Components/Pages/Login.razor
+++ b/PlaylistShared/Components/Pages/Login.razor
@@ -0,0 +1,7 @@
+@page "/Login"
+@using Microsoft.AspNetCore.Identity
+@using Microsoft.AspNetCore.Authentication
+@inject SignInManager<ApplicationUser> SignInManager
+
+<h3>Вход через Яндекс</h3>
+<a class="btn btn-primary" href="/signin-yandex">Войти через Яндекс</a>
--- a/PlaylistShared/Components/Pages/Logout.razor
+++ b/PlaylistShared/Components/Pages/Logout.razor
@@ -0,0 +1,12 @@
+@page "/Logout"
+@using Microsoft.AspNetCore.Identity
+@inject SignInManager<ApplicationUser> SignInManager
+@inject NavigationManager Navigation
+
+@code {
+    protected override async Task OnInitializedAsync()
+    {
+        await SignInManager.SignOutAsync();
+        Navigation.NavigateTo("/", true);
+    }
+}
--- a/PlaylistShared/Components/Pages/MyPlaylists.razor
+++ b/PlaylistShared/Components/Pages/MyPlaylists.razor
@@ -0,0 +1,57 @@
+@page "/myplaylists"
+@attribute [Authorize]
+@using System.Security.Claims
+@using Microsoft.EntityFrameworkCore
+@using Microsoft.AspNetCore.Components.Authorization
+@inject AuthenticationStateProvider AuthenticationStateProvider
+@inject AppDbContext Db
+@inject NavigationManager Navigation
+
+<h3>Мои плейлисты</h3>
+<a href="/createplaylist" class="btn btn-success mb-3">Создать новый плейлист</a>
+
+@if (playlists == null)
+{
+    <p>Загрузка...</p>
+}
+else if (!playlists.Any())
+{
+    <p>У вас пока нет общих плейлистов. Создайте первый!</p>
+}
+else
+{
+    <table class="table">
+        <thead>
+            <tr><th>Название</th><th>Дата создания</th><th>Ссылка</th><th>Настройки</th></tr>
+        </thead>
+        <tbody>
+            @foreach (var pl in playlists)
+            {
+                <tr>
+                    <td>@pl.Title</td>
+                    <td>@pl.CreatedAt.ToShortDateString()</td>
+                    <td><a href="/playlist/@pl.ShareSlug">открыть</a></td>
+                    <td><a href="/settings/@pl.Id">настройки</a></td>
+                </tr>
+            }
+        </tbody>
+    </table>
+}
+
+@code {
+    private List<SharedPlaylist>? playlists;
+    private string? userId;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
+        userId = authState.User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+        if (userId != null)
+        {
+            playlists = await Db.SharedPlaylists
+                .Where(p => p.OwnerUserId == userId)
+                .OrderByDescending(p => p.CreatedAt)
+                .ToListAsync();
+        }
+    }
+}
--- a/PlaylistShared/Components/Pages/NotFound.razor
+++ b/PlaylistShared/Components/Pages/NotFound.razor
@@ -0,0 +1,5 @@
+@page "/not-found"
+@layout MainLayout
+
+<h3>Not Found</h3>
+<p>Sorry, the content you are looking for does not exist.</p>
--- a/PlaylistShared/Components/Pages/PlaylistDetails.razor
+++ b/PlaylistShared/Components/Pages/PlaylistDetails.razor
@@ -0,0 +1,92 @@
+@page "/playlist/{slug}"
+@using System.Security.Claims
+@using Microsoft.AspNetCore.Components.Authorization
+@using Microsoft.EntityFrameworkCore
+@using PlaylistShared.Data.Entities
+@inject AuthenticationStateProvider AuthenticationStateProvider
+@inject AppDbContext Db
+@inject IYandexMusicService YandexService
+@inject IJSRuntime Js
+@inject HttpClient Http
+
+<h3>@playlist?.Title</h3>
+<p>Владелец: @playlist?.Owner?.UserName</p>
+<p>Описание: @playlist?.Description</p>
+
+@if (canAdd)
+{
+    <div class="mb-3">
+        <input type="text" id="trackId" placeholder="ID трека Яндекс.Музыки" class="form-control" />
+        <input type="text" id="trackTitle" placeholder="Название трека" class="form-control mt-1" />
+        <input type="text" id="artistName" placeholder="Исполнитель" class="form-control mt-1" />
+        <button class="btn btn-primary mt-2" id="addTrackBtn">Добавить</button>
+    </div>
+}
+
+<ul id="trackList" class="list-group">
+    @foreach (var track in tracks)
+    {
+        <li class="list-group-item d-flex justify-content-between align-items-center" data-track-id="@track.YandexTrackId">
+            <div>
+                <strong>@track.Title</strong> - @track.Artist
+            </div>
+            @if (canDelete(track))
+            {
+                <button class="btn btn-sm btn-danger deleteTrackBtn" data-track-id="@track.YandexTrackId">Удалить</button>
+            }
+        </li>
+    }
+</ul>
+
+@code {
+    [Parameter] public string slug { get; set; } = "";
+
+    private SharedPlaylist? playlist;
+    private List<PlaylistTrack> tracks = new();
+    private bool canAdd;
+    private string? currentUserId;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
+        currentUserId = authState.User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+
+        playlist = await Db.SharedPlaylists
+            .Include(p => p.Owner)
+            .Include(p => p.Tracks)
+            .FirstOrDefaultAsync(p => p.ShareSlug == slug);
+        if (playlist == null) return;
+
+        canAdd = playlist.Permissions.Add switch
+        {
+            AccessLevel.All => true,
+            AccessLevel.Authorized => currentUserId != null,
+            _ => false
+        };
+
+        // Здесь можно при желании синхронизировать с Яндекс API, но пока используем локальный кеш
+        // var yandexTracks = await YandexService.GetPlaylistTracksAsync(playlist.OwnerUserId, playlist.YandexPlaylistId);
+        tracks = playlist.Tracks.OrderBy(t => t.AddedAt).ToList();
+    }
+
+    private bool canDelete(PlaylistTrack track)
+    {
+        if (currentUserId == playlist?.OwnerUserId) return true;
+        return playlist?.Permissions.Delete switch
+        {
+            DeleteAccessLevel.All => true,
+            DeleteAccessLevel.Authorized => currentUserId != null,
+            DeleteAccessLevel.AdderOnly => currentUserId != null && currentUserId == track.AddedByUserId,
+            DeleteAccessLevel.OwnerOnly => false,
+            _ => false
+        };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && playlist != null)
+        {
+            await Js.InvokeVoidAsync("initPlaylistInteractions", playlist.Id);
+        }
+    }
+}
--- a/PlaylistShared/Components/Pages/PlaylistSettings.razor
+++ b/PlaylistShared/Components/Pages/PlaylistSettings.razor
@@ -0,0 +1,82 @@
+@page "/settings/{id:guid}"
+@attribute [Authorize]
+@using System.Security.Claims
+@using Microsoft.AspNetCore.Components.Authorization
+@using Microsoft.EntityFrameworkCore
+@using PlaylistShared.Data.Entities
+@inject AuthenticationStateProvider AuthenticationStateProvider
+@inject AppDbContext Db
+@inject NavigationManager Navigation
+
+<h3>Настройки плейлиста</h3>
+
+@if (playlist == null)
+{
+    <p>Загрузка...</p>
+}
+else if (!isOwner)
+{
+    <p>Только владелец может изменять настройки.</p>
+}
+else
+{
+    <EditForm Model="@playlist.Permissions" OnValidSubmit="@SaveSettings">
+        <div class="mb-3">
+            <label>Кто может просматривать</label>
+            <InputSelect @bind-Value="playlist.Permissions.View" class="form-control">
+                <option value="@AccessLevel.All">Все</option>
+                <option value="@AccessLevel.Authorized">Авторизованные</option>
+                <option value="@AccessLevel.None">Никто</option>
+            </InputSelect>
+        </div>
+        <div class="mb-3">
+            <label>Кто может добавлять треки</label>
+            <InputSelect @bind-Value="playlist.Permissions.Add" class="form-control">
+                <option value="@AccessLevel.All">Все</option>
+                <option value="@AccessLevel.Authorized">Авторизованные</option>
+                <option value="@AccessLevel.None">Никто</option>
+            </InputSelect>
+        </div>
+        <div class="mb-3">
+            <label>Кто может удалять треки</label>
+            <InputSelect @bind-Value="playlist.Permissions.Delete" class="form-control">
+                <option value="@DeleteAccessLevel.All">Все</option>
+                <option value="@DeleteAccessLevel.Authorized">Авторизованные</option>
+                <option value="@DeleteAccessLevel.AdderOnly">Тот, кто добавил</option>
+                <option value="@DeleteAccessLevel.OwnerOnly">Только владелец</option>
+            </InputSelect>
+        </div>
+        <button type="submit" class="btn btn-primary">Сохранить</button>
+    </EditForm>
+}
+
+@code {
+    [Parameter] public Guid id { get; set; }
+    private SharedPlaylist? playlist;
+    private bool isOwner;
+    private string? currentUserId;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
+        currentUserId = authState.User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+
+        playlist = await Db.SharedPlaylists
+            .Include(p => p.Owner)
+            .FirstOrDefaultAsync(p => p.Id == id);
+        if (playlist != null)
+        {
+            isOwner = currentUserId == playlist.OwnerUserId;
+        }
+    }
+
+    private async Task SaveSettings()
+    {
+        if (playlist != null)
+        {
+            Db.SharedPlaylists.Update(playlist);
+            await Db.SaveChangesAsync();
+            Navigation.NavigateTo("/myplaylists");
+        }
+    }
+}
--- a/PlaylistShared/Components/Routes.razor
+++ b/PlaylistShared/Components/Routes.razor
@@ -0,0 +1,6 @@
+<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+    <Found Context="routeData">
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
+    </Found>
+</Router>
--- a/PlaylistShared/Components/_Imports.razor
+++ b/PlaylistShared/Components/_Imports.razor
@@ -0,0 +1,11 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using PlaylistShared
+@using PlaylistShared.Components
+@using PlaylistShared.Components.Layout