Implement favorites page

With fonts retrieved from Google Fonts, which is not ideal, but we can inlne those

karaokatalog/ui/static/components/pages/All.js

@@ -0,0 +1,23 @@
+import Base from "./Base.js"
+import SongList from "../pieces/SongList.js"
+import Song from "../../model/Song.js"
+import search from "../../model/search.js"
+
+export default {
+    oncreate() {
+        document.title = "Alle Songs · Karaokatalog"
+    },
+    oninit() {
+        Song.load()
+    },
+    view() {
+        const songs = search.apply(Song.all)
+        const message = !songs ? "Lade Songs..." : songs.length === 0 ? "Keine Songs gefunden." : null
+
+        return m(
+            Base,
+            message && m("p", message),
+            songs && m(SongList, { songs })
+        )
+    },
+}

karaokatalog/ui/static/components/pages/Base.js

@@ -0,0 +1,7 @@
+import Header from "../pieces/Header.js"
+
+export default {
+    view(vnode) {
+        return [m(Header), m("main", vnode.children)]
+    },
+}

karaokatalog/ui/static/components/pages/Favorites.js

@@ -0,0 +1,41 @@
+import Base from "./Base.js"
+import SongList from "../pieces/SongList.js"
+import Song from "../../model/Song.js"
+import search from "../../model/search.js"
+import ClearSearchLink from "../pieces/ClearSearchLink.js"
+
+export default {
+    oncreate() {
+        document.title = "Favoriten · Karaokatalog"
+    },
+    oninit() {
+        Song.load()
+    },
+    view() {
+        const allFavorites = Song.all?.filter(song => song.favorite)
+        const favoritesToShow = search.apply(allFavorites)
+        
+        let message = null
+        if(!allFavorites) {
+            message = "Lade Songs..."
+        } else if(allFavorites.length === 0) {
+            message = "Du hast noch keine Favoriten markiert."
+        } else if(favoritesToShow.length === 0) {
+            message = [
+                `Deine Suche ergab keine Treffer unter deinen ${allFavorites.length} Favoriten. `,
+                m(ClearSearchLink, { totalFavoriteCount: allFavorites.length}),
+            ]
+        } else if(allFavorites.length > favoritesToShow.length) {
+            message = [
+                `Deine Suche zeigt ${favoritesToShow.length} von deinen insgesamt ${allFavorites.length} Favoriten. `,
+                m(ClearSearchLink, { totalFavoriteCount: allFavorites.length}),
+            ]
+        }
+
+        return m(
+            Base,
+            message && m("p", message),
+            favoritesToShow && m(SongList, { songs: favoritesToShow }),
+        )
+    },
+}

karaokatalog/ui/static/components/pieces/Artist.js

@@ -0,0 +1,14 @@
+import Song from "./Song.js"
+
+export default {
+    view: function (vnode) {
+        const { artist, songs } = vnode.attrs
+        return m(
+            "section.artist",
+            [
+                m("h2", artist),
+                songs.map(song => m(Song, { song })),
+            ],
+        )
+    },
+}

karaokatalog/ui/static/components/pieces/Header.js

@@ -0,0 +1,8 @@
+import SearchBar from "./SearchBar.js"
+import TabBar from "./TabBar.js"
+
+export default {
+    view() {
+        return m("header", [m(SearchBar), m(TabBar)])
+    },
+}

karaokatalog/ui/static/components/pieces/Pagination.js

@@ -0,0 +1,16 @@
+import PaginationControls from "./PaginationControls.js"
+
+const ELEMENTS_PER_PAGE = 25
+
+export default {
+    view(vnode) {
+        const elements = vnode.attrs.elements.toArray()
+        const totalPages = Math.ceil(elements.length / ELEMENTS_PER_PAGE)
+
+        const startIndex = (this.currentPageIndex || 0) * ELEMENTS_PER_PAGE
+        return [
+            elements.slice(startIndex, startIndex + ELEMENTS_PER_PAGE),
+            m(PaginationControls, { currentPage: (this.currentPageIndex || 0) + 1, totalPages, onPageChange: i => this.currentPageIndex = i - 1 })
+        ]
+    }
+}

karaokatalog/ui/static/components/pieces/SearchBar.js

@@ -0,0 +1,15 @@
+import search from "../../model/search.js"
+
+export default {
+    view: function () {
+        return m("search", [
+            m("input[type=search]", {
+                value: search.query,
+                placeholder: "Songs oder Interpreten suchen...",
+                oninput: e => {
+                    search.query = e.target.value
+                },
+            }),
+        ])
+    },
+}

karaokatalog/ui/static/components/pieces/SongList.js

@@ -0,0 +1,11 @@
+import Artist from "./Artist.js"
+import Pagination from "./Pagination.js"
+
+export default {
+    view: function (vnode) {
+        const sortedSongs = vnode.attrs.songs.toSorted((a, b) => a.artist.localeCompare(b.artist) || a.title.localeCompare(b.title))
+        const songsByArtist = Map.groupBy(sortedSongs, song => song.artist)
+
+        return m(Pagination, { elements: songsByArtist.entries().map(([artist, songs]) => m(Artist, { artist, songs })) })
+    },
+}

karaokatalog/ui/static/components/pieces/TabBar.js

@@ -0,0 +1,16 @@
+import { Tab } from "./Tab.js"
+
+export default {
+    view() {
+        return m("nav", [
+            m(Tab, {
+                href: "/all",
+                label: "Alle",
+            }),
+            m(Tab, {
+                href: "/favorites",
+                label: "Favoriten",
+            }),
+        ])
+    },
+}

karaokatalog/ui/static/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="de">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Karaokatalog</title>
+        <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0"
+            rel="stylesheet"
+        />
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <main>
+            <p>Lade Karaokatalog-App...</p>
+        </main>
+
+        <script type="module" src="karaokatalog.js"></script>
+    </body>
+</html>