Use a modal

components/FoldseekDialog.vue

@@ -58,13 +58,16 @@ function fullscreen() {
         </template>
         <v-card variant="flat">
             <v-toolbar flat color="transparent" density="compact">
+                <v-btn variant="text" color="primary" prepend-icon="mdi-arrow-left" @click="dialog = false">
+                    Return to structure list
+                </v-btn>
+
+                <v-divider vertical inset></v-divider>
                 <v-toolbar-title> {{ props.title }}</v-toolbar-title>
                 <v-spacer></v-spacer>
                 <v-toolbar-items>
                     <v-btn @click="fullscreen()" icon="md:fullscreen"></v-btn>
-                    <v-btn icon dark @click="dialog = false">
-                        <v-icon>mdi-close</v-icon>
-                    </v-btn>
+
                 </v-toolbar-items>
             </v-toolbar>
             <v-card-text>

components/content/StructureDb.vue

 <script setup lang="ts">
-import * as Plot from "@observablehq/plot";
-import PlotFigure from "~/components/PlotFigure";
 import type { SortItem, AutocompleteMeiliFacetProps } from "@/components/ServerDbTable.vue"
 import { useNumericalFilter } from "@/composables/useNumericalfilter"
-import type { FacetInputItem } from '@/components/AutocompleteMeiliFacets.vue'
+import { useRefinedUrl } from "@/composables/useRefinedUrl"
 import { ServerDbTable } from "#components"
 
 import { withQuery, joinURL, withTrailingSlash } from 'ufo'
@@ -125,9 +123,10 @@ const dataTableServerProps = computed(() => {
 
 
 function toFolseekUrl(item: Item) {
-    return withTrailingSlash(joinURL('/foldseek', item.System_name_ok, item.Foldseek_name.split(".html")[0],))
-
-    // return `https://defense-finder.dev.pasteur.cloud/wiki/${item.System_name_ok}/${item.Foldseek_name}`
+    const url = joinURL("/" + item.System_name_ok, item.Foldseek_name)
+    const { refinedUrl } = useRefinedUrl(url)
+    console.log(toValue(refinedUrl))
+    return toValue(refinedUrl)
 }
 
 
@@ -195,15 +194,12 @@ function pdbNameToCif(pdbPath: string) {
             </v-list>
         </template>
         <template #[`item.Foldseek_name`]="{ item }">
-            <!-- <FoldseekDialog v-if="item.Foldseek_name !== 'na'" :foldseek-path="toFolseekUrl(item)"></FoldseekDialog> -->
-            <NuxtLink v-if="item.Foldseek_name !== 'na'" :to="toFolseekUrl(item)" :external="false">
+            <FoldseekDialog v-if="item.Foldseek_name !== 'na'" :foldseek-path="toFolseekUrl(item)"></FoldseekDialog>
+            <!-- <NuxtLink v-if="item.Foldseek_name !== 'na'" :to="toFolseekUrl(item)" :external="false">
                 <v-avatar>
                     <v-img src="~/assets/foldseek.png" alt="Foldseek results"></v-img>
-                    <!-- <v-btn color="primary" dark v-bind="props">
-                <v-img src="~/assets/foldseek.png" alt="Foldseek results"></v-img>
-            </v-btn> -->
                 </v-avatar>
-            </NuxtLink>
+            </NuxtLink> -->
         </template>
         <template #[`item.proteins_in_the_prediction`]="{ item }">
             <CollapsibleChips