feat: star ratings

off by default

for consistency, also adds "show favorites" setting

src/css/components.css

···
 /* queue - cover art column */
 #queue #queue-table th:nth-child(1),
 #queue #queue-table td:nth-child(1) {
-	width: calc(var(--art-song) * 2);
+	width: calc(var(--art-song) * 1.5);
 }
 
 /* queue - duration column */
···
 }
 
 #queue #queue-table td:nth-child(6) button {
-	margin-inline-end: 0.5rem;
-}
-
-#queue #queue-table td:nth-child(6) button:last-child {
-	margin-inline-end: 0;
+	margin-inline-start: 0.5rem;
 }
 
 /* queue - rows */
···
 }
 
 #queue #queue-table .queue-favorite.favorited {
+	opacity: 1;
+}
+
+#queue #queue-table .queue-rating-star {
+	opacity: 0.25;
+}
+
+#queue #queue-table .queue-rating-star:hover {
+	opacity: 0.5;
+}
+
+#queue #queue-table .queue-rating-star.rated {
 	opacity: 1;
 }
 
···
 	#queue #queue-table .queue-move-up,
 	#queue #queue-table .queue-move-down {
 		display: inline-block;
+	}
+
+	/* queue - hide artist column */
+	#queue-table th:nth-child(3),
+	#queue-table td:nth-child(3) {
+		display: none;
 	}
 }

src/index.html

···
 				<div class="form-group">
 					<label>
 						<input type="checkbox" id="scrobbling-toggle" />
-						scrobbling
+						submit scrobbles
 					</label>
 				</div>
 				<div class="form-group">
 					<label>
 						<input type="checkbox" id="dynamic-favicon-toggle" />
-						dynamic favicon
+						show dynamic favicon
+					</label>
+				</div>
+				<div class="form-group">
+					<label>
+						<input type="checkbox" id="favorites-toggle" />
+						show favorites
+					</label>
+				</div>
+				<div class="form-group">
+					<label>
+						<input type="checkbox" id="ratings-toggle" />
+						show star ratings
 					</label>
 				</div>
 				<div class="form-group">

src/js/api.js

···
 		return this._validateAndRequest(id, "unstar.view", {}, "Song ID");
 	}
 
+	setRating(id, rating) {
+		if (rating < 0 || rating > 5 || !Number.isInteger(rating)) {
+			throw new Error("Rating must be 0-5");
+		}
+		return this._validateAndRequest(
+			id,
+			"setRating.view",
+			{ rating },
+			"Song ID",
+		);
+	}
+
 	getLyricsBySongId(id) {
 		return this._validateAndRequest(
 			id,

src/js/auth.js

···
 	await loadQueue().catch(() => {});
 	updateQueueDisplay();
 	await loadLibrary();
+	loadRatings();
 	await loadPlaylists();
 	await loadFavorites();
 	// restore song display on startup

src/js/constants.js

···
 	QUEUE_MOVE_UP: "queue-move-up",
 	QUEUE_PLAY_NEXT: "queue-play-next",
 	QUEUE_PLAY: "queue-play",
+	QUEUE_RATING_STAR: "queue-rating-star",
+	RATED: "rated",
 	SELECTED: "selected",
 	STRIPE: "stripe",
 	TREE_ITEM: "tree-item",

src/js/contextmenu.js

···
 			sortQueue("favorited", true);
 			updateQueue();
 		},
+		[STRINGS.CONTEXT_SORT_RATING_LOW_HIGH]: () => {
+			sortQueue("rating", true);
+			updateQueue();
+		},
+		[STRINGS.CONTEXT_SORT_RATING_HIGH_LOW]: () => {
+			sortQueue("rating", false);
+			updateQueue();
+		},
 	};
 }
 

src/js/library.js

···
 	updateQueueDisplay();
 }
 
+function loadRatings() {
+	state.ratings.clear();
+	const recordIfRated = (item) => {
+		if (item.userRating && item.userRating > 0) {
+			state.ratings.set(item.id, item.userRating);
+		}
+	};
+	const walk = (items) => {
+		if (!Array.isArray(items)) return;
+		items.forEach((item) => {
+			recordIfRated(item);
+			if (item.artist) walk(item.artist);
+			if (item.album) walk(item.album);
+			if (item.song) walk(item.song);
+		});
+	};
+	walk(state.library);
+	state.queue.forEach(recordIfRated);
+}
+
 function clearNestedList(parentLi, className) {
 	const existingUl = parentLi.querySelector(`ul.${className}`);
 	if (existingUl) existingUl.remove();

src/js/player.js

···
 	}
 };
 
