Add styled order message cards in chat

- Create ChatMessageContent component to detect and render order messages
- Display order details in a clean card format instead of raw JSON
- Show item count, shipping zone with truck icon, and short order ID
- Falls back to plain text for non-order messages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/modules/chat/components/ChatComponent.vue

@@ -158,7 +158,7 @@
                   : 'bg-muted'
               ]"
             >
-              <p class="text-sm">{{ message.content }}</p>
+              <ChatMessageContent :content="message.content" />
               <p class="text-xs opacity-70 mt-1">
                 {{ formatTime(message.created_at) }}
               </p>
@@ -325,7 +325,7 @@
                       : 'bg-muted'
                   ]"
                 >
-                  <p class="text-sm">{{ message.content }}</p>
+                  <ChatMessageContent :content="message.content" />
                   <p class="text-xs opacity-70 mt-1">
                     {{ formatTime(message.created_at) }}
                   </p>
@@ -376,6 +376,7 @@ import { Badge } from '@/components/ui/badge'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
 import { useChat } from '../composables/useChat'
+import ChatMessageContent from './ChatMessageContent.vue'
 
 import { useFuzzySearch } from '@/composables/useFuzzySearch'
 

src/modules/chat/components/ChatMessageContent.vue

@@ -0,0 +1,115 @@
+<template>
+  <!-- Order Message -->
+  <div v-if="parsedOrder" class="min-w-[200px]">
+    <div class="flex items-center gap-2 font-semibold text-sm mb-3">
+      <ShoppingBag class="w-4 h-4" />
+      <span>Order Placed</span>
+    </div>
+
+    <div class="text-xs space-y-2">
+      <!-- Items -->
+      <div v-if="parsedOrder.items?.length" class="space-y-1">
+        <div
+          v-for="(item, index) in parsedOrder.items"
+          :key="index"
+          class="flex items-center gap-2"
+        >
+          <span class="opacity-70">{{ item.quantity }}x</span>
+          <span>Item</span>
+        </div>
+      </div>
+
+      <!-- Divider -->
+      <div class="border-t border-current opacity-20 my-2" />
+
+      <!-- Shipping -->
+      <div v-if="shippingLabel" class="flex items-center gap-2">
+        <Truck class="w-3 h-3 opacity-70" />
+        <span>{{ shippingLabel }}</span>
+      </div>
+
+      <!-- Order Reference -->
+      <div class="opacity-60 text-[10px] font-mono mt-2">
+        #{{ shortOrderId }}
+      </div>
+    </div>
+  </div>
+
+  <!-- Regular Text Message -->
+  <p v-else class="text-sm whitespace-pre-wrap break-words">{{ content }}</p>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ShoppingBag, Truck } from 'lucide-vue-next'
+
+interface OrderItem {
+  product_id: string
+  quantity: number
+}
+
+interface OrderContact {
+  name?: string
+  email?: string
+}
+
+interface ParsedOrder {
+  type: number
+  id: string
+  items?: OrderItem[]
+  contact?: OrderContact
+  shipping_id?: string
+}
+
+const props = defineProps<{
+  content: string
+}>()
+
+// Try to parse the content as an order message
+const parsedOrder = computed<ParsedOrder | null>(() => {
+  try {
+    // Check if content looks like JSON
+    const trimmed = props.content.trim()
+    if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) {
+      return null
+    }
+
+    const parsed = JSON.parse(trimmed)
+
+    // Validate it's an order message (has type and id fields)
+    if (typeof parsed.type === 'number' && typeof parsed.id === 'string' && parsed.id.startsWith('order_')) {
+      return parsed as ParsedOrder
+    }
+
+    return null
+  } catch {
+    return null
+  }
+})
+
+// Format shipping label
+const shippingLabel = computed(() => {
+  if (!parsedOrder.value?.shipping_id) return null
+
+  const id = parsedOrder.value.shipping_id
+  // Extract zone name if it follows the pattern "zonename-hash"
+  if (id.includes('-')) {
+    const zoneName = id.split('-')[0]
+    // Capitalize first letter
+    return zoneName.charAt(0).toUpperCase() + zoneName.slice(1)
+  }
+
+  return 'Standard'
+})
+
+// Short order ID for display
+const shortOrderId = computed(() => {
+  if (!parsedOrder.value?.id) return ''
+  // Extract the unique part from "order_timestamp_randomstring"
+  const parts = parsedOrder.value.id.split('_')
+  if (parts.length >= 3) {
+    return parts[2].slice(0, 8) // Just the random part
+  }
+  return parsedOrder.value.id.slice(-8)
+})
+</script>

