From d4d6a655e77358c06b9451fe7f62c51772a3bdb3 Mon Sep 17 00:00:00 2001
From: yaya <zaza@zazawowow.co.uk>
Date: Fri, 9 Oct 2026 13:37:00 +0100
Subject: [PATCH] feat(ui): expand real NIP-99 router listings view

---
 neode-ui/src/components/RouterMarketplace.vue | 15 ++++++++++++---
 neode-ui/src/views/server/OpenWrtGateway.vue  |  5 +++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/neode-ui/src/components/RouterMarketplace.vue b/neode-ui/src/components/RouterMarketplace.vue
index 6ba0fe8c..6a4f7b28 100644
--- a/neode-ui/src/components/RouterMarketplace.vue
+++ b/neode-ui/src/components/RouterMarketplace.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
+const props = withDefaults(defineProps<{ expanded?: boolean }>(), { expanded: false })
+const emit = defineEmits<{ open: []; close: [] }>()
+
 interface RouterListing {
   id: string
   pubkey: string
@@ -101,8 +104,13 @@ async function search() {
   loading.value = false
   if (!listings.value.length) error.value = 'No active OpenWrt router listings answered from the configured public relays.'
 }
-function openShop() { open.value = true; if (!listings.value.length) void search() }
-function closeShop() { open.value = false; closeSockets() }
+function openShop() {
+  open.value = true
+  query.value = 'openwrt'
+  emit('open')
+  if (!listings.value.length) void search()
+}
+function closeShop() { open.value = false; closeSockets(); emit('close') }
 function formatPrice(item: RouterListing) {
   if (!item.price) return 'Price on request'
   return `${item.price.amount} ${item.price.currency.toUpperCase()}${item.price.frequency ? ` / ${item.price.frequency}` : ''}`
@@ -112,7 +120,7 @@ onBeforeUnmount(closeSockets)
 </script>
 
 <template>
-  <section class="router-marketplace lg:mt-0" aria-labelledby="router-marketplace-title">
+  <section class="router-marketplace lg:mt-0" :class="{ 'router-marketplace--expanded': props.expanded }" aria-labelledby="router-marketplace-title">
     <div class="glass-card p-5 md:p-6">
       <template v-if="!open">
         <p class="text-xs uppercase tracking-[.18em] text-white/40">OpenWrt gateway</p>
@@ -162,6 +170,7 @@ onBeforeUnmount(closeSockets)
 
 <style scoped>
 .router-marketplace { margin-top: 16px; }
+.router-marketplace--expanded { grid-column: 1 / -1; margin-top: 0; }
 .router-marketplace__cta { display: inline-flex; align-items: center; gap: 10px; }
 @media (max-width: 1023px) {
   .router-marketplace__cta { width: 100%; justify-content: center; }
diff --git a/neode-ui/src/views/server/OpenWrtGateway.vue b/neode-ui/src/views/server/OpenWrtGateway.vue
index 0e06061c..a1433232 100644
--- a/neode-ui/src/views/server/OpenWrtGateway.vue
+++ b/neode-ui/src/views/server/OpenWrtGateway.vue
@@ -115,6 +115,7 @@ const host = ref('')
 const sshUser = ref('root')
 const sshPassword = ref('')
 const showConnectForm = ref(false)
+const routerShopOpen = ref(false)
 const connecting = ref(false)
 const connectedParams = ref<Record<string, string> | null>(null)
 
@@ -535,8 +536,8 @@ onMounted(() => {
 
     <div class="glass-card p-6 mb-6 overflow-hidden router-model-card">
       <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(280px,360px)] gap-6 items-start">
-        <DeviceModel model="beryl-ax" label="Beryl AX (GL-MT3000) OpenWrt router" fill-viewport :controls="false" />
-        <RouterMarketplace />
+        <DeviceModel v-if="!routerShopOpen" model="beryl-ax" label="Beryl AX (GL-MT3000) OpenWrt router" fill-viewport :controls="false" />
+        <RouterMarketplace :expanded="routerShopOpen" @open="routerShopOpen = true" @close="routerShopOpen = false" />
       </div>
     </div>