Mark recommended tag search artists with star badges

- Add a star badge to recommended tag results in artist cards
- Update tag search helper text to explain the recommended indicator

Author: lklynet

frontend/src/components/SearchArtistResults.jsx

@@ -7,6 +7,7 @@ import {
   Library,
   Loader2,
   MoreVertical,
+  Star,
   ThumbsDown,
   ThumbsUp,
 } from "lucide-react";
@@ -235,6 +236,8 @@ function SearchArtistResults({
     <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
       {artists.map((artist, index) => {
         const artistId = getArtistId(artist);
+        const isRecommendedTagResult =
+          type === "tag" && artist.tagResultSource === "recommended";
         const artistTypeLabel = normalizeArtistType(artist);
         const lifeSpan = formatLifeSpan(artist);
         const area = normalizeArea(artist);
@@ -290,6 +293,23 @@ function SearchArtistResults({
                 showLoading={false}
                 enableBackendFallback={false}
               />
+              {isRecommendedTagResult && (
+                <div className="pointer-events-none absolute right-2 top-2">
+                  <div
+                    className="flex h-5 w-5 items-center justify-center rounded-full"
+                    style={{
+                      backgroundColor: "rgba(20, 19, 24, 0.72)",
+                      boxShadow: "0 3px 10px rgba(0, 0, 0, 0.22)",
+                      backdropFilter: "blur(6px)",
+                    }}
+                  >
+                    <Star
+                      className="h-3 w-3"
+                      style={{ color: "#f4c430", fill: "#f4c430" }}
+                    />
+                  </div>
+                </div>
+              )}
             </div>
 
             <div className="flex min-w-0 items-start gap-2">

frontend/src/pages/SearchResultsPage.jsx

@@ -9,6 +9,7 @@ import {
   FileMusic,
   Loader,
   Music,
+  Star,
 } from "lucide-react";
 import {
   addArtistToLibrary,
@@ -859,9 +860,19 @@ function SearchResultsPage() {
           <p style={{ color: "#c1c1c3" }}>Trending artists right now</p>
         )}
         {isTagSearch && trimmedQuery && (
-          <p style={{ color: "#c1c1c3" }}>
-            {`Artists for tag "${trimmedQuery.replace(/^#/, "")}"`}
-          </p>
+          <div
+            className="flex flex-wrap items-center gap-x-3 gap-y-2"
+            style={{ color: "#c1c1c3" }}
+          >
+            <p>{`Artists for tag "${trimmedQuery.replace(/^#/, "")}"`}</p>
+            <div className="ml-auto flex items-center gap-1.5 text-sm">
+              <Star
+                className="h-3.5 w-3.5"
+                style={{ color: "#f4c430", fill: "#f4c430" }}
+              />
+              <span>= recommended</span>
+            </div>
+          </div>
         )}
         {isAlbumSearch && trimmedQuery && (
           <div className="space-y-3">