From 95f024275ca2ac250a4e96dd264872a2cdbd5270 Mon Sep 17 00:00:00 2001
From: Nikolai Giman <gimanhead@gmail.com>
Date: Mon, 27 Apr 2026 00:55:54 +0200
Subject: [PATCH] fix: ui issues

---
 .../features/analytics/AnalyticsChart.vue     |  3 +++
 .../analytics/AnalyticsDrillDownSlideover.vue | 21 +++++++++++++++++--
 .../analytics/AnalyticsHelpButton.vue         |  4 +++-
 web/src/locales/en.ts                         |  3 +++
 web/src/locales/ru.ts                         |  3 +++
 web/src/pages/user/analytics.vue              |  2 ++
 web/src/stores/analytics.store.ts             |  6 +++++-
 web/src/types/analytics.types.ts              |  1 +
 8 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/web/src/components/features/analytics/AnalyticsChart.vue b/web/src/components/features/analytics/AnalyticsChart.vue
index a27026e..d87dc30 100644
--- a/web/src/components/features/analytics/AnalyticsChart.vue
+++ b/web/src/components/features/analytics/AnalyticsChart.vue
@@ -120,7 +120,10 @@ onBeforeUnmount(() => {
 
 watch(() => props.section, () => {
   if (!props.section.allowedChartTypes.includes(currentChartType.value)) {
+    // Reassigning currentChartType triggers its own watcher, which calls render().
+    // Skip render here to avoid double-init race ("Canvas is already in use").
     currentChartType.value = props.section.defaultChartType ?? props.section.allowedChartTypes[0] ?? 'bar'
+    return
   }
   render()
 }, { deep: true })
diff --git a/web/src/components/features/analytics/AnalyticsDrillDownSlideover.vue b/web/src/components/features/analytics/AnalyticsDrillDownSlideover.vue
index 1ac4595..88ad715 100644
--- a/web/src/components/features/analytics/AnalyticsDrillDownSlideover.vue
+++ b/web/src/components/features/analytics/AnalyticsDrillDownSlideover.vue
@@ -3,19 +3,28 @@
     v-model:open="open"
     :title="analyticsStore.drillDown.sectionTitle ?? t('analytics.drillDown.defaultTitle')"
     :description="analyticsStore.drillDown.bucket ?? ''"
+    :fullscreen="isMobile"
   >
     <template #body>
+      <UAlert
+        v-if="drillDownErrorMessage"
+        color="error"
+        variant="soft"
+        :title="drillDownErrorMessage"
+        icon="i-lucide-alert-triangle"
+        class="mb-4"
+      />
       <div v-if="analyticsStore.drillDown.loading" class="flex items-center justify-center py-12">
         <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin text-zinc-400" />
       </div>
       <div
-        v-else-if="analyticsStore.drillDown.tasks.length === 0"
+        v-else-if="!analyticsStore.drillDown.error && analyticsStore.drillDown.tasks.length === 0"
         class="flex flex-col items-center gap-2 py-12 text-center text-sm text-zinc-500"
       >
         <UIcon name="i-lucide-check-circle-2" class="size-8 text-zinc-400" />
         <p>{{ t('analytics.drillDown.empty') }}</p>
       </div>
-      <ul v-else class="flex flex-col gap-2">
+      <ul v-else-if="analyticsStore.drillDown.tasks.length > 0" class="flex flex-col gap-2">
         <li
           v-for="task in analyticsStore.drillDown.tasks"
           :key="task.id"
@@ -60,12 +69,14 @@ import { ALL_TASKS_LIST_ID, type AnalyticsDrillDownTask } from 'taskview-api'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
+import { useTaskView } from '@/composables/useTaskView'
 import { useAnalyticsStore } from '@/stores/analytics.store'
 
 const analyticsStore = useAnalyticsStore()
 const router = useRouter()
 const route = useRoute()
 const { t } = useI18n()
+const { isMobile } = useTaskView()
 
 const open = computed({
   get: () => analyticsStore.drillDown.open,
@@ -75,6 +86,12 @@ const open = computed({
   },
 })
 
+const drillDownErrorMessage = computed(() => {
+  const e = analyticsStore.drillDown.error
+  if (!e) return null
+  return t(`analytics.errors.${e.kind}`)
+})
+
 const priorityLabel: Record<number, string> = {
   1: t('analytics.priorities.low'),
   2: t('analytics.priorities.medium'),
diff --git a/web/src/components/features/analytics/AnalyticsHelpButton.vue b/web/src/components/features/analytics/AnalyticsHelpButton.vue
index fec984c..0635d43 100644
--- a/web/src/components/features/analytics/AnalyticsHelpButton.vue
+++ b/web/src/components/features/analytics/AnalyticsHelpButton.vue
@@ -7,7 +7,7 @@
         variant="ghost"
         size="xs"
         square
-        aria-label="Help"
+        :aria-label="t('analytics.help.aria')"
         @click="isOpen = true"
       />
     </UTooltip>
@@ -31,6 +31,7 @@
 <script setup lang="ts">
 import type { AnalyticsSectionHelp, LocalizedText } from 'taskview-api'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useAnalyticsLocale } from './composables/useAnalyticsLocale'
 
 const props = defineProps<{
@@ -38,6 +39,7 @@ const props = defineProps<{
   sectionTitle: LocalizedText
 }>()
 
+const { t } = useI18n()
 const { pick } = useAnalyticsLocale()
 const isOpen = ref(false)
 </script>
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 1831a9d..5f2b017 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -456,6 +456,9 @@ export default {
       server: 'Server returned an error. Try refreshing the page.',
       unknown: 'Failed to load analytics.',
     },
+    help: {
+      aria: 'Help for this metric',
+    },
     chartTypes: {
       line: 'Line',
       bar: 'Bar',
diff --git a/web/src/locales/ru.ts b/web/src/locales/ru.ts
index 027ef91..bdfd617 100644
--- a/web/src/locales/ru.ts
+++ b/web/src/locales/ru.ts
@@ -428,6 +428,9 @@ export default {
       server: 'Сервер вернул ошибку. Попробуйте обновить страницу.',
       unknown: 'Не удалось загрузить аналитику.',
     },
+    help: {
+      aria: 'Справка по показателю',
+    },
     chartTypes: {
       line: 'Линия',
       bar: 'Столбцы',
diff --git a/web/src/pages/user/analytics.vue b/web/src/pages/user/analytics.vue
index b52a9d2..dab160c 100644
--- a/web/src/pages/user/analytics.vue
+++ b/web/src/pages/user/analytics.vue
@@ -195,6 +195,8 @@ watch(
     if (analyticsStore.scope.kind === 'project') {
       analyticsStore.scope = { kind: 'org' }
     }
+    analyticsStore.availableGoals = []
+    analyticsStore.sections = []
     analyticsStore.fetchSections()
   },
 )
diff --git a/web/src/stores/analytics.store.ts b/web/src/stores/analytics.store.ts
index a52b175..ea7882f 100644
--- a/web/src/stores/analytics.store.ts
+++ b/web/src/stores/analytics.store.ts
@@ -49,6 +49,7 @@ export const useAnalyticsStore = defineStore('analytics', {
       sectionTitle: null,
       bucket: null,
       tasks: [],
+      error: null,
     },
   }),
   getters: {
@@ -144,6 +145,7 @@ export const useAnalyticsStore = defineStore('analytics', {
       this.drillDown.sectionTitle = args.sectionTitle
       this.drillDown.bucket = args.bucket
       this.drillDown.tasks = []
+      this.drillDown.error = null
 
       const orgStore = useOrganizationStore()
       const organizationId = orgStore.currentOrg?.id
@@ -171,7 +173,8 @@ export const useAnalyticsStore = defineStore('analytics', {
         }
       } catch (e) {
         if (controller.signal.aborted || isCancelled(e)) return
-        throw e
+        const err = classifyError(e)
+        if (err) this.drillDown.error = err
       } finally {
         if (drillDownAbortController === controller) {
           drillDownAbortController = null
@@ -189,6 +192,7 @@ export const useAnalyticsStore = defineStore('analytics', {
       this.drillDown.sectionId = null
       this.drillDown.sectionTitle = null
       this.drillDown.bucket = null
+      this.drillDown.error = null
     },
   },
 })
diff --git a/web/src/types/analytics.types.ts b/web/src/types/analytics.types.ts
index e3c4250..0afc6f1 100644
--- a/web/src/types/analytics.types.ts
+++ b/web/src/types/analytics.types.ts
@@ -14,6 +14,7 @@ export type AnalyticsDrillDownState = {
   sectionTitle: string | null
   bucket: string | null
   tasks: AnalyticsDrillDownTask[]
+  error: AnalyticsError
 }
 
 export type AnalyticsErrorKind = 'forbidden' | 'network' | 'server' | 'unknown'