src/modules/market/components/MarketSettings.vue

@@ -389,14 +389,18 @@ const onSubmit = form.handleSubmit(async (values) => {
       throw new Error('No wallet admin key available')
     }
 
-    // Update the stall with new values
-    const updatedStall = await nostrmarketAPI.updateStall(adminKey, currentStall.value.id, {
+    // Build full stall object with updated values (API requires PUT with full object)
+    const stallToUpdate = {
+      ...currentStall.value,
       name: values.name,
       config: {
+        ...currentStall.value.config,
         description: values.description || '',
         image_url: values.imageUrl || undefined
       }
-    })
+    }
+
+    const updatedStall = await nostrmarketAPI.updateStall(adminKey, stallToUpdate)
 
     currentStall.value = updatedStall
     toast.success('Store settings saved successfully!')

src/modules/market/services/nostrmarketAPI.ts

@@ -331,23 +331,17 @@ export class NostrmarketAPI extends BaseService {
 
   /**
    * Update an existing stall
+   * Note: The LNbits API uses PUT and expects the full stall object
    */
   async updateStall(
     walletAdminkey: string,
-    stallId: string,
-    stallData: Partial<{
-      name: string
-      config: {
-        description?: string
-        image_url?: string
-      }
-    }>
+    stallData: Stall
   ): Promise<Stall> {
     const stall = await this.request<Stall>(
-      `/api/v1/stall/${stallId}`,
+      `/api/v1/stall/${stallData.id}`,
       walletAdminkey,
       {
-        method: 'PATCH',
+        method: 'PUT',
         body: JSON.stringify(stallData),
       }
     )

src/modules/market/views/CheckoutPage.vue

@@ -14,7 +14,7 @@
         <Button @click="$router.push('/market')" variant="outline">
           Continue Shopping
         </Button>
-        <Button @click="$router.push('/market/dashboard')" variant="default">
+        <Button @click="$router.push('/market/dashboard?tab=orders')" variant="default">
           View My Orders
         </Button>
       </div>
@@ -46,8 +46,8 @@
         <CardContent>
           <!-- Cart Items -->
           <div class="space-y-4 mb-6">
-            <div 
-              v-for="item in checkoutCart.products" 
+            <div
+              v-for="item in checkoutCart.products"
               :key="item.product.id"
               class="flex items-center justify-between p-4 border border-border rounded-lg"
             >
@@ -68,7 +68,7 @@
                     <Package class="w-8 h-8 text-muted-foreground" />
                   </div>
                 </div>
-                
+
                 <!-- Product Details -->
                 <div>
                   <h3 class="font-semibold text-foreground">{{ item.product.name }}</h3>
@@ -76,7 +76,7 @@
                   <p class="text-sm text-muted-foreground">Quantity: {{ item.quantity }}</p>
                 </div>
               </div>
-              
+
               <!-- Item Total -->
               <div class="text-right">
                 <p class="font-semibold text-foreground">
@@ -108,121 +108,76 @@
         </CardContent>
       </Card>
 
-      <!-- Shipping Information -->
-      <Card v-if="!orderConfirmed">
+      <!-- Shipping & Contact Information -->
+      <Card>
         <CardHeader>
-          <CardTitle>Shipping Information</CardTitle>
-          <CardDescription>Select your shipping zone</CardDescription>
+          <CardTitle>Shipping & Contact</CardTitle>
+          <CardDescription>Select shipping and provide your contact details</CardDescription>
         </CardHeader>
-        <CardContent>
+        <CardContent class="space-y-6">
           <!-- Shipping Zones -->
-          <div v-if="availableShippingZones.length > 0" class="space-y-3">
-            <div 
-              v-for="zone in availableShippingZones"
-              :key="zone.id"
-              @click="selectShippingZone(zone)"
-              :class="[
-                'p-4 border rounded-lg cursor-pointer transition-colors',
-                selectedShippingZone?.id === zone.id 
-                  ? 'border-primary bg-primary/10' 
-                  : 'border-border hover:border-primary/50'
-              ]"
-            >
-              <div class="flex justify-between items-center">
-                <div>
-                  <h3 class="font-medium text-foreground">{{ zone.name }}</h3>
-                  <p class="text-sm text-muted-foreground">
-                    {{ zone.countries?.join(', ') || 'Available' }}
-                    <span v-if="!zone.requiresPhysicalShipping" class="ml-2 text-blue-600">
-                      • No shipping required
-                    </span>
-                  </p>
-                  <p v-if="zone.description" class="text-xs text-muted-foreground mt-1">
-                    {{ zone.description }}
-                  </p>
-                </div>
-                <div class="text-right">
-                  <p class="font-semibold text-foreground">
-                    {{ formatPrice(zone.cost, checkoutCart.currency) }}
-                  </p>
-                  <p class="text-xs text-muted-foreground">shipping</p>
+          <div v-if="availableShippingZones.length > 0">
+            <Label class="mb-3 block">Shipping Zone</Label>
+            <div class="space-y-3">
+              <div
+                v-for="zone in availableShippingZones"
+                :key="zone.id"
+                @click="selectShippingZone(zone)"
+                :class="[
+                  'p-4 border rounded-lg cursor-pointer transition-colors',
+                  selectedShippingZone?.id === zone.id
+                    ? 'border-primary bg-primary/10'
+                    : 'border-border hover:border-primary/50'
+                ]"
+              >
+                <div class="flex justify-between items-center">
+                  <div>
+                    <h3 class="font-medium text-foreground">{{ zone.name }}</h3>
+                    <p class="text-sm text-muted-foreground">
+                      {{ zone.countries?.join(', ') || 'Available' }}
+                      <span v-if="!zone.requiresPhysicalShipping" class="ml-2 text-blue-600">
+                        • No shipping required
+                      </span>
+                    </p>
+                    <p v-if="zone.description" class="text-xs text-muted-foreground mt-1">
+                      {{ zone.description }}
+                    </p>
+                  </div>
+                  <div class="text-right">
+                    <p class="font-semibold text-foreground">
+                      {{ formatPrice(zone.cost, checkoutCart.currency) }}
+                    </p>
+                    <p class="text-xs text-muted-foreground">shipping</p>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-          
-          <div v-else class="text-center py-6">
+
+          <div v-else class="text-center py-4 bg-muted/50 rounded-lg">
             <p class="text-muted-foreground">This merchant hasn't configured shipping zones yet.</p>
             <p class="text-sm text-muted-foreground">Please contact the merchant for shipping information.</p>
           </div>
 
-          <!-- Confirm Order Button -->
-          <div class="mt-6">
-            <Button 
-              @click="confirmOrder"
-              :disabled="availableShippingZones.length > 0 && !selectedShippingZone"
-              class="w-full"
-              size="lg"
-            >
-              Confirm Order
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+          <!-- Separator -->
+          <div class="border-t border-border" />
 
-      <!-- Contact & Payment Information -->
-      <Card v-if="orderConfirmed">
-        <CardHeader>
-          <CardTitle>Contact & Payment Information</CardTitle>
-          <CardDescription>Provide your details for order processing</CardDescription>
-        </CardHeader>
-        <CardContent class="space-y-6">
-          <!-- Contact Form -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <Label for="email">Email (optional)</Label>
-              <Input 
-                id="email"
-                v-model="contactData.email"
-                type="email"
-                placeholder="your@email.com"
-              />
-              <p class="text-xs text-muted-foreground mt-1">Merchant may not use email</p>
-            </div>
-            
-            <div>
-              <Label for="npub">Alternative Npub (optional)</Label>
-              <Input 
-                id="npub"
-                v-model="contactData.npub"
-                placeholder="npub..."
-              />
-              <p class="text-xs text-muted-foreground mt-1">Different Npub for communication</p>
-            </div>
-          </div>
-
-          <div>
-            <Label for="address">
-              {{ selectedShippingZone?.requiresPhysicalShipping !== false ? 'Shipping Address' : 'Contact Address (optional)' }}
-            </Label>
-            <Textarea 
+          <!-- Shipping Address (shown when required for physical delivery) -->
+          <div v-if="requiresShippingAddress">
+            <Label for="address">Shipping Address *</Label>
+            <Textarea
               id="address"
               v-model="contactData.address"
-              :placeholder="selectedShippingZone?.requiresPhysicalShipping !== false 
-                ? 'Full shipping address...' 
-                : 'Contact address (optional)...'"
+              placeholder="Full shipping address..."
               rows="3"
             />
-            <p class="text-xs text-muted-foreground mt-1">
-              {{ selectedShippingZone?.requiresPhysicalShipping !== false 
-                ? 'Required for physical delivery' 
-                : 'Optional for digital items or pickup' }}
-            </p>
+            <p class="text-xs text-muted-foreground mt-1">Required for physical delivery</p>
           </div>
 
+          <!-- Message to Merchant (visible) -->
           <div>
             <Label for="message">Message to Merchant (optional)</Label>
-            <Textarea 
+            <Textarea
               id="message"
               v-model="contactData.message"
               placeholder="Any special instructions or notes..."
@@ -230,40 +185,72 @@
             />
           </div>
 
-          <!-- Payment Method Selection -->
-          <div>
-            <Label>Payment Method</Label>
-            <div class="flex gap-3 mt-2">
-              <div 
-                v-for="method in paymentMethods"
-                :key="method.value"
-                @click="paymentMethod = method.value"
-                :class="[
-                  'p-3 border rounded-lg cursor-pointer text-center flex-1 transition-colors',
-                  paymentMethod === method.value 
-                    ? 'border-primary bg-primary/10' 
-                    : 'border-border hover:border-primary/50'
-                ]"
-              >
-                <p class="font-medium">{{ method.label }}</p>
+          <!-- Optional Contact Info (collapsible) -->
+          <Collapsible v-model:open="showOptionalContact">
+            <CollapsibleTrigger class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer w-full">
+              <ChevronDown
+                class="w-4 h-4 transition-transform"
+                :class="{ 'rotate-180': showOptionalContact }"
+              />
+              <span>Additional contact info (optional)</span>
+            </CollapsibleTrigger>
+            <CollapsibleContent class="pt-4 space-y-4">
+              <!-- Contact Address (optional for digital/pickup) -->
+              <div v-if="!requiresShippingAddress">
+                <Label for="address">Contact Address</Label>
+                <Textarea
+                  id="address"
+                  v-model="contactData.address"
+                  placeholder="Contact address (optional)..."
+                  rows="3"
+                />
+                <p class="text-xs text-muted-foreground mt-1">Optional for digital items or pickup</p>
               </div>
