feat(ce): Add Year in review feature (#13078)

<img width="1502" height="813" alt="Screenshot 2025-12-15 at 5 01 57 PM"
src="https://github.com/user-attachments/assets/ea721f00-403c-4adc-8410-5c0fa4ee4122"
/>

app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue

@@ -1,11 +1,14 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
 import Auth from 'dashboard/api/auth';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import Avatar from 'next/avatar/Avatar.vue';
 import SidebarProfileMenuStatus from './SidebarProfileMenuStatus.vue';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import YearInReviewModal from 'dashboard/components-next/year-in-review/YearInReviewModal.vue';
 
 import {
   DropdownContainer,
@@ -22,6 +25,8 @@ defineOptions({
 });
 
 const { t } = useI18n();
+const route = useRoute();
+const { uiSettings } = useUISettings();
 
 const currentUser = useMapGetter('getCurrentUser');
 const currentUserAvailability = useMapGetter('getCurrentUserAvailability');
@@ -31,6 +36,29 @@ const isFeatureEnabledonAccount = useMapGetter(
   'accounts/isFeatureEnabledonAccount'
 );
 
+const showYearInReviewModal = ref(false);
+
+const bannerClosedKey = computed(() => {
+  return `yir_closed_${accountId.value}_2025`;
+});
+
+const isBannerClosed = computed(() => {
+  return uiSettings.value?.[bannerClosedKey.value] === true;
+});
+
+const showYearInReviewMenuItem = computed(() => {
+  return route.query['year-in-review'] === 'true' && isBannerClosed.value;
+});
+
+const openYearInReviewModal = () => {
+  showYearInReviewModal.value = true;
+  emit('close');
+};
+
+const closeYearInReviewModal = () => {
+  showYearInReviewModal.value = false;
+};
+
 const showChatSupport = computed(() => {
   return (
     isFeatureEnabledonAccount.value(
@@ -42,6 +70,13 @@ const showChatSupport = computed(() => {
 
 const menuItems = computed(() => {
   return [
+    {
+      show: showYearInReviewMenuItem.value,
+      showOnCustomBrandedInstance: false,
+      label: t('SIDEBAR_ITEMS.YEAR_IN_REVIEW'),
+      icon: 'i-lucide-gift',
+      click: openYearInReviewModal,
+    },
     {
       show: showChatSupport.value,
       showOnCustomBrandedInstance: false,
@@ -157,4 +192,9 @@ const allowedMenuItems = computed(() => {
       </template>
     </DropdownBody>
   </DropdownContainer>
+
+  <YearInReviewModal
+    :show="showYearInReviewModal"
+    @close="closeYearInReviewModal"
+  />
 </template>