use fragment navigation with letter bar (#139)

ErsatzTV/Pages/MovieList.razor

@@ -56,8 +56,23 @@
 </MudPaper>
 <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8" Style="margin-top: 64px">
     <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
+        @{ var letters = new System.Collections.Generic.HashSet<char>(); }
         @foreach (MovieCardViewModel card in _data.Cards.Where(m => !string.IsNullOrWhiteSpace(m.Title)).OrderBy(m => m.SortTitle))
         {
+            @if (!letters.Contains(card.SortTitle.Head()))
+            {
+                Option<char> maybeLetter = card.SortTitle.ToLowerInvariant().HeadOrNone();
+                if (maybeLetter.IsSome)
+                {
+                    char letter = maybeLetter.ValueUnsafe();
+                    if (letter >= '0' && letter <= '9')
+                    {
+                        letter = '#';
+                    }
+                    letters.Add(letter);
+                    <div id="@($"letter-{letter}")" style="scroll-margin-top: 128px"></div>
+                }
+            }
             <MediaCard Data="@card"
                        Link="@($"/media/movies/{card.MovieId}")"
                        AddToCollectionClicked="@AddToCollection"
@@ -131,10 +146,7 @@
 
     private void SelectClicked(MediaCardViewModel card, MouseEventArgs e)
     {
-        List<MediaCardViewModel> GetSortedItems()
-        {
-            return _data.Cards.OrderBy(m => m.SortTitle).ToList<MediaCardViewModel>();
-        }
+        List<MediaCardViewModel> GetSortedItems() => _data.Cards.OrderBy(m => m.SortTitle).ToList<MediaCardViewModel>();
 
         SelectClicked(GetSortedItems, card, e);
     }

ErsatzTV/Pages/MusicVideoList.razor

@@ -56,8 +56,23 @@
 </MudPaper>
 <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8" Style="margin-top: 64px">
     <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
+        @{ var letters = new System.Collections.Generic.HashSet<char>(); }
         @foreach (MusicVideoCardViewModel card in _data.Cards.Where(m => !string.IsNullOrWhiteSpace(m.Title)).OrderBy(m => m.SortTitle))
         {
+            @if (!letters.Contains(card.SortTitle.Head()))
+            {
+                Option<char> maybeLetter = card.SortTitle.ToLowerInvariant().HeadOrNone();
+                if (maybeLetter.IsSome)
+                {
+                    char letter = maybeLetter.ValueUnsafe();
+                    if (letter >= '0' && letter <= '9')
+                    {
+                        letter = '#';
+                    }
+                    letters.Add(letter);
+                    <div id="@($"letter-{letter}")" style="scroll-margin-top: 128px"></div>
+                }
+            }
             <MediaCard Data="@card"
                        Link=""
                        ArtworkKind="ArtworkKind.Thumbnail"

ErsatzTV/Pages/TelevisionShowList.razor

@@ -56,8 +56,23 @@
 </MudPaper>
 <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8" Style="margin-top: 64px">
     <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
+        @{ var letters = new System.Collections.Generic.HashSet<char>(); }
         @foreach (TelevisionShowCardViewModel card in _data.Cards.OrderBy(s => s.SortTitle))
         {
+            @if (!letters.Contains(card.SortTitle.Head()))
+            {
+                Option<char> maybeLetter = card.SortTitle.ToLowerInvariant().HeadOrNone();
+                if (maybeLetter.IsSome)
+                {
+                    char letter = maybeLetter.ValueUnsafe();
+                    if (letter >= '0' && letter <= '9')
+                    {
+                        letter = '#';
+                    }
+                    letters.Add(letter);
+                    <div id="@($"letter-{letter}")" style="scroll-margin-top: 128px"></div>
+                }
+            }
             <MediaCard Data="@card"
                        Link="@($"/media/tv/shows/{card.TelevisionShowId}")"
                        AddToCollectionClicked="@AddToCollection"

ErsatzTV/Shared/LetterBar.razor

@@ -50,7 +50,7 @@
         {
             uri = QueryHelpers.AddQueryString(uri, "query", Query);
         }
-        return uri;
+        return uri + $"#letter-{letter}";
     }
 
 }