feat: add URL query params support to explorer page

- Add support for 'db' and 'table' query parameters
- Automatically preselect database and table from URL
- Auto-load data when both params are provided
- Update URL when user changes selection manually
- Example: /explorer?db=facturador+supabase&table=Ingresos

nuxt4-app/app/pages/explorer.vue

@@ -170,6 +170,10 @@ definePageMeta({
   title: 'Explorador de datos'
 })
 
+// Get query params from URL
+const route = useRoute()
+const router = useRouter()
+
 // State
 const selectedDatabase = ref<any | null>(null)
 const selectedTable = ref<any | null>(null)
@@ -185,6 +189,9 @@ const tables = ref<any[]>([])
 const tableData = ref<any[]>([])
 const visibleColumns = ref<string[]>([])
 
+// Track if we should auto-load data from URL params
+const shouldAutoLoad = ref(false)
+
 // Computed
 const databaseOptions = computed(() => {
   return databases.value.map(db => db.name)
@@ -251,8 +258,21 @@ async function loadDatabases() {
     const response = await $fetch('/api/metabase/databases')
     databases.value = response as any[]
 
-    // Auto-select first database
-    if (databases.value.length > 0) {
+    // Check if we have a database from URL params
+    const dbParam = route.query.db as string
+
+    if (dbParam && databases.value.length > 0) {
+      // Try to find database by name
+      const db = databases.value.find(d => d.name === dbParam)
+      if (db) {
+        selectedDatabase.value = db.name
+        shouldAutoLoad.value = true
+      } else {
+        // If not found, auto-select first database
+        selectedDatabase.value = databases.value[0].name
+      }
+    } else if (databases.value.length > 0) {
+      // Auto-select first database if no param
       selectedDatabase.value = databases.value[0].name
     }
   } catch (err: any) {
@@ -277,6 +297,27 @@ async function loadTables() {
 
     // Metabase returns tables in the 'tables' property
     tables.value = metadata.tables || []
+
+    // Check if we have a table from URL params
+    const tableParam = route.query.table as string
+
+    if (tableParam && tables.value.length > 0 && shouldAutoLoad.value) {
+      // Try to find table by name or display_name
+      const table = tables.value.find(t =>
+        (t.display_name || t.name) === tableParam ||
+        t.name === tableParam
+      )
+
+      if (table) {
+        selectedTable.value = table.display_name || table.name
+        // Load data automatically after table is selected
+        await nextTick()
+        await loadTableData()
+      }
+
+      // Reset auto-load flag
+      shouldAutoLoad.value = false
+    }
   } catch (err: any) {
     error.value = `Error al cargar tablas: ${err.message || 'Error desconocido'}`
     console.error('Error loading tables:', err)
@@ -340,8 +381,31 @@ function toggleColumn(columnKey: string) {
 }
 
 // Watchers
-watch(selectedDatabase, () => {
+watch(selectedDatabase, (newDb) => {
   loadTables()
+
+  // Update URL query params when database changes
+  if (newDb && !shouldAutoLoad.value) {
+    router.push({
+      query: {
+        ...route.query,
+        db: newDb,
+        table: undefined // Clear table when db changes
+      }
+    })
+  }
+})
+
+watch(selectedTable, (newTable) => {
+  // Update URL query params when table changes
+  if (newTable && !shouldAutoLoad.value) {
+    router.push({
+      query: {
+        ...route.query,
+        table: newTable
+      }
+    })
+  }
 })
 
 // Lifecycle