-            </div>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <Label for="email">Email</Label>
+                  <Input
+                    id="email"
+                    v-model="contactData.email"
+                    type="email"
+                    placeholder="your@email.com"
+                  />
+                  <p class="text-xs text-muted-foreground mt-1">Merchant may not use email</p>
+                </div>
+
+                <div>
+                  <Label for="npub">Alternative Npub</Label>
+                  <Input
+                    id="npub"
+                    v-model="contactData.npub"
+                    placeholder="npub..."
+                  />
+                  <p class="text-xs text-muted-foreground mt-1">Different Npub for communication</p>
+                </div>
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+
+          <!-- Payment Method (Lightning only for now) -->
+          <div class="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>⚡</span>
+            <span>Payment via Lightning Network</span>
           </div>
 
           <!-- Place Order Button -->
           <div class="pt-4 border-t border-border">
-            <Button 
+            <Button
               @click="placeOrder"
-              :disabled="isPlacingOrder || (selectedShippingZone?.requiresPhysicalShipping !== false && !contactData.address)"
+              :disabled="isPlacingOrder || !canPlaceOrder"
               class="w-full"
               size="lg"
             >
               <span v-if="isPlacingOrder" class="animate-spin mr-2">⚡</span>
               Place Order - {{ formatPrice(orderTotal, checkoutCart.currency) }}
             </Button>
