Error toast and key skill display

Fellowship/Web/Pages/Keyboard.razor

@@ -2,6 +2,22 @@
 
 <PageTitle>Keyboard</PageTitle>
 
+<div class="kb-layout">
+<div class="kb-left">
+
+@if (toast != null)
+{
+    <div class="toast-notification @(toast.Visible ? "toast-show" : "toast-hide")">
+        <div class="toast-content">
+            <span class="toast-icon">&#x26A0;</span>
+            <div class="toast-text">
+                <span class="toast-title">@toast.SkillName</span>
+                <span class="toast-message">Cannot cast yet — @toast.Remaining seconds remaining</span>
+            </div>
+        </div>
+    </div>
+}
+
 <div class="character-selector">
     <label>Character:</label>
     <select @bind="selectedCharacter" @bind:after="RebuildKeyboardData">
@@ -259,6 +275,108 @@
         </div>
     </div>
 </div>
+</div>
+
+<div class="kb-right">
+    @if (selectedSkill != null)
+    {
+        <div class="skill-detail">
+            <div class="skill-detail-header">
+                <h3 class="skill-detail-name">@Path.GetFileNameWithoutExtension(selectedSkill.FileName)</h3>
+                <span class="skill-detail-key">@selectedSkill.Key</span>
+            </div>
+
+            @if (!string.IsNullOrEmpty(selectedSkill.Description))
+            {
+                <div class="skill-detail-desc">
+                    @foreach (var line in selectedSkill.Description.Split('\n'))
+                    {
+                        <p>@line</p>
+                    }
+                </div>
+            }
+
+            <div class="skill-detail-stats">
+                @if (!string.IsNullOrEmpty(selectedSkill.Cast))
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Cast</span>
+                        <span class="stat-value">@selectedSkill.Cast</span>
+                    </div>
+                }
+                @if (ParseValue(selectedSkill.Damage) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Damage</span>
+                        <span class="stat-value">@FormatStat(selectedSkill.Damage)</span>
+                    </div>
+                }
+                @if (!string.IsNullOrEmpty(selectedSkill.DamageType))
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Type</span>
+                        <span class="stat-value">@selectedSkill.DamageType</span>
+                    </div>
+                }
+                @if (ParseValue(selectedSkill.Heal) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Healing</span>
+                        <span class="stat-value">@FormatStat(selectedSkill.Heal)</span>
+                    </div>
+                }
+                @if (ParseValue(selectedSkill.Shield) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Shield</span>
+                        <span class="stat-value">@FormatStat(selectedSkill.Shield)</span>
+                    </div>
+                }
+                @if (!string.IsNullOrEmpty(selectedSkill.Cooldown) && ParseValue(selectedSkill.Cooldown) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Cooldown</span>
+                        <span class="stat-value">@selectedSkill.Cooldown s</span>
+                    </div>
+                }
+                @if (ParseValue(selectedSkill.Mana) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Mana</span>
+                        <span class="stat-value">@FormatStat(selectedSkill.Mana)</span>
+                    </div>
+                }
+                @if (!string.IsNullOrEmpty(selectedSkill.Range) && ParseValue(selectedSkill.Range) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Range</span>
+                        <span class="stat-value">@selectedSkill.Range</span>
+                    </div>
+                }
+            </div>
+
+            @if (selectedSkill.Tags is { Count: > 0 })
+            {
+                <div class="skill-detail-tags">
+                    @foreach (var tag in selectedSkill.Tags)
+                    {
+                        <span class="tag-badge">@tag</span>
+                    }
+                </div>
+            }
+        </div>
+    }
+    else
+    {
+        <div class="skill-detail skill-detail-empty">
+            <div class="empty-hint">
+                <span class="empty-icon">&#x2328;</span>
+                <p>Press a key to view skill details</p>
+            </div>
+        </div>
+    }
+</div>
+</div>
 
 @code {
     private ElementReference containerRef;
@@ -269,6 +387,9 @@
     private KeyData shiftSpaceKey = null!;
     private string selectedCharacter = "Xavian";
     private List<string> Characters = [];
+    private ToastData? toast;
+    private CancellationTokenSource? toastCts;
+    private SkillDoc? selectedSkill;
 
     public class KeyData
     {
@@ -276,6 +397,7 @@
         public string Label { get; set; } = "";
         public string? SkillName { get; set; }
         public string? Character { get; set; }
+        public SkillDoc? SkillDoc { get; set; }
         public double CooldownDuration { get; set; }
         public double Remaining { get; set; }
         public bool OnCooldown => Remaining > 0;
@@ -349,6 +471,7 @@
                 Label = label,
                 SkillName = skillName,
                 Character = skill?.Character,
+                SkillDoc = skill,
                 CooldownDuration = ParseCooldown(skill?.Cooldown)
             };
         }).ToList();
@@ -361,6 +484,7 @@
             Label = "Space",
             SkillName = spaceSkill != null ? Path.GetFileNameWithoutExtension(spaceSkill.FileName) : spaceAction,
             Character = spaceSkill?.Character,
+            SkillDoc = spaceSkill,
             CooldownDuration = ParseCooldown(spaceSkill?.Cooldown)
         };
 
@@ -376,6 +500,7 @@
                 Label = "Shift+" + label,
                 SkillName = skillName,
                 Character = skill?.Character,
+                SkillDoc = skill,
                 CooldownDuration = ParseCooldown(skill?.Cooldown)
             };
         }).ToList();
