Add ai ad banner

[marcellamaki]

Summary

Adds a banner in the style of the community library "Call To Action" to advertise search recs.

References

Just discussed with Richard and Laura on slack as part of our efforts to promote the feature. no specs.

Reviewer guidance

1. should show on the channels pages (not dismissable here, although we could revisit that)
2. should show on the CurrentTopicView
3. "view recommendations" opens to the same as "import from channels" page
4. on CurrentTopicView - is dismissible. once dismissed, does not appear for other channels either
5. on CurrentTopicView - doesn't display if "view only" channel (since you cannot use the feature)

Code review -- i did not abstract this into a component although I could do so (since we technically now have 3 places of this little component). should I, or is that overkill?

AI usage

I did the initial implementation just duplicating the implementation Alex did for the banner with some manual css adjustments. I then had claude copy to the second spot and add in the local storage. reviewed and manually QA'd all during iterative work and also after.

[MisRob]

i did not abstract this into a component although I could do so (since we technically now have 3 places of this little component). should I, or is that overkill?

Whether you should or should not I won't say :) I don't think it'd be an overkill, in component frameworks it's common to have small components. Number of repetition is not the only criteria ~ also readability & being able to locate easily where to change things. Even if something is used just once ~ if it looks like a lego piece to human mind, then it'd most likely qualify ;)

[MisRob]

Actually through another PR, I recalled we already have the banner component in Studio & it follows our general banner specs that will apply here too (I confirmed with Tomiwa recently on another opportunity that these spec apply).

Would you please use StudioBanner? Putting everything together, something like would work nicely:

// AiRecommendationsBanner.vue

<StudioBanner>
  <h2>
    {{ searchRecommendationsStrings.trySearchRecommendationsHeader$() }}
  </h2>
  <p>
    {{ searchRecommendationsStrings.trySearchRecommendationsText$() }}
  </p>

  <template #icon>
       <div
          class="icon-wrapper"
          :style="{ backgroundColor: $themePalette.blue.v_200 }"
        >
        <KIcon
            icon="library"
          ...
        />
      </div>
  </template>
</StudioBanner>

<style lang="scss" scoped>

  .icon-wrapper { }

</style>

StudioBanner.vue is for the general banner things (background color $themePalette.blue.v_100, close button, padding ...). Since so far we only used StudioBanner for errors, it only has a portion of banner logic implemented ~ you're welcome to add what is needed for this use-case, including the slot for the icon override.

AiRecommendationsBanner.vue would then only have things specific to this particular banner, such as search icon style & strings.