Added support for different comment displays

materialious/src/routes/channel/[slug]/+page.svelte

@@ -24,6 +24,14 @@
 		<button class="inverse-surface large">Subscribe</button>
 	</div>
 
+	<div class="tabs left-align">
+		{#each data.channel.tabs as tab}
+			<a href={`?tab=${tab}`}>
+				<span>{tab}</span>
+			</a>
+		{/each}
+	</div>
+
 	<div class="divider"></div>
 
 	<div class="grid padding">
@@ -41,4 +49,8 @@
 		padding: 1em 0;
 		justify-content: center;
 	}
+
+	.tabs {
+		text-transform: capitalize;
+	}
 </style>

materialious/src/routes/watch/[slug]/+page.svelte

@@ -101,10 +101,20 @@
 			<div class="comment">
 				<img class="circle small" src={comment.authorThumbnails[1].url} alt="comment profile" />
 				<div>
-					<p>
-						<span class="bold">{comment.author}</span>
-						<span class="secondary-text">{comment.publishedText}</span>
-					</p>
+					<div class="row">
+						<p>
+							<span class:bold={true} class:channel-owner={comment.authorIsChannelOwner}
+								>{comment.author}</span
+							>
+							<span class="secondary-text">{comment.publishedText}</span>
+						</p>
+						{#if comment.isPinned}
+							<i>push_pin</i>
+						{/if}
+						{#if comment.isEdited}
+							<i>edit</i>
+						{/if}
+					</div>
 					<p>
 						{comment.content}
 					</p>
@@ -153,6 +163,13 @@
 		padding: 1em 10em;
 	}
 
+	.channel-owner {
+		background-color: var(--primary);
+		padding: 0 0.5em;
+		border-radius: 1em;
+		color: var(--surface-variant);
+	}
+
 	@media screen and (max-width: 1646px) {
 		.grid {
 			padding: 0;