Search & Index Seperation

HaWeb/Controllers/IndexController.cs

@@ -0,0 +1,185 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using HaWeb.Models;
+using HaWeb.FileHelpers;
+using HaDocument.Interfaces;
+using HaDocument.Models;
+using HaXMLReader.Interfaces;
+using System.Collections.Specialized;
+using HaWeb.XMLParser;
+
+namespace HaWeb.Controllers;
+
+public class IndexController : Controller {
+    private IHaDocumentWrappper _lib;
+    private IReaderService _readerService;
+    private IXMLService _xmlService;
+    private int _lettersForPage;
+
+    public IndexController(IHaDocumentWrappper lib, IReaderService readerService, IXMLService service, IConfiguration config) {
+        _lib = lib;
+        _readerService = readerService;
+        _xmlService = service;
+        _lettersForPage = config.GetValue<int>("LettersOnPage");
+    }
+
+    [Route("/HKB/{letterno}")]
+    public IActionResult GoTo(string letterno) {
+        if (String.IsNullOrWhiteSpace(letterno)) return _error404();
+        letterno = letterno.Trim();
+        var lib = _lib.GetLibrary();
+        var letter = lib.Metas.Where(x => x.Value.Autopsic == letterno);
+        if (letter != null)
+            return RedirectToAction("Index", "Briefe", new { id = letterno });
+        return _error404();
+    }
+
+    [Route("/HKB/{zhvolume}/{zhpage}")]
+    public IActionResult GoToZH(string zhvolume, string zhpage) {
+        if (String.IsNullOrWhiteSpace(zhvolume) || String.IsNullOrWhiteSpace(zhpage)) return _error404();
+        zhvolume = zhvolume.Trim();
+        zhpage = zhpage.Trim();
+        var lib = _lib.GetLibrary();
+        var pages = lib.Structure.ContainsKey(zhvolume) ? lib.Structure[zhvolume] : null;
+        if (pages == null) return _error404();
+        var lines = pages.ContainsKey(zhpage) ? pages[zhpage] : null;
+        if (lines == null) return _error404();
+        var letters = lines.Aggregate(new HashSet<string>(), (x, y) => { x.Add(y.Value); return x; });
+        if (letters != null && letters.Any() && letters.Count == 1) {
+            string? autopsic = null;
+            if (lib.Metas.ContainsKey(letters.First())) {
+                autopsic = lib.Metas[letters.First()].Autopsic;
+            }
+            if (autopsic == null) return _error404();
+            return RedirectToAction("Index", "Briefe", new { id = autopsic });
+        }
+        if (letters != null && letters.Any()) {
+            var metas = lib.Metas.Where(x => letters.Contains(x.Key)).Select(x => x.Value);
+            if (metas == null) return _error404();
+            var metasbyyear = metas.ToLookup(x => x.Sort.Year).OrderBy(x => x.Key).ToList();
+            return _paginateSend(lib, 0, metasbyyear, null, zhvolume, zhpage);
+        }
+        return _error404();
+    }
+
+    [Route("/HKB/")]
+    // Order of actions:
+    // Filter, sort by year, paginate, sort by Meta.Sort & .Order, parse
+    public IActionResult Index(string? search, int page = 0) {
+        var lib = _lib.GetLibrary();
+        List<IGrouping<int, Meta>>? metasbyyear = null;
+        if (search != null) {
+            var stopwatch = new System.Diagnostics.Stopwatch();
+            stopwatch.Start();
+            search = search.Trim();
+            var res = _xmlService.SearchCollection("letters", search, _readerService);
+            if (res == null || !res.Any()) return _error404();
+            var ret = res.ToDictionary(
+                x => x.Index,
+                x => x.Results
+                    .Select(y => new SearchResult(search, x.Index) { Page = y.Page, Line = y.Line, Preview = y.Preview })
+                    .ToList()
+                );
+            var keys = res.Select(x => x.Index).Where(x => lib.Metas.ContainsKey(x)).Select(x => lib.Metas[x]);
+            var letters = keys.ToLookup(x => x.Sort.Year).OrderBy(x => x.Key).ToList();
+            stopwatch.Stop();
+            Console.WriteLine("SEARCH: " + stopwatch.ElapsedMilliseconds);
+            return _paginateSend(lib, page, letters, null, null, null, search, ret);
+        }
+        metasbyyear = lib.MetasByYear.OrderBy(x => x.Key).ToList();
+        return _paginateSend(lib, page, metasbyyear);
+    }
+
+    [Route("/HKB/Person/{person}")]
+    public IActionResult Person(string person, int page = 0) {
+        if (String.IsNullOrWhiteSpace(person)) return _error404();
+        person = person.Trim();
+        var lib = _lib.GetLibrary();
+        List<IGrouping<int, Meta>>? metasbyyear = null;
+        var letters = lib.Metas
+            .Where(x => x.Value.Senders.Contains(person) || x.Value.Receivers.Contains(person))
+            .Select(x => x.Value);
+        if (letters == null) return _error404();
+        metasbyyear = letters.ToLookup(x => x.Sort.Year).OrderBy(x => x.Key).ToList();
+        return _paginateSend(lib, page, metasbyyear, person);
+    }
+
+
+    private List<(string Key, string Person)> _getAvailablePersons(ILibrary lib) {
+        return lib.Persons
+            .OrderBy(x => x.Value.Surname)
+            .ThenBy(x => x.Value.Prename)
+            .Select(x => (x.Key, x.Value.Name))
+            .ToList();
+    }
+
+    private BriefeMetaViewModel _generateMetaViewModel(ILibrary lib, Meta meta) {
+        var hasMarginals = lib.MarginalsByLetter.Contains(meta.Index) ? true : false;
+        var senders = meta.Senders.Select(x => lib.Persons[x].Name) ?? new List<string>();
+        var recivers = meta.Receivers.Select(x => lib.Persons[x].Name) ?? new List<string>();
+        var zhstring = meta.ZH != null ? HaWeb.HTMLHelpers.LetterHelpers.CreateZHString(meta) : null;
+        return new BriefeMetaViewModel(meta, hasMarginals) {
+            ParsedZHString = zhstring,
+            ParsedSenders = HTMLHelpers.StringHelpers.GetEnumerationString(senders),
+            ParsedReceivers = HTMLHelpers.StringHelpers.GetEnumerationString(recivers)
+        };
+    }
+
+    private List<(int StartYear, int EndYear)>? _paginate(List<IGrouping<int, Meta>>? letters) {
+        if (letters == null || !letters.Any()) return null;
+        List<(int StartYear, int EndYear)>? res = null;
+        int startyear = 0;
+        int count = 0;
+        foreach (var letterlist in letters) {
+            if (count == 0) {
+                startyear = letterlist.Key;
+            }
+            count += letterlist.Count();
+            if (count >= _lettersForPage) {
+                if (res == null) res = new List<(int StartYear, int EndYear)>();
+                res.Add((startyear, letterlist.Key));
+                count = 0;
+            }
+            if (letterlist == letters.Last()) {
+                if (res == null) res = new List<(int StartYear, int EndYear)>();
+                res.Add((startyear, letterlist.Key));
+            }
+        }
+        return res;
+    }
+
+    private IActionResult _paginateSend(
+        ILibrary lib,
+        int page,
+        List<IGrouping<int, Meta>> metasbyyear,
+        string? person = null,
+        string? zhvolume = null,
+        string? zhpage = null,
+        string? activeSearch = null,
+        Dictionary<string, List<SearchResult>>? searchResults = null) {
+        var pages = _paginate(metasbyyear);
+        if (pages != null && page >= pages.Count) return _error404();
+        if (pages == null && page > 0) return _error404();
+        List<(int Year, List<BriefeMetaViewModel> LetterList)>? letters = null;
+        if (pages != null)
+            letters = metasbyyear
+                .Where(x => x.Key >= pages[page].StartYear && x.Key <= pages[page].EndYear)
+                .Select(x => (x.Key, x
+                    .Select(y => _generateMetaViewModel(lib, y))
+                    .OrderBy(x => x.Meta.Sort)
+                    .ThenBy(x => x.Meta.Order)
+                    .ToList()))
+                .ToList();
+        List<(string Volume, List<string> Pages)>? availablePages = null;
+        availablePages = lib.Structure.Where(x => x.Key != "-1").Select(x => (x.Key, x.Value.Select(x => x.Key).ToList())).ToList();
+        zhvolume = zhvolume == null ? "1" : zhvolume;
+        var model = new IndexViewModel(letters, page, pages, _getAvailablePersons(lib), availablePages.OrderBy(x => x.Volume).ToList(), zhvolume, zhpage, activeSearch, searchResults);
+        if (person != null) model.ActivePerson = person;
+        return View("~/Views/HKB/Dynamic/Index.cshtml", model);
+    }
+
+    private IActionResult _error404() {
+        Response.StatusCode = 404;
+        return Redirect("/Error404");
+    }
+}

