Chore: Simplify naming (SongItem→Song, ArtistGroup→Artist) in components and CSS (329a1872) · Commits · Jakob Moser / karaokatalog-ui

frontend/SongList.mjs

+3 −3

Changes for frontend/SongList.mjs: 3 added lines, 3 removed lines.
Original line number	Diff line number	Diff line
		// frontend/SongList.mjs
		import ArtistGroup from "./components/pieces/ArtistGroup.mjs"
		import Artist from "./components/pieces/Artist.mjs"
		import Message from "./components/pieces/Message.mjs"
		import ClearSearchLink from "./components/pieces/ClearSearchLink.mjs"
		import SongItem from "./components/pieces/SongItem.mjs"
		import Song from "./components/pieces/Song.mjs"
		import PaginationControls from "./components/pieces/PaginationControls.mjs"
		import SongListModel from "./SongListModel.mjs"

		@@ -77,7 +77,7 @@ const SongList = {
		if (hasContentOnPage) {
		elementsToRender.push(
		artistsOnPage.map(artist =>
		m(ArtistGroup, {
		m(Artist, {
		artist,
		songs: groupedSongs[artist],
		currentView,

+6 −5

Changes for frontend/components/pieces/Artist.mjs: 6 added lines, 5 removed lines.
Original line number	Diff line number	Diff line
		import SongItem from "./SongItem.mjs"
		// Artist.mjs
		import Song from "./Song.mjs"

		const ArtistGroup = {
		const Artist = {
		view: function(vnode) {
		const { artist, songs, currentView, searchTerm, currentPage, onToggleFavorite } = vnode.attrs
		return m(
		"div.artist-group",
		"div.artist",
		{
		key: `${currentView}-${searchTerm \|\| "all"}-${artist}-${currentPage}`,
		},
		[
		m("h2.artist-name", artist),
		songs.map(s =>
		m(SongItem, {
		m(Song, {
		key: s.id,
		song: s,
		onToggleFavorite,
		@@ -22,4 +23,4 @@ const ArtistGroup = {
		},
		}

		export default ArtistGroup
		No newline at end of file
		export default Artist
		No newline at end of file

+6 −7

Changes for frontend/components/pieces/Song.mjs: 6 added lines, 7 removed lines.
Original line number	Diff line number	Diff line
		// SongItem.mjs
		const SongItem = {
		// Song.mjs
		const Song = {
		view: function (vnode) {
		const { song, onToggleFavorite } = vnode.attrs
		// Immer den Basis-Icon-Namen verwenden. Die CSS-Klasse steuert das FILL.
		const heartIconName = "favorite"

		return m("div.song-item", { key: song.id }, [
		return m("div.song", { key: song.id }, [
		m("div.song-info", [
		m("div.song-title", song.title),
		m("div.song-artist", song.artist),
		@@ -14,17 +13,17 @@ const SongItem = {
		m(
		"span.material-symbols-outlined.heart-icon",
		{
		class: song.isFavorite ? "is-favorite" : "", // Diese Klasse toggelt FILL via CSS
		class: song.isFavorite ? "is-favorite" : "",
		onclick: () => onToggleFavorite(song.id),
		title: song.isFavorite
		? "Als Favorit entfernen"
		: "Als Favorit markieren",
		},
		heartIconName, // Ist jetzt immer "favorite"
		heartIconName,
		),
		]),
		])
		},
		}

		export default SongItem
		export default Song
		No newline at end of file

+4 −4

Changes for frontend/style.css: 4 added lines, 4 removed lines.
Original line number	Diff line number	Diff line
		@@ -124,7 +124,7 @@ main{
		}

		/* Restliche Styles für Artist-Group, Song-Item etc. bleiben wie zuvor */
		.artist-group {
		.artist {
		margin: 12px 8px;
		background-color: #ffffff;
		border-radius: 4px;
		@@ -142,7 +142,7 @@ main{
		border-bottom: 1px solid #c5cae9;
		}

		.song-item {
		.song {
		display: flex;
		justify-content: space-between;
		align-items: center;
		@@ -151,11 +151,11 @@ main{
		transition: background-color 0.2s ease-in-out;
		}

		.song-item:last-child {
		.song:last-child {
		border-bottom: none;
		}

		.song-item:hover {
		.song:hover {
		background-color: #f9f9f9;
		}