feat: integrate nightly survey system into app

Amp-Thread-ID: https://ampcode.com/threads/T-019c88b1-2d4d-717f-b08c-e2f71c4d80fe

src/components/sidebar/SideToolbar.vue

@@ -48,13 +48,24 @@
       </div>
     </div>
     <HelpCenterPopups :is-small="isSmall" />
+    <Suspense v-if="NightlySurveyController">
+      <component :is="NightlySurveyController" />
+    </Suspense>
   </nav>
 </template>
 
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core'
 import { debounce } from 'es-toolkit/compat'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  computed,
+  defineAsyncComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import HelpCenterPopups from '@/components/helpcenter/HelpCenterPopups.vue'
@@ -62,7 +73,7 @@ import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
-import { isCloud } from '@/platform/distribution/types'
+import { isCloud, isDesktop, isNightly } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -78,6 +89,13 @@ import SidebarIcon from './SidebarIcon.vue'
 import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
 import SidebarTemplatesButton from './SidebarTemplatesButton.vue'
 
+const NightlySurveyController =
+  isNightly && !isCloud && !isDesktop
+    ? defineAsyncComponent(
+        () => import('@/platform/surveys/NightlySurveyController.vue')
+      )
+    : undefined
+
 const { t } = useI18n()
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()

src/platform/surveys/NightlySurveyController.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import NightlySurveyPopover from './NightlySurveyPopover.vue'
+import { getEnabledSurveys } from './surveyRegistry'
+
+const enabledSurveys = computed(() => getEnabledSurveys())
+</script>
+
+<template>
+  <template v-for="config in enabledSurveys" :key="config.featureId">
+    <NightlySurveyPopover :config="config" />
+  </template>
+</template>

src/platform/surveys/useSurveyFeatureTracking.test.ts

@@ -0,0 +1,63 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const getSurveyConfig = vi.hoisted(() =>
+  vi.fn<(featureId: string) => { enabled: boolean } | undefined>()
+)
+
+vi.mock('./surveyRegistry', () => ({
+  getSurveyConfig
+}))
+
+describe('useSurveyFeatureTracking', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    vi.resetModules()
+    getSurveyConfig.mockReset()
+  })
+
+  afterEach(() => {
+    localStorage.clear()
+  })
+
+  it('tracks usage when config is enabled', async () => {
+    getSurveyConfig.mockReturnValue({ enabled: true })
+
+    const { useSurveyFeatureTracking } =
+      await import('./useSurveyFeatureTracking')
+    const { trackFeatureUsed, useCount } =
+      useSurveyFeatureTracking('test-feature')
+
+    expect(useCount.value).toBe(0)
+
+    trackFeatureUsed()
+
+    expect(useCount.value).toBe(1)
+  })
+
+  it('does not track when config is disabled', async () => {
+    getSurveyConfig.mockReturnValue({ enabled: false })
+
+    const { useSurveyFeatureTracking } =
+      await import('./useSurveyFeatureTracking')
+    const { trackFeatureUsed, useCount } =
+      useSurveyFeatureTracking('disabled-feature')
+
+    trackFeatureUsed()
+
+    expect(useCount.value).toBe(0)
+  })
+
+  it('does not track when config does not exist', async () => {
+    getSurveyConfig.mockReturnValue(undefined)
+
+    const { useSurveyFeatureTracking } =
+      await import('./useSurveyFeatureTracking')
+    const { trackFeatureUsed, useCount } = useSurveyFeatureTracking(
+      'nonexistent-feature'
+    )
+
+    trackFeatureUsed()
+
+    expect(useCount.value).toBe(0)
+  })
+})

src/platform/surveys/useSurveyFeatureTracking.ts

@@ -0,0 +1,35 @@
+import { computed } from 'vue'
+
+import { getSurveyConfig } from './surveyRegistry'
+import { useFeatureUsageTracker } from './useFeatureUsageTracker'
+
+/**
+ * Convenience composable for tracking feature usage for surveys.
+ * Use this at the feature site to track when a feature is used.
+ *
+ * @example
+ * ```typescript
+ * const { trackFeatureUsed } = useSurveyFeatureTracking('simple-mode')
+ *
+ * function onFeatureAction() {
+ *   trackFeatureUsed()
+ * }
+ * ```
+ */
+export function useSurveyFeatureTracking(featureId: string) {
+  const config = getSurveyConfig(featureId)
+
+  if (!config?.enabled) {
+    return {
+      trackFeatureUsed: () => {},
+      useCount: computed(() => 0)
+    }
+  }
+
+  const { trackUsage, useCount } = useFeatureUsageTracker(featureId)
+
+  return {
+    trackFeatureUsed: trackUsage,
+    useCount
+  }
+}