Add watching status and groups for shows and movies

src/lib/components/about/MediaCard.svelte

@@ -17,10 +17,12 @@
 			<span class="placeholder"><Icon icon={placeholderIcon} width="36" /></span>
 		{/if}
 
-		<span class="rating"><Icon icon="mdi:star" width="13" />{item.rating}/10</span>
+		{#if item.rating !== undefined}
+			<span class="rating"><Icon icon="mdi:star" width="13" />{item.rating}/10</span>
+		{/if}
 
-		{#if details?.plot}
-			<p class="plot">{details.plot}</p>
+		{#if item.status === 'watching'}
+			<span class="watching"><Icon icon="mdi:play" width="13" />watching</span>
 		{/if}
 	</div>
 
@@ -87,24 +89,18 @@
 		font-size: 0.78rem;
 	}
 
-	.plot {
+	.watching {
 		position: absolute;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		margin: 0;
-		padding: 0.6rem;
-		background: color-mix(in srgb, var(--background) 92%, transparent);
-		border-top: 1px solid var(--accent);
+		bottom: 0.4rem;
+		left: 0.4rem;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.2rem;
+		padding: 0 0.4rem;
+		background: var(--blue);
+		color: var(--background);
 		font-size: 0.75rem;
-		line-height: 1.45;
-		transform: translateY(100%);
-		transition: transform 0.25s ease;
-	}
-
-	.media-card:hover .plot,
-	.media-card:focus-visible .plot {
-		transform: translateY(0);
+		font-weight: 700;
 	}
 
 	.text {
@@ -132,8 +128,7 @@
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.poster img,
-		.plot {
+		.poster img {
 			transition: none;
 		}
 	}