feat: update help buttons to dynamically generate documentation links

- Refactored the help buttons component to replace the static documentation link with a computed property that generates the link based on the current route.
- Added utility functions to construct the route pattern and collapse dynamic segments for improved documentation navigation.
- Enhanced user experience by ensuring the documentation link reflects the current context within the application.

Author: tacxou

apps/web/src/components/core/help-buttons.vue

@@ -4,11 +4,14 @@
     q-tooltip.text-body2(anchor="top middle" self="bottom middle") Mode sombre/clair
   q-btn.q-px-sm(flat stretch icon="mdi-frequently-asked-questions" :href="getQAndALink" target="_blank" :size="size")
     q-tooltip.text-body2 Poser une question ou signaler un problème
-  q-btn.q-px-sm(flat stretch icon="mdi-help" href="https://libertech-fr.github.io/sesame-doc/" target="_blank" :size="size")
+  q-btn.q-px-sm(flat stretch icon="mdi-help" :href="getDocumentationLink" target="_blank" :size="size")
     q-tooltip.text-body2 Aide et Documentation
 </template>
 
 <script lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
 export default defineNuxtComponent({
   name: 'HelpButtonsComponent',
   props: {
@@ -46,9 +49,62 @@ export default defineNuxtComponent({
       updateAvailable?: boolean
     }>('daemonVersion', {})
 
+    const route = useRoute()
+
+    const docsBaseUrl = 'https://libertech-fr.github.io/sesame-doc'
+
+    const getRoutePatternPath = () => {
+      const matched = route.matched ?? []
+      if (matched.length === 0) return route.path
+
+      // Vue Router stocke des segments dynamiques sous la forme `:param`.
+      // On reconstruit un chemin complet avec ces placeholders pour pointer vers la doc.
+      let pattern = ''
+      for (const record of matched) {
+        const p = record.path
+        if (!p) continue
+
+        if (p === '/') {
+          pattern = '/'
+          continue
+        }
+
+        if (p.startsWith('/')) {
+          pattern = p
+        } else {
+          pattern = `${pattern.endsWith('/') ? pattern.slice(0, -1) : pattern}/${p}`
+        }
+      }
+
+      pattern = pattern.replace(/\/+/g, '/')
+      pattern = pattern.replace(/:([A-Za-z0-9_]+)\([^/]*\)/g, ':$1')
+      return pattern === '' ? '/' : pattern.startsWith('/') ? pattern : `/${pattern}`
+    }
+
+    const collapseDynamicSegments = (path: string) => {
+      if (path === '/') return '/'
+      const segments = path.split('/').filter(Boolean)
+
+      const kept: string[] = []
+      for (const seg of segments) {
+        if (seg.startsWith(':')) break
+        kept.push(seg)
+      }
+
+      return `/${kept.join('/')}`
+    }
+
+    const getDocumentationLink = computed(() => {
+      const pattern = getRoutePatternPath()
+      const docRoute = collapseDynamicSegments(pattern)
+      const docPath = docRoute === '/' ? '/pages/index.html' : `/pages${docRoute}.html`
+      return `${docsBaseUrl}${docPath}`
+    })
+
     return {
       orchestratorVersion,
       daemonVersion,
+      getDocumentationLink,
     }
   },
   methods: {