Разбиение по компонентам

PlaylistShared.Pwa/Components/Profile/YandexTokenInstructions.razor

@@ -0,0 +1,75 @@
+@* Компонент с инструкцией по получению токена Яндекс.Музыки *@
+
+<MudContainer Class="pa-4">
+    <MudText Typo="Typo.body2" GutterBottom>
+        Токен нужен для доступа к вашим плейлистам. Получите его один раз:
+    </MudText>
+
+    <!-- Вертикальный список шагов -->
+    <div class="instruction-steps">
+        <div class="step-item">
+            <div class="step-number">1</div>
+            <div class="step-content">
+                Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink>
+            </div>
+        </div>
+        <div class="step-item">
+            <div class="step-number">2</div>
+            <div class="step-content">
+                Авторизуйтесь в Яндексе (если ещё не вошли)
+            </div>
+        </div>
+        <div class="step-item">
+            <div class="step-number">3</div>
+            <div class="step-content">
+                Нажмите «Разрешить»
+            </div>
+        </div>
+        <div class="step-item">
+            <div class="step-number">4</div>
+            <div class="step-content">
+                Скопируйте <strong>access_token</strong> из адресной строки после перенаправления
+            </div>
+        </div>
+    </div>
+
+    <MudAlert Severity="Severity.Info" Class="mt-4">
+        Пример: <code>https://music.yandex.ru/#access_token=ВАШ_ТОКЕН&...</code>
+    </MudAlert>
+
+    <MudAlert Severity="Severity.Warning" Class="mt-2">
+        Токен даёт доступ к вашим плейлистам. Никому его не сообщайте.
+    </MudAlert>
+    
+    <MudAlert Severity="Severity.Success" Class="mt-2" Icon="@Icons.Material.Filled.Security">
+        Ваш токен сохраняется в зашифрованном виде и никому не передаётся.
+    </MudAlert>
+</MudContainer>
+
+<style>
+    .instruction-steps {
+        margin: 16px 0;
+    }
+    .step-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 16px;
+    }
+    .step-number {
+        width: 28px;
+        height: 28px;
+        background-color: var(--mud-palette-primary);
+        color: white;
+        border-radius: 50%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        flex-shrink: 0;
+    }
+    .step-content {
+        flex: 1;
+        font-size: 0.9rem;
+    }
+</style>