HaWeb/Controllers/SucheController.cs

@@ -61,12 +61,7 @@ public class SucheController : Controller {
         }
         return _error404();
     }
-
+    
-    [Route("/HKB/")]
-    public IActionResult RedirectIndex(string? search, int page = 0) {
-        return RedirectPermanent("/HKB/Suche");
-    }
-
     [Route("/HKB/Suche")]
     // Order of actions:
     // Filter, sort by year, paginate, sort by Meta.Sort & .Order, parse

HaWeb/Models/IndexViewModel.cs

@@ -0,0 +1,42 @@
+namespace HaWeb.Models;
+using HaDocument.Models;
+
+public class IndexViewModel {
+    public List<(int Year, List<BriefeMetaViewModel> LetterList)>? Letters { get; private set; }
+    public int Count { get; private set; }
+    public int ActiveYear { get; private set; }
+    public List<(int StartYear, int EndYear)>? AvailableYears { get; private set; }
+    public string? ActivePerson { get; set; }
+    public List<(string Key, string Name)>? AvailablePersons { get; private set; }
+    public List<(string Volume, List<string> Pages)>? AvailablePages { get; private set; }
+    public string? ActiveVolume { get; private set; }
+    public string? ActivePage { get; private set; }
+    public string? ActiveSearch { get; private set; }
+    public Dictionary<string, List<SearchResult>>? SearchResults { get; private set; }
+
+    public IndexViewModel(
+        List<(int Year, List<BriefeMetaViewModel> LetterList)>? letters,
+        int activeYear,
+        List<(int StartYear, int EndYear)>? availableYears,
+        List<(string Key, string Name)>? availablePersons,
+        List<(string Volume, List<string> Pages)>? availablePages,
+        string? activeVolume,
+        string? activePage,
+        string? activeSearch,
+        Dictionary<string, List<SearchResult>>? searchResults
+    ) {
+        Letters = letters;
+        if (letters != null)
+            Count = letters.Select(x => x.LetterList.Count).Aggregate(0, (x, y) => { x += y; return x; });
+        else
+            Count = 0;
+        ActiveYear = activeYear;
+        AvailableYears = availableYears;
+        AvailablePersons = availablePersons;
+        AvailablePages = availablePages;
+        ActiveVolume = activeVolume;
+        ActivePage = activePage;
+        ActiveSearch = activeSearch;
+        SearchResults = searchResults;
+    }
+}

