Add planning to shows and movies in one merged grid

src/lib/components/about/MediaCard.svelte

@@ -22,7 +22,9 @@
 		{/if}
 
 		{#if item.status === 'watching'}
-			<span class="watching"><Icon icon="mdi:play" width="13" />watching</span>
+			<span class="status watching"><Icon icon="mdi:play" width="13" />watching</span>
+		{:else if item.status === 'planning'}
+			<span class="status planning"><Icon icon="mdi:bookmark-outline" width="13" />planning</span>
 		{/if}
 	</div>
 
@@ -89,7 +91,7 @@
 		font-size: 0.78rem;
 	}
 
-	.watching {
+	.status {
 		position: absolute;
 		bottom: 0.4rem;
 		left: 0.4rem;
@@ -97,12 +99,19 @@
 		align-items: center;
 		gap: 0.2rem;
 		padding: 0 0.4rem;
-		background: var(--blue);
 		color: var(--background);
 		font-size: 0.75rem;
 		font-weight: 700;
 	}
 
+	.status.watching {
+		background: var(--blue);
+	}
+
+	.status.planning {
+		background: var(--magenta);
+	}
+
 	.text {
 		display: flex;
 		flex-direction: column;