+// set song rating (1-5)
+const setSongRating = async (song, rating) => {
+	if (!song || !state.api || !state.settings.enableRatings) return;
+	if (rating < 0 || rating > 5) return;
+	if (rating === 0) {
+		state.ratings.delete(song.id);
+	} else {
+		await state.api.setRating(song.id, rating);
+		state.ratings.set(song.id, rating);
+	}
+};
+
 // highlight currently playing song in queue
 function highlightCurrentTrack() {
 	clearRowClasses(ui.queueList, ["currently-playing"]);

src/js/queue.js

···
 		itemsToSort.sort((a, b) => {
 			const getValue = (song) => {
 				if (field === "favorited") return state.favorites.has(song.id) ? 1 : 0;
+				if (field === "rating") return state.ratings.get(song.id) || 0;
 				if (field === "duration") return song.duration || 0;
 				return song[field] || "";
 			};
···
 // add songs to queue
 async function addToQueue(fetcher, songExtractor, insertNext = false) {
 	const songs = await songExtractor(await fetcher());
+	songs.forEach((song) => {
+		if (song.userRating && song.userRating > 0) {
+			state.ratings.set(song.id, song.userRating);
+		}
+	});
 	if (insertNext) {
 		const insertPos = state.queueIndex >= 0 ? state.queueIndex + 1 : 0;
 		state.queue.splice(insertPos, 0, ...songs);
···
 	durationCell.textContent = formatDuration(song.duration);
 	cells.appendChild(durationCell);
 
-	// action buttons cell
+	// action buttons cell (includes ratings if enabled)
 	const actionsCell = document.createElement("td");
 	const isFavorited = state.favorites.has(song.id);
+
+	if (state.settings.enableRatings) {
+		const currentRating = state.ratings.get(song.id) || 0;
+		for (let i = 1; i <= 5; i++) {
+			const star = createIconButton(
+				CLASSES.QUEUE_RATING_STAR,
+				`Rate ${i}`,
+				ICONS.STAR,
+			);
+			star.dataset.rating = i;
+			if (i <= currentRating) {
+				star.classList.add(CLASSES.RATED);
+			}
+			star.addEventListener("click", async (e) => {
+				e.stopPropagation();
+				const newRating = i === currentRating ? 0 : i;
+				await setSongRating(song, newRating);
+				updateQueueDisplay();
+			});
+			actionsCell.appendChild(star);
+		}
+	}
+
 	ROW_BUTTON_CONFIG.forEach(({ className, label, icon }) => {
+		if (
+			className === CLASSES.QUEUE_FAVORITE &&
+			!state.settings.enableFavorites
+		) {
+			return;
+		}
 		const btn = createIconButton(className, label, icon);
 		if (className === CLASSES.QUEUE_FAVORITE && isFavorited) {
 			btn.classList.add(CLASSES.FAVORITED);

src/js/settings.js

···
 	const dynamicFaviconToggle = document.getElementById(
 		"dynamic-favicon-toggle",
 	);
+	const favoritesToggle = document.getElementById("favorites-toggle");
+	const ratingsToggle = document.getElementById("ratings-toggle");
 
 	// load and apply settings from localStorage
 	const saved = localStorage.getItem("tinysub_settings");
···
 
 	scrobbleToggle.checked = state.settings.scrobbling;
 	dynamicFaviconToggle.checked = state.settings.dynamicFavicon;
+	favoritesToggle.checked = state.settings.enableFavorites;
+	ratingsToggle.checked = state.settings.enableRatings;
 
 	// initialize sliders and setup listeners
 	Object.entries(ART_SETTINGS).forEach(([name, key]) => {
···
 			// turned off resets to default favicon
 			updateFavicon();
 		}
+	});
+
+	ratingsToggle.addEventListener("change", () => {
+		state.settings.enableRatings = ratingsToggle.checked;
+		localStorage.setItem("tinysub_settings", JSON.stringify(state.settings));
+		updateQueueDisplay();
+	});
+
+	favoritesToggle.addEventListener("change", () => {
+		state.settings.enableFavorites = favoritesToggle.checked;
+		localStorage.setItem("tinysub_settings", JSON.stringify(state.settings));
+		updateQueueDisplay();
 	});
 
 	// logout button

src/js/state.js

···
 	queue: [],
 	queueIndex: -1,
 	favorites: new Set(),
+	ratings: new Map(),
 	loop: false,
 	expanded: {
 		artists: false,
···
 	settings: {
 		scrobbling: true,
 		dynamicFavicon: true,
+		enableFavorites: true,
+		enableRatings: false,
 		artArtist: 24,
 		artAlbum: 32,
 		artSong: 16,

src/js/strings/en.js

···
 	CONTEXT_SORT_DURATION_SHORT_LONG: "duration (short to long)",
 	CONTEXT_SORT_FAVORITED_FIRST: "favorited first",
 	CONTEXT_SORT_FAVORITED_LAST: "favorited last",
+	CONTEXT_SORT_RATING_LOW_HIGH: "rating (low to high)",
+	CONTEXT_SORT_RATING_HIGH_LOW: "rating (high to low)",
 	CONTEXT_SORT_SHUFFLE: "shuffle",
 	CONTEXT_SORT_SONG_AZ: "song (a-z)",
 	CONTEXT_SORT_SONG_ZA: "song (z-a)",