@@ -388,8 +513,11 @@
             Label = "Shift+Space",
             SkillName = shiftSpaceSkill != null ? Path.GetFileNameWithoutExtension(shiftSpaceSkill.FileName) : shiftSpaceAction,
             Character = shiftSpaceSkill?.Character,
+            SkillDoc = shiftSpaceSkill,
             CooldownDuration = ParseCooldown(shiftSpaceSkill?.Cooldown)
         };
+
+        selectedSkill = null;
     }
 
     private static double ParseCooldown(string? cooldown)
@@ -399,6 +527,20 @@
         return 0;
     }
 
+    private static double ParseValue(string? value)
+    {
+        if (string.IsNullOrEmpty(value)) return 0;
+        var clean = value.Replace(",", "").Trim();
+        if (double.TryParse(clean, out var result)) return result;
+        return 0;
+    }
+
+    private static string FormatStat(string? value)
+    {
+        if (string.IsNullOrEmpty(value)) return "";
+        return value;
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
@@ -437,11 +579,46 @@
         }
     }
 
+    private record ToastData(string SkillName, double Remaining, bool Visible);
+
+    private async void ShowToast(string skillName, double remaining)
+    {
+        toastCts?.Cancel();
+        toastCts = new CancellationTokenSource();
+        var token = toastCts.Token;
+
+        toast = new ToastData(skillName, remaining, true);
+        StateHasChanged();
+
+        try
+        {
+            await Task.Delay(2000, token);
+            if (!token.IsCancellationRequested)
+            {
+                toast = toast with { Visible = false };
+                StateHasChanged();
+                await Task.Delay(300, token);
+                if (!token.IsCancellationRequested)
+                {
+                    toast = null;
+                    StateHasChanged();
+                }
+            }
+        }
+        catch (TaskCanceledException) { }
+    }
+
     private void ActivateKey(KeyData key)
     {
-        if (key.OnCooldown) return;
+        if (key.OnCooldown)
+        {
+            ShowToast(key.SkillName ?? key.Label, Math.Ceiling(key.Remaining));
+            return;
+        }
         if (key.Character == null) return;
 
+        selectedSkill = key.SkillDoc;
+
         var duration = key.CooldownDuration > 0 ? key.CooldownDuration : 0.5;
         key.Remaining = duration;
 

Fellowship/Web/Pages/Keyboard.razor.css

@@ -1,3 +1,57 @@
+.toast-notification {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    background: #1a1a1a;
+    border: 1px solid #ff4444;
+    border-radius: 10px;
+    padding: 14px 22px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 68, 68, 0.2);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    pointer-events: none;
+}
+
+.toast-notification.toast-show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
+.toast-notification.toast-hide {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-12px);
+}
+
+.toast-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.toast-icon {
+    font-size: 20px;
+    color: #ff4444;
+    flex-shrink: 0;
+}
+
+.toast-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.toast-title {
+    font-size: 15px;
+    font-weight: 700;
+    color: #fff;
+}
+
+.toast-message {
+    font-size: 12px;
+    color: #ff8888;
+}
+
 .keyboard-container {
     outline: none;
     padding: 20px;
@@ -166,3 +220,144 @@
     width: 80%;
     text-align: center;
 }
+
+.kb-layout {
+    display: flex;
+    gap: 24px;
+    align-items: flex-start;
+}
+
+.kb-left {
+    flex-shrink: 0;
+}
+
+.kb-right {
+    flex: 1;
+    min-width: 280px;
+    position: sticky;
+    top: 20px;
+}
+
+.skill-detail {
+    background: #1a1a1a;
+    border: 1px solid #333;
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+.skill-detail-empty {
+    border-style: dashed;
+    border-color: #333;
+    background: #141414;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+}
+
+.empty-hint {
+    text-align: center;
+    color: #555;
+}
+
+.empty-icon {
+    font-size: 32px;
+    display: block;
+    margin-bottom: 8px;
+}
+
+.empty-hint p {
+    margin: 0;
+    font-size: 13px;
+}
+
+.skill-detail-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 14px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #2a2a2a;
+}
+
+.skill-detail-name {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 700;
+    color: #fff;
+}
+
+.skill-detail-key {
+    font-size: 11px;
+    font-weight: 600;
+    color: #888;
+    background: #2a2a2a;
+    padding: 3px 8px;
+    border-radius: 4px;
+    border: 1px solid #444;
+    text-transform: uppercase;
+}
+
+.skill-detail-desc {
+    margin-bottom: 14px;
+}
+
+.skill-detail-desc p {
+    margin: 0 0 6px;
+    font-size: 13px;
+    line-height: 1.5;
+    color: #bbb;
+}
+
+.skill-detail-desc p:last-child {
+    margin-bottom: 0;
+}
+
+.skill-detail-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 14px;
+}
+
+.stat-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 0;
+    border-bottom: 1px solid #222;
+}
+
+.stat-row:last-child {
+    border-bottom: none;
+}
+
+.stat-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.stat-value {
+    font-size: 14px;
+    font-weight: 600;
+    color: #cce;
+}
+
+.skill-detail-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.skill-detail-tags .tag-badge {
+    font-size: 11px;
+    padding: 3px 8px;
+    background: #2a2a40;
+    border: 1px solid #3a3a55;
+    border-radius: 4px;
+    color: #99b;
+}