-            <p v-if="selectedShippingZone?.requiresPhysicalShipping !== false && !contactData.address" 
-               class="text-xs text-destructive mt-2 text-center">
-              Shipping address is required for physical delivery
+            <p v-if="!canPlaceOrder" class="text-xs text-destructive mt-2 text-center">
+              {{ orderValidationMessage }}
             </p>
           </div>
         </CardContent>
@@ -279,12 +266,12 @@ import { useRoute } from 'vue-router'
 import { useMarketStore } from '@/modules/market/stores/market'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import { auth } from '@/composables/useAuthService'
-import { 
-  Card, 
-  CardHeader, 
-  CardTitle, 
-  CardDescription, 
-  CardContent 
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent
 } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -293,8 +280,14 @@ import { Label } from '@/components/ui/label'
 import ProgressiveImage from '@/components/ui/image/ProgressiveImage.vue'
 import {
   Package,
-  CheckCircle
+  CheckCircle,
+  ChevronDown
 } from 'lucide-vue-next'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@/components/ui/collapsible'
 
 const route = useRoute()
 const marketStore = useMarketStore()
@@ -303,11 +296,10 @@ const authService = injectService(SERVICE_TOKENS.AUTH_SERVICE) as any
 // State
 const isLoading = ref(true)
 const error = ref<string | null>(null)
