add the 🅴

src/renderer/style.less

@@ -3225,6 +3225,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   .title {
     width: 90%;
     text-align: center;
+    display: flex;
+    align-content: center;
+    justify-content: center;
   }
 
   .subtitle {
@@ -3295,7 +3298,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       display: flex;
       justify-content: center;
       align-items: center;
-      font-size: 0.8em;
+      font-size: 0.9em;
       font-weight: 500;
     }
 

src/renderer/views/components/mediaitem-square.ejs

@@ -26,10 +26,11 @@
                     </div>
                 </div>
             </div>
-            <div class="title item-navigate text-overflow-elipsis" v-if="item.attributes.artistNames == null" @click.self='app.routeView(item)'>
+            <div class="title" v-if="item.attributes.artistNames == null || kind!= 'card'" @click.self='app.routeView(item)'>
-                {{ item.attributes.name }}
+                <div class="item-navigate text-overflow-elipsis">{{ item.attributes.name }}</div>
+                <div v-if="item.attributes && item.attributes.contentRating == 'explicit'" style= "margin-top: -2.6px;margin-left: 3px;">🅴</div> 
             </div>       
-            <div class="subtitle item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')"
+            <div class="subtitle item-navigate text-overflow-elipsis" @click="getSubtitleNavigation()"
                  v-if="getSubtitle() != ''">
                 {{ getSubtitle() }}
             </div>
@@ -115,6 +116,29 @@
                     }
                 }
             },
+            getSubtitleNavigation() {
+                if(this.kind == 'card') {
+                    try {
+                        if (typeof this.item.attributes.artistNames != "undefined") {
+                            return app.routeView(this.item)
+                        } else if (typeof this.item.attributes.editorialNotes != "undefined") {
+                            return app.routeView(this.item)
+                        } else if (typeof this.item.attributes.artistName != "undefined") {
+                            return app.searchAndNavigate(this.item,'artist')
+                        } else {
+                            return app.routeView(this.item)
+                        }
+                    }catch(e) {
+                        return app.routeView(this.item)
+                    }
+                }else {
+                    if (typeof this.item.attributes.artistName != "undefined") {
+                        return app.searchAndNavigate(this.item,'artist')
+                    } else {
+                        return app.routeView(this.item)
+                    }
+                }
+            },
             async getBadges() {
                 let self = this
                 if (this.badges[this.item.attributes.playParams.id ?? this.item.id]) {

src/renderer/views/svg/explicit.svg

@@ -0,0 +1 @@
+<svg width="9" height="9" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg" class="glyph" aria-hidden="true"><path d="M1.59 8.991h5.82c1.043 0 1.582-.538 1.582-1.566v-5.85C8.992.547 8.453.008 7.41.008H1.59C.552.008.008.542.008 1.575v5.85c0 1.028.544 1.566 1.582 1.566zm1.812-2.273c-.332 0-.505-.211-.505-.553V2.753c0-.341.173-.553.505-.553h2.264c.245 0 .408.14.408.385 0 .235-.163.384-.408.384H3.854v1.106h1.71c.226 0 .38.125.38.355 0 .221-.154.346-.38.346h-1.71V5.95h1.812c.245 0 .408.14.408.385 0 .235-.163.384-.408.384H3.402z"></path></svg>