Added 'new' flag.

components/scenes/tile.vue

@@ -2,7 +2,8 @@
 	<div
 		class="tile"
 		:class="{
-			unstashed: !favorited && pageStash && user && pageStash.id === user.primaryStash?.id
+			unstashed: !favorited && pageStash && user && pageStash.id === user.primaryStash?.id,
+			'is-new': scene.isNew,
 		}"
 	>
 		<div class="poster-container">
@@ -38,6 +39,12 @@
 				class="heart"
 				@click.native.stop="stash"
 			/>
+
+			<span
+				v-if="scene.isNew"
+				:title="`Newly added ${format(scene.createdAt, 'yyyy-MM-dd')}`"
+				class="new"
+			><Icon icon="star-full" /></span>
 		</div>
 
 		<div class="meta">
@@ -244,6 +251,28 @@ async function unstash() {
 	}
 }
 
+.new {
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: center;
+	position: absolute;
+	bottom: 0;
+	right: .5rem;
+	padding: .2rem .5rem .1rem .5rem;
+	border-radius: .25rem .25rem 0 0;
+	background: var(--grey-dark-40);
+	color: var(--gold);
+	font-size: .7rem;
+	font-weight: bold;
+	box-shadow: 0 0 3px var(--shadow-weak-20);
+
+	.icon {
+		width: .75rem;
+		height: .75rem;
+		fill: var(--gold);
+	}
+}
+
 .meta {
 	display: flex;
 	justify-content: space-between;
@@ -251,6 +280,7 @@ async function unstash() {
 	padding: .4rem .5rem;
 	border-radius: 0 0 .25rem .25rem;
 	margin-bottom: .5rem;
+	position: relative;
 	font-size: .8rem;
 	color: var(--text-light);
 	background: var(--shadow-strong-30);