HaWeb/Views/HKB/Dynamic/Index.cshtml

@@ -0,0 +1,206 @@
+@model IndexViewModel;
+@{
+    ViewData["Title"] = "Briefauswahl & Suche";
+    ViewData["SEODescription"] = "Johann Georg Hamann: Kommentierte Briefausgabe, Hg. v. Leonard Keidel und Janina Reibold. Durchsuchbare Online-Ausgabe der Briefe von und an Johann Georg Hamann.";
+    ViewData["showCredits"] = "true";
+}
+
+<div class="ha-index">
+    @if (Model.Letters != null) {
+
+        <div class="ha-indexhead">
+            <h1>Briefauswahl</h1>
+            <div class="ha-indexnav">
+            @if (Model.AvailableYears != null && Model.AvailableYears.Any() && Model.AvailableYears.Count > 1) {
+                @for(var i = 0; i < Model.AvailableYears.Count; i++) {
+                    <a class="@(Model.ActiveYear == i ? "active" : "")" asp-route-person="@Model.ActivePerson" asp-route-search="@Model.ActiveSearch" asp-controller="Index" asp-route-page="@i">
+                        @if (Model.AvailableYears[i].StartYear != Model.AvailableYears[i].EndYear) {
+                            <span>
+                                @Model.AvailableYears[i].StartYear-@Model.AvailableYears[i].EndYear
+                            </span>
+                        }
+                        else {
+                            <span>
+                                @Model.AvailableYears[i].StartYear
+                            </span>
+                        }
+                    </a>
+                }
+            }
+            </div>
+        </div>
+
+        <div class="ha-indexbody">
+            <div class="ha-letterlist">
+            @* Letter Loop *@
+            @foreach (var year in Model.Letters) {
+                foreach (var letter in year.LetterList) {
+                    <div class="ha-letterlistentry">
+                        <a asp-controller="Briefe" asp-action="Index" asp-route-id="@letter.Meta.Autopsic">
+                            @await Html.PartialAsync("/Views/Shared/_LetterHead.cshtml", (letter, true, false))
+                            @*
+                            <div class="ha-letterlistentryheader">
+                                <div class="ha-letterlistautopsic">@letter.Meta.Autopsic</div> 
+                                <div class="ha-letterlistpills">@await Html.PartialAsync("/Views/Shared/_Pills.cshtml", (letter, true))</div>
+                            </div>
+                            <div class="ha-letterlistletterdata">
+                                @await Html.PartialAsync("/Views/Shared/_LetterHead.cshtml", (letter, true, true))
+                            </div>
+                            *@
+                        </a>
+                    </div>
+                }
+            }
+            </div>
+
+            <div class="ha-filterlist">
+
+                @* Go To Letter *@
+                <div class="ha-gotofilter">
+                    <div class="ha-filtertitle">H&hairsp;K&hairsp;B</div>
+                    <form class="ha-gotoform" id="ha-gotoform">
+                        <div class="ha-gototext">
+                            Briefnummer
+                        </div>
+                        <input type="text" id="ha-gotoletternumber" class="ha-gotoletternumber" />
+                        <button type="submit" id="ha-gotoformsubmit">Nachschlagen</button>
+                    </form>
+                </div>
+                <script>
+                    const ACTIVATEGOTOFILTER = function(filter, button) {
+                        let f = filter.value;
+                        if (f === "") {
+                            button.disabled = true;
+                            return;
+                        }
+                        button.disabled = false;
+                    }
+
+                    const SUBMITGOTO = function(filter) {
+                        let f = filter.value;
+                        window.location.href = "/HKB/Suche/" + f;
+                    }
+
+                    window.addEventListener("load", () => {
+                        let gotofilter = document.getElementById("ha-gotoletternumber");
+                        let gotosubmitbtn = document.getElementById("ha-gotoformsubmit");
+                        let gotoform = document.getElementById("ha-gotoform");
+                        ACTIVATEGOTOFILTER(gotofilter, gotosubmitbtn);
+                        gotofilter.addEventListener("input", () => ACTIVATEGOTOFILTER(gotofilter, gotosubmitbtn));
+                        gotoform.addEventListener("submit", (ev) => { 
+                            ev.preventDefault();
+                            SUBMITGOTO(gotofilter);
+                        });
+                    });
+                </script>
+
+                @* ZH Loopkup *@
+                @if (Model.AvailablePages != null) {
+                <div class="ha-zhsearchfilter">
+                    <div class="ha-filtertitle">
+                        Suche in Z&hairsp;H
+                        @if (Model.ActivePage != null) {
+                            <a class="ha-reversefilter" asp-controller="Index" asp-action="Index">← Auswahl aufheben</a>
+                        }
+                    </div>
+                     <form class="ha-zhform" id="ha-zhform">
+                        <span>Z&hairsp;H Band</span>
+                        <select id="ha-zhformvolume">
+                            @foreach (var volume in Model.AvailablePages) {
+                                <option>@volume.Volume</option> 
+                            }
+                        </select>
+                        <span>/ </span>
+                        <input id="ha-zhformpage" type="text" value="@Model.ActivePage" placeholder="Seite"/>
+                        <button id="ha-zhformsubmit" type="submit">Nachschlagen</button>
+                     </form>
+                </div>
+                <script>
+                    const ACTIVATEZHSEARCH = function(volume, page, button) {
+                        let vol = volume.options[volume.selectedIndex].value;
+                        let pg = page.value;
+                        if (pg === "") {
+                            button.disabled = true;
+                            return;
+                        }
+                        button.disabled = false;
+                    }
+
+                    const SUBMITZHSEARCH = function(volume, page) {
+                        let vol = volume.options[volume.selectedIndex].value;
+                        let pg = page.value;
+                        window.location.href = "/HKB/" + vol + "/" + pg;
+                    }
+
+                    window.addEventListener("load", () => {
+                        let vol = document.getElementById("ha-zhformvolume");
+                        let pg = document.getElementById("ha-zhformpage");
+                        let zhsubmitbtn = document.getElementById("ha-zhformsubmit");
+                        let zhsearchform = document.getElementById("ha-zhform");
+                        ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn);
+                        vol.addEventListener("change", () => ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn));
+                        pg.addEventListener("input", () => ACTIVATEZHSEARCH(vol, pg, zhsubmitbtn));
+                        zhsearchform.addEventListener("submit", (ev) => { 
+                            ev.preventDefault();
+                            SUBMITZHSEARCH(vol, pg);
+                        });
+                    });
+                </script>
+                }
+    
+                 @* Full-Text-Search *@
+                 <div class="ha-searchfilter">
+                    <div class="ha-filtertitle">
+                        Volltextsuche
+                        @if (Model.ActiveSearch != null) {
+                            <a class="ha-reversefilter" asp-controller="Index" asp-action="Index">← Auswahl aufheben</a>
+                        }
+                    </div>
+                     <form class="ha-searchform" id="ha-searchform" asp-controller="Suche" asp-action="Index" method="get">
+                        <input id="ha-searchformtext" name="search" type="text" placeholder="Suchbegriff" value="@Model.ActiveSearch"/>
+                        <button id="ha-searchformsubmit" type="submit">Suchen</button>
+                     </form>
+                </div>
+                <script>
+                    const ACTIVATESEARCHFILTER = function(filter, button) {
+                        let f = filter.value;
+                        if (f === "") {
+                            button.disabled = true;
+                            return;
+                        }
+                        button.disabled = false;
+                    }
+
+                    window.addEventListener("load", () => {
+                        let searchfilter = document.getElementById("ha-searchformtext");
+                        let searchsubmitbtn = document.getElementById("ha-searchformsubmit");
+                        let searchform = document.getElementById("ha-searchform");
+                        ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn);
+                        searchfilter.addEventListener("input", () => ACTIVATESEARCHFILTER(searchfilter, searchsubmitbtn));
+                    });
+                </script>
+
+                @* Person Filter *@
+                @if(Model.AvailablePersons != null) {
+                <div class="ha-personfilter">
+                    <div class="ha-filtertitle">
+                        Korrespondenzpartner:innen 
+                        @if (Model.ActivePerson != null) {
+                            <a class="ha-reversefilter" asp-controller="Index" asp-action="Index">← Auswahl aufheben</a>
+                        }
+                    </div>
+                    <div class="ha-personlist">
+                        <a class="ha-personlistperson @(Model.ActivePerson == null ? "active" : "")" asp-controller="Index" asp-action="Index">Alle</a>
+                        @foreach (var person in Model.AvailablePersons) {
+                            <a class="ha-personlistperson @(Model.ActivePerson == person.Key ? "active" : "")" asp-controller="Index" asp-action="Person" asp-route-person="@person.Key" asp-route-page="@null">
+                                @person.Name
+                            </a>
+                        }
+                    </div>
+                </div>
+                }
+            </div>
+
+        </div>
+    }
+</div>

