perf(RSS): Add "new" chip for increased contrast (#2031)

src/components/RSS/Feeds/Article.vue

@@ -20,9 +20,12 @@ const rssStore = useRssStore()
   <v-list-item :class="{ 'rss-read': value.isRead }" @click="$emit('click')" @contextmenu="$emit('markAsRead')">
     <div class="d-flex">
       <div>
-        <v-list-item-title class="wrap-anywhere" style="white-space: unset">{{ value.title }}</v-list-item-title>
+        <v-list-item-title class="d-flex align-center ga-3 wrap-anywhere" style="white-space: unset">
+          <v-chip v-if="!value.isRead" color="accent" variant="outlined">{{ $t('rssArticles.feeds.item.new') }}</v-chip>
+          <div>{{ value.title }}</div>
+        </v-list-item-title>
 
-        <v-list-item-subtitle class="d-block">
+        <v-list-item-subtitle class="d-block mt-3">
           <div>{{ value.parsedDate.toLocaleString() }}</div>
           <div>{{ $t('rssArticles.feeds.item.feedName', { name: rssStore.getFeedNames(value.id).join(' | ') }) }}</div>
           <div v-if="value.author">{{ $t('rssArticles.feeds.item.author', { author: value.author }) }}</div>

src/locales/en.json

@@ -614,6 +614,7 @@
         "unread": "Show unread articles only"
       },
       "item": {
+        "new": "NEW",
         "author": "Author: {author}",
         "category": "Category: {category}",
         "feedName": "Feed name: {name}"

src/pages/RssArticles.vue

@@ -103,6 +103,8 @@ onUnmounted(() => {
 </template>
 
 <style lang="scss">
+@use "sass:color";
+
 .fab {
   position: fixed;
   right: 24px;
@@ -112,7 +114,7 @@ onUnmounted(() => {
 #rss-articles {
   .rss-read {
     &[class*='v-theme--dark-'] {
-      color: lighten(darkgrey, 5%) !important;
+      color: color.adjust(darkgrey, $lightness: 5%) !important;
     }
 
     &[class*='v-theme--light-'] {