more changes

src/routes/streams/Sidebar.svelte

@@ -1,30 +1,17 @@
 <script>
 	import { goto } from '$app/navigation';
+	import { favoritedStreams } from '$lib/stores.js';
+	import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
 	import TagSelect from './TagSelect.svelte';
 
 	export let streams;
 	let filteredTags = [];
 	let listOpen;
+	let favoritesOnly = false;
 
 	$: displayedStreams = streamsToDisplay(filteredTags);
 	$: remainingTags = getRemainingTags(displayedStreams);
 
-	function formatSecondsToHms(s) {
-		s = Number(s);
-		var h = Math.floor(s / 3600);
-		var m = Math.ceil((s % 3600) / 60);
-
-		var hDisplay = h > 0 ? h + (h == 1 ? ' hr' : ' hrs') + (m > 0 ? ', ' : '') : '';
-		var mDisplay = m > 0 ? m + (m == 1 ? ' min' : ' mins') : '';
-		return hDisplay + mDisplay;
-	}
-
-	function formatDate(unix_timestamp) {
-		const date = new Date(unix_timestamp);
-		const formattedDate = date.toISOString().split('T')[0];
-		return formattedDate;
-	}
-
 	function streamsToDisplay(filteredTags) {
 		const displayedStreams = streams.filter(
 			(stream) =>
@@ -52,40 +39,62 @@
 	function getDisplayedTagsInList(streamTags, remainingTags) {
 		return streamTags.filter((tag) => remainingTags.includes(tag));
 	}
+
+	function updateFavorites(stream) {
+		$favoritedStreams.has(stream['id'])
+			? $favoritedStreams.delete(stream['id'])
+			: $favoritedStreams.add(stream['id']);
+		$favoritedStreams = $favoritedStreams; // for reactivity
+	}
 </script>
 
-<h1>streams</h1>
-
-<div id="tagSelect">
+<div id="tag-select">
 	<TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
+	<button
+		on:click={() => (favoritesOnly = !favoritesOnly)}
+		class="material-icons {favoritesOnly ? '' : 'un'}select-faves-star">star</button
+	>
 </div>
 
-<div>
-	<ul class="stream-list">
-		{#each streams as stream}
-			<li
-				hidden={!displayedStreams.includes(stream)}
-				class="stream-item"
-				id="stream-{stream['id']}"
-			>
-				<button
-					class="stream-item-button"
-					on:click={() => goto('/streams/' + stream['id'])}
+<ul class="stream-list">
+	{#each streams as stream}
+		{@const favorited = $favoritedStreams.has(stream['id'])}
+		<li
+			hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
+			class="stream-item"
+			id="stream-{stream['id']}"
+		>
+			<button class="stream-item-button" on:click={() => goto('/streams/' + stream['id'])}>
+				<span class="stream-item-id">
+					ID:
+					{shorthandCode(stream['id'])}</span
 				>
-					<span class="stream-item-title">{stream['title']}</span>
-					<span class="stream-item-date">{formatDate(stream['stream_date'])}</span>
-					<span class="stream-item-length"
-						>{formatSecondsToHms(stream['length_seconds'])}</span
-					>
-					<span class="stream-item-data">title: {stream['title']}</span>
-					<span class="stream-item-data"
-						>{getDisplayedTagsInList(stream['tags'], remainingTags)}</span
-					>
-				</button>
-			</li>
-		{/each}
-	</ul>
-</div>
+
+				<span class="stream-item-date">{formatDate(stream['stream_date'])}</span>
+
+				<span class="stream-item-length"
+					>{formatSecondsToHms(stream['length_seconds'])}</span
+				>
+
+				<p class="stream-item-tags" hidden={!remainingTags.length}>
+					Tags: <span hidden={!filteredTags.length}>[...] </span>{getDisplayedTagsInList(
+						stream['tags'],
+						remainingTags
+					).join(', ')}
+				</p>
+			</button>
+
+			<button
+				on:click={(e) => {
+					e.stopPropagation();
+					updateFavorites(stream);
+				}}
+				class="material-icons stream-item-star {favorited ? 'stream-item-star-faved' : ''}"
+				>{favorited ? 'star' : 'star_border'}</button
+			>
+		</li>
+	{/each}
+</ul>
 
 <style>
 	.stream-list {
@@ -95,20 +104,82 @@
 		border: 1px solid black;
 	}
 
+	.stream-item-tags {
+		margin: 0;
+		font-family: Tahoma;
+		font-size: smaller;
+	}
+
+	.stream-item-id {
+		float: left;
+		font-family: monospace;
+		text-decoration: underline;
+	}
+
+	.stream-item-date {
+		float: right;
+		font-weight: bold;
+	}
+
 	.stream-item {
 		width: 100%;
 		overflow-wrap: anywhere;
 		border-bottom: 1px solid black;
+		position: relative;
 	}
 
 	.stream-item-button {
 		border-radius: 0;
 		min-width: 100%;
 		border: none;
+		padding: 5px;
 	}
 
-	#tagSelect {
+	#tag-select {
 		text-align: left;
 		color: black;
+		display: flex;
+	}
+
+	.material-icons {
+		margin-bottom: 0px;
+		color: black;
+		background-color: rgba(0, 0, 0, 0);
+		cursor: pointer;
+		transition: 0.3s;
+		border: none;
+	}
+
+	.select-faves-star {
+		color: rgba(255, 219, 88, 1);
+		font-size: 24px;
+	}
+
+	.unselect-faves-star {
+		color: #bbbbbb;
+		font-size: 24px;
+	}
+
+	.stream-item-star {
+		font-size: 18px;
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		opacity: 0;
+	}
+
+	.stream-item-star-faved {
+		opacity: 0.5;
+	}
+	.stream-item:hover .stream-item-star {
+		opacity: 0.5;
+	}
+
+	.stream-item:hover .stream-item-star:hover {
+		opacity: 1;
+	}
+
+	.material-icons::-moz-focus-inner {
+		border: 0;
 	}
 </style>