feat(activity): update summary cards to toggles and introduce export menu

web/src/views/ActivityView.vue

@@ -8,15 +8,18 @@ import ActivityCardList from '@/components/ActivityCardList.vue'
 import ActivityChips from '@/components/ActivityChips.vue'
 import ActivityDetailsPanel from '@/components/ActivityDetailsPanel.vue'
 import ActivityEmptyPanel from '@/components/ActivityEmptyPanel.vue'
+import ActivityExportDialog from '@/components/ActivityExportDialog.vue'
+import ActivityExportMenu from '@/components/ActivityExportMenu.vue'
 import ActivityFilterBar from '@/components/ActivityFilterBar.vue'
 import ActivityFiltersSheet from '@/components/ActivityFiltersSheet.vue'
 import ActivityPager from '@/components/ActivityPager.vue'
 import ActivitySummaryStrip from '@/components/ActivitySummaryStrip.vue'
 import ActivityTable from '@/components/ActivityTable.vue'
 import DashboardShell from '@/components/DashboardShell.vue'
+import { useActivityExport } from '@/composables/useActivityExport'
 import { useActivityPage } from '@/composables/useActivityPage'
 import { useSessionStore } from '@/stores/session'
-import { defaultFilters, type ActivityFilters } from '@/lib/activity'
+import type { ActivityFilters } from '@/lib/activity'
 import type { StripKey } from '@/lib/activitySummary'
 
 const DESKTOP_QUERY = '(min-width: 48rem)'
@@ -38,7 +41,6 @@ const {
 	chips,
 	isFullView,
 	isEmpty,
-	exporting,
 	exportDisabled,
 	showListSkeleton,
 	showSummarySkeleton,
@@ -49,6 +51,7 @@ const {
 	canNext,
 } = activity
 
+const exportFlow = useActivityExport(filters)
 const sheetOpen = ref(false)
 let started = false
 let opener: HTMLElement | null = null
@@ -95,9 +98,9 @@ function onFilters(next: ActivityFilters) {
 }
 
 function onStripCard(key: StripKey) {
-	if (key === 'total') activity.applyFilters(defaultFilters(), true)
-	else if (key === 'failed') activity.applyFilters({ ...filters.value, outcome: 'failed' })
-	else if (key === 'security') activity.applyFilters({ ...filters.value, security: true })
+	if (key === 'total') activity.clearAll()
+	else if (key === 'failed') activity.toggleFailed()
+	else if (key === 'security') activity.toggleSecurity()
 }
 
 function onOpen(item: { id: number }, element: HTMLElement) {
@@ -135,17 +138,16 @@ function goHome() {
 					<h1 class="text-xl font-semibold text-highlighted">{{ title }}</h1>
 					<p class="text-muted">{{ subtitle }}</p>
 				</div>
-				<UButton
+				<ActivityExportMenu
 					v-if="isFullView && !forbidden"
-					color="neutral"
-					variant="outline"
-					icon="i-lucide-download"
-					:disabled="exportDisabled"
-					class="h-11 border border-accented bg-default px-3 text-sm text-highlighted ring-0 md:h-8"
-					@click="activity.runExport"
-				>
-					{{ exporting ? t('Preparing file…') : t('Export CSV') }}
-				</UButton>
+					:total="total"
+					:is-desktop="isDesktop"
+					:disabled="exportDisabled || exportFlow.currentBusy.value"
+					:nothing-to-export="isEmpty"
+					:forbidden="exportFlow.forbidden.value"
+					@current="exportFlow.exportCurrentView"
+					@all="exportFlow.openDialog"
+				/>
 			</div>
 
 			<ActivityEmptyPanel
@@ -268,6 +270,19 @@ function goHome() {
 			</template>
 		</div>
 
+		<ActivityExportDialog
+			v-if="isFullView && !forbidden"
+			v-model:open="exportFlow.dialogOpen.value"
+			v-model:range="exportFlow.range.value"
+			v-model:from="exportFlow.from.value"
+			v-model:to="exportFlow.to.value"
+			:stage="exportFlow.stage.value"
+			:can-submit="exportFlow.canSubmit.value"
+			:file-name="exportFlow.startedFileName.value"
+			@submit="exportFlow.submit"
+			@close="exportFlow.closeDialog"
+		/>
+
 		<ActivityDetailsPanel
 			:item="selectedItem"
 			:position="position"