HaWeb/Views/HKB/Dynamic/Suche.cshtml

@@ -9,7 +9,7 @@
     @if (Model.Letters != null) {
 
         <div class="ha-searchhead">
-            <h1>Briefauswahl</h1>
+            <h1>Suche</h1>
             <div class="ha-searchnav">
             @if (Model.AvailableYears != null && Model.AvailableYears.Any() && Model.AvailableYears.Count > 1) {
                 @for(var i = 0; i < Model.AvailableYears.Count; i++) {

HaWeb/Views/Shared/_HKBMenu.cshtml

@@ -3,7 +3,7 @@
 }
 <header class="sticky w-100 font-serif mb-6">
     <nav class="flex flex-row w-100 bg-slate-50 border-t-[5px] border-gray-300 dark:shadow-xl dark:border-gray-900 py-3 px-3 desktop:px-8 flex-wrap">
-        <a asp-controller="Suche" asp-action="RedirectIndex" class="text-xl xl:text-3xl grow-0 shrink-0 text-black hover:text-black">
+        <a asp-controller="Index" asp-action="Index" class="text-xl xl:text-3xl grow-0 shrink-0 text-black hover:text-black">
             <img src="/favicon.ico" class="inline-block w-8 h-8 xl:w-12 xl:h-12 mr-2 border border-gray-300 shadow-sm" alt="HKB-Logo" loading="lazy" />
                 <span class="sm:hidden">Hamann: Komm. Briefausgabe</span> 
                 <span class="hidden sm:inline md:hidden">Johan Georg Hamann: Kommentierte Briefausgabe</span> 
@@ -30,7 +30,7 @@
             </button>
         </div>
         <div class="ha-topnav " id="ha-topnav">
-            <a asp-controller="Suche" asp-action="Index">
+            <a asp-controller="Index" asp-action="Index">
                 Suche & Briefauswahl
             </a>
             <a asp-controller="Briefe" asp-action="Index">

HaWeb/wwwroot/css/index.css

@@ -0,0 +1,205 @@
+@layer components {
+    /* THEME OPTIONS */
+
+    .ha-index {
+        @apply bg-slate-50 dark:bg-slate-900
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult:nth-child(even) {
+        @apply bg-slate-100 dark:bg-slate-900
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult:nth-child(odd) {
+        @apply bg-slate-50 dark:bg-slate-900
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry {
+        @apply  bg-slate-100 dark:bg-slate-900 dark:border-none border-r border-b border-gray-200 
+    }
+
+    .ha-index .ha-indexhead .ha-indexnav a.active {
+        @apply dark:!text-white hover:dark:!text-white dark:font-bold
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry:hover {
+        @apply border-gray-300
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-personfilter .ha-personlist a {
+        @apply hover:!bg-slate-200 dark:hover:!bg-slate-800
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-personfilter .ha-personlist a.active {
+        @apply dark:!text-white dark:font-bold
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-personfilter .ha-personlist a:nth-child(odd) {
+        @apply bg-slate-100 dark:bg-zinc-900
+    }
+
+    /* NON THEME RULES */
+    .ha-index .ha-indexhead {
+        @apply pt-9 md:pt-12 px-9 md:px-16 border-b-2 
+    }
+
+    .ha-index .ha-indexhead h1 {
+        @apply font-bold text-2xl desktop:font-normal desktop:text-5xl mb-6 inline-block font-serif
+    }
+
+    .ha-index .ha-indexhead .ha-indexnav {
+        @apply font-sans oldstyle-nums
+    }
+
+    .ha-index .ha-indexhead .ha-indexnav a {
+        @apply mr-3 inline-block
+    }
+
+    .ha-index .ha-indexhead .ha-indexnav a.active {
+        @apply border-b-4
+    }
+
+    .ha-index .ha-indexbody {
+        @apply pt-4 clear-both flex flex-row gap-x-4
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist {
+        @apply pb-4 basis-2/3 grow-0
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry:not(:first-child) {
+        @apply mt-4
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry {
+        @apply rounded-sm block pt-3  transition-all duration-100 
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry:hover {
+        @apply transition-all duration-100
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry .ha-letterhead {
+        @apply pb-3 px-3 pl-6
+    } 
+
+    input, select {
+        @apply dark:!bg-zinc-900 dark:border-none
+    }
+
+    button {
+        @apply dark:!bg-zinc-900 dark:!border-zinc-800
+    }
+    
+    /* Old stuff
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry .ha-letterlistentryheader {
+        @apply border-b flex flex-row py-1 px-2 bg-slate-100
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry .ha-letterlistentryheader .ha-letterlistautopsic {
+        @apply text-3xl font-bold grow
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry .ha-letterlistentryheader .ha-letterlistpills {
+        @apply grow-0 
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry .ha-letterlistletterdata {
+        @apply px-2 py-1
+    } */
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults {
+
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult {
+        @apply px-6 py-1 bg-slate-50 block
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-searchresultlocation {
+        @apply numeric-mediaeval font-semibold text-sm inline-block
+    }
+
+    .ha-index .ha-indexbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-searchresultpreview {
+        @apply inline-block pl-4
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist {
+        @apply hidden md:flex flex-col gap-y-5 pb-4 float-right max-w-lg basis-1/3 min-w-0 shrink
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-filtertitle {
+        @apply text-2xl pr-4 pl-1 mb-1 pb-1 pt-3 font-serif leading-none border-b border-gray-400
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-reversefilter {
+        @apply inline-block text-sm ml-2
+    }
+
+    /* .ha-index .ha-indexbody .ha-filterlist .ha-gotofilter {
+        @apply bg-slate-100
+    } */
+
+    /* .ha-index .ha-indexbody .ha-filterlist .ha-gotofilter .ha-filtertitle {
+        @apply inline-block border-none
+    } */
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-gotofilter form {
+        @apply font-sans py-1 pl-1 pr-2
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-gotofilter form .ha-gototext {
+        @apply inline-block font-sans mr-2
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-gotofilter form input {
+        @apply w-14 px-1 border 
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-gotofilter form button {
+        @apply float-right inline-block px-2 border bg-slate-50 disabled:bg-gray-200 border-slate-200 hover:border-black disabled:hover:border-slate-200 disabled:text-gray-600
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-zhsearchfilter .ha-zhform {
+        @apply py-1 pl-1 pr-2
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-zhsearchfilter .ha-zhform > span {
+        @apply whitespace-nowrap
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-zhsearchfilter .ha-zhform input {
+        @apply w-14 px-1 border
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-zhsearchfilter .ha-zhform button {
+        @apply float-right px-2 border bg-slate-50 border-slate-200 disabled:bg-gray-200 hover:border-black disabled:hover:border-slate-200 disabled:text-gray-600
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-zhsearchfilter .ha-zhform select {
+        @apply  px-1
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-searchfilter .ha-searchform {
+        @apply py-1 pl-1 pr-2 flex flex-row gap-x-2
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-searchfilter .ha-searchform input {
+        @apply px-1 border grow min-w-0
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-searchfilter .ha-searchform button {
+        @apply float-right px-2 border border-slate-200 hover:border-black disabled:bg-gray-200 disabled:hover:border-slate-200 disabled:text-gray-600
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-personfilter .ha-personlist {
+        @apply max-h-[23rem] overflow-y-auto overflow-x-hidden py-1 pl-1 mr-2
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-personfilter .ha-personlist a {
+        @apply block px-3 !transition-none
+    }
+
+    .ha-index .ha-indexbody .ha-filterlist .ha-personfilter .ha-personlist a:nth-child(odd) {
+        @apply block
+    }
+}

HaWeb/wwwroot/css/site.css

@@ -12,6 +12,7 @@
 @import "./letterhead.css";
 @import "./letter.css";
 @import "./upload.css";
+@import "./index.css";
 @import "./search.css";
 
 @layer components {

HaWeb/wwwroot/js/site.js

@@ -46,6 +46,27 @@ const markactive_exact = function (element) {
   }
 };
 
+// Marks links as active, single links mutch match exactly, dropdown only the beginning
+const markactive_menu = function (element) {
+  var all_links = element.getElementsByTagName("a"),
+    i = 0,
+    len = all_links.length,
+    full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
+
+  for (; i < len; i++) {
+    if (all_links[i].parentNode.classList.contains("ha-topnav-dropdown")) {
+      if (full_path.startsWith(all_links[i].href.toLowerCase())) {
+        all_links[i].className += " active";
+      }
+    } else {
+      if (full_path == all_links[i].href.toLowerCase() || full_path == all_links[i].href.toLowerCase() + "/") {
+        all_links[i].className += " active";
+      }
+    }
+  }
+};
+
+
 // Functions for collapsing marginals, and adding a button next to those
 const getLineHeight = function (element) {
   var temp = document.createElement(element.nodeName),
@@ -308,7 +329,7 @@ window.addEventListener("load", function () {
 
   // Menu / Register / Search View: Mark active link
   if (document.getElementById("ha-topnav") !== null)
-    markactive_startswith(document.getElementById("ha-topnav"));
+    markactive_menu(document.getElementById("ha-topnav"));
   if (document.getElementById("ha-register-nav") !== null)
     markactive_exact(document.getElementById("ha-register-nav"));
   if (this.document.getElementById("ha-adminuploadfields") !== null)