-const orderConfirmed = ref(false)
 const orderPlaced = ref(false)
 const isPlacingOrder = ref(false)
 const selectedShippingZone = ref<any>(null)
-const paymentMethod = ref('ln')
+const showOptionalContact = ref(false)
 
 // Form data
 const contactData = ref({
@@ -317,12 +309,7 @@ const contactData = ref({
   message: ''
 })
 
-// Payment methods
-const paymentMethods = [
-  { label: 'Lightning Network', value: 'ln' },
-  { label: 'BTC Onchain', value: 'btc' },
-  { label: 'Cashu', value: 'cashu' }
-]
+// TODO: Add BTC Onchain and Cashu payment options in the future
 
 // Computed
 const stallId = computed(() => route.params.stallId as string)
@@ -341,7 +328,7 @@ const currentStall = computed(() => {
 
 const orderSubtotal = computed(() => {
   if (!checkoutCart.value?.products) return 0
-  return checkoutCart.value.products.reduce((total, item) => 
+  return checkoutCart.value.products.reduce((total, item) =>
     total + (item.product.price * item.quantity), 0
   )
 })
@@ -355,22 +342,22 @@ const orderTotal = computed(() => {
 // Get shipping zones from the current stall
 const availableShippingZones = computed(() => {
   if (!currentStall.value) return []
-  
+
   // Use standardized shipping property from domain model
   const zones = currentStall.value.shipping || []
-  
+
   // Ensure zones have required properties and determine shipping requirements
   return zones.map(zone => {
     const zoneName = zone.name || 'Shipping Zone'
     const lowerName = zoneName.toLowerCase()
-    
+
     // Determine if this zone requires physical shipping
-    const requiresPhysicalShipping = zone.requiresPhysicalShipping !== false && 
-      !lowerName.includes('digital') && 
-      !lowerName.includes('pickup') && 
-      !lowerName.includes('download') && 
+    const requiresPhysicalShipping = zone.requiresPhysicalShipping !== false &&
+      !lowerName.includes('digital') &&
+      !lowerName.includes('pickup') &&
+      !lowerName.includes('download') &&
       zone.cost > 0 // Free usually means digital or pickup
-    
+
     return {
       id: zone.id || zoneName.toLowerCase().replace(/\s+/g, '-'),
       name: zoneName,
@@ -383,26 +370,41 @@ const availableShippingZones = computed(() => {
   })
 })
 
+// Determine if shipping address is required
+const requiresShippingAddress = computed(() => {
+  return selectedShippingZone.value?.requiresPhysicalShipping !== false
+})
+
+// Validation for placing order
+const canPlaceOrder = computed(() => {
+  // Must select shipping zone if zones are available
+  if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
+    return false
+  }
+  // Must provide address if physical shipping is required
+  if (requiresShippingAddress.value && !contactData.value.address) {
+    return false
+  }
+  return true
+})
+
+const orderValidationMessage = computed(() => {
+  if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
+    return 'Please select a shipping zone'
+  }
+  if (requiresShippingAddress.value && !contactData.value.address) {
+    return 'Shipping address is required for physical delivery'
+  }
+  return ''
+})
+
 // Methods
 const selectShippingZone = (zone: any) => {
   selectedShippingZone.value = zone
 }
 
-const confirmOrder = () => {
-  // Allow proceeding if no shipping zones are available (e.g., for digital goods)
-  if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
-    error.value = 'Please select a shipping zone'
-    return
-  }
-  orderConfirmed.value = true
-}
-
 const placeOrder = async () => {
-  // Only require shipping address if selected zone requires physical shipping
-  const requiresShippingAddress = selectedShippingZone.value?.requiresPhysicalShipping !== false
-  
-  if (requiresShippingAddress && !contactData.value.address) {
-    error.value = 'Shipping address is required for this delivery method'
+  if (!canPlaceOrder.value) {
     return
   }
 
@@ -426,14 +428,14 @@ const placeOrder = async () => {
       hasPubkey: !!authService.user.value?.pubkey,
       nostrPubkey: authService.user.value?.pubkey
     })
-    
+
     // Try to get pubkey from main auth first, fallback to auth service
     const userPubkey = auth.currentUser.value?.pubkey || authService.user.value?.pubkey
-    
+
     if (!auth.isAuthenticated.value) {
       throw new Error('You must be logged in to place an order')
     }
-    
+
     if (!userPubkey) {
       throw new Error('Nostr identity required: Please configure your Nostr public key in your profile settings to place orders.')
     }
@@ -464,7 +466,7 @@ const placeOrder = async () => {
         currency: checkoutCart.value.currency,
         requiresPhysicalShipping: false
       },
-      paymentMethod: paymentMethod.value === 'ln' ? 'lightning' as const : 'btc_onchain' as const,
+      paymentMethod: 'lightning' as const,
       subtotal: orderSubtotal.value,
       shippingCost: selectedShippingZone.value?.cost || 0,
       total: orderTotal.value,
@@ -473,13 +475,13 @@ const placeOrder = async () => {
     }
 
     console.log('Creating order:', orderData)
-    
+
     // Create and place the order via the market store
     const order = await marketStore.createAndPlaceOrder(orderData)
-    
+
     console.log('Order placed successfully:', order)
     orderPlaced.value = true
-    
+
   } catch (err) {
     console.error('Failed to place order:', err)
     error.value = err instanceof Error ? err.message : 'Failed to place order'
@@ -505,12 +507,12 @@ onMounted(() => {
   if (!cart || cart.id !== stallId.value) {
     error.value = 'No checkout data found for this stall'
   }
-  
+
   // Auto-select shipping zone if there's only one
   if (availableShippingZones.value.length === 1) {
     selectedShippingZone.value = availableShippingZones.value[0]
   }
-  
+
   isLoading.value = false
 })
-</script>
+</script>

src/modules/market/views/MarketDashboard.vue

@@ -62,6 +62,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { useMarketStore } from '@/modules/market/stores/market'
 import { Badge } from '@/components/ui/badge'
 import { 
@@ -77,10 +78,13 @@ import MerchantStore from '../components/MerchantStore.vue'
 import MarketSettings from '../components/MarketSettings.vue'
 import { auth } from '@/composables/useAuthService'
 
+const route = useRoute()
 const marketStore = useMarketStore()
 
-// Local state
-const activeTab = ref('overview')
+// Local state - check for tab query param
+const validTabs = ['overview', 'orders', 'store', 'settings']
+const initialTab = validTabs.includes(route.query.tab as string) ? route.query.tab as string : 'overview'
+const activeTab = ref(initialTab)
 
 // Computed properties for tab badges
 const orderCount = computed(() => {

src/modules/nostr-feed/components/SubmissionDetail.vue

@@ -277,7 +277,7 @@ watch(comments, (newComments) => {
 <template>
   <div class="min-h-screen bg-background">
     <!-- Header -->
-    <header class="sticky top-0 z-40 bg-background/95 backdrop-blur border-b">
+    <header class="sticky top-0 z-30 bg-background/95 backdrop-blur border-b">
       <div class="max-w-4xl mx-auto px-4 py-3">
         <div class="flex items-center gap-3">
           <Button variant="ghost" size="sm" @click="goBack" class="h-8 w-8 p-0">

src/pages/Home.vue

@@ -3,7 +3,7 @@
     <PWAInstallPrompt auto-show />
 
     <!-- Header -->
-    <div class="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
+    <div class="sticky top-0 z-30 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
       <div class="max-w-4xl mx-auto flex items-center justify-between px-4 py-2 sm:px-6">
         <h1 class="text-lg font-semibold">Feed</h1>
       </div>